@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/date-range-picker/date-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.js","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type {\n  DateRange as RdpDateRange,\n  DayPickerLocale,\n  Matcher,\n} from 'react-day-picker';\n\nimport { useDocDir } from '@/lib/use-doc-dir';\nimport { CalendarPanel } from '../calendar-panel';\nimport { InputDatePicker } from '../input-date-picker';\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover';\nimport {\n  formatDate,\n  normalizeRange,\n  type DateRange,\n} from './date-range-picker-utils';\n\nexport type { DateRange };\n\n// A range date picker: the `InputDatePicker` trigger (pickerType=\"dateRange\")\n// opens a Popover holding a dual-month range `CalendarPanel`. Mirrors the\n// draft/commit/revert idiom of `FilterSearchFilters`: the applied range is\n// snapshotted into a draft on open; selecting days mutates only the draft;\n// dismissing the popover (outside press / Escape) reverts the draft, `Cancel`\n// does the same explicitly, and only `Apply` commits it via `onValueChange`\n// and closes. The footer (Cancel/Apply) is `CalendarPanel`'s own — this\n// component owns no footer or fields of its own.\n//\n// Everything below `className` in the props is a pass-through to that\n// `CalendarPanel` — the selection constraints and every string it renders on its\n// own — so a consumer can localize and constrain the popup without reaching for\n// `CalendarPanel` directly. Only `disabledDays` is renamed (the panel's\n// `disabled`), because `disabled` here disables the trigger. `locale` is also\n// read directly by the trigger's `formatDate` (below), not just passed through.\n//\n// No dedicated token tier — the trigger brings `--ui-input-date-picker-*` and\n// the popup is themed by the composed `CalendarPanel`. `Popover` contributes\n// only positioning, portaling and dismissal — its own container chrome is\n// neutralized via `className` below so `CalendarPanel`'s own chrome shows\n// through instead.\n\nexport interface DateRangePickerProps {\n  /** The applied range (controlled). Omit for uncontrolled use with `defaultValue`. */\n  value?: DateRange;\n  /** The initial applied range (uncontrolled). */\n  defaultValue?: DateRange;\n  /** Called with the committed range when Apply is pressed. */\n  onValueChange?: (range: DateRange) => void;\n  /** Field label for the trigger. */\n  label?: React.ReactNode;\n  /** Helper text below the trigger. */\n  description?: React.ReactNode;\n  /** Error message below the trigger (switches the trigger to its error treatment). */\n  error?: React.ReactNode;\n  /** Hint shown in the trigger when no range is selected. */\n  placeholder?: React.ReactNode;\n  /** Disables the trigger and prevents opening the popover. */\n  disabled?: boolean;\n  /** Marks the trigger required. */\n  required?: boolean;\n  /** Extra classes merged onto the trigger's field wrapper (label + box + message). */\n  className?: string;\n  /** Days that cannot be selected in the calendar. */\n  disabledDays?: Matcher | Matcher[];\n  /** Minimum number of nights between the range's start and end (`differenceInCalendarDays(to, from)`) — e.g. `min={7}` requires at least 8 selectable days. */\n  min?: number;\n  /** Maximum number of nights between the range's start and end (`differenceInCalendarDays(to, from)`) — e.g. `max={31}` admits up to 32 selectable days. */\n  max?: number;\n  /** Render the leading/trailing days of the adjacent months. */\n  showOutsideDays?: boolean;\n  /**\n   * First day of the week (0 = Sunday). Defaults to `locale`'s own week\n   * start, falling back to Monday when no `locale` is given.\n   */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * First year offered by the year dropdown and the earliest month the grid\n   * can navigate to. Defaults to 50 years back.\n   */\n  fromYear?: number;\n  /**\n   * Last year offered by the year dropdown and the latest month the grid can\n   * navigate to. Defaults to 50 years ahead.\n   */\n  toYear?: number;\n  /**\n   * Localizes weekday names, the calendar's default day-cell/caption\n   * accessible labels, and the trigger's month name (e.g. `import { es }\n   * from 'react-day-picker/locale'`). The trigger's day/year order stays\n   * fixed (`MMM d, yyyy`) — only the month name translates, not the\n   * ordering. Defaults to date-fns `enUS`. Does not translate `monthLabel`/\n   * `yearLabel`/`cancelLabel`/`applyLabel`/`formatMonthLabel` — those are\n   * separate props.\n   */\n  locale?: DayPickerLocale;\n  /** Accessible name of the calendar's month dropdown. */\n  monthLabel?: string;\n  /** Accessible name of the calendar's year dropdown. */\n  yearLabel?: string;\n  /** Formats a month's name for the month dropdown. Defaults to `locale`-aware `date-fns` formatting. */\n  formatMonthLabel?: (date: Date) => string;\n  /** Popup footer's \"Cancel\" button label. */\n  cancelLabel?: string;\n  /** Popup footer's \"Apply\" button label. */\n  applyLabel?: string;\n}\n\nconst DateRangePicker = React.forwardRef<\n  HTMLButtonElement,\n  DateRangePickerProps\n>(\n  (\n    {\n      value,\n      defaultValue,\n      onValueChange,\n      label,\n      description,\n      error,\n      placeholder,\n      disabled,\n      required,\n      className,\n      disabledDays,\n      min,\n      max,\n      showOutsideDays,\n      weekStartsOn,\n      fromYear,\n      toYear,\n      locale,\n      monthLabel,\n      yearLabel,\n      formatMonthLabel,\n      cancelLabel,\n      applyLabel,\n    },\n    ref\n  ) => {\n    const isControlled = value !== undefined;\n    const [internalApplied, setInternalApplied] = React.useState<DateRange>(\n      defaultValue ?? {}\n    );\n    const applied = isControlled ? (value as DateRange) : internalApplied;\n\n    const [open, setOpen] = React.useState(false);\n    const [draft, setDraft] = React.useState<DateRange>(applied);\n\n    // `CalendarPanel` needs an explicit `dir` — `react-day-picker`'s own\n    // Arrow-Left/Right roaming only mirrors when `dir` reaches it directly,\n    // not via CSS/ancestor `dir` inheritance (see calendar-panel.tsx). Read\n    // it via `useDocDir()` (`src/lib/use-doc-dir.ts`) rather than adding a\n    // public `dir` prop, so an ancestor still sets it and this component\n    // doesn't need one of its own — the same hook `app-shell-chat.tsx` and\n    // `dialog-welcome.tsx` use to feed `dir` into other things that need it\n    // directly (a resize edge's keyboard math, Embla's `direction` option).\n    // It reads `document.documentElement`, not a per-ancestor lookup off the\n    // trigger, so it isn't affected by the trigger itself being rendered\n    // inside another component's portaled content (e.g. a\n    // `FilterSearchFilters` popover) — the real DOM ancestor chain there no\n    // longer includes an app-level `dir` wrapper that only wraps the React\n    // tree, but `document.documentElement` is unaffected either way.\n    const dir = useDocDir();\n\n    const handleOpenChange = (nextOpen: boolean) => {\n      // Snapshot the applied range on open; revert the draft on any dismiss\n      // (outside press / Escape) so an un-applied edit never leaks out.\n      setDraft(applied);\n      setOpen(nextOpen);\n    };\n\n    const handleCancel = () => {\n      setDraft(applied);\n      setOpen(false);\n    };\n\n    const handleApply = () => {\n      // Commit chronologically ordered so an inverted selection is normalized\n      // rather than committed inverted.\n      const committed = normalizeRange(draft);\n      if (!isControlled) setInternalApplied(committed);\n      onValueChange?.(committed);\n      setOpen(false);\n    };\n\n    // Feed the calendar a normalized range so an inverted draft still\n    // highlights the correct band. react-day-picker's `DateRange` requires\n    // `from`, so a to-only draft is fed as a single selected day at `to` —\n    // otherwise `selected` would be `undefined` and the next calendar click\n    // would start a fresh range instead of completing this one.\n    const normalizedDraft = normalizeRange(draft);\n    let selectedRange: RdpDateRange | undefined;\n    if (normalizedDraft.from) {\n      selectedRange = { from: normalizedDraft.from, to: normalizedDraft.to };\n    } else if (normalizedDraft.to) {\n      selectedRange = { from: normalizedDraft.to, to: normalizedDraft.to };\n    }\n\n    const handleSelect = (range: RdpDateRange | undefined) => {\n      setDraft({ from: range?.from, to: range?.to });\n    };\n\n    return (\n      <Popover open={open} onOpenChange={handleOpenChange}>\n        <PopoverTrigger\n          render={\n            <InputDatePicker\n              ref={ref}\n              pickerType=\"dateRange\"\n              label={label}\n              description={description}\n              error={error}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              startDate={formatDate(applied.from, locale)}\n              endDate={formatDate(applied.to, locale)}\n              open={open}\n              className={className}\n            />\n          }\n        />\n        <PopoverContent\n          align=\"start\"\n          className=\"w-auto max-w-none rounded-none border-none bg-transparent p-0 shadow-none\"\n        >\n          <CalendarPanel\n            variant=\"range\"\n            selected={selectedRange}\n            onSelect={handleSelect}\n            defaultMonth={draft.from ?? applied.from}\n            onCancel={handleCancel}\n            onApply={handleApply}\n            dir={dir}\n            disabled={disabledDays}\n            min={min}\n            max={max}\n            showOutsideDays={showOutsideDays}\n            weekStartsOn={weekStartsOn}\n            fromYear={fromYear}\n            toYear={toYear}\n            locale={locale}\n            monthLabel={monthLabel}\n            yearLabel={yearLabel}\n            formatMonthLabel={formatMonthLabel}\n            cancelLabel={cancelLabel}\n            applyLabel={applyLabel}\n          />\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport { DateRangePicker };\n"],"names":["DateRangePicker","React","value","defaultValue","onValueChange","label","description","error","placeholder","disabled","required","className","disabledDays","min","max","showOutsideDays","weekStartsOn","fromYear","toYear","locale","monthLabel","yearLabel","formatMonthLabel","cancelLabel","applyLabel","ref","isControlled","internalApplied","setInternalApplied","applied","open","setOpen","draft","setDraft","dir","useDocDir","handleOpenChange","nextOpen","handleCancel","handleApply","committed","normalizeRange","normalizedDraft","selectedRange","handleSelect","range","jsxs","Popover","jsx","PopoverTrigger","InputDatePicker","formatDate","PopoverContent","CalendarPanel"],"mappings":"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"}
+{"version":3,"file":"date-range-picker.js","names":[],"sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type {\n  DateRange as RdpDateRange,\n  DayPickerLocale,\n  Matcher,\n} from 'react-day-picker';\n\nimport { useDocDir } from '@/lib/use-doc-dir';\nimport { CalendarPanel } from '../calendar-panel';\nimport { InputDatePicker } from '../input-date-picker';\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover';\nimport {\n  formatDate,\n  normalizeRange,\n  type DateRange,\n} from './date-range-picker-utils';\n\nexport type { DateRange };\n\n// A range date picker: the `InputDatePicker` trigger (pickerType=\"dateRange\")\n// opens a Popover holding a dual-month range `CalendarPanel`. Mirrors the\n// draft/commit/revert idiom of `FilterSearchFilters`: the applied range is\n// snapshotted into a draft on open; selecting days mutates only the draft;\n// dismissing the popover (outside press / Escape) reverts the draft, `Cancel`\n// does the same explicitly, and only `Apply` commits it via `onValueChange`\n// and closes. The footer (Cancel/Apply) is `CalendarPanel`'s own — this\n// component owns no footer or fields of its own.\n//\n// Everything below `className` in the props is a pass-through to that\n// `CalendarPanel` — the selection constraints and every string it renders on its\n// own — so a consumer can localize and constrain the popup without reaching for\n// `CalendarPanel` directly. Only `disabledDays` is renamed (the panel's\n// `disabled`), because `disabled` here disables the trigger. `locale` is also\n// read directly by the trigger's `formatDate` (below), not just passed through.\n//\n// No dedicated token tier — the trigger brings `--ui-input-date-picker-*` and\n// the popup is themed by the composed `CalendarPanel`. `Popover` contributes\n// only positioning, portaling and dismissal — its own container chrome is\n// neutralized via `className` below so `CalendarPanel`'s own chrome shows\n// through instead.\n\nexport interface DateRangePickerProps {\n  /** The applied range (controlled). Omit for uncontrolled use with `defaultValue`. */\n  value?: DateRange;\n  /** The initial applied range (uncontrolled). */\n  defaultValue?: DateRange;\n  /** Called with the committed range when Apply is pressed. */\n  onValueChange?: (range: DateRange) => void;\n  /** Field label for the trigger. */\n  label?: React.ReactNode;\n  /** Helper text below the trigger. */\n  description?: React.ReactNode;\n  /** Error message below the trigger (switches the trigger to its error treatment). */\n  error?: React.ReactNode;\n  /** Hint shown in the trigger when no range is selected. */\n  placeholder?: React.ReactNode;\n  /** Disables the trigger and prevents opening the popover. */\n  disabled?: boolean;\n  /** Marks the trigger required. */\n  required?: boolean;\n  /** Extra classes merged onto the trigger's field wrapper (label + box + message). */\n  className?: string;\n  /** Days that cannot be selected in the calendar. */\n  disabledDays?: Matcher | Matcher[];\n  /** Minimum number of nights between the range's start and end (`differenceInCalendarDays(to, from)`) — e.g. `min={7}` requires at least 8 selectable days. */\n  min?: number;\n  /** Maximum number of nights between the range's start and end (`differenceInCalendarDays(to, from)`) — e.g. `max={31}` admits up to 32 selectable days. */\n  max?: number;\n  /** Render the leading/trailing days of the adjacent months. */\n  showOutsideDays?: boolean;\n  /**\n   * First day of the week (0 = Sunday). Defaults to `locale`'s own week\n   * start, falling back to Monday when no `locale` is given.\n   */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * First year offered by the year dropdown and the earliest month the grid\n   * can navigate to. Defaults to 50 years back.\n   */\n  fromYear?: number;\n  /**\n   * Last year offered by the year dropdown and the latest month the grid can\n   * navigate to. Defaults to 50 years ahead.\n   */\n  toYear?: number;\n  /**\n   * Localizes weekday names, the calendar's default day-cell/caption\n   * accessible labels, and the trigger's month name (e.g. `import { es }\n   * from 'react-day-picker/locale'`). The trigger's day/year order stays\n   * fixed (`MMM d, yyyy`) — only the month name translates, not the\n   * ordering. Defaults to date-fns `enUS`. Does not translate `monthLabel`/\n   * `yearLabel`/`cancelLabel`/`applyLabel`/`formatMonthLabel` — those are\n   * separate props.\n   */\n  locale?: DayPickerLocale;\n  /** Accessible name of the calendar's month dropdown. */\n  monthLabel?: string;\n  /** Accessible name of the calendar's year dropdown. */\n  yearLabel?: string;\n  /** Formats a month's name for the month dropdown. Defaults to `locale`-aware `date-fns` formatting. */\n  formatMonthLabel?: (date: Date) => string;\n  /** Popup footer's \"Cancel\" button label. */\n  cancelLabel?: string;\n  /** Popup footer's \"Apply\" button label. */\n  applyLabel?: string;\n}\n\nconst DateRangePicker = React.forwardRef<\n  HTMLButtonElement,\n  DateRangePickerProps\n>(\n  (\n    {\n      value,\n      defaultValue,\n      onValueChange,\n      label,\n      description,\n      error,\n      placeholder,\n      disabled,\n      required,\n      className,\n      disabledDays,\n      min,\n      max,\n      showOutsideDays,\n      weekStartsOn,\n      fromYear,\n      toYear,\n      locale,\n      monthLabel,\n      yearLabel,\n      formatMonthLabel,\n      cancelLabel,\n      applyLabel,\n    },\n    ref\n  ) => {\n    const isControlled = value !== undefined;\n    const [internalApplied, setInternalApplied] = React.useState<DateRange>(\n      defaultValue ?? {}\n    );\n    const applied = isControlled ? (value as DateRange) : internalApplied;\n\n    const [open, setOpen] = React.useState(false);\n    const [draft, setDraft] = React.useState<DateRange>(applied);\n\n    // `CalendarPanel` needs an explicit `dir` — `react-day-picker`'s own\n    // Arrow-Left/Right roaming only mirrors when `dir` reaches it directly,\n    // not via CSS/ancestor `dir` inheritance (see calendar-panel.tsx). Read\n    // it via `useDocDir()` (`src/lib/use-doc-dir.ts`) rather than adding a\n    // public `dir` prop, so an ancestor still sets it and this component\n    // doesn't need one of its own — the same hook `app-shell-chat.tsx` and\n    // `dialog-welcome.tsx` use to feed `dir` into other things that need it\n    // directly (a resize edge's keyboard math, Embla's `direction` option).\n    // It reads `document.documentElement`, not a per-ancestor lookup off the\n    // trigger, so it isn't affected by the trigger itself being rendered\n    // inside another component's portaled content (e.g. a\n    // `FilterSearchFilters` popover) — the real DOM ancestor chain there no\n    // longer includes an app-level `dir` wrapper that only wraps the React\n    // tree, but `document.documentElement` is unaffected either way.\n    const dir = useDocDir();\n\n    const handleOpenChange = (nextOpen: boolean) => {\n      // Snapshot the applied range on open; revert the draft on any dismiss\n      // (outside press / Escape) so an un-applied edit never leaks out.\n      setDraft(applied);\n      setOpen(nextOpen);\n    };\n\n    const handleCancel = () => {\n      setDraft(applied);\n      setOpen(false);\n    };\n\n    const handleApply = () => {\n      // Commit chronologically ordered so an inverted selection is normalized\n      // rather than committed inverted.\n      const committed = normalizeRange(draft);\n      if (!isControlled) setInternalApplied(committed);\n      onValueChange?.(committed);\n      setOpen(false);\n    };\n\n    // Feed the calendar a normalized range so an inverted draft still\n    // highlights the correct band. react-day-picker's `DateRange` requires\n    // `from`, so a to-only draft is fed as a single selected day at `to` —\n    // otherwise `selected` would be `undefined` and the next calendar click\n    // would start a fresh range instead of completing this one.\n    const normalizedDraft = normalizeRange(draft);\n    let selectedRange: RdpDateRange | undefined;\n    if (normalizedDraft.from) {\n      selectedRange = { from: normalizedDraft.from, to: normalizedDraft.to };\n    } else if (normalizedDraft.to) {\n      selectedRange = { from: normalizedDraft.to, to: normalizedDraft.to };\n    }\n\n    const handleSelect = (range: RdpDateRange | undefined) => {\n      setDraft({ from: range?.from, to: range?.to });\n    };\n\n    return (\n      <Popover open={open} onOpenChange={handleOpenChange}>\n        <PopoverTrigger\n          render={\n            <InputDatePicker\n              ref={ref}\n              pickerType=\"dateRange\"\n              label={label}\n              description={description}\n              error={error}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              startDate={formatDate(applied.from, locale)}\n              endDate={formatDate(applied.to, locale)}\n              open={open}\n              className={className}\n            />\n          }\n        />\n        <PopoverContent\n          align=\"start\"\n          className=\"w-auto max-w-none rounded-none border-none bg-transparent p-0 shadow-none\"\n        >\n          <CalendarPanel\n            variant=\"range\"\n            selected={selectedRange}\n            onSelect={handleSelect}\n            defaultMonth={draft.from ?? applied.from}\n            onCancel={handleCancel}\n            onApply={handleApply}\n            dir={dir}\n            disabled={disabledDays}\n            min={min}\n            max={max}\n            showOutsideDays={showOutsideDays}\n            weekStartsOn={weekStartsOn}\n            fromYear={fromYear}\n            toYear={toYear}\n            locale={locale}\n            monthLabel={monthLabel}\n            yearLabel={yearLabel}\n            formatMonthLabel={formatMonthLabel}\n            cancelLabel={cancelLabel}\n            applyLabel={applyLabel}\n          />\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport { DateRangePicker };\n"],"mappings":";;;;;;;;AA2GA,IAAM,IAAkB,EAAM,YAK1B,EACE,UACA,iBACA,kBACA,UACA,gBACA,UACA,gBACA,aACA,aACA,cACA,iBACA,QACA,QACA,oBACA,iBACA,aACA,WACA,WACA,eACA,cACA,qBACA,gBACA,iBAEF,MACG;CACH,IAAM,IAAe,MAAU,KAAA,GACzB,CAAC,GAAiB,KAAsB,EAAM,SAClD,KAAgB,CAAC,CACnB,GACM,IAAU,IAAgB,IAAsB,GAEhD,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,CAAC,GAAO,KAAY,EAAM,SAAoB,CAAO,GAgBrD,IAAM,EAAU,GAEhB,KAAoB,MAAsB;EAI9C,AADA,EAAS,CAAO,GAChB,EAAQ,CAAQ;CAClB,GAEM,UAAqB;EAEzB,AADA,EAAS,CAAO,GAChB,EAAQ,EAAK;CACf,GAEM,UAAoB;EAGxB,IAAM,IAAY,EAAe,CAAK;EAGtC,AAFK,KAAc,EAAmB,CAAS,GAC/C,IAAgB,CAAS,GACzB,EAAQ,EAAK;CACf,GAOM,IAAkB,EAAe,CAAK,GACxC;CAWJ,OAVI,EAAgB,OAClB,IAAgB;EAAE,MAAM,EAAgB;EAAM,IAAI,EAAgB;CAAG,IAC5D,EAAgB,OACzB,IAAgB;EAAE,MAAM,EAAgB;EAAI,IAAI,EAAgB;CAAG,IAQnE,kBAAC,GAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,kBAAC,GAAD,EACE,QACE,kBAAC,GAAD;GACO;GACL,YAAW;GACJ;GACM;GACN;GACM;GACH;GACA;GACV,WAAW,EAAW,EAAQ,MAAM,CAAM;GAC1C,SAAS,EAAW,EAAQ,IAAI,CAAM;GAChC;GACK;EACZ,CAAA,EAEJ,CAAA,GACD,kBAAC,GAAD;GACE,OAAM;GACN,WAAU;GAEV,UAAA,kBAAC,GAAD;IACE,SAAQ;IACR,UAAU;IACV,WA/Bc,MAAoC;KACxD,EAAS;MAAE,MAAM,GAAO;MAAM,IAAI,GAAO;KAAG,CAAC;IAC/C;IA8BQ,cAAc,EAAM,QAAQ,EAAQ;IACpC,UAAU;IACV,SAAS;IACJ;IACL,UAAU;IACL;IACA;IACY;IACH;IACJ;IACF;IACA;IACI;IACD;IACO;IACL;IACD;GACb,CAAA;EACa,CAAA,CACT;;AAEb,CACF;AACA,EAAgB,cAAc"}

