1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[29509],{2163:(e,t,a)=>{"use strict";a.d(t,{e2:()=>w,$u:()=>h,Rd:()=>f});var r=a(1873),o=a(53520),s=a(24175),n=a(13579),l=a(54434),i=a(2273),d=a(44588),c=a(9954);let p=["className","orientation"];function m(e){let{className:t,orientation:a="horizontal"}=e,s=(0,o.A)(e,p);return(0,c.Y)(d.w,(0,r.A)({"data-slot":"separator",orientation:a,className:(0,i.cn)("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",t)},s))}let u=["className","orientation"],b=["className","render"],g=["className","orientation"],x=(0,l.F)("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",{variants:{orientation:{horizontal:"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",vertical:"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"}},defaultVariants:{orientation:"horizontal"}});function w(e){let{className:t,orientation:a}=e,s=(0,o.A)(e,u);return(0,c.Y)("div",(0,r.A)({role:"group","data-slot":"button-group","data-orientation":a,className:(0,i.cn)(x({orientation:a}),t)},s))}function f(e){let{className:t,render:a}=e,r=(0,o.A)(e,b);return(0,n.C)({defaultTagName:"div",props:(0,s.v6)({className:(0,i.cn)("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",t)},r),render:a,state:{slot:"button-group-text"}})}function h(e){let{className:t,orientation:a="vertical"}=e,s=(0,o.A)(e,g);return(0,c.Y)(m,(0,r.A)({"data-slot":"button-group-separator",orientation:a,className:(0,i.cn)("relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",t)},s))}},2273:(e,t,a)=>{"use strict";a.d(t,{cn:()=>s});var r=a(92944),o=a(49804);function s(...e){return(0,o.QP)((0,r.$)(e))}},82118:(e,t,a)=>{"use strict";a.r(t),a.d(t,{__N_SSP:()=>eh,default:()=>ev});var r=a(71055),o=a(2273),s=a(4860),n=a(1873),l=a(53520),i=a(54434),d=a(9954);let c=["className","variant"],p=["className"],m=["className"],u=(0,i.F)("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-card text-card-foreground",destructive:"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"}},defaultVariants:{variant:"default"}});function b(e){let{className:t,variant:a}=e,r=(0,l.A)(e,c);return(0,d.Y)("div",(0,n.A)({"data-slot":"alert",role:"alert",className:(0,o.cn)(u({variant:a}),t)},r))}function g(e){let{className:t}=e,a=(0,l.A)(e,p);return(0,d.Y)("div",(0,n.A)({"data-slot":"alert-title",className:(0,o.cn)("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",t)},a))}function x(e){let{className:t}=e,a=(0,l.A)(e,m);return(0,d.Y)("div",(0,n.A)({"data-slot":"alert-description",className:(0,o.cn)("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",t)},a))}var w=a(2163);let f=["className"],h=["className"],v=["className"],Y=["className"],N=["className"],y=["className"],k=["className"];function T(e){let{className:t}=e,a=(0,l.A)(e,f);return(0,d.Y)("div",{"data-slot":"table-container",className:"relative w-full overflow-x-auto"},(0,d.Y)("table",(0,n.A)({"data-slot":"table",className:(0,o.cn)("w-full caption-bottom text-sm",t)},a)))}function A(e){let{className:t}=e,a=(0,l.A)(e,h);return(0,d.Y)("thead",(0,n.A)({"data-slot":"table-header",className:(0,o.cn)("[&_tr]:border-border [&_tr]:border-b",t)},a))}function D(e){let{className:t}=e,a=(0,l.A)(e,v);return(0,d.Y)("tbody",(0,n.A)({"data-slot":"table-body",className:(0,o.cn)("[&_tr:last-child]:border-0",t)},a))}function C(e){let{className:t}=e,a=(0,l.A)(e,Y);return(0,d.Y)("tr",(0,n.A)({"data-slot":"table-row",className:(0,o.cn)("border-b border-border transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",t)},a))}function B(e){let{className:t}=e,a=(0,l.A)(e,N);return(0,d.Y)("th",(0,n.A)({"data-slot":"table-head",className:(0,o.cn)("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",t)},a))}function S(e){let{className:t}=e,a=(0,l.A)(e,y);return(0,d.Y)("td",(0,n.A)({"data-slot":"table-cell",className:(0,o.cn)("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",t)},a))}function z(e){let{className:t}=e,a=(0,l.A)(e,k);return(0,d.Y)("caption",(0,n.A)({"data-slot":"table-caption",className:(0,o.cn)("mt-4 text-sm text-muted-foreground",t)},a))}var H=a(72787),_=a(12867),P=a(53381),I=a(14257),R=a(540),U=a(6295),j=a(14234),G=a(19558),L=a(83283),M=a(29239),$=a(95050);let V=["modal","showSwipeHandle","snapPoints","swipeDirection"],E=["className"],O=["className"],F=["className","children"],W=["className"],q=["className"],K=["className"],X=["className"],Q=r.createContext(null);function J(e){let{modal:t=!0,showSwipeHandle:a=!1,snapPoints:o,swipeDirection:s="down"}=e,i=(0,l.A)(e,V),c=null!=o&&o.length>0,p=r.useMemo(()=>({hasSnapPoints:c,modal:t,showSwipeHandle:a,swipeDirection:s}),[c,t,a,s]);return(0,d.Y)(Q.Provider,{value:p},(0,d.Y)(_.K,(0,n.A)({"data-slot":"drawer",modal:t,snapPoints:o,swipeDirection:s}
1,i)))}function Z(e){let t=Object.assign({},((0,H.A)(e),e));return(0,d.Y)(P.U,(0,n.A)({"data-slot":"drawer-trigger"},t))}function ee(e){let t=Object.assign({},((0,H.A)(e),e));return(0,d.Y)(I.u,(0,n.A)({"data-slot":"drawer-portal"},t))}function et(e){let t=Object.assign({},((0,H.A)(e),e));return(0,d.Y)(R.c,(0,n.A)({"data-slot":"drawer-close"},t))}function ea(e){let{className:t}=e,a=(0,l.A)(e,E);return(0,d.Y)(U.o,(0,n.A)({"data-slot":"drawer-overlay",className:(0,o.cn)("fixed inset-0 z-[var(--dim-layout-elevation-drawer)] min-h-dvh bg-[color:var(--color-palette-neutral-alpha-dark-16)] opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",t)},a))}function er(e){let{className:t}=e,a=(0,l.A)(e,O);return(0,d.Y)("div",(0,n.A)({"data-slot":"drawer-swipe-handle","aria-hidden":"true",className:(0,o.cn)("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",t)},a))}function eo(e){let{className:t,children:a}=e,s=(0,l.A)(e,F),{hasSnapPoints:i,modal:c,showSwipeHandle:p,swipeDirection:m}=function(){let e=r.useContext(Q);if(!e)throw Error("useDrawer must be used within a Drawer.");return e}();return(0,d.Y)(ee,{"data-slot":"drawer-portal"},!0===c&&(0,d.Y)(ea,{"data-snap-points":i?"":void 0}),(0,d.Y)(j.U,{"data-slot":"drawer-viewport","data-modal":c,className:"pointer-events-none fixed inset-0 z-[var(--dim-layout-elevation-drawer)] select-none data-[modal=true]:pointer-events-auto"},(0,d.Y)(G.U,(0,n.A)({"data-slot":"drawer-popup","data-swipe-axis":"down"===m||"up"===m?"y":"x","data-snap-points":i?"":void 0,className:(0,o.cn)("group/drawer-popup pointer-events-auto fixed z-[var(--dim-layout-elevation-drawer)] m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col border-border bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b","data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95","after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full","[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]","[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,
1calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]","data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]","data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)","data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row","data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]","data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]","data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]","data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",t)},s),p&&(0,d.Y)(er,null),(0,d.Y)(L.z,{"data-slot":"drawer-content",className:(0,o.cn)("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none")},a))))}function es(e){let{className:t}=e,a=(0,l.A)(e,W);return(0,d.Y)("div",(0,n.A)({"data-slot":"drawer-header",className:(0,o.cn)("flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",t)},a))}function en(e){let{className:t}=e,a=(0,l.A)(e,q);return(0,d.Y)("div",(0,n.A)({"data-slot":"drawer-footer",className:(0,o.cn)("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0",t)},a))}function el(e){let{className:t}=e,a=(0,l.A)(e,K);return(0,d.Y)(M.g,(0,n.A)({"data-slot":"drawer-title",className:(0,o.cn)("text-base font-medium text-foreground",t)},a))}function ei(e){let{className:t}=e,a=(0,l.A)(e,X);return(0,d.Y)($.I,(0,n.A)({"data-slot":"drawer-description",className:(0,o.cn)("text-sm text-balance text-muted-foreground",t)},a))}let ed={info:{container:"border-primary bg-accent",icon:"â¹ï¸",title:"New Feature Available",description:"The design system now supports Tailwind CSS utility classes alongside HDS components."},success:{container:"border-[color:var(--palette-alert-success-200)] bg-[color:var(--palette-alert-success-200)]",icon:"â ",title:"Migration Complete",description:"This component has been successfully migrated from Emotion to Tailwind + HDS."},warning:{container:"border-[color:var(--palette-alert-warning-200)] bg-[color:var(--palette-alert-warning-200)]",icon:"â ï¸",title:"Deprecation Notice",description:"The ui-kit styling approach is being replaced by Tailwind + HDS components."},danger:{container:"border-destructive bg-destructive",icon:"\uD83D\uDEA8",title:"Breaking Change",description:"This component requires the new Tailwind CSS build pipeline to render correctly."}},ec=[{label:"@theme Semantic Colors (shadcn-compatible)",tokens:[{name:"--primary",tw:"bg-primary",desc:"â palette-primary-600"},{name:"--accent",tw:"bg-accent",desc:"â palette-primary-100"},{name:"--background",tw:"bg-background",desc:"â palette-background-page"},{name:"--popover",tw:"bg-popover",desc:"â color-palette-neutral-lightest"},{name:"--muted",tw:"bg-muted",desc:"â palette-neutral-100"},{name:"--muted-foreground",tw:"bg-muted-foreground",desc:"â palette-content-subtle"},{name:"--border",tw:"bg-border",desc:"â color-palette-neutral-300"},{name:"--destructive",tw:"bg-destructive",desc:"â palette-alert-danger-200"}]},{label:"Direct Design Token References (any token loaded on the page)",tokens:[{name:"primary-100",tw:"bg-[color:var(--palette-primary-100)]",desc:"Palette token"},{name:"primary-200",tw:"bg-[color:var(--palette-primary-200)]",desc:"Palette token"},{name:"alert-success",tw:"bg-[color:var(--palette-alert-success-200)]",desc:"Alert token"},{name:"alert-warning",tw:"bg-[color:var(--palette-alert-warning-200)]",desc:"Alert token"},{name:"content-default",tw:"bg-[color:var(--palette-content-default)]",desc:"Content token"}]}],ep=[{prefix:"(default)",source:"â",min:"< 480px",rem:"< 30rem",device:"Mobile"},{prefix:"sm:",source:"breakpoints.json â xs[0]",min:"⥠480px",rem:"30rem",device:"Tablet"},{prefix:"lg:",source:"breakpoints.json â lg[0]",min:"⥠1024px",rem:"64rem",device:"Desktop"},{prefix:"xl:",source:"breakpoints.json â xxxlg[0]",min:"⥠1440px",rem:"90rem",device:"Wide Desktop"}],em=`// Mobile-first: base styles apply to all sizes, 2// then add sm:/lg:/xl: prefixes for larger viewports. 3 4// Responsive grid: 1 â 2 â 3 â 4 columns 5<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> 6 {items.map(...)} 7</div> 8 9// Responsive typography 10<h1 className="text-xl sm:text-2xl lg:text-4xl xl:text-5xl">Heading</h1> 11 12// Responsive padding & layout direction 13<div className="flex flex-col gap-2 p-4 sm:flex-row sm:gap-4 sm:p-6 lg:p-8"> 14 15// Show / hide at specific breakpoints 16<div className="block sm:hidden">Mobile only</div> 17<div className="hidden sm:block lg:hidden">Tablet only</div> 18<div className="hidden lg:block xl:hidden">Desktop only</div> 19<div className="hidden xl:block">Wide desktop only</div> 20 21// With cn() for conditional merging 22<div className={cn('p-4 sm:p-6 lg:p-8', isCompact && 'p-2 sm:p-3 lg:p-4')}>`,eu=`import Button from '@media-platforms/hearst-design-system/Button'; 23import { 24 ButtonGroup, 25 ButtonGroupSeparator, 26 ButtonGroupText, 27} from '@hdm/hds/components/ui/button-group'; 28 29<ButtonGroup>
30 <Button data-slot="button" size="sm" variant="neutral-outlined">Left</Button> 31 <Button data-slot="button" size="sm" variant="neutral-outlined">Center</Button> 32 <Button data-slot="button" size="sm" variant="neutral-outlined">Right</Button> 33</ButtonGroup> 34 35<ButtonGroup> 36 <ButtonGroupText>Label</ButtonGroupText> 37 <ButtonGroupSeparator /> 38 <Button data-slot="button" size="sm" variant="neutral-outlined">Action</Button> 39</ButtonGroup>`,eb=`// Recommended: Use @theme semantic colors for shadcn-compatible theming 40// @theme colors: bg-primary, bg-accent, bg-muted, bg-background, border-border, etc. 41// Direct tokens: bg-[color:var(--palette-alert-success-200)] for any design token on the page 42 43import { Alert, AlertTitle, AlertDescription } from '@hdm/hds/components/ui/alert'; 44 45<Alert className={cn('flex flex-col gap-3 border-2', config.container)}> 46 <AlertTitle className="flex items-center gap-2"> 47 <span className="text-xl" aria-hidden="true">{config.icon}</span> 48 {config.title} 49 </AlertTitle> 50 <AlertDescription>{config.description}</AlertDescription> 51 <div className="flex gap-2"> 52 <Button size="sm" variant="primary-solid">Learn More</Button> 53 <Button size="sm" variant="neutral-outlined">Dismiss</Button> 54 </div> 55</Alert>`,eg=`import { 56 Table, TableBody, TableCaption, TableCell, 57 TableHead, TableHeader, TableRow, 58} from '@hdm/hds/components/ui/table'; 59 60<Table> 61 <TableCaption>A list of your recent invoices.</TableCaption> 62 <TableHeader> 63 <TableRow> 64 <TableHead className="w-[100px]">Invoice</TableHead> 65 <TableHead>Status</TableHead> 66 <TableHead>Method</TableHead> 67 <TableHead className="text-right">Amount</TableHead> 68 </TableRow> 69 </TableHeader> 70 <TableBody> 71 <TableRow> 72 <TableCell className="font-medium">INV001</TableCell> 73 <TableCell>Paid</TableCell> 74 <TableCell>Credit Card</TableCell> 75 <TableCell className="text-right">$250.00</TableCell> 76 </TableRow> 77 </TableBody> 78</Table>`,ex=`import { 79 Drawer, DrawerClose, DrawerContent, DrawerDescription, 80 DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, 81} from '@hdm/hds/components/ui/drawer'; 82 83<Drawer> 84 <DrawerTrigger className="rounded-md border border-border bg-background px-3 py-2 text-sm"> 85 Open Drawer 86 </DrawerTrigger> 87 <DrawerContent> 88 <DrawerHeader> 89 <DrawerTitle>Add to Compare</DrawerTitle> 90 <DrawerDescription>Select products, then compare.</DrawerDescription> 91 </DrawerHeader> 92 <div className="flex-1 overflow-y-auto p-4">Content here</div> 93 <DrawerFooter> 94 <DrawerClose className="rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground"> 95 Compare 96 </DrawerClose> 97 </DrawerFooter> 98 </DrawerContent> 99</Drawer>`,ew="cursor-pointer rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-foreground hover:bg-muted";function ef(){let{0:e,1:t}=(0,r.useState)("info"),a=ed[e];return(0,d.Y)("div",{className:"flex flex-col gap-8"},(0,d.Y)("div",{className:"rounded-lg border border-border bg-muted p-6"},(0,d.Y)("h2",{className:"m-0 mb-4 text-lg font-semibold"},"Live Demo: Button Group (shadcn layout + HDS Button)"),(0,d.Y)("p",{className:"m-0 mb-4 text-sm text-foreground"},"ButtonGroup is a shadcn layout primitive that groups HDS ",(0,d.Y)("code",null,"Button")," children with shared borders and focus rings. Use ",(0,d.Y)("code",null,"ButtonGroupText")," and"," ",(0,d.Y)("code",null,"ButtonGroupSeparator")," for labeled or segmented controls. Pass"," ",(0,d.Y)("code",null,'data-slot="button"')," on each HDS button so grouping styles apply."),(0,d.Y)("div",{className:"mb-4 flex flex-col gap-4"},(0,d.Y)(w.e2,null,(0,d.Y)(s.$,{"data-slot":"button",size:"sm",variant:"neutral-outlined"},"Left"),(0,d.Y)(s.$,{"data-slot":"button",size:"sm",variant:"neutral-outlined"},"Center"),(0,d.Y)(s.$,{"data-slot":"button",size:"sm",variant:"neutral-outlined"},"Right")),(0,d.Y)(w.e2,null,(0,d.Y)(w.Rd,null,"Sort by"),(0,d.Y)(w.$u,null),(0,d.Y)(s.$,{"data-slot":"button",size:"sm",variant:"neutral-outlined"},"Date"),(0,d.Y)(s.$,{"data-slot":"button",size:"sm",variant:"neutral-
99outlined"},"Title"))),(0,d.Y)("details",null,(0,d.Y)("summary",{className:"cursor-pointer text-sm font-semibold text-primary"},"View Source Code"),(0,d.Y)("pre",{className:"mt-2 overflow-x-auto rounded-lg bg-secondary p-4 text-xs leading-relaxed"},(0,d.Y)("code",null,eu)))),(0,d.Y)("div",{className:"rounded-lg border border-border bg-muted p-6"},(0,d.Y)("h2",{className:"m-0 mb-4 text-lg font-semibold"},"Live Demo: Alert Banner (shadcn Alert)"),(0,d.Y)("div",{className:"mb-4 flex items-center gap-3"},(0,d.Y)("label",{htmlFor:"tw-variant-select",className:"text-sm font-semibold"},"Variant:"),(0,d.Y)("select",{id:"tw-variant-select",value:e,onChange:e=>t(e.target.value),className:"cursor-pointer rounded border border-input bg-background px-2.5 py-1.5 text-sm"},(0,d.Y)("option",{value:"info"},"Info"),(0,d.Y)("option",{value:"success"},"Success"),(0,d.Y)("option",{value:"warning"},"Warning"),(0,d.Y)("option",{value:"danger"},"Danger"))),(0,d.Y)(b,{className:(0,o.cn)("flex flex-col gap-3 border-2",a.container)},(0,d.Y)(g,{className:"flex items-center gap-2"},(0,d.Y)("span",{className:"text-xl","aria-hidden":"true"},a.icon),a.title),(0,d.Y)(x,null,a.description),(0,d.Y)("div",{className:"flex gap-2"},(0,d.Y)(s.$,{size:"sm",variant:"primary-solid"},"Learn More"),(0,d.Y)(s.$,{size:"sm",variant:"neutral-outlined"},"Dismiss"))),(0,d.Y)("details",{className:"mt-4"},(0,d.Y)("summary",{className:"cursor-pointer text-sm font-semibold text-primary"},"View Source Code"),(0,d.Y)("pre",{className:"mt-2 overflow-x-auto rounded-lg bg-secondary p-4 text-xs leading-relaxed"},(0,d.Y)("code",null,eb)))),(0,d.Y)("div",{className:"rounded-lg border border-border bg-muted p-6"},(0,d.Y)("h2",{className:"m-0 mb-2 text-lg font-semibold"},"Live Demo: Table (shadcn Table)"),(0,d.Y)("p",{className:"m-0 mb-4 text-sm text-muted-foreground"},"Pure HTML + Tailwind primitive. Use as a semantic foundation for comparison grids; rich cells (badges, retailer CTAs) are composed on top."),(0,d.Y)("div",{className:"rounded-lg border border-border bg-background p-4"},(0,d.Y)(T,null,(0,d.Y)(z,null,"Sample invoices for the Table primitive smoke test."),(0,d.Y)(A,null,(0,d.Y)(C,null,(0,d.Y)(B,{className:"w-[100px]"},"Invoice"),(0,d.Y)(B,null,"Status"),(0,d.Y)(B,null,"Method"),(0,d.Y)(B,{className:"text-right"},"Amount"))),(0,d.Y)(D,null,(0,d.Y)(C,null,(0,d.Y)(S,{className:"font-medium"},"INV001"),(0,d.Y)(S,null,"Paid"),(0,d.Y)(S,null,"Credit Card"),(0,d.Y)(S,{className:"text-right"},"$250.00")),(0,d.Y)(C,null,(0,d.Y)(S,{className:"font-medium"},"INV002"),(0,d.Y)(S,null,"Pending"),(0,d.Y)(S,null,"PayPal"),(0,d.Y)(S,{className:"text-right"},"$150.00")),(0,d.Y)(C,null,(0,d.Y)(S,{className:"font-medium"},"INV003"),(0,d.Y)(S,null,"Unpaid"),(0,d.Y)(S,null,"Bank Transfer"),(0,d.Y)(S,{className:"text-right"},"$350.00"))))),(0,d.Y)("details",{className:"mt-4"},(0,d.Y)("summary",{className:"cursor-pointer text-sm font-semibold text-primary"},"View Source Code"),(0,d.Y)("pre",{className:"mt-2 overflow-x-auto rounded-lg bg-secondary p-4 text-xs leading-relaxed"},(0,d.Y)("code",null,eg)))),(0,d.Y)("div",{className:"rounded-lg border border-border bg-muted p-6"},(0,d.Y)("h2",{className:"m-0 mb-2 text-lg font-semibold"},"Live Demo: Drawer (shadcn Drawer / Base UI)"),(0,d.Y)("p",{className:"m-0 mb-4 text-sm text-muted-foreground"},"Interactive overlay bottom sheet via ",(0,d.Y)("code",null,"@base-ui/react"),". Strong fit for selection modals; weak fit for a persistent sticky compare bar (keep custom fixed UI for that)."),(0,d.Y)(J,null,(0,d.Y)(Z,{className:ew},"Open Drawer"),(0,d.Y)(eo,null,(0,d.Y)(es,null,(0,d.Y)(el,null,"Add to Compare"),(0,d.Y)(ei,null,"Example selection sheet. Close with the button or swipe down.")),(0,d.Y)("div",{className:"flex-1 overflow-y-auto p-4 text-sm text-foreground"},"Product list content goes here."),(0,d.Y)(en,null,(0,d.Y)(et,{className:"cursor-pointer rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"},"Compare"),(0,d.Y)(et,{className:ew},"Cancel")))),(0,d.Y)("details",{className:"mt-4"},(0,d.Y)("summary",{className:"cursor-pointer text-sm font-semibold text-primary"},"View Source Code"),(0,d.Y)("pre",{className:"mt-2 overflow-x-auto rounded-lg bg-secondary p-4 text-xs leading-relaxed"},(0,d.Y)("code",null,ex)))),(0,d.Y)("div",{className:"rounded-lg border border-border bg-background p-6"},(0,d.Y)("h2",{className:"m-0 mb-4 text-lg font-semibold"},"Design Tokens"),(0,d.Y)("p",{className:"m-0 mb-4 text-sm text-foreground"},(0,d.Y)("strong",null,"Prefer @theme semantic colors")," (top row) for shadcn-compatible theming. Use direct token references when you need colors not covered by the @theme mapping."),(0,d.Y)("div",{className:"flex flex-col gap-6"},ec.map(e=>(0,d.Y)("div",{key:e.label},(0,d.Y)("h3",{className:"m-0 mb-2 text-sm font-semibold"},e.label),(0,d.Y)("div",{className:"flex flex-wrap gap-3"},e.tokens.map(e=>(0,d.Y)("div",{key:e.name,className:"flex flex-col items-center gap-1"},(0,d.Y)("div",{className:(0,o.cn)("h-10 w-10 rounded border border-border",e.tw),title:`${e.name} ${e.desc}`}),(0,d.Y)("span",{className:"max-w-24 text-center text-[0.625rem] leading-tight"},e.name),(0,d.Y)("span",{className:"max-w-24 text-center text-[0.5rem] text-muted-foreground"},e.desc)))))))),(0,d.Y)("div",{className:"rounded-lg border border-border bg-background p-6"},(0,d.Y)("h2",{className:"m-0 mb-2 text-lg font-semibold"},"Responsive Breakpoints"),(0,d.Y)("p",{className:"m-0 mb-4 text-sm text-foreground"},"Tailwind breakpoints are generated from ",(0,d.Y)("code",null,"packages/media-query/breakpoints.json")," ","by ",(0,d.Y)("code",null,"bin/generate-tailwind-breakpoints.js"),". Tailwind is"," ",(0,d.Y)("strong",null,"mobile-first"),": write the base style, then add prefixed classes for larger viewports."),
99(0,d.Y)("div",{className:"mb-6 overflow-x-auto"},(0,d.Y)("table",{className:"w-full border-collapse text-sm"},(0,d.Y)("thead",null,(0,d.Y)("tr",{className:"border-b border-border bg-muted text-left"},(0,d.Y)("th",{className:"p-2 font-semibold"},"Prefix"),(0,d.Y)("th",{className:"p-2 font-semibold"},"Source"),(0,d.Y)("th",{className:"p-2 font-semibold"},"Min Width"),(0,d.Y)("th",{className:"p-2 font-semibold"},"rem"),(0,d.Y)("th",{className:"p-2 font-semibold"},"Device"))),(0,d.Y)("tbody",null,ep.map(e=>(0,d.Y)("tr",{key:e.prefix,className:"border-b border-border"},(0,d.Y)("td",{className:"p-2"},(0,d.Y)("code",{className:"rounded-sm bg-secondary px-1.5 py-0.5 text-[0.8125rem]"},e.prefix)),(0,d.Y)("td",{className:"p-2 text-xs"},e.source),(0,d.Y)("td",{className:"p-2"},e.min),(0,d.Y)("td",{className:"p-2"},e.rem),(0,d.Y)("td",{className:"p-2"},e.device)))))),(0,d.Y)("div",{className:"mb-6"},(0,d.Y)("h3",{className:"m-0 mb-2 text-sm font-semibold"},"Active Breakpoint (resize the browser):"),(0,d.Y)("div",{className:"flex flex-wrap gap-2"},(0,d.Y)("span",{className:"inline-block rounded border-2 border-primary bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground sm:hidden"},"\uD83D\uDCF1 Mobile (default, < 480px)"),(0,d.Y)("span",{className:"hidden rounded border-2 border-primary bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground sm:inline-block lg:hidden"},"\uD83D\uDFE2 sm: Tablet (⥠480px)"),(0,d.Y)("span",{className:"hidden rounded border-2 border-primary bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground lg:inline-block xl:hidden"},"\uD83D\uDDA5ï¸ lg: Desktop (⥠1024px)"),(0,d.Y)("span",{className:"hidden rounded border-2 border-primary bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground xl:inline-block"},"\uD83D\uDDA5ï¸â¨ xl: Wide Desktop (⥠1440px)"))),(0,d.Y)("div",{className:"mb-6"},(0,d.Y)("h3",{className:"m-0 mb-2 text-sm font-semibold"},"Responsive Grid: 1 â 2 â 3 â 4 columns"),(0,d.Y)("p",{className:"m-0 mb-3 text-xs text-muted-foreground"},(0,d.Y)("code",null,"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4")),(0,d.Y)("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"},Array.from({length:8}).map((e,t)=>(0,d.Y)("div",{key:t,className:"flex h-16 items-center justify-center rounded border border-border bg-accent text-sm font-semibold text-accent-foreground"},"Item ",t+1)))),(0,d.Y)("div",{className:"mb-6"},(0,d.Y)("h3",{className:"m-0 mb-2 text-sm font-semibold"},"Responsive Typography"),(0,d.Y)("p",{className:"m-0 mb-3 text-xs text-muted-foreground"},(0,d.Y)("code",null,"text-base sm:text-lg lg:text-2xl xl:text-4xl")),(0,d.Y)("div",{className:"rounded border border-border bg-muted p-4"},(0,d.Y)("span",{className:"text-base font-bold sm:text-lg lg:text-2xl xl:text-4xl"},"This text grows with the viewport."))),(0,d.Y)("div",{className:"mb-6"},(0,d.Y)("h3",{className:"m-0 mb-2 text-sm font-semibold"},"Responsive Layout: stack on mobile, row on tablet+"),(0,d.Y)("p",{className:"m-0 mb-3 text-xs text-muted-foreground"},(0,d.Y)("code",null,"flex flex-col sm:flex-row")),(0,d.Y)("div",{className:"flex flex-col gap-2 sm:flex-row sm:gap-4"},(0,d.Y)("div",{className:"flex-1 rounded border border-border bg-accent p-3 text-sm"},"Box A"),(0,d.Y)("div",{className:"flex-1 rounded border border-border bg-accent p-3 text-sm"},"Box B"),(0,d.Y)("div",{className:"flex-1 rounded border border-border bg-accent p-3 text-sm"},"Box C"))),(0,d.Y)("details",null,(0,d.Y)("summary",{className:"cursor-pointer text-sm font-semibold text-primary"},"View Source Code"),(0,d.Y)("pre",{className:"mt-2 overflow-x-auto rounded-lg bg-secondary p-4 text-xs leading-relaxed"},(0,d.Y)("code",null,em)))),(0,d.Y)("div",{className:"rounded-lg border border-accent bg-accent p-6 leading-[1.6]"},(0,d.Y)("h2",{className:"m-0 mb-3 text-lg font-semibold text-primary"},"Developer Reference"),(0,d.Y)("p",{className:"m-0 mb-3 text-sm"},"The demos above use ",(0,d.Y)("strong",null,"shadcn Alert, ButtonGroup, Table, and Drawer")," ","(installed via the shadcn CLI), combined with"," ",(0,d.Y)("strong",null,"Tailwind CSS utility classes"),", the ",(0,d.Y)("strong",null,"cn() utility")," for conditional class merging, and the ",(0,d.Y)("strong",null,"@theme block")," in tailwind.css for brand-aware theming."),(0,d.Y)("div",{className:"mb-4 rounded-md border border-border bg-background p-3"},(0,d.Y)("h3",{className:"m-0 mb-2 text-sm font-semibold"},"Styling Priority"),(0,d.Y)("ol",{className:"m-0 pl-6 text-sm"},(0,d.Y)("li",null,(0,d.Y)("strong",null,"@theme semantic colors")," â ",(0,d.Y)("code",null,"bg-primary"),","," ",(0,d.Y)("code",null,"border-border"),", ",(0,d.Y)("code",null,"bg-muted"),", ",(0,d.Y)("code",null,"text-foreground")," ","(mapped to HDS tokens via @theme in tailwind.css)"),(0,d.Y)("li",null,(0,d.Y)("strong",null,"Direct token references")," â"," ",(0,d.Y)("code",null,"bg-[color:var(--palette-alert-success-200)]")," (any design token loaded on the page)"),(0,d.Y)("li",null,(0,d.Y)("strong",null,"Plain Tailwind")," â ",(0,d.Y)("code",null,"flex gap-4 roun
99ded-lg p-6")," (for layout, spacing, typography)"))),(0,d.Y)("p",{className:"m-0 mb-2 text-sm"},(0,d.Y)("strong",null,"Key files:")),(0,d.Y)("ul",{className:"m-0 mb-3 pl-6 text-sm"},(0,d.Y)("li",null,(0,d.Y)("code",null,"hds/components/ui/alert.jsx")," â shadcn Alert (pure HTML + cva)"),(0,d.Y)("li",null,(0,d.Y)("code",null,"hds/components/ui/table.jsx")," â shadcn Table (pure HTML + Tailwind)"),(0,d.Y)("li",null,(0,d.Y)("code",null,"hds/components/ui/drawer.jsx")," â shadcn Drawer (Base UI /"," ",(0,d.Y)("code",null,"@base-ui/react"),")"),(0,d.Y)("li",null,(0,d.Y)("code",null,"hds/components/ui/button-group.jsx")," â shadcn ButtonGroup layout primitive (Base UI + cva); pair with HDS ",(0,d.Y)("code",null,"Button")),(0,d.Y)("li",null,(0,d.Y)("code",null,"hds/components/ui/separator.jsx")," â shadcn Separator (Base UI)"),(0,d.Y)("li",null,(0,d.Y)("code",null,"utils/cn.js")," â cn() utility (clsx + tailwind-merge)"),(0,d.Y)("li",null,(0,d.Y)("code",null,"styles/tailwind.css")," â Tailwind entry + @theme token mapping"),(0,d.Y)("li",null,(0,d.Y)("code",null,"postcss.config.example.mjs")," â PostCSS config template (rename to postcss.config.mjs when adopting Tailwind app-wide)"),(0,d.Y)("li",null,(0,d.Y)("code",null,"components.json")," â shadcn CLI config (Base UI registry)")),(0,d.Y)("p",{className:"m-0 mb-3 text-sm"},(0,d.Y)("strong",null,"To add a shadcn component:"),(0,d.Y)("br",null),(0,d.Y)("code",{className:"rounded-sm bg-secondary px-1.5 py-0.5 text-[0.8125rem]"},"cd apps/fre/scopes/hdm && npx shadcn@latest add ","<component>")),(0,d.Y)("div",{className:"mt-4 rounded-md border border-border bg-background p-4"},(0,d.Y)("h3",{className:"m-0 mb-2 text-sm font-semibold"},"shadcn Component Categories (Base UI Registry)"),(0,d.Y)("ul",{className:"m-0 pl-6 text-sm"},(0,d.Y)("li",null,(0,d.Y)("strong",null,"Pure HTML + Tailwind")," (no headless UI dependency): Alert, Badge, Card, Separator, Skeleton, Table â safe for Preact"),(0,d.Y)("li",null,(0,d.Y)("strong",null,"Base UI primitives")," (interactive): ButtonGroup, Dialog, Dropdown Menu, Popover, Select, Tabs, Tooltip â uses ",(0,d.Y)("code",null,"@base-ui/react")," instead of Radix. Use HDS ",(0,d.Y)("code",null,"Button")," inside ButtonGroup, not shadcn Button.")),(0,d.Y)("p",{className:"m-0 mt-2 text-[0.8125rem] italic"},"Our registry uses the Base UI variant (",(0,d.Y)("code",null,"base-nova")," style). Components like Alert and Table use neither Base UI nor Radix â they are purely styled HTML elements with Tailwind (and cva where needed). Drawer is the first interactive Base UI primitive installed in this scope â smoke-test under Preact before production use."))))}var eh=!0;function ev(){return(0,d.Y)("main",{className:"mx-auto my-8 max-w-[800px] px-4"},(0,d.Y)("h1",{className:"mb-2 text-2xl font-bold"},"Tailwind + shadcn Component Demo"),(0,d.Y)("p",{className:"mb-8 text-sm text-foreground"},"Demonstrates using shadcn UI components with Tailwind CSS utility classes, the cn() utility, and HDS design tokens. This is a reference for the migration from Emotion/ui-kit to Tailwind + HDS."),(0,d.Y)(ef,null))}ev.tailwind=!0},98059:(e,t,a)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/demos/tailwind-shadcn",function(){return a(82118)}])}},e=>{e.O(0,[49804,90130,99880,46593,90636,38792],()=>e(e.s=98059)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.