@craftzbay/ui 0.10.0 → 0.11.1

package/dist-lib/components/ui/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/ui/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useMemo, useState, type ReactNode } from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport type { DateRange, DayPickerProps, Matcher } from 'react-day-picker';\nimport { Calendar as CalendarIcon } from '@/icons';\nimport { Calendar } from './Calendar';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/* -----------------------------------------------------------------------------\n *  Two related components share the same trigger shell:\n *\n *    <DatePicker value={date} onChange={setDate} />        // single date\n *    <DateRangePicker value={range} onChange={setRange} /> // {from,to}\n * --------------------------------------------------------------------------- */\n\ntype CalendarLocale = DayPickerProps['locale'];\n\nfunction defaultFormatDate(d: Date): string {\n  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });\n}\n\n/** Merge the fromDate/toDate bounds with any consumer-supplied RDP matcher. */\nfunction useBounds(fromDate?: Date, toDate?: Date, disabled?: Matcher | Matcher[]) {\n  return useMemo<Matcher[] | undefined>(() => {\n    const list: Matcher[] = [];\n    if (fromDate) list.push({ before: fromDate });\n    if (toDate) list.push({ after: toDate });\n    if (disabled) list.push(...(Array.isArray(disabled) ? disabled : [disabled]));\n    return list.length ? list : undefined;\n  }, [fromDate, toDate, disabled]);\n}\n\nfunction PickerTrigger({\n  label,\n  placeholder,\n  hasValue,\n  children,\n  error,\n  fieldId,\n  disabled,\n  open,\n}: {\n  label?: ReactNode;\n  placeholder: string;\n  hasValue: boolean;\n  children: ReactNode;\n  error?: ReactNode;\n  fieldId: string;\n  disabled?: boolean;\n  open: boolean;\n}) {\n  const errorId = `${fieldId}-error`;\n  const calendarId = `${fieldId}-calendar`;\n  const text = hasValue ? children : placeholder;\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <label htmlFor={fieldId} className=\"text-foreground text-sm font-medium\">\n          {label}\n        </label>\n      )}\n      <PopoverPrimitive.Trigger asChild>\n        <button\n          id={fieldId}\n          type=\"button\"\n          // combobox-with-dialog pattern: lets the field carry aria-invalid like other inputs.\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={calendarId}\n          disabled={disabled}\n          aria-invalid={Boolean(error) || undefined}\n          aria-describedby={error ? errorId : undefined}\n          className={cn(\n            'bg-card inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 text-left text-sm',\n            'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n            'focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            error\n              ? 'border-danger focus-visible:border-danger focus-visible:ring-danger'\n              : 'border-border focus-visible:border-accent focus-visible:ring-ring',\n            !hasValue && 'text-foreground-subtle',\n          )}\n        >\n          <CalendarIcon className=\"text-foreground-subtle size-4\" aria-hidden />\n          <span className=\"truncate\" title={typeof text === 'string' ? text : undefined}>\n            {text}\n          </span>\n        </button>\n      </PopoverPrimitive.Trigger>\n      {error && (\n        <p id={errorId} role=\"alert\" className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n\ninterface PickerCommonProps {\n  label?: ReactNode;\n  placeholder?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  /** Restrict to a date range. Days outside are not selectable. */\n  fromDate?: Date;\n  toDate?: Date;\n  /** Extra RDP matcher(s) for disabled days, merged with `fromDate`/`toDate`. */\n  disabledDays?: Matcher | Matcher[];\n  /** Custom display formatter for the trigger text. */\n  formatDate?: (d: Date) => string;\n  /** date-fns locale object passed through to react-day-picker. */\n  locale?: CalendarLocale;\n  className?: string;\n}\n\nexport interface DatePickerProps extends PickerCommonProps {\n  value?: Date;\n  onChange: (date: Date | undefined) => void;\n}\n\n/**\n * Single-date picker.\n *\n * @example\n *   <DatePicker label=\"Date of birth\" value={dob} onChange={setDob} />\n *\n * @do Use locale-aware formatting via `formatDate` / `locale`.\n * @dont Roll a custom calendar — Radix Popover + react-day-picker handles a11y.\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker(\n  {\n    value,\n    onChange,\n    label,\n    placeholder: placeholderProp,\n    error,\n    disabled,\n    fromDate,\n    toDate,\n    disabledDays,\n    formatDate = defaultFormatDate,\n    locale,\n    className,\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const placeholder = placeholderProp ?? strings.datePicker.pickDate;\n  const fieldId = useId();\n  const [open, setOpen] = useState(false);\n  const bounds = useBounds(fromDate, toDate, disabledDays);\n\n  return (\n    <div ref={ref} className={cn(className)}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        <PickerTrigger\n          label={label}\n          placeholder={placeholder}\n          hasValue={Boolean(value)}\n          error={error}\n          fieldId={fieldId}\n          disabled={disabled}\n          open={open}\n        >\n          {value ? formatDate(value) : ''}\n        </PickerTrigger>\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            id={`${fieldId}-calendar`}\n            align=\"start\"\n            sideOffset={4}\n            className=\"text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-lg\"\n          >\n            <Calendar\n              mode=\"single\"\n              selected={value}\n              onSelect={(d) => {\n                onChange(d ?? undefined);\n                if (d) setOpen(false);\n              }}\n              startMonth={fromDate}\n              endMonth={toDate}\n              disabled={bounds}\n              locale={locale}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    </div>\n  );\n});\nDatePicker.displayName = 'DatePicker';\n\nexport interface DateRangePickerProps extends PickerCommonProps {\n  value?: DateRange;\n  onChange: (range: DateRange | undefined) => void;\n}\n\n/**\n * Two-date range picker. `value` is `{from, to}`.\n *\n * @example\n *   <DateRangePicker label=\"Reporting period\" value={range} onChange={setRange} />\n */\nexport const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(\n  function DateRangePicker(\n    {\n      value,\n      onChange,\n      label,\n      placeholder: placeholderProp,\n      error,\n      disabled,\n      fromDate,\n      toDate,\n      disabledDays,\n      formatDate = defaultFormatDate,\n      locale,\n      className,\n    },\n    ref,\n  ) {\n    const strings = useStrings();\n    const placeholder = placeholderProp ?? strings.datePicker.pickRange;\n    const fieldId = useId();\n    const [open, setOpen] = useState(false);\n    const hasValue = Boolean(value?.from);\n    const bounds = useBounds(fromDate, toDate, disabledDays);\n\n    return (\n      <div ref={ref} className={cn(className)}>\n        <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n          <PickerTrigger\n            label={label}\n            placeholder={placeholder}\n            hasValue={hasValue}\n            error={error}\n            fieldId={fieldId}\n            disabled={disabled}\n            open={open}\n          >\n            {value?.from && value.to\n              ? `${formatDate(value.from)} – ${formatDate(value.to)}`\n              : value?.from\n                ? formatDate(value.from)\n                : ''}\n          </PickerTrigger>\n          <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n              id={`${fieldId}-calendar`}\n              align=\"start\"\n              sideOffset={4}\n              className=\"text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-lg\"\n            >\n              <Calendar\n                mode=\"range\"\n                selected={value}\n                onSelect={onChange}\n                numberOfMonths={2}\n                startMonth={fromDate}\n                endMonth={toDate}\n                disabled={bounds}\n                locale={locale}\n              />\n            </PopoverPrimitive.Content>\n          </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n      </div>\n    );\n  },\n);\nDateRangePicker.displayName = 'DateRangePicker';\n"],"names":["defaultFormatDate","d","useBounds","fromDate","toDate","disabled","useMemo","list","PickerTrigger","label","placeholder","hasValue","children","error","fieldId","open","errorId","calendarId","text","jsxs","jsx","PopoverPrimitive","cn","CalendarIcon","DatePicker","forwardRef","value","onChange","placeholderProp","disabledDays","formatDate","locale","className","ref","strings","useStrings","useId","setOpen","useState","bounds","Calendar","DateRangePicker"],"mappings":";;;;;;;;AAmBA,SAASA,EAAkBC,GAAiB;AAC1C,SAAOA,EAAE,mBAAmB,QAAW,EAAE,MAAM,WAAW,OAAO,SAAS,KAAK,WAAW;AAC5F;AAGA,SAASC,EAAUC,GAAiBC,GAAeC,GAAgC;AACjF,SAAOC,EAA+B,MAAM;AAC1C,UAAMC,IAAkB,CAAA;AACxB,WAAIJ,KAAUI,EAAK,KAAK,EAAE,QAAQJ,GAAU,GACxCC,KAAQG,EAAK,KAAK,EAAE,OAAOH,GAAQ,GACnCC,KAAUE,EAAK,KAAK,GAAI,MAAM,QAAQF,CAAQ,IAAIA,IAAW,CAACA,CAAQ,CAAE,GACrEE,EAAK,SAASA,IAAO;AAAA,EAC9B,GAAG,CAACJ,GAAUC,GAAQC,CAAQ,CAAC;AACjC;AAEA,SAASG,EAAc;AAAA,EACrB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAT;AAAA,EACA,MAAAU;AACF,GASG;AACD,QAAMC,IAAU,GAAGF,CAAO,UACpBG,IAAa,GAAGH,CAAO,aACvBI,IAAOP,IAAWC,IAAWF;AACnC,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,IAAAV,uBACE,SAAA,EAAM,SAASK,GAAS,WAAU,uCAChC,UAAAL,GACH;AAAA,IAEF,gBAAAW,EAACC,EAAiB,SAAjB,EAAyB,SAAO,IAC/B,UAAA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIL;AAAA,QACJ,MAAK;AAAA,QAEL,MAAK;AAAA,QACL,iBAAeC;AAAA,QACf,iBAAeE;AAAA,QACf,UAAAZ;AAAA,QACA,gBAAc,EAAQQ,KAAU;AAAA,QAChC,oBAAkBA,IAAQG,IAAU;AAAA,QACpC,WAAWM;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAT,IACI,wEACA;AAAA,UACJ,CAACF,KAAY;AAAA,QAAA;AAAA,QAGf,UAAA;AAAA,UAAA,gBAAAS,EAACG,GAAA,EAAa,WAAU,iCAAgC,eAAW,IAAC;AAAA,UACpE,gBAAAH,EAAC,QAAA,EAAK,WAAU,YAAW,OAAO,OAAOF,KAAS,WAAWA,IAAO,QACjE,UAAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACCL,uBACE,KAAA,EAAE,IAAIG,GAAS,MAAK,SAAQ,WAAU,4BACpC,UAAAH,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAiCO,MAAMW,IAAaC,EAA4C,SACpE;AAAA,EACE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAlB;AAAA,EACA,aAAamB;AAAA,EACb,OAAAf;AAAA,EACA,UAAAR;AAAA,EACA,UAAAF;AAAA,EACA,QAAAC;AAAA,EACA,cAAAyB;AAAA,EACA,YAAAC,IAAa9B;AAAA,EACb,QAAA+B;AAAA,EACA,WAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVzB,IAAckB,KAAmBM,EAAQ,WAAW,UACpDpB,IAAUsB,EAAA,GACV,CAACrB,GAAMsB,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAASrC,EAAUC,GAAUC,GAAQyB,CAAY;AAEvD,SACE,gBAAAT,EAAC,OAAA,EAAI,KAAAa,GAAU,WAAWX,EAAGU,CAAS,GACpC,UAAA,gBAAAb,EAACE,EAAiB,MAAjB,EAAsB,MAAAN,GAAY,cAAcsB,GAC/C,UAAA;AAAA,IAAA,gBAAAjB;AAAA,MAACZ;AAAA,MAAA;AAAA,QACC,OAAAC;AAAA,QACA,aAAAC;AAAA,QACA,UAAU,EAAQgB;AAAA,QAClB,OAAAb;AAAA,QACA,SAAAC;AAAA,QACA,UAAAT;AAAA,QACA,MAAAU;AAAA,QAEC,UAAAW,IAAQI,EAAWJ,CAAK,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAE/B,gBAAAN,EAACC,EAAiB,QAAjB,EACC,UAAA,gBAAAD;AAAA,MAACC,EAAiB;AAAA,MAAjB;AAAA,QACC,IAAI,GAAGP,CAAO;AAAA,QACd,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAU;AAAA,QAEV,UAAA,gBAAAM;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAUd;AAAA,YACV,UAAU,CAACzB,MAAM;AACf,cAAA0B,EAAS1B,KAAK,MAAS,GACnBA,OAAW,EAAK;AAAA,YACtB;AAAA,YACA,YAAYE;AAAA,YACZ,UAAUC;AAAA,YACV,UAAUmC;AAAA,YACV,QAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,EACF,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;AACDP,EAAW,cAAc;AAalB,MAAMiB,IAAkBhB;AAAA,EAC7B,SACE;AAAA,IACE,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAlB;AAAA,IACA,aAAamB;AAAA,IACb,OAAAf;AAAA,IACA,UAAAR;AAAA,IACA,UAAAF;AAAA,IACA,QAAAC;AAAA,IACA,cAAAyB;AAAA,IACA,YAAAC,IAAa9B;AAAA,IACb,QAAA+B;AAAA,IACA,WAAAC;AAAA,EAAA,GAEFC,GACA;AACA,UAAMC,IAAUC,EAAA,GACVzB,IAAckB,KAAmBM,EAAQ,WAAW,WACpDpB,IAAUsB,EAAA,GACV,CAACrB,GAAMsB,CAAO,IAAIC,EAAS,EAAK,GAChC3B,IAAW,GAAQe,KAAA,QAAAA,EAAO,OAC1Ba,IAASrC,EAAUC,GAAUC,GAAQyB,CAAY;AAEvD,WACE,gBAAAT,EAAC,OAAA,EAAI,KAAAa,GAAU,WAAWX,EAAGU,CAAS,GACpC,UAAA,gBAAAb,EAACE,EAAiB,MAAjB,EAAsB,MAAAN,GAAY,cAAcsB,GAC/C,UAAA;AAAA,MAAA,gBAAAjB;AAAA,QAACZ;AAAA,QAAA;AAAA,UACC,OAAAC;AAAA,UACA,aAAAC;AAAA,UACA,UAAAC;AAAA,UACA,OAAAE;AAAA,UACA,SAAAC;AAAA,UACA,UAAAT;AAAA,UACA,MAAAU;AAAA,UAEC,UAAAW,KAAA,QAAAA,EAAO,QAAQA,EAAM,KAClB,GAAGI,EAAWJ,EAAM,IAAI,CAAC,MAAMI,EAAWJ,EAAM,EAAE,CAAC,KACnDA,KAAA,QAAAA,EAAO,OACLI,EAAWJ,EAAM,IAAI,IACrB;AAAA,QAAA;AAAA,MAAA;AAAA,MAER,gBAAAN,EAACC,EAAiB,QAAjB,EACC,UAAA,gBAAAD;AAAA,QAACC,EAAiB;AAAA,QAAjB;AAAA,UACC,IAAI,GAAGP,CAAO;AAAA,UACd,OAAM;AAAA,UACN,YAAY;AAAA,UACZ,WAAU;AAAA,UAEV,UAAA,gBAAAM;AAAA,YAACoB;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAUd;AAAA,cACV,UAAUC;AAAA,cACV,gBAAgB;AAAA,cAChB,YAAYxB;AAAA,cACZ,UAAUC;AAAA,cACV,UAAUmC;AAAA,cACV,QAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,EACF,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACF;AACAU,EAAgB,cAAc;"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/ui/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useMemo, useState, type ReactNode } from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport type { DateRange, DayPickerProps, Matcher } from 'react-day-picker';\nimport { Calendar as CalendarIcon } from '@/icons';\nimport { Calendar } from './Calendar';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/* -----------------------------------------------------------------------------\n *  Two related components share the same trigger shell:\n *\n *    <DatePicker value={date} onChange={setDate} />        // single date\n *    <DateRangePicker value={range} onChange={setRange} /> // {from,to}\n * --------------------------------------------------------------------------- */\n\ntype CalendarLocale = DayPickerProps['locale'];\n\n/**\n * Default trigger text. With a date-fns `locale` the date is rendered in that\n * locale; without one it is the canonical `yyyy-MM-dd` — deterministic on\n * server and client, so SSR output never depends on the host's locale.\n */\nfunction defaultFormatDate(d: Date, locale?: CalendarLocale): string {\n  if (locale?.code) {\n    return d.toLocaleDateString(locale.code, { year: 'numeric', month: 'short', day: 'numeric' });\n  }\n  const pad = (n: number) => String(n).padStart(2, '0');\n  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;\n}\n\n/** Merge the fromDate/toDate bounds with any consumer-supplied RDP matcher. */\nfunction useBounds(fromDate?: Date, toDate?: Date, disabled?: Matcher | Matcher[]) {\n  return useMemo<Matcher[] | undefined>(() => {\n    const list: Matcher[] = [];\n    if (fromDate) list.push({ before: fromDate });\n    if (toDate) list.push({ after: toDate });\n    if (disabled) list.push(...(Array.isArray(disabled) ? disabled : [disabled]));\n    return list.length ? list : undefined;\n  }, [fromDate, toDate, disabled]);\n}\n\nfunction PickerTrigger({\n  label,\n  placeholder,\n  hasValue,\n  children,\n  error,\n  fieldId,\n  disabled,\n  open,\n}: {\n  label?: ReactNode;\n  placeholder: string;\n  hasValue: boolean;\n  children: ReactNode;\n  error?: ReactNode;\n  fieldId: string;\n  disabled?: boolean;\n  open: boolean;\n}) {\n  const errorId = `${fieldId}-error`;\n  const calendarId = `${fieldId}-calendar`;\n  const text = hasValue ? children : placeholder;\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <label\n          id={`${fieldId}-label`}\n          htmlFor={fieldId}\n          className=\"text-foreground text-sm font-medium\"\n        >\n          {label}\n        </label>\n      )}\n      <PopoverPrimitive.Trigger asChild>\n        <button\n          id={fieldId}\n          type=\"button\"\n          // combobox-with-dialog pattern: lets the field carry aria-invalid like other inputs.\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={calendarId}\n          // role=combobox takes no name from content; expose the placeholder.\n          aria-labelledby={label ? `${fieldId}-label` : undefined}\n          aria-label={label ? undefined : placeholder}\n          disabled={disabled}\n          aria-invalid={Boolean(error) || undefined}\n          aria-describedby={error ? errorId : undefined}\n          className={cn(\n            'bg-card inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 text-left text-lg md:text-sm',\n            'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n            'focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            error\n              ? 'border-danger focus-visible:border-danger focus-visible:ring-danger'\n              : 'border-border-input focus-visible:border-accent focus-visible:ring-ring',\n            !hasValue && 'text-foreground-subtle',\n          )}\n        >\n          <CalendarIcon className=\"text-foreground-subtle size-4\" aria-hidden />\n          <span className=\"truncate\" title={typeof text === 'string' ? text : undefined}>\n            {text}\n          </span>\n        </button>\n      </PopoverPrimitive.Trigger>\n      {error && (\n        <p id={errorId} className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n\ninterface PickerCommonProps {\n  label?: ReactNode;\n  placeholder?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  /** Restrict to a date range. Days outside are not selectable. */\n  fromDate?: Date;\n  toDate?: Date;\n  /** Extra RDP matcher(s) for disabled days, merged with `fromDate`/`toDate`. */\n  disabledDays?: Matcher | Matcher[];\n  /** Custom display formatter for the trigger text. */\n  formatDate?: (d: Date) => string;\n  /** date-fns locale object passed through to react-day-picker. */\n  locale?: CalendarLocale;\n  className?: string;\n}\n\nexport interface DatePickerProps extends PickerCommonProps {\n  value?: Date;\n  onChange: (date: Date | undefined) => void;\n}\n\n/**\n * Single-date picker.\n *\n * @example\n *   <DatePicker label=\"Date of birth\" value={dob} onChange={setDob} />\n *\n * @do Use locale-aware formatting via `formatDate` / `locale`.\n * @dont Roll a custom calendar — Radix Popover + react-day-picker handles a11y.\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker(\n  {\n    value,\n    onChange,\n    label,\n    placeholder: placeholderProp,\n    error,\n    disabled,\n    fromDate,\n    toDate,\n    disabledDays,\n    formatDate: formatDateProp,\n    locale,\n    className,\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const formatDate = formatDateProp ?? ((d: Date) => defaultFormatDate(d, locale));\n  const placeholder = placeholderProp ?? strings.datePicker.pickDate;\n  const fieldId = useId();\n  const [open, setOpen] = useState(false);\n  const bounds = useBounds(fromDate, toDate, disabledDays);\n\n  return (\n    <div ref={ref} className={cn(className)}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        <PickerTrigger\n          label={label}\n          placeholder={placeholder}\n          hasValue={Boolean(value)}\n          error={error}\n          fieldId={fieldId}\n          disabled={disabled}\n          open={open}\n        >\n          {value ? formatDate(value) : ''}\n        </PickerTrigger>\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            id={`${fieldId}-calendar`}\n            // Radix gives the popover role=\"dialog\"; name it after the field.\n            aria-labelledby={label ? `${fieldId}-label` : undefined}\n            aria-label={label ? undefined : placeholder}\n            align=\"start\"\n            sideOffset={4}\n            className=\"text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-md\"\n          >\n            <Calendar\n              mode=\"single\"\n              selected={value}\n              // RDP 9 ignores `selected` for the initial month; open on the value.\n              defaultMonth={value}\n              onSelect={(d) => {\n                onChange(d ?? undefined);\n                if (d) setOpen(false);\n              }}\n              startMonth={fromDate}\n              endMonth={toDate}\n              disabled={bounds}\n              locale={locale}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    </div>\n  );\n});\nDatePicker.displayName = 'DatePicker';\n\nexport interface DateRangePickerProps extends PickerCommonProps {\n  value?: DateRange;\n  onChange: (range: DateRange | undefined) => void;\n}\n\n/**\n * Two-date range picker. `value` is `{from, to}`.\n *\n * @example\n *   <DateRangePicker label=\"Reporting period\" value={range} onChange={setRange} />\n */\nexport const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(\n  function DateRangePicker(\n    {\n      value,\n      onChange,\n      label,\n      placeholder: placeholderProp,\n      error,\n      disabled,\n      fromDate,\n      toDate,\n      disabledDays,\n      formatDate: formatDateProp,\n      locale,\n      className,\n    },\n    ref,\n  ) {\n    const strings = useStrings();\n    const formatDate = formatDateProp ?? ((d: Date) => defaultFormatDate(d, locale));\n    const placeholder = placeholderProp ?? strings.datePicker.pickRange;\n    const fieldId = useId();\n    const [open, setOpen] = useState(false);\n    const hasValue = Boolean(value?.from);\n    const bounds = useBounds(fromDate, toDate, disabledDays);\n\n    return (\n      <div ref={ref} className={cn(className)}>\n        <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n          <PickerTrigger\n            label={label}\n            placeholder={placeholder}\n            hasValue={hasValue}\n            error={error}\n            fieldId={fieldId}\n            disabled={disabled}\n            open={open}\n          >\n            {value?.from && value.to\n              ? `${formatDate(value.from)} – ${formatDate(value.to)}`\n              : value?.from\n                ? formatDate(value.from)\n                : ''}\n          </PickerTrigger>\n          <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n              id={`${fieldId}-calendar`}\n              aria-labelledby={label ? `${fieldId}-label` : undefined}\n              aria-label={label ? undefined : placeholder}\n              align=\"start\"\n              sideOffset={4}\n              className=\"text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-md\"\n            >\n              <Calendar\n                mode=\"range\"\n                selected={value}\n                defaultMonth={value?.from}\n                onSelect={onChange}\n                numberOfMonths={2}\n                startMonth={fromDate}\n                endMonth={toDate}\n                disabled={bounds}\n                locale={locale}\n              />\n            </PopoverPrimitive.Content>\n          </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n      </div>\n    );\n  },\n);\nDateRangePicker.displayName = 'DateRangePicker';\n"],"names":["defaultFormatDate","d","locale","pad","n","useBounds","fromDate","toDate","disabled","useMemo","list","PickerTrigger","label","placeholder","hasValue","children","error","fieldId","open","errorId","calendarId","text","jsxs","jsx","PopoverPrimitive","cn","CalendarIcon","DatePicker","forwardRef","value","onChange","placeholderProp","disabledDays","formatDateProp","className","ref","strings","useStrings","formatDate","useId","setOpen","useState","bounds","Calendar","DateRangePicker"],"mappings":";;;;;;;;AAwBA,SAASA,EAAkBC,GAASC,GAAiC;AACnE,MAAIA,KAAA,QAAAA,EAAQ;AACV,WAAOD,EAAE,mBAAmBC,EAAO,MAAM,EAAE,MAAM,WAAW,OAAO,SAAS,KAAK,UAAA,CAAW;AAE9F,QAAMC,IAAM,CAACC,MAAc,OAAOA,CAAC,EAAE,SAAS,GAAG,GAAG;AACpD,SAAO,GAAGH,EAAE,YAAA,CAAa,IAAIE,EAAIF,EAAE,SAAA,IAAa,CAAC,CAAC,IAAIE,EAAIF,EAAE,QAAA,CAAS,CAAC;AACxE;AAGA,SAASI,EAAUC,GAAiBC,GAAeC,GAAgC;AACjF,SAAOC,EAA+B,MAAM;AAC1C,UAAMC,IAAkB,CAAA;AACxB,WAAIJ,KAAUI,EAAK,KAAK,EAAE,QAAQJ,GAAU,GACxCC,KAAQG,EAAK,KAAK,EAAE,OAAOH,GAAQ,GACnCC,KAAUE,EAAK,KAAK,GAAI,MAAM,QAAQF,CAAQ,IAAIA,IAAW,CAACA,CAAQ,CAAE,GACrEE,EAAK,SAASA,IAAO;AAAA,EAC9B,GAAG,CAACJ,GAAUC,GAAQC,CAAQ,CAAC;AACjC;AAEA,SAASG,EAAc;AAAA,EACrB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAT;AAAA,EACA,MAAAU;AACF,GASG;AACD,QAAMC,IAAU,GAAGF,CAAO,UACpBG,IAAa,GAAGH,CAAO,aACvBI,IAAOP,IAAWC,IAAWF;AACnC,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,IAAAV,KACC,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAGN,CAAO;AAAA,QACd,SAASA;AAAA,QACT,WAAU;AAAA,QAET,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,IAGL,gBAAAW,EAACC,EAAiB,SAAjB,EAAyB,SAAO,IAC/B,UAAA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIL;AAAA,QACJ,MAAK;AAAA,QAEL,MAAK;AAAA,QACL,iBAAeC;AAAA,QACf,iBAAeE;AAAA,QAEf,mBAAiBR,IAAQ,GAAGK,CAAO,WAAW;AAAA,QAC9C,cAAYL,IAAQ,SAAYC;AAAA,QAChC,UAAAL;AAAA,QACA,gBAAc,EAAQQ,KAAU;AAAA,QAChC,oBAAkBA,IAAQG,IAAU;AAAA,QACpC,WAAWM;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAT,IACI,wEACA;AAAA,UACJ,CAACF,KAAY;AAAA,QAAA;AAAA,QAGf,UAAA;AAAA,UAAA,gBAAAS,EAACG,GAAA,EAAa,WAAU,iCAAgC,eAAW,IAAC;AAAA,UACpE,gBAAAH,EAAC,QAAA,EAAK,WAAU,YAAW,OAAO,OAAOF,KAAS,WAAWA,IAAO,QACjE,UAAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACCL,KACC,gBAAAO,EAAC,KAAA,EAAE,IAAIJ,GAAS,WAAU,4BACvB,UAAAH,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAiCO,MAAMW,IAAaC,EAA4C,SACpE;AAAA,EACE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAlB;AAAA,EACA,aAAamB;AAAA,EACb,OAAAf;AAAA,EACA,UAAAR;AAAA,EACA,UAAAF;AAAA,EACA,QAAAC;AAAA,EACA,cAAAyB;AAAA,EACA,YAAYC;AAAA,EACZ,QAAA/B;AAAA,EACA,WAAAgC;AACF,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAaL,MAAmB,CAAChC,MAAYD,EAAkBC,GAAGC,CAAM,IACxEW,IAAckB,KAAmBK,EAAQ,WAAW,UACpDnB,IAAUsB,EAAA,GACV,CAACrB,GAAMsB,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAASrC,EAAUC,GAAUC,GAAQyB,CAAY;AAEvD,SACE,gBAAAT,EAAC,OAAA,EAAI,KAAAY,GAAU,WAAWV,EAAGS,CAAS,GACpC,UAAA,gBAAAZ,EAACE,EAAiB,MAAjB,EAAsB,MAAAN,GAAY,cAAcsB,GAC/C,UAAA;AAAA,IAAA,gBAAAjB;AAAA,MAACZ;AAAA,MAAA;AAAA,QACC,OAAAC;AAAA,QACA,aAAAC;AAAA,QACA,UAAU,EAAQgB;AAAA,QAClB,OAAAb;AAAA,QACA,SAAAC;AAAA,QACA,UAAAT;AAAA,QACA,MAAAU;AAAA,QAEC,UAAAW,IAAQS,EAAWT,CAAK,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAE/B,gBAAAN,EAACC,EAAiB,QAAjB,EACC,UAAA,gBAAAD;AAAA,MAACC,EAAiB;AAAA,MAAjB;AAAA,QACC,IAAI,GAAGP,CAAO;AAAA,QAEd,mBAAiBL,IAAQ,GAAGK,CAAO,WAAW;AAAA,QAC9C,cAAYL,IAAQ,SAAYC;AAAA,QAChC,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAU;AAAA,QAEV,UAAA,gBAAAU;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAUd;AAAA,YAEV,cAAcA;AAAA,YACd,UAAU,CAAC5B,MAAM;AACf,cAAA6B,EAAS7B,KAAK,MAAS,GACnBA,OAAW,EAAK;AAAA,YACtB;AAAA,YACA,YAAYK;AAAA,YACZ,UAAUC;AAAA,YACV,UAAUmC;AAAA,YACV,QAAAxC;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,EACF,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;AACDyB,EAAW,cAAc;AAalB,MAAMiB,IAAkBhB;AAAA,EAC7B,SACE;AAAA,IACE,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAlB;AAAA,IACA,aAAamB;AAAA,IACb,OAAAf;AAAA,IACA,UAAAR;AAAA,IACA,UAAAF;AAAA,IACA,QAAAC;AAAA,IACA,cAAAyB;AAAA,IACA,YAAYC;AAAA,IACZ,QAAA/B;AAAA,IACA,WAAAgC;AAAA,EAAA,GAEFC,GACA;AACA,UAAMC,IAAUC,EAAA,GACVC,IAAaL,MAAmB,CAAChC,MAAYD,EAAkBC,GAAGC,CAAM,IACxEW,IAAckB,KAAmBK,EAAQ,WAAW,WACpDnB,IAAUsB,EAAA,GACV,CAACrB,GAAMsB,CAAO,IAAIC,EAAS,EAAK,GAChC3B,IAAW,GAAQe,KAAA,QAAAA,EAAO,OAC1Ba,IAASrC,EAAUC,GAAUC,GAAQyB,CAAY;AAEvD,WACE,gBAAAT,EAAC,OAAA,EAAI,KAAAY,GAAU,WAAWV,EAAGS,CAAS,GACpC,UAAA,gBAAAZ,EAACE,EAAiB,MAAjB,EAAsB,MAAAN,GAAY,cAAcsB,GAC/C,UAAA;AAAA,MAAA,gBAAAjB;AAAA,QAACZ;AAAA,QAAA;AAAA,UACC,OAAAC;AAAA,UACA,aAAAC;AAAA,UACA,UAAAC;AAAA,UACA,OAAAE;AAAA,UACA,SAAAC;AAAA,UACA,UAAAT;AAAA,UACA,MAAAU;AAAA,UAEC,UAAAW,KAAA,QAAAA,EAAO,QAAQA,EAAM,KAClB,GAAGS,EAAWT,EAAM,IAAI,CAAC,MAAMS,EAAWT,EAAM,EAAE,CAAC,KACnDA,KAAA,QAAAA,EAAO,OACLS,EAAWT,EAAM,IAAI,IACrB;AAAA,QAAA;AAAA,MAAA;AAAA,MAER,gBAAAN,EAACC,EAAiB,QAAjB,EACC,UAAA,gBAAAD;AAAA,QAACC,EAAiB;AAAA,QAAjB;AAAA,UACC,IAAI,GAAGP,CAAO;AAAA,UACd,mBAAiBL,IAAQ,GAAGK,CAAO,WAAW;AAAA,UAC9C,cAAYL,IAAQ,SAAYC;AAAA,UAChC,OAAM;AAAA,UACN,YAAY;AAAA,UACZ,WAAU;AAAA,UAEV,UAAA,gBAAAU;AAAA,YAACoB;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAUd;AAAA,cACV,cAAcA,KAAA,gBAAAA,EAAO;AAAA,cACrB,UAAUC;AAAA,cACV,gBAAgB;AAAA,cAChB,YAAYxB;AAAA,cACZ,UAAUC;AAAA,cACV,UAAUmC;AAAA,cACV,QAAAxC;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,EACF,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACF;AACA0C,EAAgB,cAAc;"}