package/dist/components/ui/description-list/description-list.js

@@ -1,54 +1,44 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as r from "react";
-import { cn as a } from "../../../lib/utils.js";
-const o = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t("dl", { ref: i, className: a("w-full", s), ...e }));
-o.displayName = "DescriptionList";
-const c = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t(
-  "div",
-  {
-    ref: i,
-    className: a(
-      // `px-6` insets the content while the `border-t` divider stays full-bleed
-      // (the Figma card look). Override the padding via className when the
-      // surrounding container already pads (e.g. `-mx-6` inside a padded body).
-      "grid grid-cols-[var(--description-list-label,14rem)_minmax(0,1fr)] gap-x-4 border-t border-border px-6 py-3 text-sm leading-6",
-      s
-    ),
-    ...e
-  }
-));
-c.displayName = "DescriptionListItem";
-const n = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t("dt", { ref: i, className: a("text-foreground", s), ...e }));
-n.displayName = "DescriptionListLabel";
-const p = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t(
-  "dd",
-  {
-    ref: i,
-    className: a(
-      "flex min-w-0 items-start gap-2 text-foreground [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
-      s
-    ),
-    ...e
-  }
-));
-p.displayName = "DescriptionListValue";
-const d = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t("p", { ref: i, className: a("text-muted-foreground", s), ...e }));
-d.displayName = "DescriptionListValueDescription";
-const l = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t(
-  "div",
-  {
-    ref: i,
-    className: a("flex flex-wrap items-center gap-4", s),
-    ...e
-  }
-));
-l.displayName = "DescriptionListActions";
-export {
-  o as DescriptionList,
-  l as DescriptionListActions,
-  c as DescriptionListItem,
-  n as DescriptionListLabel,
-  p as DescriptionListValue,
-  d as DescriptionListValueDescription
-};
-//# sourceMappingURL=description-list.js.map
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/ui/description-list/description-list.tsx
+var r = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("dl", {
+	ref: i,
+	className: e("w-full", t),
+	...r
+}));
+r.displayName = "DescriptionList";
+var i = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("grid grid-cols-[var(--description-list-label,14rem)_minmax(0,1fr)] gap-x-4 border-t border-border px-6 py-3 text-sm leading-6", t),
+	...r
+}));
+i.displayName = "DescriptionListItem";
+var a = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("dt", {
+	ref: i,
+	className: e("text-foreground", t),
+	...r
+}));
+a.displayName = "DescriptionListLabel";
+var o = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("dd", {
+	ref: i,
+	className: e("flex min-w-0 items-start gap-2 text-foreground [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0", t),
+	...r
+}));
+o.displayName = "DescriptionListValue";
+var s = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("p", {
+	ref: i,
+	className: e("text-muted-foreground", t),
+	...r
+}));
+s.displayName = "DescriptionListValueDescription";
+var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("flex flex-wrap items-center gap-4", t),
+	...r
+}));
+c.displayName = "DescriptionListActions";
+//#endregion
+export { r as DescriptionList, c as DescriptionListActions, i as DescriptionListItem, a as DescriptionListLabel, o as DescriptionListValue, s as DescriptionListValueDescription };
+
+//# sourceMappingURL=description-list.js.map

