@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/date-picker.tsx","../src/lib/cn.ts","../src/components/ui/button.tsx","../src/components/ui/size-context.tsx","../src/components/ui/calendar.tsx","../src/components/ui/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"./button\";\nimport { Calendar } from \"./calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nconst MONTHS = [\n\t\"January\",\n\t\"February\",\n\t\"March\",\n\t\"April\",\n\t\"May\",\n\t\"June\",\n\t\"July\",\n\t\"August\",\n\t\"September\",\n\t\"October\",\n\t\"November\",\n\t\"December\",\n];\n\nfunction formatDate(date: Date): string {\n\tconst day = date.getDate().toString().padStart(2, \"0\");\n\treturn `${day} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`;\n}\n\n// ─── Shared sub-components ────────────────────────────────────────────────────\n\ninterface PickerTriggerProps {\n\tdisplayValue: string;\n\tplaceholder: string;\n\tdisabled: boolean;\n\topen: boolean;\n\tclassName?: string;\n}\n\nfunction PickerTrigger({\n\tdisplayValue,\n\tplaceholder,\n\tdisabled,\n\topen,\n\tclassName,\n}: PickerTriggerProps) {\n\treturn (\n\t\t<PopoverTrigger\n\t\t\tdisabled={disabled}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-full items-center justify-between rounded-full border px-3.5 text-gdt-sm transition-[border-color,box-shadow] outline-none\",\n\t\t\t\tdisabled\n\t\t\t\t\t? \"cursor-not-allowed border-line-subtle bg-surface text-fg-caption-placeholder\"\n\t\t\t\t\t: open\n\t\t\t\t\t\t? \"border-line-focus bg-canvas text-fg-primary inset-ring-1 inset-ring-line-focus\"\n\t\t\t\t\t\t: \"border-line bg-canvas text-fg-primary hover:border-line-strong\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-w-0 truncate\",\n\t\t\t\t\t!displayValue && \"text-fg-caption-placeholder\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{displayValue || placeholder}\n\t\t\t</span>\n\t\t\t<CalendarIcon\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"ml-2 size-4 shrink-0\",\n\t\t\t\t\tdisabled ? \"text-fg-caption-placeholder\" : \"text-fg-secondary\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</PopoverTrigger>\n\t);\n}\n\ninterface PickerFooterProps {\n\tonClear: () => void;\n\tonApply: () => void;\n}\n\nfunction PickerFooter({ onClear, onApply }: PickerFooterProps) {\n\treturn (\n\t\t<div className=\"flex items-center justify-end gap-2 border-t border-line-subtle px-4 py-3\">\n\t\t\t<Button variant=\"tertiary-outline\" size=\"sm\" onClick={onClear}>\n\t\t\t\tClear\n\t\t\t</Button>\n\t\t\t<Button size=\"sm\" onClick={onApply}>\n\t\t\t\tApply\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n\nconst PANEL_CLASSES =\n\t\"min-w-(--anchor-width) gap-0 overflow-hidden rounded-2xl flex flex-col items-center p-0\";\n\n// ─── DatePicker ───────────────────────────────────────────────────────────────\n\ninterface DatePickerProps {\n\tvalue?: Date;\n\tonChange?: (date: Date | undefined) => void;\n\tdisabled?: boolean;\n\tplaceholder?: string;\n\tclassName?: string;\n}\n\nfunction DatePicker({\n\tvalue,\n\tonChange,\n\tdisabled = false,\n\tplaceholder = \"Select date\",\n\tclassName,\n}: DatePickerProps) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [pending, setPending] = React.useState<Date | undefined>(value);\n\n\tfunction handleOpenChange(next: boolean) {\n\t\tif (next) setPending(value);\n\t\tsetOpen(next);\n\t}\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={handleOpenChange}>\n\t\t\t<PickerTrigger\n\t\t\t\tdisplayValue={value ? formatDate(value) : \"\"}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tdisabled={disabled}\n\t\t\t\topen={open}\n\t\t\t\tclassName={className}\n\t\t\t/>\n\t\t\t<PopoverContent\n\t\t\t\tshowArrow={false}\n\t\t\t\talign=\"start\"\n\t\t\t\tside=\"bottom\"\n\t\t\t\tclassName={PANEL_CLASSES}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<Calendar mode=\"single\" selected={pending} onSelect={setPending} />\n\t\t\t\t\t<PickerFooter\n\t\t\t\t\t\tonClear={() => {\n\t\t\t\t\t\t\tsetPending(undefined);\n\t\t\t\t\t\t\tonChange?.(undefined);\n\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonApply={() => {\n\t\t\t\t\t\t\tonChange?.(pending);\n\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\n// ─── DateRangePicker ──────────────────────────────────────────────────────────\n\ninterface DateRangePickerProps {\n\tvalue?: DateRange;\n\tonChange?: (range: DateRange | undefined) => void;\n\tdisabled?: boolean;\n\tplaceholder?: string;\n\tclassName?: string;\n}\n\nfunction DateRangePicker({\n\tvalue,\n\tonChange,\n\tdisabled = false,\n\tplaceholder = \"Select date range\",\n\tclassName,\n}: DateRangePickerProps) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [pending, setPending] = React.useState<DateRange | undefined>(value);\n\n\tfunction handleOpenChange(next: boolean) {\n\t\tif (next) setPending(value);\n\t\tsetOpen(next);\n\t}\n\n\tconst displayValue = (() => {\n\t\tif (value?.from && value?.to)\n\t\t\treturn `${formatDate(value.from)} — ${formatDate(value.to)}`;\n\t\tif (value?.from) return formatDate(value.from);\n\t\treturn \"\";\n\t})();\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={handleOpenChange}>\n\t\t\t<PickerTrigger\n\t\t\t\tdisplayValue={displayValue}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tdisabled={disabled}\n\t\t\t\topen={open}\n\t\t\t\tclassName={className}\n\t\t\t/>\n\t\t\t<PopoverContent\n\t\t\t\tshowArrow={false}\n\t\t\t\talign=\"start\"\n\t\t\t\tclassName={cn(PANEL_CLASSES, \"w-auto\")}\n\t\t\t>\n\t\t\t\t<Calendar mode=\"range\" selected={pending} onSelect={setPending} />\n\t\t\t\t<PickerFooter\n\t\t\t\t\tonClear={() => {\n\t\t\t\t\t\tsetPending(undefined);\n\t\t\t\t\t\tonChange?.(undefined);\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t}}\n\t\t\t\t\tonApply={() => {\n\t\t\t\t\t\tonChange?.(pending);\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\nexport { DatePicker, DateRangePicker };\nexport type { DatePickerProps, DateRangePickerProps, DateRange };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useComponentSize } from \"./size-context\";\n\nconst buttonVariants = cva(\n\t\"group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tprimary:\n\t\t\t\t\t\"bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed\",\n\t\t\t\t\"primary-outline\":\n\t\t\t\t\t\"border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle\",\n\t\t\t\tsecondary:\n\t\t\t\t\t\"bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand\",\n\t\t\t\t\"secondary-outline\":\n\t\t\t\t\t\"border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle\",\n\t\t\t\ttertiary:\n\t\t\t\t\t\"bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed\",\n\t\t\t\t\"tertiary-outline\":\n\t\t\t\t\t\"border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised\",\n\t\t\t\tghost:\n\t\t\t\t\t\"bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised\",\n\t\t\t\tdanger:\n\t\t\t\t\t\"bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed\",\n\t\t\t\t\"glass-overlay\": \"bg-surface-glass-overlay-button text-fg-on-brand\",\n\t\t\t\t\"link-brand\":\n\t\t\t\t\t\"border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70\",\n\t\t\t\t\"link-neutral\":\n\t\t\t\t\t\"border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: \"h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5\",\n\t\t\t\tmd: \"h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n\t\t\t\tlg: \"h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5\",\n\t\t\t\txl: \"h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5\",\n\t\t\t\ticon: \"size-10\",\n\t\t\t\t\"icon-xs\": \"size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3\",\n\t\t\t\t\"icon-sm\": \"size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5\",\n\t\t\t\t\"icon-lg\":\n\t\t\t\t\t\"size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5\",\n\t\t\t\t\"icon-xl\": \"size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"primary\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype ButtonSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\nfunction Button({\n\tclassName,\n\tvariant = \"primary\",\n\tsize,\n\tisLoading = false,\n\tchildren,\n\tdisabled = false,\n\t...props\n}: ButtonPrimitive.Props &\n\tVariantProps<typeof buttonVariants> & { isLoading?: boolean }) {\n\tconst inheritedSize = useComponentSize();\n\tconst resolvedSize = size ?? inheritedSize;\n\tconst _disabled = disabled || isLoading;\n\treturn (\n\t\t<ButtonPrimitive\n\t\t\tdata-slot=\"button\"\n\t\t\tclassName={cn(buttonVariants({ variant, size: resolvedSize, className }))}\n\t\t\tdisabled={_disabled}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isLoading && <Loader className=\"size-4 animate-spin\" />} {children}\n\t\t</ButtonPrimitive>\n\t);\n}\n\ntype ButtonLinkProps = Omit<React.ComponentProps<\"a\">, \"href\"> &\n\tVariantProps<typeof buttonVariants> & {\n\t\tdisabled?: boolean;\n\t\thref: string;\n\t};\n\nfunction ButtonLink({\n\tclassName,\n\thref,\n\tvariant = \"primary\",\n\tsize,\n\tdisabled = false,\n\tonClick,\n\t...props\n}: ButtonLinkProps) {\n\tconst inheritedSize = useComponentSize();\n\tconst resolvedSize: ButtonSize = size ?? inheritedSize;\n\n\treturn (\n\t\t<a\n\t\t\tdata-slot=\"button-link\"\n\t\t\thref={href}\n\t\t\taria-disabled={disabled}\n\t\t\ttabIndex={disabled ? -1 : props.tabIndex}\n\t\t\tclassName={cn(buttonVariants({ variant, size: resolvedSize, className }))}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (disabled) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Button, ButtonLink, buttonVariants };\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n","\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n\ttype DayButton,\n\tDayPicker,\n\tgetDefaultClassNames,\n\ttype Locale,\n} from \"react-day-picker\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"./button\";\n\nfunction Calendar({\n\tclassName,\n\tclassNames,\n\tshowOutsideDays = false,\n\tweekStartsOn = 1,\n\tlocale,\n\tformatters,\n\tcomponents,\n\t...props\n}: React.ComponentProps<typeof DayPicker>) {\n\tconst defaultClassNames = getDefaultClassNames();\n\n\treturn (\n\t\t<DayPicker\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\tweekStartsOn={weekStartsOn}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/calendar bg-transparent p-4 [--cell-radius:var(--radius-md)] [--cell-height:36px] [--cell-width:40px]\",\n\t\t\t\tString.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n\t\t\t\tString.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tlocale={locale}\n\t\t\tformatters={{\n\t\t\t\tformatWeekdayName: (date) =>\n\t\t\t\t\tdate.toLocaleString(locale?.code, { weekday: \"narrow\" }),\n\t\t\t\t...formatters,\n\t\t\t}}\n\t\t\tclassNames={{\n\t\t\t\troot: cn(\"w-fit\", defaultClassNames.root),\n\t\t\t\tmonths: cn(\n\t\t\t\t\t\"relative flex flex-col gap-4 md:flex-row\",\n\t\t\t\t\tdefaultClassNames.months,\n\t\t\t\t),\n\t\t\t\tmonth: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n\t\t\t\tnav: cn(\n\t\t\t\t\t\"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n\t\t\t\t\tdefaultClassNames.nav,\n\t\t\t\t),\n\t\t\t\tbutton_previous: cn(\n\t\t\t\t\t\"flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40\",\n\t\t\t\t\tdefaultClassNames.button_previous,\n\t\t\t\t),\n\t\t\t\tbutton_next: cn(\n\t\t\t\t\t\"flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40\",\n\t\t\t\t\tdefaultClassNames.button_next,\n\t\t\t\t),\n\t\t\t\tmonth_caption: cn(\n\t\t\t\t\t\"flex h-(--cell-height) w-full items-center justify-center px-(--cell-width)\",\n\t\t\t\t\tdefaultClassNames.month_caption,\n\t\t\t\t),\n\t\t\t\tcaption_label: cn(\n\t\t\t\t\t\"text-gdt-sm font-medium text-fg-primary select-none\",\n\t\t\t\t\tdefaultClassNames.caption_label,\n\t\t\t\t),\n\t\t\t\ttable: \"w-full border-collapse\",\n\t\t\t\tweekdays: cn(\"flex\", defaultClassNames.weekdays),\n\t\t\t\tweekday: cn(\n\t\t\t\t\t\"flex-1 text-gdt-xs font-normal text-fg-secondary select-none\",\n\t\t\t\t\tdefaultClassNames.weekday,\n\t\t\t\t),\n\t\t\t\tweek: cn(\"mt-1 flex w-full\", defaultClassNames.week),\n\t\t\t\tday: cn(\n\t\t\t\t\t\"group/day relative aspect-square h-full w-full p-0 text-center select-none\",\n\t\t\t\t\tdefaultClassNames.day,\n\t\t\t\t),\n\t\t\t\trange_start: cn(\n\t\t\t\t\t\"rounded-l-full bg-surface-brand-subtle\",\n\t\t\t\t\tdefaultClassNames.range_start,\n\t\t\t\t),\n\t\t\t\trange_middle: cn(\n\t\t\t\t\t\"rounded-none bg-surface-brand-subtle\",\n\t\t\t\t\tdefaultClassNames.range_middle,\n\t\t\t\t),\n\t\t\t\trange_end: cn(\n\t\t\t\t\t\"rounded-r-full bg-surface-brand-subtle\",\n\t\t\t\t\tdefaultClassNames.range_end,\n\t\t\t\t),\n\t\t\t\ttoday: cn(\n\t\t\t\t\t\"rounded-full h-(--cell-height) w-(--cell-width) flex items-center justify-center bg-surface-brand-subtle p-0\",\n\t\t\t\t\tdefaultClassNames.today,\n\t\t\t\t),\n\t\t\t\toutside: cn(\n\t\t\t\t\t\"text-fg-caption-placeholder aria-selected:text-fg-caption-placeholder\",\n\t\t\t\t\tdefaultClassNames.outside,\n\t\t\t\t),\n\t\t\t\tdisabled: cn(\n\t\t\t\t\t\"text-fg-caption-placeholder opacity-50\",\n\t\t\t\t\tdefaultClassNames.disabled,\n\t\t\t\t),\n\t\t\t\thidden: cn(\"invisible\", defaultClassNames.hidden),\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tcomponents={{\n\t\t\t\tRoot: ({ className, rootRef, ...props }) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tdata-slot=\"calendar\"\n\t\t\t\t\t\t\tref={rootRef}\n\t\t\t\t\t\t\tclassName={cn(className)}\n\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\tChevron: ({ className, orientation, ...props }) => {\n\t\t\t\t\tif (orientation === \"right\") {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\tclassName={cn(\"size-4\", className)}\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\tDayButton: ({ ...props }) => (\n\t\t\t\t\t<CalendarDayButton locale={locale} {...props} />\n\t\t\t\t),\n\t\t\t\tWeekNumber: ({ children, ...props }) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<td {...props}>\n\t\t\t\t\t\t\t<div className=\"flex h-(--cell-height) w-(--cell-width) items-center justify-center text-center\">\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t...components,\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CalendarDayButton({\n\tclassName,\n\tday,\n\tmodifiers,\n\tlocale,\n\t...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n\tconst defaultClassNames = getDefaultClassNames();\n\n\tconst ref = React.useRef<HTMLButtonElement>(null);\n\tReact.useEffect(() => {\n\t\tif (modifiers.focused) ref.current?.focus();\n\t}, [modifiers.focused]);\n\n\tconst isEndpoint =\n\t\t(modifiers.selected &&\n\t\t\t!modifiers.range_start &&\n\t\t\t!modifiers.range_end &&\n\t\t\t!modifiers.range_middle) ||\n\t\tmodifiers.range_start ||\n\t\tmodifiers.range_end;\n\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"icon\"\n\t\t\tdata-day={day.date.toLocaleDateString(locale?.code)}\n\t\t\tdata-selected-single={\n\t\t\t\tmodifiers.selected &&\n\t\t\t\t!modifiers.range_start &&\n\t\t\t\t!modifiers.range_end &&\n\t\t\t\t!modifiers.range_middle\n\t\t\t}\n\t\t\tdata-range-start={modifiers.range_start}\n\t\t\tdata-range-end={modifiers.range_end}\n\t\t\tdata-range-middle={modifiers.range_middle}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-width) h-(--cell-height) items-center justify-center rounded-full border-0 text-gdt-sm font-normal leading-none\",\n\t\t\t\t// Selected single + range endpoints: filled brand circle.\n\t\t\t\t\"data-[range-end=true]:bg-action-primary data-[range-end=true]:text-fg-on-brand data-[range-end=true]:hover:bg-action-primary-hover data-[range-end=true]:hover:text-fg-on-brand\",\n\t\t\t\t\"data-[range-start=true]:bg-action-primary data-[range-start=true]:text-fg-on-brand data-[range-start=true]:hover:bg-action-primary-hover data-[range-start=true]:hover:text-fg-on-brand\",\n\t\t\t\t\"data-[selected-single=true]:bg-action-primary data-[selected-single=true]:text-fg-on-brand data-[selected-single=true]:hover:bg-action-primary-hover data-[selected-single=true]:hover:text-fg-on-brand\",\n\t\t\t\t// In-range days: brand wash carried by the cell, brand text on the button.\n\t\t\t\t\"data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-fg-brand data-[range-middle=true]:hover:bg-transparent\",\n\t\t\t\tisEndpoint && \"font-medium\",\n\t\t\t\t\"group-data-[focused=true]/day:border-line-focus group-data-[focused=true]/day:shadow-[0px_0px_0px_2px_var(--color-line-focus)]\",\n\t\t\t\tdefaultClassNames.day,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Calendar, CalendarDayButton };\n","\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { type ComponentSize, SizeProvider } from \"./size-context\";\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n\treturn <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n\treturn <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\ntype PopoverContentProps = PopoverPrimitive.Popup.Props &\n\tPick<\n\t\tPopoverPrimitive.Positioner.Props,\n\t\t\"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n\t> & {\n\t\tshowArrow?: boolean;\n\t\tsize?: ComponentSize;\n\t};\n\nfunction PopoverContent({\n\tclassName,\n\talign = \"center\",\n\talignOffset = 0,\n\tside = \"bottom\",\n\tsideOffset = 6,\n\tshowArrow = true,\n\tsize = \"md\",\n\tchildren,\n\t...props\n}: PopoverContentProps) {\n\treturn (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Positioner\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName=\"isolate z-50\"\n\t\t\t>\n\t\t\t\t<PopoverPrimitive.Popup\n\t\t\t\t\tdata-slot=\"popover-content\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"z-50 relative flex w-72 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-lg border-0 bg-surface-overlay py-4 text-gdt-sm text-fg-primary shadow-2 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 has-[&_[data-slot=popover-footer]]:pb-0\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<SizeProvider size={size}>{children}</SizeProvider>\n\t\t\t\t\t{showArrow ? (\n\t\t\t\t\t\t<PopoverPrimitive.Arrow className=\"relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]\" />\n\t\t\t\t\t) : null}\n\t\t\t\t</PopoverPrimitive.Popup>\n\t\t\t</PopoverPrimitive.Positioner>\n\t\t</PopoverPrimitive.Portal>\n\t);\n}\n\nfunction PopoverHeader({\n\tclassName,\n\tborder,\n\t...props\n}: React.ComponentProps<\"div\"> & { border?: boolean }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"popover-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col gap-0.5 px-4\",\n\t\t\t\tborder && \"border-b border-line-subtle pb-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PopoverBody({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"popover-body\"\n\t\t\tclassName={cn(\"px-4 py-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PopoverFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"popover-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-row items-center gap-2 px-4 border-t border-line-subtle pt-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n\treturn (\n\t\t<PopoverPrimitive.Title\n\t\t\tdata-slot=\"popover-title\"\n\t\t\tclassName={cn(\"text-gdt-sm font-semibold text-fg-primary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PopoverDescription({\n\tclassName,\n\t...props\n}: PopoverPrimitive.Description.Props) {\n\treturn (\n\t\t<PopoverPrimitive.Description\n\t\t\tdata-slot=\"popover-description\"\n\t\t\tclassName={cn(\"text-gdt-xs font-normal text-fg-secondary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tPopover,\n\tPopoverContent,\n\tPopoverDescription,\n\tPopoverHeader,\n\tPopoverTitle,\n\tPopoverTrigger,\n\tPopoverBody,\n\tPopoverFooter,\n};\n"],"mappings":"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","names":["React","jsx","jsx","className","props","jsx","jsxs","jsx","jsxs"]}
+{"version":3,"sources":["../src/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DateRange, Matcher } from \"react-day-picker\";\nimport { Calendar } from \"./calendar\";\nimport { cn } from \"./lib/cn\";\nimport { PickerFooter, PickerTrigger } from \"./lib/picker\";\nimport { Popover, PopoverContent } from \"./popover\";\n\nfunction formatDate(date: Date): string {\n\treturn date.toLocaleDateString(\"en-GB\", {\n\t\tday: \"2-digit\",\n\t\tmonth: \"long\",\n\t\tyear: \"numeric\",\n\t});\n}\n\nconst PANEL_CLASSES =\n\t\"flex min-w-(--anchor-width) flex-col items-center gap-0 overflow-hidden rounded-2xl p-0\";\n\ntype CaptionLayout =\n\t| \"label\"\n\t| \"dropdown\"\n\t| \"dropdown-months\"\n\t| \"dropdown-years\";\n\ninterface DatePickerBaseProps {\n\tdisabled?: boolean;\n\tplaceholder?: string;\n\tclassName?: string;\n\t/** Caption style. Defaults to month + year dropdowns for quick navigation. */\n\tcaptionLayout?: CaptionLayout;\n\t/** Earliest navigable month. Defaults to 100 years before today. */\n\tstartMonth?: Date;\n\t/** Latest navigable month. Defaults to 10 years after today. */\n\tendMonth?: Date;\n\t/** Dates that cannot be selected (react-day-picker matcher). */\n\tdisabledDates?: Matcher | Matcher[];\n}\n\nfunction defaultStartMonth() {\n\treturn new Date(new Date().getFullYear() - 100, 0);\n}\n\nfunction defaultEndMonth() {\n\treturn new Date(new Date().getFullYear() + 10, 11);\n}\n\n// ─── DatePicker ───────────────────────────────────────────────────────────────\n\ninterface DatePickerProps extends DatePickerBaseProps {\n\tvalue?: Date;\n\tonChange?: (date: Date | undefined) => void;\n}\n\nfunction DatePicker({\n\tvalue,\n\tonChange,\n\tdisabled = false,\n\tplaceholder = \"Select date\",\n\tclassName,\n\tcaptionLayout = \"dropdown\",\n\tstartMonth,\n\tendMonth,\n\tdisabledDates,\n}: DatePickerProps) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [pending, setPending] = React.useState<Date | undefined>(value);\n\tconst [month, setMonth] = React.useState<Date>(() => value ?? new Date());\n\n\tfunction handleOpenChange(next: boolean) {\n\t\tif (next) {\n\t\t\tsetPending(value);\n\t\t\tsetMonth(value ?? new Date());\n\t\t}\n\t\tsetOpen(next);\n\t}\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={handleOpenChange}>\n\t\t\t<PickerTrigger\n\t\t\t\ticon={CalendarIcon}\n\t\t\t\tdisplayValue={value ? formatDate(value) : \"\"}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tdisabled={disabled}\n\t\t\t\topen={open}\n\t\t\t\tclassName={className}\n\t\t\t/>\n\t\t\t<PopoverContent\n\t\t\t\tshowArrow={false}\n\t\t\t\talign=\"start\"\n\t\t\t\tside=\"bottom\"\n\t\t\t\tclassName={PANEL_CLASSES}\n\t\t\t>\n\t\t\t\t<Calendar\n\t\t\t\t\tmode=\"single\"\n\t\t\t\t\tselected={pending}\n\t\t\t\t\tonSelect={setPending}\n\t\t\t\t\tmonth={month}\n\t\t\t\t\tonMonthChange={setMonth}\n\t\t\t\t\tcaptionLayout={captionLayout}\n\t\t\t\t\tstartMonth={startMonth ?? defaultStartMonth()}\n\t\t\t\t\tendMonth={endMonth ?? defaultEndMonth()}\n\t\t\t\t\tdisabled={disabledDates}\n\t\t\t\t/>\n\t\t\t\t<PickerFooter\n\t\t\t\t\tsecondaryLabel=\"Clear\"\n\t\t\t\t\tonSecondary={() => {\n\t\t\t\t\t\tsetPending(undefined);\n\t\t\t\t\t\tonChange?.(undefined);\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t}}\n\t\t\t\t\tonApply={() => {\n\t\t\t\t\t\tonChange?.(pending);\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\n// ─── DateRangePicker ──────────────────────────────────────────────────────────\n\ninterface DateRangePickerProps extends DatePickerBaseProps {\n\tvalue?: DateRange;\n\tonChange?: (range: DateRange | undefined) => void;\n}\n\nfunction DateRangePicker({\n\tvalue,\n\tonChange,\n\tdisabled = false,\n\tplaceholder = \"Select date range\",\n\tclassName,\n\tcaptionLayout = \"dropdown\",\n\tstartMonth,\n\tendMonth,\n\tdisabledDates,\n}: DateRangePickerProps) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [pending, setPending] = React.useState<DateRange | undefined>(value);\n\tconst [month, setMonth] = React.useState<Date>(\n\t\t() => value?.from ?? new Date(),\n\t);\n\n\tfunction handleOpenChange(next: boolean) {\n\t\tif (next) {\n\t\t\tsetPending(value);\n\t\t\tsetMonth(value?.from ?? new Date());\n\t\t}\n\t\tsetOpen(next);\n\t}\n\n\tconst displayValue = (() => {\n\t\tif (value?.from && value?.to)\n\t\t\treturn `${formatDate(value.from)} — ${formatDate(value.to)}`;\n\t\tif (value?.from) return formatDate(value.from);\n\t\treturn \"\";\n\t})();\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={handleOpenChange}>\n\t\t\t<PickerTrigger\n\t\t\t\ticon={CalendarIcon}\n\t\t\t\tdisplayValue={displayValue}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tdisabled={disabled}\n\t\t\t\topen={open}\n\t\t\t\tclassName={className}\n\t\t\t/>\n\t\t\t<PopoverContent\n\t\t\t\tshowArrow={false}\n\t\t\t\talign=\"start\"\n\t\t\t\tclassName={cn(PANEL_CLASSES, \"w-auto\")}\n\t\t\t>\n\t\t\t\t<Calendar\n\t\t\t\t\tmode=\"range\"\n\t\t\t\t\tselected={pending}\n\t\t\t\t\tonSelect={setPending}\n\t\t\t\t\tmonth={month}\n\t\t\t\t\tonMonthChange={setMonth}\n\t\t\t\t\tcaptionLayout={captionLayout}\n\t\t\t\t\tstartMonth={startMonth ?? defaultStartMonth()}\n\t\t\t\t\tendMonth={endMonth ?? defaultEndMonth()}\n\t\t\t\t\tdisabled={disabledDates}\n\t\t\t\t/>\n\t\t\t\t<PickerFooter\n\t\t\t\t\tsecondaryLabel=\"Clear\"\n\t\t\t\t\tonSecondary={() => {\n\t\t\t\t\t\tsetPending(undefined);\n\t\t\t\t\t\tonChange?.(undefined);\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t}}\n\t\t\t\t\tonApply={() => {\n\t\t\t\t\t\tonChange?.(pending);\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\nexport { DatePicker, DateRangePicker };\nexport type { DatePickerProps, DateRangePickerProps, DateRange };\n"],"mappings":"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","names":[]}

package/dist/details-card.d.ts

@@ -0,0 +1,19 @@
+import { useRender } from '@base-ui/react/use-render';
+import * as React from 'react';
+
+type DetailsCardBodyProps = useRender.ComponentProps<"div"> & {
+    orientation?: "horizontal" | "vertical";
+    showIcons?: boolean;
+};
+declare function DetailsCard({ className, render, ...props }: useRender.ComponentProps<"article">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function DetailsCardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function DetailsCardTitle({ className, render, ...props }: useRender.ComponentProps<"h3">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function DetailsCardDescription({ className, render, ...props }: useRender.ComponentProps<"p">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function DetailsCardBody({ className, orientation, render, showIcons, ...props }: DetailsCardBodyProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function DetailsCardRow({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function DetailsCardRowGroup({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function DetailsCardIcon({ children, className, render, ...props }: useRender.ComponentProps<"span">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function DetailsCardLabel({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function DetailsCardValue({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+
+export { DetailsCard, DetailsCardBody, type DetailsCardBodyProps, DetailsCardDescription, DetailsCardHeader, DetailsCardIcon, DetailsCardLabel, DetailsCardRow, DetailsCardRowGroup, DetailsCardTitle, DetailsCardValue };

package/dist/details-card.js

@@ -0,0 +1,267 @@
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/details-card.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
+function DetailsCard({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "article",
+    props: mergeProps(
+      {
+        className: cn(
+          "flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-canvas p-gdt-xl text-fg-primary",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "details-card"
+    }
+  });
+}
+function DetailsCardHeader({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn("flex min-w-0 flex-col gap-1", className)
+      },
+      props
+    ),
+    render
+  });
+}
+function DetailsCardTitle({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "h3",
+    props: mergeProps(
+      {
+        className: cn("text-gdt-md font-bold text-fg-primary", className)
+      },
+      props
+    ),
+    render
+  });
+}
+function DetailsCardDescription({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "p",
+    props: mergeProps(
+      {
+        className: cn("text-gdt-sm font-normal text-fg-secondary", className)
+      },
+      props
+    ),
+    render
+  });
+}
+function DetailsCardBody({
+  className,
+  orientation = "horizontal",
+  render,
+  showIcons = true,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        // @ts-expect-error — data-* attrs are valid but not in mergeProps generic
+        "data-icons": showIcons,
+        "data-orientation": orientation,
+        className: cn(
+          "group/details-card-body mt-gdt-md flex min-w-0 flex-col border-line-subtle border-t",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      orientation,
+      showIcons,
+      slot: "details-card-body"
+    }
+  });
+}
+function DetailsCardRow({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn(
+          "grid min-w-0 grid-cols-[1rem_minmax(0,1fr)_auto] items-center gap-x-2 border-line-subtle border-b py-3 last:border-b-0",
+          "group-data-[orientation=vertical]/details-card-body:grid-cols-[1rem_minmax(0,1fr)] group-data-[orientation=vertical]/details-card-body:items-start group-data-[orientation=vertical]/details-card-body:gap-y-1",
+          "group-data-[icons=false]/details-card-body:grid-cols-[minmax(0,1fr)_auto]",
+          "group-[[data-icons=false][data-orientation=vertical]]/details-card-body:grid-cols-1",
+          "group-data-[slot=details-card-row-group]/details-card-row-group:border-b-0",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "details-card-row"
+    }
+  });
+}
+function DetailsCardRowGroup({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        // @ts-expect-error — data-* attrs are valid but not in mergeProps generic
+        "data-slot": "details-card-row-group",
+        className: cn(
+          "group/details-card-row-group grid min-w-0 border-line-subtle border-b last:border-b-0",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "details-card-row-group"
+    }
+  });
+}
+function DetailsCardIcon({
+  children,
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        "aria-hidden": true,
+        children: children ?? /* @__PURE__ */ jsx(DetailsCardChevronIcon, {}),
+        className: cn(
+          "flex size-4 shrink-0 items-center justify-center text-fg-primary",
+          "group-data-[icons=false]/details-card-body:hidden",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "details-card-icon"
+    }
+  });
+}
+function DetailsCardLabel({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn(
+          "min-w-0 text-gdt-sm font-normal text-fg-secondary",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "details-card-label"
+    }
+  });
+}
+function DetailsCardValue({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn(
+          "min-w-0 justify-self-end text-right text-gdt-sm font-semibold text-fg-primary",
+          "group-data-[orientation=vertical]/details-card-body:col-start-2 group-data-[orientation=vertical]/details-card-body:justify-self-start group-data-[orientation=vertical]/details-card-body:text-left",
+          "group-[[data-icons=false][data-orientation=vertical]]/details-card-body:col-start-1",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "details-card-value"
+    }
+  });
+}
+function DetailsCardChevronIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      focusable: "false",
+      height: "12",
+      viewBox: "0 0 12 12",
+      width: "12",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4.5 2.5 8 6 4.5 9.5",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "1.5"
+        }
+      )
+    }
+  );
+}
+export {
+  DetailsCard,
+  DetailsCardBody,
+  DetailsCardDescription,
+  DetailsCardHeader,
+  DetailsCardIcon,
+  DetailsCardLabel,
+  DetailsCardRow,
+  DetailsCardRowGroup,
+  DetailsCardTitle,
+  DetailsCardValue
+};
+//# sourceMappingURL=details-card.js.map

package/dist/details-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/details-card.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type * as React from \"react\";\n\nimport { cn } from \"./lib/cn\";\n\ntype DetailsCardBodyProps = useRender.ComponentProps<\"div\"> & {\n\torientation?: \"horizontal\" | \"vertical\";\n\tshowIcons?: boolean;\n};\n\nfunction DetailsCard({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"article\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"article\",\n\t\tprops: mergeProps<\"article\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-canvas p-gdt-xl text-fg-primary\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"details-card\",\n\t\t},\n\t});\n}\n\nfunction DetailsCardHeader({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\"flex min-w-0 flex-col gap-1\", className),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction DetailsCardTitle({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"h3\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"h3\",\n\t\tprops: mergeProps<\"h3\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\"text-gdt-md font-bold text-fg-primary\", className),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction DetailsCardDescription({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"p\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"p\",\n\t\tprops: mergeProps<\"p\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\"text-gdt-sm font-normal text-fg-secondary\", className),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction DetailsCardBody({\n\tclassName,\n\torientation = \"horizontal\",\n\trender,\n\tshowIcons = true,\n\t...props\n}: DetailsCardBodyProps) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\t// @ts-expect-error — data-* attrs are valid but not in mergeProps generic\n\t\t\t\t\"data-icons\": showIcons,\n\t\t\t\t\"data-orientation\": orientation,\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"group/details-card-body mt-gdt-md flex min-w-0 flex-col border-line-subtle border-t\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\torientation,\n\t\t\tshowIcons,\n\t\t\tslot: \"details-card-body\",\n\t\t},\n\t});\n}\n\nfunction DetailsCardRow({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"grid min-w-0 grid-cols-[1rem_minmax(0,1fr)_auto] items-center gap-x-2 border-line-subtle border-b py-3 last:border-b-0\",\n\t\t\t\t\t\"group-data-[orientation=vertical]/details-card-body:grid-cols-[1rem_minmax(0,1fr)] group-data-[orientation=vertical]/details-card-body:items-start group-data-[orientation=vertical]/details-card-body:gap-y-1\",\n\t\t\t\t\t\"group-data-[icons=false]/details-card-body:grid-cols-[minmax(0,1fr)_auto]\",\n\t\t\t\t\t\"group-[[data-icons=false][data-orientation=vertical]]/details-card-body:grid-cols-1\",\n\t\t\t\t\t\"group-data-[slot=details-card-row-group]/details-card-row-group:border-b-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"details-card-row\",\n\t\t},\n\t});\n}\n\nfunction DetailsCardRowGroup({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\t// @ts-expect-error — data-* attrs are valid but not in mergeProps generic\n\t\t\t\t\"data-slot\": \"details-card-row-group\",\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"group/details-card-row-group grid min-w-0 border-line-subtle border-b last:border-b-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"details-card-row-group\",\n\t\t},\n\t});\n}\n\nfunction DetailsCardIcon({\n\tchildren,\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"span\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"span\",\n\t\tprops: mergeProps<\"span\">(\n\t\t\t{\n\t\t\t\t\"aria-hidden\": true,\n\t\t\t\tchildren: children ?? <DetailsCardChevronIcon />,\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"flex size-4 shrink-0 items-center justify-center text-fg-primary\",\n\t\t\t\t\t\"group-data-[icons=false]/details-card-body:hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"details-card-icon\",\n\t\t},\n\t});\n}\n\nfunction DetailsCardLabel({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"min-w-0 text-gdt-sm font-normal text-fg-secondary\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"details-card-label\",\n\t\t},\n\t});\n}\n\nfunction DetailsCardValue({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"min-w-0 justify-self-end text-right text-gdt-sm font-semibold text-fg-primary\",\n\t\t\t\t\t\"group-data-[orientation=vertical]/details-card-body:col-start-2 group-data-[orientation=vertical]/details-card-body:justify-self-start group-data-[orientation=vertical]/details-card-body:text-left\",\n\t\t\t\t\t\"group-[[data-icons=false][data-orientation=vertical]]/details-card-body:col-start-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"details-card-value\",\n\t\t},\n\t});\n}\n\nfunction DetailsCardChevronIcon(props: React.ComponentProps<\"svg\">) {\n\treturn (\n\t\t<svg\n\t\t\taria-hidden=\"true\"\n\t\t\tfill=\"none\"\n\t\t\tfocusable=\"false\"\n\t\t\theight=\"12\"\n\t\t\tviewBox=\"0 0 12 12\"\n\t\t\twidth=\"12\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<path\n\t\t\t\td=\"M4.5 2.5 8 6 4.5 9.5\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n\nexport {\n\tDetailsCard,\n\tDetailsCardBody,\n\tDetailsCardDescription,\n\tDetailsCardHeader,\n\tDetailsCardIcon,\n\tDetailsCardLabel,\n\tDetailsCardRow,\n\tDetailsCardRowGroup,\n\tDetailsCardTitle,\n\tDetailsCardValue,\n};\nexport type { DetailsCardBodyProps };\n"],"mappings":";;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAiLA;AAvK1B,SAAS,YAAY;AAAA,EACpB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAwC;AACvC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,kBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACvD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;AAEA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAmC;AAClC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW,GAAG,yCAAyC,SAAS;AAAA,MACjE;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;AAEA,SAAS,uBAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW,GAAG,6CAA6C,SAAS;AAAA,MACrE;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;AAEA,SAAS,gBAAgB;AAAA,EACxB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACJ,GAAyB;AACxB,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA;AAAA,QAEC,cAAc;AAAA,QACd,oBAAoB;AAAA,QACpB,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,eAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,oBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA;AAAA,QAEC,aAAa;AAAA,QACb,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,gBAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAqC;AACpC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,eAAe;AAAA,QACf,UAAU,YAAY,oBAAC,0BAAuB;AAAA,QAC9C,WAAW;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,uBAAuB,OAAoC;AACnE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAU;AAAA,MACV,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,OAAM;AAAA,MACL,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACA,GAAE;AAAA,UACF,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAY;AAAA;AAAA,MACb;AAAA;AAAA,EACD;AAEF;","names":[]}