package/dist-lib/components/ui/DesignSystemProvider.d.ts

@@ -16,9 +16,21 @@ import { DeepPartial, UiStrings } from '../../lib/strings.js';
  *   </DesignSystemProvider>
  */
 export type BrandTokens = Record<string, string>;
+/**
+ * Mode-aware token overrides: `light` applies always, `dark` wins under the
+ * `.dark` class (on `<html>` or any ancestor). Use this for anything with a
+ * different value per mode — accent, subtle surfaces, ring.
+ */
+export interface BrandTokenPair {
+    light: BrandTokens;
+    dark?: BrandTokens;
+}
 export interface DesignSystemProviderProps extends HTMLAttributes<HTMLDivElement> {
-    /** Token overrides (CSS variable name → value). */
-    tokens?: BrandTokens;
+    /**
+     * Token overrides (CSS variable name → value). A flat record applies in both
+     * modes; a `{ light, dark }` pair applies `dark` under `.dark`.
+     */
+    tokens?: BrandTokens | BrandTokenPair;
     /**
      * Override any of the library's built-in UI strings (aria-labels,
      * placeholders, empty states). Partial — merged over the parent provider /
@@ -33,61 +45,103 @@ export declare function DesignSystemProvider({ tokens, strings, className, child
  * Built-in accent presets — swap the system's single accent colour without
  * touching anything else.
  *
- * These override the *semantic* tokens the utilities resolve to. globals.css
+ * These override the *semantic* tokens the utilities resolve to. theme.css
  * maps the accent utilities with `@theme inline` (e.g. `bg-accent` →
  * `var(--accent)`, `bg-accent-soft` → `var(--accent-subtle)`), so the override
  * must target `--accent` / `--accent-subtle` / `--accent-subtle-foreground` /
  * `--ring` — NOT `--color-accent` (which `inline` never emits). The hover/
  * active steps (`--color-accent-700/800`) come from the raw palette and are
- * overridden directly. `default` is the built-in graphite-indigo.
+ * mode-agnostic. Values mirror the `[data-accent]` presets in theme.css: the
+ * dark half lifts the accent to the 400 step (readable as text on neutral-950)
+ * and darkens the subtle surface. `default` is the built-in graphite-indigo.
  */
 export declare const brandPresets: {
     /** The library default — graphite indigo. */
-    readonly default: BrandTokens;
+    default: BrandTokenPair;
     /** Blue. */
-    readonly blue: {
-        readonly accent: "oklch(0.55 0.16 250)";
-        readonly 'color-accent-700': "oklch(0.47 0.16 250)";
-        readonly 'color-accent-800': "oklch(0.39 0.14 250)";
-        readonly 'accent-subtle': "oklch(0.95 0.04 250)";
-        readonly 'accent-subtle-foreground': "oklch(0.45 0.15 250)";
-        readonly ring: "oklch(0.62 0.16 250)";
+    blue: {
+        light: {
+            accent: string;
+            'color-accent-700': string;
+            'color-accent-800': string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
+        dark: {
+            accent: string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
     };
     /** Violet. */
-    readonly violet: {
-        readonly accent: "oklch(0.53 0.20 295)";
-        readonly 'color-accent-700': "oklch(0.45 0.18 295)";
-        readonly 'color-accent-800': "oklch(0.38 0.16 295)";
-        readonly 'accent-subtle': "oklch(0.95 0.04 295)";
-        readonly 'accent-subtle-foreground': "oklch(0.45 0.18 295)";
-        readonly ring: "oklch(0.60 0.20 295)";
+    violet: {
+        light: {
+            accent: string;
+            'color-accent-700': string;
+            'color-accent-800': string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
+        dark: {
+            accent: string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
     };
     /** Emerald. */
-    readonly emerald: {
-        readonly accent: "oklch(0.55 0.13 160)";
-        readonly 'color-accent-700': "oklch(0.47 0.13 160)";
-        readonly 'color-accent-800': "oklch(0.39 0.12 160)";
-        readonly 'accent-subtle': "oklch(0.95 0.04 160)";
-        readonly 'accent-subtle-foreground': "oklch(0.42 0.12 160)";
-        readonly ring: "oklch(0.60 0.13 160)";
+    emerald: {
+        light: {
+            accent: string;
+            'color-accent-700': string;
+            'color-accent-800': string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
+        dark: {
+            accent: string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
     };
     /** Rose. */
-    readonly rose: {
-        readonly accent: "oklch(0.57 0.19 12)";
-        readonly 'color-accent-700': "oklch(0.49 0.18 12)";
-        readonly 'color-accent-800': "oklch(0.41 0.16 12)";
-        readonly 'accent-subtle': "oklch(0.95 0.035 12)";
-        readonly 'accent-subtle-foreground': "oklch(0.48 0.18 12)";
-        readonly ring: "oklch(0.62 0.19 12)";
+    rose: {
+        light: {
+            accent: string;
+            'color-accent-700': string;
+            'color-accent-800': string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
+        dark: {
+            accent: string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
     };
     /** Amber. */
-    readonly amber: {
-        readonly accent: "oklch(0.62 0.14 65)";
-        readonly 'color-accent-700': "oklch(0.54 0.13 65)";
-        readonly 'color-accent-800': "oklch(0.46 0.12 65)";
-        readonly 'accent-subtle': "oklch(0.95 0.05 75)";
-        readonly 'accent-subtle-foreground': "oklch(0.48 0.12 65)";
-        readonly ring: "oklch(0.66 0.14 65)";
+    amber: {
+        light: {
+            accent: string;
+            'color-accent-700': string;
+            'color-accent-800': string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
+        dark: {
+            accent: string;
+            'accent-subtle': string;
+            'accent-subtle-foreground': string;
+            ring: string;
+        };
     };
 };
 export type BrandName = keyof typeof brandPresets;

package/dist-lib/components/ui/DesignSystemProvider.js

@@ -1,79 +1,135 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as g } from "react";
-import { cn as m } from "../../lib/utils.js";
-import { useStrings as b, StringsContext as d } from "../../hooks/use-strings.js";
-import { mergeStrings as f } from "../../lib/strings.js";
-function P({
-  tokens: o,
+import { jsxs as f, jsx as h } from "react/jsx-runtime";
+import { useMemo as m, useId as p } from "react";
+import { cn as $ } from "../../lib/utils.js";
+import { useStrings as v, StringsContext as j } from "../../hooks/use-strings.js";
+import { mergeStrings as y } from "../../lib/strings.js";
+function S(c) {
+  return "light" in c && typeof c.light == "object";
+}
+function s(c) {
+  return Object.entries(c).map(([e, l]) => `${e.startsWith("--") ? e : `--${e}`}:${l}`).join(";");
+}
+function W({
+  tokens: c,
   strings: e,
-  className: n,
-  children: s,
-  style: a,
-  ...h
+  className: l,
+  children: k,
+  style: i,
+  ...u
 }) {
-  const t = b(), k = g(
-    () => f(t, e),
-    [t, e]
-  ), l = { ...a };
-  if (o)
-    for (const [c, i] of Object.entries(o)) {
-      const u = c.startsWith("--") ? c : `--${c}`;
-      l[u] = i;
-    }
-  return /* @__PURE__ */ r(d.Provider, { value: k, children: /* @__PURE__ */ r("div", { "data-brand-scope": !0, className: m("contents", n), style: l, ...h, children: s }) });
+  const r = v(), d = m(
+    () => y(r, e),
+    [r, e]
+  ), n = p(), a = { ...i };
+  let t = null;
+  if (c)
+    if (S(c)) {
+      const o = `[data-brand-scope="${n}"]`;
+      t = `${o}{${s(c.light)}}`, c.dark && (t += `.dark ${o},.dark${o}{${s(c.dark)}}`);
+    } else
+      for (const [o, g] of Object.entries(c)) {
+        const b = o.startsWith("--") ? o : `--${o}`;
+        a[b] = g;
+      }
+  return /* @__PURE__ */ f(j.Provider, { value: d, children: [
+    t && /* @__PURE__ */ h("style", { "data-brand-scope-style": n, children: t }),
+    /* @__PURE__ */ h("div", { "data-brand-scope": n, className: $("contents", l), style: a, ...u, children: k })
+  ] });
 }
-const j = {
+const C = {
   /** The library default — graphite indigo. */
-  default: {},
+  default: { light: {} },
   /** Blue. */
   blue: {
-    accent: "oklch(0.55 0.16 250)",
-    "color-accent-700": "oklch(0.47 0.16 250)",
-    "color-accent-800": "oklch(0.39 0.14 250)",
-    "accent-subtle": "oklch(0.95 0.04 250)",
-    "accent-subtle-foreground": "oklch(0.45 0.15 250)",
-    ring: "oklch(0.62 0.16 250)"
+    light: {
+      accent: "oklch(0.55 0.16 250)",
+      "color-accent-700": "oklch(0.47 0.16 250)",
+      "color-accent-800": "oklch(0.39 0.14 250)",
+      "accent-subtle": "oklch(0.96 0.03 250)",
+      "accent-subtle-foreground": "oklch(0.45 0.15 250)",
+      ring: "oklch(0.62 0.16 250)"
+    },
+    dark: {
+      accent: "oklch(0.64 0.15 250)",
+      "accent-subtle": "oklch(0.24 0.06 250)",
+      "accent-subtle-foreground": "oklch(0.82 0.1 250)",
+      ring: "oklch(0.68 0.15 250)"
+    }
   },
   /** Violet. */
   violet: {
-    accent: "oklch(0.53 0.20 295)",
-    "color-accent-700": "oklch(0.45 0.18 295)",
-    "color-accent-800": "oklch(0.38 0.16 295)",
-    "accent-subtle": "oklch(0.95 0.04 295)",
-    "accent-subtle-foreground": "oklch(0.45 0.18 295)",
-    ring: "oklch(0.60 0.20 295)"
+    light: {
+      accent: "oklch(0.53 0.20 295)",
+      "color-accent-700": "oklch(0.45 0.18 295)",
+      "color-accent-800": "oklch(0.38 0.16 295)",
+      "accent-subtle": "oklch(0.96 0.03 295)",
+      "accent-subtle-foreground": "oklch(0.46 0.18 295)",
+      ring: "oklch(0.60 0.20 295)"
+    },
+    dark: {
+      accent: "oklch(0.64 0.18 295)",
+      "accent-subtle": "oklch(0.25 0.07 295)",
+      "accent-subtle-foreground": "oklch(0.83 0.12 295)",
+      ring: "oklch(0.68 0.18 295)"
+    }
   },
   /** Emerald. */
   emerald: {
-    accent: "oklch(0.55 0.13 160)",
-    "color-accent-700": "oklch(0.47 0.13 160)",
-    "color-accent-800": "oklch(0.39 0.12 160)",
-    "accent-subtle": "oklch(0.95 0.04 160)",
-    "accent-subtle-foreground": "oklch(0.42 0.12 160)",
-    ring: "oklch(0.60 0.13 160)"
+    light: {
+      accent: "oklch(0.55 0.13 160)",
+      "color-accent-700": "oklch(0.47 0.13 160)",
+      "color-accent-800": "oklch(0.39 0.12 160)",
+      "accent-subtle": "oklch(0.96 0.03 160)",
+      "accent-subtle-foreground": "oklch(0.42 0.12 160)",
+      ring: "oklch(0.60 0.13 160)"
+    },
+    dark: {
+      accent: "oklch(0.64 0.14 160)",
+      "accent-subtle": "oklch(0.23 0.05 160)",
+      "accent-subtle-foreground": "oklch(0.8 0.12 160)",
+      ring: "oklch(0.68 0.14 160)"
+    }
   },
   /** Rose. */
   rose: {
-    accent: "oklch(0.57 0.19 12)",
-    "color-accent-700": "oklch(0.49 0.18 12)",
-    "color-accent-800": "oklch(0.41 0.16 12)",
-    "accent-subtle": "oklch(0.95 0.035 12)",
-    "accent-subtle-foreground": "oklch(0.48 0.18 12)",
-    ring: "oklch(0.62 0.19 12)"
+    light: {
+      accent: "oklch(0.57 0.19 12)",
+      "color-accent-700": "oklch(0.49 0.18 12)",
+      "color-accent-800": "oklch(0.41 0.16 12)",
+      "accent-subtle": "oklch(0.96 0.03 12)",
+      "accent-subtle-foreground": "oklch(0.48 0.18 12)",
+      ring: "oklch(0.62 0.19 12)"
+    },
+    dark: {
+      accent: "oklch(0.65 0.18 12)",
+      "accent-subtle": "oklch(0.25 0.07 12)",
+      "accent-subtle-foreground": "oklch(0.83 0.12 12)",
+      ring: "oklch(0.7 0.18 12)"
+    }
   },
   /** Amber. */
   amber: {
-    accent: "oklch(0.62 0.14 65)",
-    "color-accent-700": "oklch(0.54 0.13 65)",
-    "color-accent-800": "oklch(0.46 0.12 65)",
-    "accent-subtle": "oklch(0.95 0.05 75)",
-    "accent-subtle-foreground": "oklch(0.48 0.12 65)",
-    ring: "oklch(0.66 0.14 65)"
+    light: {
+      // 0.56 keeps white text at 4.8:1 (0.62 was 3.8:1).
+      accent: "oklch(0.56 0.14 65)",
+      "color-accent-700": "oklch(0.54 0.13 65)",
+      "color-accent-800": "oklch(0.46 0.12 65)",
+      "accent-subtle": "oklch(0.96 0.04 75)",
+      "accent-subtle-foreground": "oklch(0.48 0.12 65)",
+      ring: "oklch(0.64 0.14 65)"
+      // 3.17:1 on background-muted (0.66 was 2.93)
+    },
+    dark: {
+      accent: "oklch(0.66 0.14 65)",
+      "accent-subtle": "oklch(0.26 0.05 70)",
+      "accent-subtle-foreground": "oklch(0.85 0.12 80)",
+      ring: "oklch(0.72 0.14 65)"
+    }
   }
 };
 export {
-  P as DesignSystemProvider,
-  j as brandPresets
+  W as DesignSystemProvider,
+  C as brandPresets
 };
 //# sourceMappingURL=DesignSystemProvider.js.map

package/dist-lib/components/ui/DesignSystemProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DesignSystemProvider.js","sources":["../../../src/components/ui/DesignSystemProvider.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport { StringsContext, useStrings } from '@/hooks/use-strings';\nimport { mergeStrings, type DeepPartial, type UiStrings } from '@/lib/strings';\n\n/**\n * Per-brand token overrides. Keys are CSS variable names (without the `--`\n * prefix); values are CSS values. Any unspecified token falls back to the\n * design system default.\n *\n * @example\n *   <DesignSystemProvider tokens={{ accent: '#ff5555', 'radius-md': '10px' }}>\n *     <App />\n *   </DesignSystemProvider>\n *\n * @example Swap in one of the built-in accent presets\n *   <DesignSystemProvider tokens={brandPresets.violet}>\n *     <Card>...</Card>\n *   </DesignSystemProvider>\n */\nexport type BrandTokens = Record<string, string>;\n\nexport interface DesignSystemProviderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Token overrides (CSS variable name → value). */\n  tokens?: BrandTokens;\n  /**\n   * Override any of the library's built-in UI strings (aria-labels,\n   * placeholders, empty states). Partial — merged over the parent provider /\n   * English defaults. Pass `mnStrings` for Mongolian.\n   */\n  strings?: DeepPartial<UiStrings>;\n  /** Children to scope this brand to. */\n  children: ReactNode;\n}\n\nexport function DesignSystemProvider({\n  tokens,\n  strings,\n  className,\n  children,\n  style,\n  ...props\n}: DesignSystemProviderProps) {\n  // Build the inline style from tokens — wrapping every key with `--` so\n  // consumers can pass either `accent` or `color-accent` without remembering\n  // the prefix dance.\n  const parentStrings = useStrings();\n  const resolvedStrings = useMemo(\n    () => mergeStrings(parentStrings, strings),\n    [parentStrings, strings],\n  );\n  const css: CSSProperties = { ...style };\n  if (tokens) {\n    for (const [k, v] of Object.entries(tokens)) {\n      const key = k.startsWith('--') ? k : `--${k}`;\n      (css as Record<string, string>)[key] = v;\n    }\n  }\n\n  return (\n    <StringsContext.Provider value={resolvedStrings}>\n      <div data-brand-scope className={cn('contents', className)} style={css} {...props}>\n        {children}\n      </div>\n    </StringsContext.Provider>\n  );\n}\n\n/**\n * Built-in accent presets — swap the system's single accent colour without\n * touching anything else.\n *\n * These override the *semantic* tokens the utilities resolve to. globals.css\n * maps the accent utilities with `@theme inline` (e.g. `bg-accent` →\n * `var(--accent)`, `bg-accent-soft` → `var(--accent-subtle)`), so the override\n * must target `--accent` / `--accent-subtle` / `--accent-subtle-foreground` /\n * `--ring` — NOT `--color-accent` (which `inline` never emits). The hover/\n * active steps (`--color-accent-700/800`) come from the raw palette and are\n * overridden directly. `default` is the built-in graphite-indigo.\n */\nexport const brandPresets = {\n  /** The library default — graphite indigo. */\n  default: {} as BrandTokens,\n  /** Blue. */\n  blue: {\n    accent: 'oklch(0.55 0.16 250)',\n    'color-accent-700': 'oklch(0.47 0.16 250)',\n    'color-accent-800': 'oklch(0.39 0.14 250)',\n    'accent-subtle': 'oklch(0.95 0.04 250)',\n    'accent-subtle-foreground': 'oklch(0.45 0.15 250)',\n    ring: 'oklch(0.62 0.16 250)',\n  },\n  /** Violet. */\n  violet: {\n    accent: 'oklch(0.53 0.20 295)',\n    'color-accent-700': 'oklch(0.45 0.18 295)',\n    'color-accent-800': 'oklch(0.38 0.16 295)',\n    'accent-subtle': 'oklch(0.95 0.04 295)',\n    'accent-subtle-foreground': 'oklch(0.45 0.18 295)',\n    ring: 'oklch(0.60 0.20 295)',\n  },\n  /** Emerald. */\n  emerald: {\n    accent: 'oklch(0.55 0.13 160)',\n    'color-accent-700': 'oklch(0.47 0.13 160)',\n    'color-accent-800': 'oklch(0.39 0.12 160)',\n    'accent-subtle': 'oklch(0.95 0.04 160)',\n    'accent-subtle-foreground': 'oklch(0.42 0.12 160)',\n    ring: 'oklch(0.60 0.13 160)',\n  },\n  /** Rose. */\n  rose: {\n    accent: 'oklch(0.57 0.19 12)',\n    'color-accent-700': 'oklch(0.49 0.18 12)',\n    'color-accent-800': 'oklch(0.41 0.16 12)',\n    'accent-subtle': 'oklch(0.95 0.035 12)',\n    'accent-subtle-foreground': 'oklch(0.48 0.18 12)',\n    ring: 'oklch(0.62 0.19 12)',\n  },\n  /** Amber. */\n  amber: {\n    accent: 'oklch(0.62 0.14 65)',\n    'color-accent-700': 'oklch(0.54 0.13 65)',\n    'color-accent-800': 'oklch(0.46 0.12 65)',\n    'accent-subtle': 'oklch(0.95 0.05 75)',\n    'accent-subtle-foreground': 'oklch(0.48 0.12 65)',\n    ring: 'oklch(0.66 0.14 65)',\n  },\n} as const;\n\nexport type BrandName = keyof typeof brandPresets;\n"],"names":["DesignSystemProvider","tokens","strings","className","children","style","props","parentStrings","useStrings","resolvedStrings","useMemo","mergeStrings","css","k","v","key","jsx","StringsContext","cn","brandPresets"],"mappings":";;;;;;AAqCO,SAASA,EAAqB;AAAA,EACnC,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAA8B;AAI5B,QAAMC,IAAgBC,EAAA,GAChBC,IAAkBC;AAAA,IACtB,MAAMC,EAAaJ,GAAeL,CAAO;AAAA,IACzC,CAACK,GAAeL,CAAO;AAAA,EAAA,GAEnBU,IAAqB,EAAE,GAAGP,EAAA;AAChC,MAAIJ;AACF,eAAW,CAACY,GAAGC,CAAC,KAAK,OAAO,QAAQb,CAAM,GAAG;AAC3C,YAAMc,IAAMF,EAAE,WAAW,IAAI,IAAIA,IAAI,KAAKA,CAAC;AAC1C,MAAAD,EAA+BG,CAAG,IAAID;AAAA,IACzC;AAGF,SACE,gBAAAE,EAACC,EAAe,UAAf,EAAwB,OAAOR,GAC9B,UAAA,gBAAAO,EAAC,SAAI,oBAAgB,IAAC,WAAWE,EAAG,YAAYf,CAAS,GAAG,OAAOS,GAAM,GAAGN,GACzE,UAAAF,GACH,GACF;AAEJ;AAcO,MAAMe,IAAe;AAAA;AAAA,EAE1B,SAAS,CAAA;AAAA;AAAA,EAET,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAAA;AAAA,EAGR,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAAA;AAAA,EAGR,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAAA;AAAA,EAGR,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAAA;AAAA,EAGR,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,MAAM;AAAA,EAAA;AAEV;"}
+{"version":3,"file":"DesignSystemProvider.js","sources":["../../../src/components/ui/DesignSystemProvider.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport { StringsContext, useStrings } from '@/hooks/use-strings';\nimport { mergeStrings, type DeepPartial, type UiStrings } from '@/lib/strings';\n\n/**\n * Per-brand token overrides. Keys are CSS variable names (without the `--`\n * prefix); values are CSS values. Any unspecified token falls back to the\n * design system default.\n *\n * @example\n *   <DesignSystemProvider tokens={{ accent: '#ff5555', 'radius-md': '10px' }}>\n *     <App />\n *   </DesignSystemProvider>\n *\n * @example Swap in one of the built-in accent presets\n *   <DesignSystemProvider tokens={brandPresets.violet}>\n *     <Card>...</Card>\n *   </DesignSystemProvider>\n */\nexport type BrandTokens = Record<string, string>;\n\n/**\n * Mode-aware token overrides: `light` applies always, `dark` wins under the\n * `.dark` class (on `<html>` or any ancestor). Use this for anything with a\n * different value per mode — accent, subtle surfaces, ring.\n */\nexport interface BrandTokenPair {\n  light: BrandTokens;\n  dark?: BrandTokens;\n}\n\nfunction isPair(t: BrandTokens | BrandTokenPair): t is BrandTokenPair {\n  return 'light' in t && typeof t.light === 'object';\n}\n\nfunction toDeclarations(tokens: BrandTokens): string {\n  return Object.entries(tokens)\n    .map(([k, v]) => `${k.startsWith('--') ? k : `--${k}`}:${v}`)\n    .join(';');\n}\n\nexport interface DesignSystemProviderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Token overrides (CSS variable name → value). A flat record applies in both\n   * modes; a `{ light, dark }` pair applies `dark` under `.dark`.\n   */\n  tokens?: BrandTokens | BrandTokenPair;\n  /**\n   * Override any of the library's built-in UI strings (aria-labels,\n   * placeholders, empty states). Partial — merged over the parent provider /\n   * English defaults. Pass `mnStrings` for Mongolian.\n   */\n  strings?: DeepPartial<UiStrings>;\n  /** Children to scope this brand to. */\n  children: ReactNode;\n}\n\nexport function DesignSystemProvider({\n  tokens,\n  strings,\n  className,\n  children,\n  style,\n  ...props\n}: DesignSystemProviderProps) {\n  // Build the inline style from tokens — wrapping every key with `--` so\n  // consumers can pass either `accent` or `color-accent` without remembering\n  // the prefix dance.\n  const parentStrings = useStrings();\n  const resolvedStrings = useMemo(\n    () => mergeStrings(parentStrings, strings),\n    [parentStrings, strings],\n  );\n  const scopeId = useId();\n  const css: CSSProperties = { ...style };\n  let sheet: string | null = null;\n  if (tokens) {\n    if (isPair(tokens)) {\n      // Mode-aware tokens cannot be inline (inline beats `.dark` rules), so\n      // they go through a scoped <style>: light on the scope, dark under .dark.\n      const scope = `[data-brand-scope=\"${scopeId}\"]`;\n      sheet = `${scope}{${toDeclarations(tokens.light)}}`;\n      if (tokens.dark) {\n        sheet += `.dark ${scope},.dark${scope}{${toDeclarations(tokens.dark)}}`;\n      }\n    } else {\n      for (const [k, v] of Object.entries(tokens)) {\n        const key = k.startsWith('--') ? k : `--${k}`;\n        (css as Record<string, string>)[key] = v;\n      }\n    }\n  }\n\n  return (\n    <StringsContext.Provider value={resolvedStrings}>\n      {sheet && <style data-brand-scope-style={scopeId}>{sheet}</style>}\n      <div data-brand-scope={scopeId} className={cn('contents', className)} style={css} {...props}>\n        {children}\n      </div>\n    </StringsContext.Provider>\n  );\n}\n\n/**\n * Built-in accent presets — swap the system's single accent colour without\n * touching anything else.\n *\n * These override the *semantic* tokens the utilities resolve to. theme.css\n * maps the accent utilities with `@theme inline` (e.g. `bg-accent` →\n * `var(--accent)`, `bg-accent-soft` → `var(--accent-subtle)`), so the override\n * must target `--accent` / `--accent-subtle` / `--accent-subtle-foreground` /\n * `--ring` — NOT `--color-accent` (which `inline` never emits). The hover/\n * active steps (`--color-accent-700/800`) come from the raw palette and are\n * mode-agnostic. Values mirror the `[data-accent]` presets in theme.css: the\n * dark half lifts the accent to the 400 step (readable as text on neutral-950)\n * and darkens the subtle surface. `default` is the built-in graphite-indigo.\n */\nexport const brandPresets = {\n  /** The library default — graphite indigo. */\n  default: { light: {} } as BrandTokenPair,\n  /** Blue. */\n  blue: {\n    light: {\n      accent: 'oklch(0.55 0.16 250)',\n      'color-accent-700': 'oklch(0.47 0.16 250)',\n      'color-accent-800': 'oklch(0.39 0.14 250)',\n      'accent-subtle': 'oklch(0.96 0.03 250)',\n      'accent-subtle-foreground': 'oklch(0.45 0.15 250)',\n      ring: 'oklch(0.62 0.16 250)',\n    },\n    dark: {\n      accent: 'oklch(0.64 0.15 250)',\n      'accent-subtle': 'oklch(0.24 0.06 250)',\n      'accent-subtle-foreground': 'oklch(0.82 0.1 250)',\n      ring: 'oklch(0.68 0.15 250)',\n    },\n  },\n  /** Violet. */\n  violet: {\n    light: {\n      accent: 'oklch(0.53 0.20 295)',\n      'color-accent-700': 'oklch(0.45 0.18 295)',\n      'color-accent-800': 'oklch(0.38 0.16 295)',\n      'accent-subtle': 'oklch(0.96 0.03 295)',\n      'accent-subtle-foreground': 'oklch(0.46 0.18 295)',\n      ring: 'oklch(0.60 0.20 295)',\n    },\n    dark: {\n      accent: 'oklch(0.64 0.18 295)',\n      'accent-subtle': 'oklch(0.25 0.07 295)',\n      'accent-subtle-foreground': 'oklch(0.83 0.12 295)',\n      ring: 'oklch(0.68 0.18 295)',\n    },\n  },\n  /** Emerald. */\n  emerald: {\n    light: {\n      accent: 'oklch(0.55 0.13 160)',\n      'color-accent-700': 'oklch(0.47 0.13 160)',\n      'color-accent-800': 'oklch(0.39 0.12 160)',\n      'accent-subtle': 'oklch(0.96 0.03 160)',\n      'accent-subtle-foreground': 'oklch(0.42 0.12 160)',\n      ring: 'oklch(0.60 0.13 160)',\n    },\n    dark: {\n      accent: 'oklch(0.64 0.14 160)',\n      'accent-subtle': 'oklch(0.23 0.05 160)',\n      'accent-subtle-foreground': 'oklch(0.8 0.12 160)',\n      ring: 'oklch(0.68 0.14 160)',\n    },\n  },\n  /** Rose. */\n  rose: {\n    light: {\n      accent: 'oklch(0.57 0.19 12)',\n      'color-accent-700': 'oklch(0.49 0.18 12)',\n      'color-accent-800': 'oklch(0.41 0.16 12)',\n      'accent-subtle': 'oklch(0.96 0.03 12)',\n      'accent-subtle-foreground': 'oklch(0.48 0.18 12)',\n      ring: 'oklch(0.62 0.19 12)',\n    },\n    dark: {\n      accent: 'oklch(0.65 0.18 12)',\n      'accent-subtle': 'oklch(0.25 0.07 12)',\n      'accent-subtle-foreground': 'oklch(0.83 0.12 12)',\n      ring: 'oklch(0.7 0.18 12)',\n    },\n  },\n  /** Amber. */\n  amber: {\n    light: {\n      // 0.56 keeps white text at 4.8:1 (0.62 was 3.8:1).\n      accent: 'oklch(0.56 0.14 65)',\n      'color-accent-700': 'oklch(0.54 0.13 65)',\n      'color-accent-800': 'oklch(0.46 0.12 65)',\n      'accent-subtle': 'oklch(0.96 0.04 75)',\n      'accent-subtle-foreground': 'oklch(0.48 0.12 65)',\n      ring: 'oklch(0.64 0.14 65)', // 3.17:1 on background-muted (0.66 was 2.93)\n    },\n    dark: {\n      accent: 'oklch(0.66 0.14 65)',\n      'accent-subtle': 'oklch(0.26 0.05 70)',\n      'accent-subtle-foreground': 'oklch(0.85 0.12 80)',\n      ring: 'oklch(0.72 0.14 65)',\n    },\n  },\n} satisfies Record<string, BrandTokenPair>;\n\nexport type BrandName = keyof typeof brandPresets;\n"],"names":["isPair","t","toDeclarations","tokens","k","v","DesignSystemProvider","strings","className","children","style","props","parentStrings","useStrings","resolvedStrings","useMemo","mergeStrings","scopeId","useId","css","sheet","scope","key","jsxs","StringsContext","jsx","cn","brandPresets"],"mappings":"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"}

package/dist-lib/components/ui/Dialog.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
 import { ButtonProps } from './Button.js';
+import { ReturnFocusRef } from '../../lib/return-focus.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 export declare const Dialog: import('react').FC<DialogPrimitive.DialogProps>;
 export declare const DialogTrigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -11,6 +12,14 @@ export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Dial
     showClose?: boolean;
     /** Dialog width — `sm` 400 / `md` 520 / `lg` 720. */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Element to focus when the overlay closes. Overrides Radix's default
+     * (the element focused when the content mounted), which is `<body>` for
+     * controlled overlays opened from a pointer click on a non-focusable /
+     * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and
+     * wins if it calls `preventDefault()`.
+     */
+    returnFocusTo?: ReturnFocusRef;
 }
 export declare const DialogContent: import('react').ForwardRefExoticComponent<DialogContentProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
@@ -34,10 +43,16 @@ export interface ConfirmationDialogProps {
     cancelLabel?: string;
     /** Variant of the confirm button — typically `primary` or `destructive`. */
     confirmVariant?: ButtonProps['variant'];
-    /** Called when the user confirms. Awaited — shows a spinner while pending. */
+    /**
+     * Called when the user confirms. Awaited — the confirm button shows a
+     * spinner while pending and a rejection is rendered inline (the dialog stays
+     * open so the user can retry or cancel).
+     */
     onConfirm: () => void | Promise<void>;
-    /** Whether the confirm button is currently submitting. */
+    /** Force the submitting state from outside (in addition to the awaited `onConfirm`). */
     loading?: boolean;
+    /** Map a rejected `onConfirm` to the message shown. Defaults to `Error.message`. */
+    formatError?: (err: unknown) => ReactNode;
 }
 /**
  * Confirmation dialog with title, description, cancel + confirm buttons.
@@ -56,7 +71,7 @@ export interface ConfirmationDialogProps {
  *      State consequences in the description.
  * @dont Use for low-risk reversible actions — those don't need a dialog.
  */
-export declare function ConfirmationDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, loading, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmationDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, loading, formatError, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ConfirmationDialog {
     var displayName: string;
 }