package/dist/components/ui/description-list/description-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"description-list.js","sources":["../../../../src/components/ui/description-list/description-list.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// A key/value data list — rows of `label → value`, where the value can be plain\n// text, a status (leading icon + value + a muted description), or action links.\n// Built from the Figma \"Service status\" design (Cyber-Compliance node\n// 3001-20448). Semantic HTML: a `<dl>` of `<div>`-grouped `<dt>`/`<dd>` rows.\n// No `--ui-description-list-*` tier — it composes the shared semantic tokens:\n//   • label / value      -> text-foreground (--ui-text-on-surface-primary)\n//   • description         -> text-muted-foreground (--ui-text-on-surface-secondary)\n//   • row divider         -> border-border (--ui-border-on-surface-border)\n//   • status icon color   -> caller-provided (--ui-text-on-status-*)\n//   • action links        -> compose the `Link` component\n// The 2-column row grid uses a fixed label column (overridable per item via\n// className / the `--description-list-label` custom property).\n\nconst DescriptionList = React.forwardRef<\n  HTMLDListElement,\n  React.HTMLAttributes<HTMLDListElement>\n>(({ className, ...props }, ref) => (\n  <dl ref={ref} className={cn('w-full', className)} {...props} />\n));\nDescriptionList.displayName = 'DescriptionList';\n\nconst DescriptionListItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      // `px-6` insets the content while the `border-t` divider stays full-bleed\n      // (the Figma card look). Override the padding via className when the\n      // surrounding container already pads (e.g. `-mx-6` inside a padded body).\n      'grid grid-cols-[var(--description-list-label,14rem)_minmax(0,1fr)] gap-x-4 border-t border-border px-6 py-3 text-sm leading-6',\n      className\n    )}\n    {...props}\n  />\n));\nDescriptionListItem.displayName = 'DescriptionListItem';\n\nconst DescriptionListLabel = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <dt ref={ref} className={cn('text-foreground', className)} {...props} />\n));\nDescriptionListLabel.displayName = 'DescriptionListLabel';\n\nconst DescriptionListValue = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <dd\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-start gap-2 text-foreground [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0',\n      className\n    )}\n    {...props}\n  />\n));\nDescriptionListValue.displayName = 'DescriptionListValue';\n\nconst DescriptionListValueDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p ref={ref} className={cn('text-muted-foreground', className)} {...props} />\n));\nDescriptionListValueDescription.displayName = 'DescriptionListValueDescription';\n\nconst DescriptionListActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-wrap items-center gap-4', className)}\n    {...props}\n  />\n));\nDescriptionListActions.displayName = 'DescriptionListActions';\n\nexport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n  DescriptionListValueDescription,\n  DescriptionListActions,\n};\n"],"names":["DescriptionList","React","className","props","ref","cn","DescriptionListItem","jsx","DescriptionListLabel","DescriptionListValue","DescriptionListValueDescription","DescriptionListActions"],"mappings":";;;AAiBA,MAAMA,IAAkBC,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,MAAA,EAAG,KAAAA,GAAU,WAAWC,EAAG,UAAUH,CAAS,GAAI,GAAGC,GAAO,CAC9D;AACDH,EAAgB,cAAc;AAE9B,MAAMM,IAAsBL,EAAM,WAGhC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,WAAWC;AAAA;AAAA;AAAA;AAAA,MAIT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDG,EAAoB,cAAc;AAElC,MAAME,IAAuBP,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,MAAA,EAAG,KAAAA,GAAU,WAAWC,EAAG,mBAAmBH,CAAS,GAAI,GAAGC,GAAO,CACvE;AACDK,EAAqB,cAAc;AAEnC,MAAMC,IAAuBR,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAqB,cAAc;AAEnC,MAAMC,IAAkCT,EAAM,WAG5C,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,KAAA,EAAE,KAAAA,GAAU,WAAWC,EAAG,yBAAyBH,CAAS,GAAI,GAAGC,GAAO,CAC5E;AACDO,EAAgC,cAAc;AAE9C,MAAMC,IAAyBV,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,WAAWC,EAAG,qCAAqCH,CAAS;AAAA,IAC3D,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAuB,cAAc;"}
+{"version":3,"file":"description-list.js","names":[],"sources":["../../../../src/components/ui/description-list/description-list.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// A key/value data list — rows of `label → value`, where the value can be plain\n// text, a status (leading icon + value + a muted description), or action links.\n// Built from the Figma \"Service status\" design (Cyber-Compliance node\n// 3001-20448). Semantic HTML: a `<dl>` of `<div>`-grouped `<dt>`/`<dd>` rows.\n// No `--ui-description-list-*` tier — it composes the shared semantic tokens:\n//   • label / value      -> text-foreground (--ui-text-on-surface-primary)\n//   • description         -> text-muted-foreground (--ui-text-on-surface-secondary)\n//   • row divider         -> border-border (--ui-border-on-surface-border)\n//   • status icon color   -> caller-provided (--ui-text-on-status-*)\n//   • action links        -> compose the `Link` component\n// The 2-column row grid uses a fixed label column (overridable per item via\n// className / the `--description-list-label` custom property).\n\nconst DescriptionList = React.forwardRef<\n  HTMLDListElement,\n  React.HTMLAttributes<HTMLDListElement>\n>(({ className, ...props }, ref) => (\n  <dl ref={ref} className={cn('w-full', className)} {...props} />\n));\nDescriptionList.displayName = 'DescriptionList';\n\nconst DescriptionListItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      // `px-6` insets the content while the `border-t` divider stays full-bleed\n      // (the Figma card look). Override the padding via className when the\n      // surrounding container already pads (e.g. `-mx-6` inside a padded body).\n      'grid grid-cols-[var(--description-list-label,14rem)_minmax(0,1fr)] gap-x-4 border-t border-border px-6 py-3 text-sm leading-6',\n      className\n    )}\n    {...props}\n  />\n));\nDescriptionListItem.displayName = 'DescriptionListItem';\n\nconst DescriptionListLabel = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <dt ref={ref} className={cn('text-foreground', className)} {...props} />\n));\nDescriptionListLabel.displayName = 'DescriptionListLabel';\n\nconst DescriptionListValue = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <dd\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-start gap-2 text-foreground [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0',\n      className\n    )}\n    {...props}\n  />\n));\nDescriptionListValue.displayName = 'DescriptionListValue';\n\nconst DescriptionListValueDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p ref={ref} className={cn('text-muted-foreground', className)} {...props} />\n));\nDescriptionListValueDescription.displayName = 'DescriptionListValueDescription';\n\nconst DescriptionListActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-wrap items-center gap-4', className)}\n    {...props}\n  />\n));\nDescriptionListActions.displayName = 'DescriptionListActions';\n\nexport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n  DescriptionListValueDescription,\n  DescriptionListActions,\n};\n"],"mappings":";;;;AAiBA,IAAM,IAAkB,EAAM,YAG3B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CAAS;CAAK,WAAW,EAAG,UAAU,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC/D;AACD,EAAgB,cAAc;AAE9B,IAAM,IAAsB,EAAM,YAG/B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,WAAW,EAIT,iIACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAoB,cAAc;AAElC,IAAM,IAAuB,EAAM,YAGhC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CAAS;CAAK,WAAW,EAAG,mBAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACxE;AACD,EAAqB,cAAc;AAEnC,IAAM,IAAuB,EAAM,YAGhC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EACT,iGACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAqB,cAAc;AAEnC,IAAM,IAAkC,EAAM,YAG3C,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,KAAD;CAAQ;CAAK,WAAW,EAAG,yBAAyB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC7E;AACD,EAAgC,cAAc;AAE9C,IAAM,IAAyB,EAAM,YAGlC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,WAAW,EAAG,qCAAqC,CAAS;CAC5D,GAAI;AACL,CAAA,CACF;AACD,EAAuB,cAAc"}