@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/components/DatePicker/DatePickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerInput.js","sources":["../../../../../src/ui/components/DatePicker/DatePickerInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useEffect, type HTMLAttributes } from \"react\";\nimport { Calendar } from \"lucide-react\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport Input from \"../../primitives/Input/Input\";\nimport Button from \"../../primitives/Button/Button\";\n\nexport interface DatePickerInputProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"onFocus\"\n> {\n  placeholder?: string;\n  format?: string; // Date format string (e.g., 'MM/dd/yyyy')\n  showCalendarButton?: boolean;\n  \"aria-label\"?: string;\n  onFocus?: () => void;\n}\n\n// Simple date formatting without date-fns dependency\nfunction formatDate(date: Date, format: string = \"yyyy-MM-dd\"): string {\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n\n  return format\n    .replace(\"yyyy\", String(year))\n    .replace(\"MM\", month)\n    .replace(\"dd\", day)\n    .replace(\"MM/dd/yyyy\", `${month}/${day}/${year}`)\n    .replace(\"dd/MM/yyyy\", `${day}/${month}/${year}`);\n}\n\nfunction parseDate(value: string): Date | null {\n  if (!value) return null;\n\n  // Try ISO format first (yyyy-MM-dd)\n  const isoMatch = value.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/);\n  if (isoMatch) {\n    const [, year, month, day] = isoMatch;\n    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));\n    if (!isNaN(date.getTime())) return date;\n  }\n\n  // Try MM/dd/yyyy\n  const usMatch = value.match(/^(\\d{2})\\/(\\d{2})\\/(\\d{4})$/);\n  if (usMatch) {\n    const [, month, day, year] = usMatch;\n    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));\n    if (!isNaN(date.getTime())) return date;\n  }\n\n  // Try dd/MM/yyyy\n  const euMatch = value.match(/^(\\d{2})\\/(\\d{2})\\/(\\d{4})$/);\n  if (euMatch) {\n    const [, day, month, year] = euMatch;\n    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));\n    if (!isNaN(date.getTime())) return date;\n  }\n\n  return null;\n}\n\nexport function DatePickerInput({\n  placeholder = \"Select date\",\n  format = \"yyyy-MM-dd\",\n  showCalendarButton = true,\n  \"aria-label\": ariaLabel,\n  onFocus,\n  className = \"\",\n  ...props\n}: DatePickerInputProps) {\n  const { selectedDate, selectedRange, mode, onDateChange } =\n    useDatePickerContext();\n  const [inputValue, setInputValue] = useState(\"\");\n  const [_isFocused, setIsFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // Update input value when selected date changes\n  useEffect(() => {\n    if (mode === \"single\" && selectedDate) {\n      setInputValue(formatDate(selectedDate, format));\n    } else if (mode === \"range\" && selectedRange) {\n      if (selectedRange.start && selectedRange.end) {\n        setInputValue(\n          `${formatDate(selectedRange.start, format)} - ${formatDate(selectedRange.end, format)}`,\n        );\n      } else if (selectedRange.start) {\n        setInputValue(formatDate(selectedRange.start, format));\n      } else {\n        setInputValue(\"\");\n      }\n    } else {\n      setInputValue(\"\");\n    }\n  }, [selectedDate, selectedRange, mode, format]);\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    setInputValue(value);\n\n    if (mode === \"single\") {\n      const date = parseDate(value);\n      onDateChange(date);\n    }\n    // Range mode parsing would be more complex, handled by calendar\n  };\n\n  const handleInputBlur = () => {\n    setIsFocused(false);\n    // Validate and format on blur\n    if (inputValue && mode === \"single\") {\n      const date = parseDate(inputValue);\n      if (date) {\n        setInputValue(formatDate(date, format));\n      }\n    }\n  };\n\n  const handleCalendarClick = () => {\n    inputRef.current?.focus();\n    // Calendar popup would be triggered by parent component\n  };\n\n  return (\n    <div className={`relative ${className}`} {...props}>\n      <Input\n        ref={inputRef}\n        type=\"text\"\n        value={inputValue}\n        onChange={handleInputChange}\n        onFocus={() => {\n          setIsFocused(true);\n          onFocus?.();\n        }}\n        onBlur={handleInputBlur}\n        placeholder={placeholder}\n        aria-label={ariaLabel || placeholder}\n        rightIcon={\n          showCalendarButton ? (\n            <Button\n              variant=\"iconOnly\"\n              size=\"sm\"\n              onClick={handleCalendarClick}\n              aria-label=\"Open calendar\"\n              type=\"button\"\n            >\n              <Calendar className=\"h-4 w-4\" />\n            </Button>\n          ) : undefined\n        }\n      />\n    </div>\n  );\n}\n"],"names":["formatDate","date","format","year","month","day","parseDate","value","isoMatch","usMatch","euMatch","DatePickerInput","_a","_b","placeholder","showCalendarButton","ariaLabel","onFocus","className","props","__objRest","selectedDate","selectedRange","mode","onDateChange","useDatePickerContext","inputValue","setInputValue","useState","_isFocused","setIsFocused","inputRef","useRef","useEffect","handleInputChange","e","handleInputBlur","handleCalendarClick","__spreadProps","__spreadValues","jsx","Input","Button","Calendar"],"mappings":"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"}

package/dist/granular/ui/components/DatePicker/DatePickerProvider.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as I } from "react/jsx-runtime";
+import { useState as e } from "react";
+import { DatePickerContext as U } from "./DatePickerContext.js";
+function A({
+  children: c,
+  mode: i = "single",
+  value: t,
+  defaultValue: n,
+  onValueChange: r,
+  minDate: g,
+  maxDate: D,
+  disabledDates: f,
+  locale: o
+}) {
+  const v = () => {
+    if (t !== void 0) return null;
+    if (n) {
+      if (i === "single" && n instanceof Date)
+        return n;
+      if (i === "range" && typeof n == "object" && "start" in n)
+        return null;
+    }
+    return null;
+  }, p = () => t === void 0 && n && i === "range" && typeof n == "object" && "start" in n ? n : { start: null, end: null }, [R, j] = e(
+    v()
+  ), [x, P] = e(p()), b = i === "single" ? t instanceof Date ? t : R : null, y = i === "range" ? t && typeof t == "object" && "start" in t ? t : x : null, k = {
+    selectedDate: b,
+    selectedRange: y,
+    mode: i,
+    onDateChange: (s) => {
+      i === "single" && (t === void 0 && j(s), r == null || r(s));
+    },
+    onRangeChange: (s) => {
+      i === "range" && (t === void 0 && P(s), r == null || r(s));
+    },
+    minDate: g,
+    maxDate: D,
+    disabledDates: f,
+    locale: o
+  };
+  return /* @__PURE__ */ I(U.Provider, { value: k, children: c });
+}
+export {
+  A as DatePickerProvider
+};
+//# sourceMappingURL=DatePickerProvider.js.map

package/dist/granular/ui/components/DatePicker/DatePickerProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerProvider.js","sources":["../../../../../src/ui/components/DatePicker/DatePickerProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport {\n  DatePickerContext,\n  type DatePickerContextValue,\n  type Locale,\n} from \"./DatePickerContext\";\n\nexport interface DatePickerProviderProps {\n  children: ReactNode;\n  mode?: \"single\" | \"range\";\n  value?: Date | { start: Date | null; end: Date | null };\n  defaultValue?: Date | { start: Date | null; end: Date | null };\n  onValueChange?: (\n    value: Date | { start: Date | null; end: Date | null } | null,\n  ) => void;\n  minDate?: Date;\n  maxDate?: Date;\n  disabledDates?: Date[];\n  locale?: Locale;\n}\n\nexport function DatePickerProvider({\n  children,\n  mode = \"single\",\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  minDate,\n  maxDate,\n  disabledDates,\n  locale,\n}: DatePickerProviderProps) {\n  // Initialize state\n  const getInitialDate = () => {\n    if (controlledValue !== undefined) return null; // Controlled mode\n    if (defaultValue) {\n      if (mode === \"single\" && defaultValue instanceof Date) {\n        return defaultValue;\n      }\n      if (\n        mode === \"range\" &&\n        typeof defaultValue === \"object\" &&\n        \"start\" in defaultValue\n      ) {\n        return null; // Range handled separately\n      }\n    }\n    return null;\n  };\n\n  const getInitialRange = (): { start: Date | null; end: Date | null } => {\n    if (\n      controlledValue === undefined &&\n      defaultValue &&\n      mode === \"range\" &&\n      typeof defaultValue === \"object\" &&\n      \"start\" in defaultValue\n    ) {\n      return defaultValue;\n    }\n    return { start: null, end: null };\n  };\n\n  const [uncontrolledDate, setUncontrolledDate] = useState<Date | null>(\n    getInitialDate(),\n  );\n  const [uncontrolledRange, setUncontrolledRange] = useState<{\n    start: Date | null;\n    end: Date | null;\n  }>(getInitialRange());\n\n  // Use controlled or uncontrolled state\n  const selectedDate =\n    mode === \"single\"\n      ? controlledValue instanceof Date\n        ? controlledValue\n        : uncontrolledDate\n      : null;\n\n  const selectedRange =\n    mode === \"range\"\n      ? controlledValue &&\n        typeof controlledValue === \"object\" &&\n        \"start\" in controlledValue\n        ? controlledValue\n        : uncontrolledRange\n      : null;\n\n  const handleDateChange = (date: Date | null) => {\n    if (mode !== \"single\") return;\n\n    if (controlledValue === undefined) {\n      setUncontrolledDate(date);\n    }\n    onValueChange?.(date);\n  };\n\n  const handleRangeChange = (range: {\n    start: Date | null;\n    end: Date | null;\n  }) => {\n    if (mode !== \"range\") return;\n\n    if (controlledValue === undefined) {\n      setUncontrolledRange(range);\n    }\n    onValueChange?.(range);\n  };\n\n  const contextValue: DatePickerContextValue = {\n    selectedDate,\n    selectedRange,\n    mode,\n    onDateChange: handleDateChange,\n    onRangeChange: handleRangeChange,\n    minDate,\n    maxDate,\n    disabledDates,\n    locale,\n  };\n\n  return (\n    <DatePickerContext.Provider value={contextValue}>\n      {children}\n    </DatePickerContext.Provider>\n  );\n}\n"],"names":["DatePickerProvider","children","mode","controlledValue","defaultValue","onValueChange","minDate","maxDate","disabledDates","locale","getInitialDate","getInitialRange","uncontrolledDate","setUncontrolledDate","useState","uncontrolledRange","setUncontrolledRange","selectedDate","selectedRange","contextValue","date","range","DatePickerContext"],"mappings":";;;;AAuBO,SAASA,EAAmB;AAAA,EACjC,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AACF,GAA4B;AAE1B,QAAMC,IAAiB,MAAM;AAC3B,QAAIP,MAAoB,OAAW,QAAO;AAC1C,QAAIC,GAAc;AAChB,UAAIF,MAAS,YAAYE,aAAwB;AAC/C,eAAOA;AAET,UACEF,MAAS,WACT,OAAOE,KAAiB,YACxB,WAAWA;AAEX,eAAO;AAAA,IAEX;AACA,WAAO;AAAA,EACT,GAEMO,IAAkB,MAEpBR,MAAoB,UACpBC,KACAF,MAAS,WACT,OAAOE,KAAiB,YACxB,WAAWA,IAEJA,IAEF,EAAE,OAAO,MAAM,KAAK,KAAA,GAGvB,CAACQ,GAAkBC,CAAmB,IAAIC;AAAA,IAC9CJ,EAAA;AAAA,EAAe,GAEX,CAACK,GAAmBC,CAAoB,IAAIF,EAG/CH,GAAiB,GAGdM,IACJf,MAAS,WACLC,aAA2B,OACzBA,IACAS,IACF,MAEAM,IACJhB,MAAS,UACLC,KACA,OAAOA,KAAoB,YAC3B,WAAWA,IACTA,IACAY,IACF,MAuBAI,IAAuC;AAAA,IAC3C,cAAAF;AAAA,IACA,eAAAC;AAAA,IACA,MAAAhB;AAAA,IACA,cAzBuB,CAACkB,MAAsB;AAC9C,MAAIlB,MAAS,aAETC,MAAoB,UACtBU,EAAoBO,CAAI,GAE1Bf,KAAA,QAAAA,EAAgBe;AAAA,IAClB;AAAA,IAmBE,eAjBwB,CAACC,MAGrB;AACJ,MAAInB,MAAS,YAETC,MAAoB,UACtBa,EAAqBK,CAAK,GAE5BhB,KAAA,QAAAA,EAAgBgB;AAAA,IAClB;AAAA,IAQE,SAAAf;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,EAAA;AAGF,2BACGa,EAAkB,UAAlB,EAA2B,OAAOH,GAChC,UAAAlB,GACH;AAEJ;"}

package/dist/granular/ui/components/Dialog/AlertDialog.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as i, jsxs as c, Fragment as j } from "react/jsx-runtime";
+import d from "./Dialog.js";
+import { DialogContent as y } from "./DialogContent.js";
+import { DialogHeader as F } from "./DialogHeader.js";
+import { DialogFooter as h } from "./DialogFooter.js";
+import { Button as m } from "../../primitives/Button/Button.js";
+function q({
+  open: e,
+  defaultOpen: f,
+  onOpenChange: r,
+  title: o,
+  description: s,
+  confirmLabel: a = "Confirm",
+  cancelLabel: u = "Cancel",
+  variant: D = "default",
+  onConfirm: l,
+  onCancel: t,
+  children: v
+}) {
+  const k = () => {
+    l == null || l(), r == null || r(!1);
+  }, x = () => {
+    t == null || t(), r == null || r(!1);
+  };
+  return /* @__PURE__ */ i(d, { open: e, defaultOpen: f, onOpenChange: r, children: /* @__PURE__ */ i(y, { size: "sm", closeOnOverlayClick: !1, children: v || /* @__PURE__ */ c(j, { children: [
+    /* @__PURE__ */ c(F, { children: [
+      /* @__PURE__ */ i(d.Title, { children: o }),
+      s && /* @__PURE__ */ i(d.Description, { children: s })
+    ] }),
+    /* @__PURE__ */ c(h, { children: [
+      /* @__PURE__ */ i(m, { variant: "outline", onClick: x, children: u }),
+      /* @__PURE__ */ i(
+        m,
+        {
+          variant: D === "destructive" ? "error" : "primary",
+          onClick: k,
+          children: a
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  q as AlertDialog,
+  q as default
+};
+//# sourceMappingURL=AlertDialog.js.map

package/dist/granular/ui/components/Dialog/AlertDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","sources":["../../../../../src/ui/components/Dialog/AlertDialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode } from \"react\";\nimport Dialog from \"./Dialog\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogHeader } from \"./DialogHeader\";\nimport { DialogFooter } from \"./DialogFooter\";\nimport Button from \"../../primitives/Button/Button\";\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  title: string;\n  description?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  variant?: \"default\" | \"destructive\";\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  children?: ReactNode;\n}\n\n/**\n * AlertDialog Component\n *\n * A specialized dialog for confirmations and alerts.\n * Built on top of Dialog with pre-configured layout.\n *\n * @example\n * ```tsx\n * <AlertDialog\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Delete Item\"\n *   description=\"Are you sure? This action cannot be undone.\"\n *   variant=\"destructive\"\n *   onConfirm={handleDelete}\n * />\n * ```\n */\nexport function AlertDialog({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  variant = \"default\",\n  onConfirm,\n  onCancel,\n  children,\n}: AlertDialogProps) {\n  const handleConfirm = () => {\n    onConfirm?.();\n    onOpenChange?.(false);\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  return (\n    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <DialogContent size=\"sm\" closeOnOverlayClick={false}>\n        {children || (\n          <>\n            <DialogHeader>\n              <Dialog.Title>{title}</Dialog.Title>\n              {description && (\n                <Dialog.Description>{description}</Dialog.Description>\n              )}\n            </DialogHeader>\n            <DialogFooter>\n              <Button variant=\"outline\" onClick={handleCancel}>\n                {cancelLabel}\n              </Button>\n              <Button\n                variant={variant === \"destructive\" ? \"error\" : \"primary\"}\n                onClick={handleConfirm}\n              >\n                {confirmLabel}\n              </Button>\n            </DialogFooter>\n          </>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport default AlertDialog;\n"],"names":["AlertDialog","open","defaultOpen","onOpenChange","title","description","confirmLabel","cancelLabel","variant","onConfirm","onCancel","children","handleConfirm","handleCancel","jsx","Dialog","DialogContent","jsxs","Fragment","DialogHeader","DialogFooter","Button"],"mappings":";;;;;;;AAyCO,SAASA,EAAY;AAAA,EAC1B,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAqB;AACnB,QAAMC,IAAgB,MAAM;AAC1B,IAAAH,KAAA,QAAAA,KACAN,KAAA,QAAAA,EAAe;AAAA,EACjB,GAEMU,IAAe,MAAM;AACzB,IAAAH,KAAA,QAAAA,KACAP,KAAA,QAAAA,EAAe;AAAA,EACjB;AAEA,SACE,gBAAAW,EAACC,GAAA,EAAO,MAAAd,GAAY,aAAAC,GAA0B,cAAAC,GAC5C,UAAA,gBAAAW,EAACE,GAAA,EAAc,MAAK,MAAK,qBAAqB,IAC3C,UAAAL,KACC,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACC,EAAO,OAAP,EAAc,UAAAX,EAAA,CAAM;AAAA,MACpBC,KACC,gBAAAS,EAACC,EAAO,aAAP,EAAoB,UAAAV,EAAA,CAAY;AAAA,IAAA,GAErC;AAAA,sBACCe,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAN,EAACO,GAAA,EAAO,SAAQ,WAAU,SAASR,GAChC,UAAAN,GACH;AAAA,MACA,gBAAAO;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAASb,MAAY,gBAAgB,UAAU;AAAA,UAC/C,SAASI;AAAA,UAER,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,GAEJ,GACF;AAEJ;"}

package/dist/granular/ui/components/Dialog/Dialog.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { useId as r } from "react";
+import { DialogProvider as g } from "../../providers/DialogProvider.js";
+import { DialogTrigger as n } from "./DialogTrigger.js";
+import { DialogContent as f } from "./DialogContent.js";
+import { DialogHeader as s } from "./DialogHeader.js";
+import { DialogTitle as D } from "./DialogTitle.js";
+import { DialogDescription as d } from "./DialogDescription.js";
+import { DialogFooter as c } from "./DialogFooter.js";
+import { DialogClose as u } from "./DialogClose.js";
+function o({ children: i, open: t, defaultOpen: e, onOpenChange: m }) {
+  const l = r(), p = r();
+  return /* @__PURE__ */ a(
+    g,
+    {
+      open: t,
+      defaultOpen: e,
+      onOpenChange: m,
+      titleId: l,
+      descriptionId: p,
+      children: i
+    }
+  );
+}
+o.Trigger = n;
+o.Content = f;
+o.Header = s;
+o.Title = D;
+o.Description = d;
+o.Footer = c;
+o.Close = u;
+export {
+  o as default
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/granular/ui/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../../src/ui/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, type ReactNode } from \"react\";\nimport { DialogProvider } from \"../../providers/DialogProvider\";\nimport { DialogTrigger } from \"./DialogTrigger\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogHeader } from \"./DialogHeader\";\nimport { DialogTitle } from \"./DialogTitle\";\nimport { DialogDescription } from \"./DialogDescription\";\nimport { DialogFooter } from \"./DialogFooter\";\nimport { DialogClose } from \"./DialogClose\";\n\nexport interface DialogProps {\n  children: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Dialog Component\n *\n * A flexible dialog component using compound components pattern.\n * Supports both controlled and uncontrolled modes.\n * Includes portal rendering, focus trap, and full accessibility.\n *\n * @example\n * ```tsx\n * // Uncontrolled\n * <Dialog>\n *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>Dialog description</Dialog.Description>\n *     </Dialog.Header>\n *     <Dialog.Footer>\n *       <Button onClick={handleClose}>Close</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog>\n *\n * // Controlled\n * <Dialog open={isOpen} onOpenChange={setIsOpen}>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *   </Dialog.Content>\n * </Dialog>\n * ```\n */\nfunction Dialog({ children, open, defaultOpen, onOpenChange }: DialogProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n\n  return (\n    <DialogProvider\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      titleId={titleId}\n      descriptionId={descriptionId}\n    >\n      {children}\n    </DialogProvider>\n  );\n}\n\n// Compound components\nDialog.Trigger = DialogTrigger;\nDialog.Content = DialogContent;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\nDialog.Description = DialogDescription;\nDialog.Footer = DialogFooter;\nDialog.Close = DialogClose;\n\nexport default Dialog;\n"],"names":["Dialog","children","open","defaultOpen","onOpenChange","titleId","useId","descriptionId","jsx","DialogProvider","DialogTrigger","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogFooter","DialogClose"],"mappings":";;;;;;;;;;;AAoDA,SAASA,EAAO,EAAE,UAAAC,GAAU,MAAAC,GAAM,aAAAC,GAAa,cAAAC,KAA6B;AAC1E,QAAMC,IAAUC,EAAA,GACVC,IAAgBD,EAAA;AAEtB,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,SAAAC;AAAA,MACA,eAAAE;AAAA,MAEC,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAGAD,EAAO,UAAUU;AACjBV,EAAO,UAAUW;AACjBX,EAAO,SAASY;AAChBZ,EAAO,QAAQa;AACfb,EAAO,cAAcc;AACrBd,EAAO,SAASe;AAChBf,EAAO,QAAQgB;"}

package/dist/granular/ui/components/Dialog/DialogClose.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { isValidElement as m, cloneElement as c } from "react";
+import { X as p } from "lucide-react";
+import { useDialogContext as f } from "../../providers/DialogContext.js";
+import { Button as u } from "../../primitives/Button/Button.js";
+function D({
+  "aria-label": r = "Close dialog",
+  className: a = "",
+  asChild: n = !1,
+  children: o
+}) {
+  const { onClose: l } = f();
+  return n && m(o) ? c(o, {
+    onClick: (s) => {
+      var e, i;
+      l(), (i = (e = o.props).onClick) == null || i.call(e, s);
+    }
+  }) : /* @__PURE__ */ t(
+    u,
+    {
+      variant: "iconOnly",
+      size: "sm",
+      onClick: l,
+      className: `absolute right-4 top-4 ${a}`,
+      "aria-label": r,
+      children: /* @__PURE__ */ t(p, { className: "h-4 w-4" })
+    }
+  );
+}
+export {
+  D as DialogClose
+};
+//# sourceMappingURL=DialogClose.js.map

package/dist/granular/ui/components/Dialog/DialogClose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogClose.js","sources":["../../../../../src/ui/components/Dialog/DialogClose.tsx"],"sourcesContent":["\"use client\";\n\nimport { cloneElement, isValidElement, type ReactElement } from \"react\";\nimport { X } from \"lucide-react\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport Button from \"../../primitives/Button/Button\";\n\ntype CloseChildProps = {\n  onClick?: (e: React.MouseEvent) => void;\n};\n\nexport interface DialogCloseProps {\n  \"aria-label\"?: string;\n  className?: string;\n  asChild?: boolean;\n  children?: ReactElement<CloseChildProps>;\n}\n\nexport function DialogClose({\n  \"aria-label\": ariaLabel = \"Close dialog\",\n  className = \"\",\n  asChild = false,\n  children,\n}: DialogCloseProps) {\n  const { onClose } = useDialogContext();\n\n  if (asChild && isValidElement<CloseChildProps>(children)) {\n    return cloneElement(children, {\n      onClick: (e: React.MouseEvent) => {\n        onClose();\n        children.props.onClick?.(e);\n      },\n    });\n  }\n\n  return (\n    <Button\n      variant=\"iconOnly\"\n      size=\"sm\"\n      onClick={onClose}\n      className={`absolute right-4 top-4 ${className}`}\n      aria-label={ariaLabel}\n    >\n      <X className=\"h-4 w-4\" />\n    </Button>\n  );\n}\n"],"names":["DialogClose","ariaLabel","className","asChild","children","onClose","useDialogContext","isValidElement","cloneElement","e","_b","_a","jsx","Button","X"],"mappings":";;;;;;AAkBO,SAASA,EAAY;AAAA,EAC1B,cAAcC,IAAY;AAAA,EAC1B,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,UAAAC;AACF,GAAqB;AACnB,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SAAIH,KAAWI,EAAgCH,CAAQ,IAC9CI,EAAaJ,GAAU;AAAA,IAC5B,SAAS,CAACK,MAAwB;;AAChC,MAAAJ,EAAA,IACAK,KAAAC,IAAAP,EAAS,OAAM,YAAf,QAAAM,EAAA,KAAAC,GAAyBF;AAAA,IAC3B;AAAA,EAAA,CACD,IAID,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,SAASR;AAAA,MACT,WAAW,0BAA0BH,CAAS;AAAA,MAC9C,cAAYD;AAAA,MAEZ,UAAA,gBAAAW,EAACE,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG7B;"}

package/dist/granular/ui/components/Dialog/DialogContent.js

@@ -0,0 +1,114 @@
+"use client";
+var j = Object.defineProperty, D = Object.defineProperties;
+var F = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var c = (e, t, o) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, g = (e, t) => {
+  for (var o in t || (t = {}))
+    p.call(t, o) && c(e, o, t[o]);
+  if (l)
+    for (var o of l(t))
+      x.call(t, o) && c(e, o, t[o]);
+  return e;
+}, y = (e, t) => D(e, F(t));
+var v = (e, t) => {
+  var o = {};
+  for (var r in e)
+    p.call(e, r) && t.indexOf(r) < 0 && (o[r] = e[r]);
+  if (e != null && l)
+    for (var r of l(e))
+      t.indexOf(r) < 0 && x.call(e, r) && (o[r] = e[r]);
+  return o;
+};
+import { jsxs as L, jsx as m } from "react/jsx-runtime";
+import { useRef as w, useEffect as S } from "react";
+import { createPortal as z } from "react-dom";
+import { useDialogContext as A } from "../../providers/DialogContext.js";
+import { useFocusTrap as O } from "../../hooks/useFocusTrap.js";
+import { useAutoFocus as P } from "../../hooks/useAutoFocus.js";
+import { getSpacingClass as C } from "../../tokens/spacing.js";
+import { getRadiusClass as b } from "../../tokens/radius.js";
+import { getShadowClass as T } from "../../tokens/shadows.js";
+import { getZIndexClass as Z } from "../../tokens/z-index.js";
+function Y(q) {
+  var d = q, {
+    children: e,
+    size: t = "md",
+    closeOnOverlayClick: o = !0,
+    closeOnEscape: r = !0,
+    className: h = ""
+  } = d, $ = v(d, [
+    "children",
+    "size",
+    "closeOnOverlayClick",
+    "closeOnEscape",
+    "className"
+  ]);
+  const { isOpen: n, onClose: s, titleId: k, descriptionId: E } = A(), a = w(null), f = w(null);
+  if (O(a, n), P(a, n), S(() => {
+    if (!n || !r) return;
+    const i = (R) => {
+      R.key === "Escape" && s();
+    };
+    return document.addEventListener("keydown", i), () => {
+      document.removeEventListener("keydown", i);
+    };
+  }, [n, s, r]), !n) return null;
+  const I = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-2xl",
+    fullscreen: `max-w-full h-full ${C("none", "m")} ${b("none")}`
+  }, N = (i) => {
+    o && i.target === f.current && s();
+  }, u = /* @__PURE__ */ L(
+    "div",
+    {
+      className: `fixed inset-0 ${Z("modal")} overflow-y-auto`,
+      onClick: N,
+      children: [
+        /* @__PURE__ */ m(
+          "div",
+          {
+            ref: f,
+            className: "fixed inset-0 bg-scrim transition-opacity",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ m(
+          "div",
+          {
+            className: `flex min-h-full items-center justify-center ${C("base", "p")}`,
+            children: /* @__PURE__ */ m(
+              "div",
+              y(g({
+                ref: a,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": k,
+                "aria-describedby": E,
+                className: `
+            relative w-full
+            ${I[t]}
+            bg-surface-overlay
+            ${b("lg")}
+            ${T("xl")}
+            ${h}
+          `,
+                tabIndex: -1
+              }, $), {
+                children: e
+              })
+            )
+          }
+        )
+      ]
+    }
+  );
+  return typeof window != "undefined" ? z(u, document.body) : u;
+}
+export {
+  Y as DialogContent
+};
+//# sourceMappingURL=DialogContent.js.map

package/dist/granular/ui/components/Dialog/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.js","sources":["../../../../../src/ui/components/Dialog/DialogContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport { useFocusTrap } from \"../../hooks/useFocusTrap\";\nimport { useAutoFocus } from \"../../hooks/useAutoFocus\";\nimport { getRadiusClass, getShadowClass, getZIndexClass } from \"../../tokens\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface DialogContentProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"role\"\n> {\n  children: ReactNode;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\";\n  closeOnOverlayClick?: boolean;\n  closeOnEscape?: boolean;\n}\n\nexport function DialogContent({\n  children,\n  size = \"md\",\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n  className = \"\",\n  ...props\n}: DialogContentProps) {\n  const { isOpen, onClose, titleId, descriptionId } = useDialogContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  // Modal focus contract — Tab cycling + auto-focus, consumed from the\n  // shared hooks introduced in Phase 3 PR 1. Replaces an inline\n  // implementation that duplicated the selector / disabled-and-hidden\n  // filter / boundary-check logic verbatim. The hook variant ALSO\n  // closes a focus-outside-container gap the inline trap silently had\n  // (it relied on auto-focus running first to mask it); the hook\n  // pulls focus back to the trap edge regardless. Focus restore on\n  // close is the separate concern of `useFocusRestore`, consumed in\n  // `DialogProvider`.\n  useFocusTrap(contentRef, isOpen);\n  useAutoFocus(contentRef, isOpen);\n\n  // ESC handling stays inline — gated by the per-Dialog `closeOnEscape`\n  // prop, which the shared hooks intentionally don't know about. Same\n  // shape as Drawer's parallel handler.\n  useEffect(() => {\n    if (!isOpen || !closeOnEscape) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, onClose, closeOnEscape]);\n\n  if (!isOpen) return null;\n\n  const sizeClasses = {\n    sm: \"max-w-sm\",\n    md: \"max-w-md\",\n    lg: \"max-w-lg\",\n    xl: \"max-w-2xl\",\n    fullscreen: `max-w-full h-full ${getSpacingClass(\"none\", \"m\")} ${getRadiusClass(\"none\")}`,\n  };\n\n  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (closeOnOverlayClick && e.target === overlayRef.current) {\n      onClose();\n    }\n  };\n\n  const dialogContent = (\n    <div\n      className={`fixed inset-0 ${getZIndexClass(\"modal\")} overflow-y-auto`}\n      onClick={handleOverlayClick}\n    >\n      {/* Overlay */}\n      <div\n        ref={overlayRef}\n        className=\"fixed inset-0 bg-scrim transition-opacity\"\n        aria-hidden=\"true\"\n      />\n\n      {/* Dialog */}\n      <div\n        className={`flex min-h-full items-center justify-center ${getSpacingClass(\"base\", \"p\")}`}\n      >\n        <div\n          ref={contentRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={titleId}\n          aria-describedby={descriptionId}\n          className={`\n            relative w-full\n            ${sizeClasses[size]}\n            bg-surface-overlay\n            ${getRadiusClass(\"lg\")}\n            ${getShadowClass(\"xl\")}\n            ${className}\n          `}\n          tabIndex={-1}\n          {...props}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n\n  // Portal rendering\n  if (typeof window !== \"undefined\") {\n    return createPortal(dialogContent, document.body);\n  }\n\n  return dialogContent;\n}\n"],"names":["DialogContent","_a","_b","children","size","closeOnOverlayClick","closeOnEscape","className","props","__objRest","isOpen","onClose","titleId","descriptionId","useDialogContext","contentRef","useRef","overlayRef","useFocusTrap","useAutoFocus","useEffect","handleEscape","e","sizeClasses","getSpacingClass","getRadiusClass","handleOverlayClick","dialogContent","jsxs","getZIndexClass","jsx","__spreadProps","__spreadValues","getShadowClass","createPortal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,SAASA,EAAcC,GAOP;AAPO,MAAAC,IAAAD,GAC5B;AAAA,cAAAE;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,qBAAAC,IAAsB;AAAA,IACtB,eAAAC,IAAgB;AAAA,IAChB,WAAAC,IAAY;AAAA,MALgBL,GAMzBM,IAAAC,EANyBP,GAMzB;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,QAAAQ,GAAQ,SAAAC,GAAS,SAAAC,GAAS,eAAAC,EAAA,IAAkBC,EAAA,GAC9CC,IAAaC,EAAuB,IAAI,GACxCC,IAAaD,EAAuB,IAAI;AAgC9C,MArBAE,EAAaH,GAAYL,CAAM,GAC/BS,EAAaJ,GAAYL,CAAM,GAK/BU,EAAU,MAAM;AACd,QAAI,CAACV,KAAU,CAACJ,EAAe;AAE/B,UAAMe,IAAe,CAACC,MAAqB;AACzC,MAAIA,EAAE,QAAQ,YACZX,EAAA;AAAA,IAEJ;AAEA,oBAAS,iBAAiB,WAAWU,CAAY,GAC1C,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAY;AAAA,IACtD;AAAA,EACF,GAAG,CAACX,GAAQC,GAASL,CAAa,CAAC,GAE/B,CAACI,EAAQ,QAAO;AAEpB,QAAMa,IAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,YAAY,qBAAqBC,EAAgB,QAAQ,GAAG,CAAC,IAAIC,EAAe,MAAM,CAAC;AAAA,EAAA,GAGnFC,IAAqB,CAACJ,MAAwC;AAClE,IAAIjB,KAAuBiB,EAAE,WAAWL,EAAW,WACjDN,EAAA;AAAA,EAEJ,GAEMgB,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,iBAAiBC,EAAe,OAAO,CAAC;AAAA,MACnD,SAASH;AAAA,MAGT,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKb;AAAA,YACL,WAAU;AAAA,YACV,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAId,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,+CAA+CN,EAAgB,QAAQ,GAAG,CAAC;AAAA,YAEtF,UAAA,gBAAAM;AAAA,cAAC;AAAA,cAAAC,EAAAC,EAAA;AAAA,gBACC,KAAKjB;AAAA,gBACL,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,mBAAiBH;AAAA,gBACjB,oBAAkBC;AAAA,gBAClB,WAAW;AAAA;AAAA,cAEPU,EAAYnB,CAAI,CAAC;AAAA;AAAA,cAEjBqB,EAAe,IAAI,CAAC;AAAA,cACpBQ,EAAe,IAAI,CAAC;AAAA,cACpB1B,CAAS;AAAA;AAAA,gBAEb,UAAU;AAAA,iBACNC,IAfL;AAAA,gBAiBE,UAAAL;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAKJ,SAAI,OAAO,UAAW,cACb+B,EAAaP,GAAe,SAAS,IAAI,IAG3CA;AACT;"}

package/dist/granular/ui/components/Dialog/DialogDescription.js

@@ -0,0 +1,51 @@
+"use client";
+var u = Object.defineProperty, x = Object.defineProperties;
+var y = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var a = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var n = (o, t, e) => t in o ? u(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, m = (o, t) => {
+  for (var e in t || (t = {}))
+    a.call(t, e) && n(o, e, t[e]);
+  if (s)
+    for (var e of s(t))
+      c.call(t, e) && n(o, e, t[e]);
+  return o;
+}, p = (o, t) => x(o, y(t));
+var d = (o, t) => {
+  var e = {};
+  for (var r in o)
+    a.call(o, r) && t.indexOf(r) < 0 && (e[r] = o[r]);
+  if (o != null && s)
+    for (var r of s(o))
+      t.indexOf(r) < 0 && c.call(o, r) && (e[r] = o[r]);
+  return e;
+};
+import { jsx as I } from "react/jsx-runtime";
+import { useId as D } from "react";
+import { useDialogContext as C } from "../../providers/DialogContext.js";
+import { getTypographyClasses as $ } from "../../tokens/typography.js";
+function k(b) {
+  var i = b, {
+    children: o,
+    className: t = "",
+    id: e
+  } = i, r = d(i, [
+    "children",
+    "className",
+    "id"
+  ]);
+  const l = C(), f = D(), g = e || l.descriptionId || f;
+  return /* @__PURE__ */ I(
+    "p",
+    p(m({
+      id: g,
+      className: `${$("bodySmall")} text-fg-secondary ${t}`
+    }, r), {
+      children: o
+    })
+  );
+}
+export {
+  k as DialogDescription
+};
+//# sourceMappingURL=DialogDescription.js.map

package/dist/granular/ui/components/Dialog/DialogDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogDescription.js","sources":["../../../../../src/ui/components/Dialog/DialogDescription.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, type HTMLAttributes } from \"react\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport { getTypographyClasses } from \"../../tokens\";\n\nexport type DialogDescriptionProps = HTMLAttributes<HTMLParagraphElement>;\n\nexport function DialogDescription({\n  children,\n  className = \"\",\n  id,\n  ...props\n}: DialogDescriptionProps) {\n  const context = useDialogContext();\n  const generatedId = useId();\n  const finalId = id || context.descriptionId || generatedId;\n\n  return (\n    <p\n      id={finalId}\n      className={`${getTypographyClasses(\"bodySmall\")} text-fg-secondary ${className}`}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n}\n"],"names":["DialogDescription","_a","_b","children","className","id","props","__objRest","context","useDialogContext","generatedId","useId","finalId","jsx","__spreadProps","__spreadValues","getTypographyClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,SAASA,EAAkBC,GAKP;AALO,MAAAC,IAAAD,GAChC;AAAA,cAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,IAAAC;AAAA,MAHgCH,GAI7BI,IAAAC,EAJ6BL,GAI7B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAUC,EAAA,GACVC,IAAcC,EAAA,GACdC,IAAUP,KAAMG,EAAQ,iBAAiBE;AAE/C,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,IAAIH;AAAA,MACJ,WAAW,GAAGI,EAAqB,WAAW,CAAC,sBAAsBZ,CAAS;AAAA,OAC1EE,IAHL;AAAA,MAKE,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Dialog/DialogFooter.js

@@ -0,0 +1,45 @@
+"use client";
+var x = Object.defineProperty, g = Object.defineProperties;
+var u = Object.getOwnPropertyDescriptors;
+var t = Object.getOwnPropertySymbols;
+var a = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var i = (e, s, o) => s in e ? x(e, s, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[s] = o, p = (e, s) => {
+  for (var o in s || (s = {}))
+    a.call(s, o) && i(e, o, s[o]);
+  if (t)
+    for (var o of t(s))
+      f.call(s, o) && i(e, o, s[o]);
+  return e;
+}, c = (e, s) => g(e, u(s));
+var n = (e, s) => {
+  var o = {};
+  for (var r in e)
+    a.call(e, r) && s.indexOf(r) < 0 && (o[r] = e[r]);
+  if (e != null && t)
+    for (var r of t(e))
+      s.indexOf(r) < 0 && f.call(e, r) && (o[r] = e[r]);
+  return o;
+};
+import { jsx as $ } from "react/jsx-runtime";
+import { getSpacingClass as l } from "../../tokens/spacing.js";
+function b(r) {
+  var m = r, {
+    children: e,
+    className: s = ""
+  } = m, o = n(m, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ $(
+    "div",
+    c(p({
+      className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:${l("sm", "space-x")} ${l("lg", "p")} ${l("base", "pt")} ${s}`
+    }, o), {
+      children: e
+    })
+  );
+}
+export {
+  b as DialogFooter
+};
+//# sourceMappingURL=DialogFooter.js.map

package/dist/granular/ui/components/Dialog/DialogFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.js","sources":["../../../../../src/ui/components/Dialog/DialogFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport function DialogFooter({\n  children,\n  className = \"\",\n  ...props\n}: DialogFooterProps) {\n  return (\n    <div\n      className={`flex flex-col-reverse sm:flex-row sm:justify-end sm:${getSpacingClass(\"sm\", \"space-x\")} ${getSpacingClass(\"lg\", \"p\")} ${getSpacingClass(\"base\", \"pt\")} ${className}`}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["DialogFooter","_a","_b","children","className","props","__objRest","jsx","__spreadProps","__spreadValues","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AASO,SAASA,EAAaC,GAIP;AAJO,MAAAC,IAAAD,GAC3B;AAAA,cAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,MAFeF,GAGxBG,IAAAC,EAHwBJ,GAGxB;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW,uDAAuDC,EAAgB,MAAM,SAAS,CAAC,IAAIA,EAAgB,MAAM,GAAG,CAAC,IAAIA,EAAgB,QAAQ,IAAI,CAAC,IAAIN,CAAS;AAAA,OAC1KC,IAFL;AAAA,MAIE,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Dialog/DialogHeader.js

@@ -0,0 +1,45 @@
+"use client";
+var g = Object.defineProperty, x = Object.defineProperties;
+var $ = Object.getOwnPropertyDescriptors;
+var r = Object.getOwnPropertySymbols;
+var t = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var p = (e, a, l) => a in e ? g(e, a, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[a] = l, f = (e, a) => {
+  for (var l in a || (a = {}))
+    t.call(a, l) && p(e, l, a[l]);
+  if (r)
+    for (var l of r(a))
+      c.call(a, l) && p(e, l, a[l]);
+  return e;
+}, m = (e, a) => x(e, $(a));
+var n = (e, a) => {
+  var l = {};
+  for (var o in e)
+    t.call(e, o) && a.indexOf(o) < 0 && (l[o] = e[o]);
+  if (e != null && r)
+    for (var o of r(e))
+      a.indexOf(o) < 0 && c.call(e, o) && (l[o] = e[o]);
+  return l;
+};
+import { jsx as u } from "react/jsx-runtime";
+import { getSpacingClass as s } from "../../tokens/spacing.js";
+function v(o) {
+  var i = o, {
+    children: e,
+    className: a = ""
+  } = i, l = n(i, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ u(
+    "div",
+    m(f({
+      className: `flex flex-col ${s("1.5", "space-y")} ${s("lg", "p")} ${s("base", "pb")} ${a}`
+    }, l), {
+      children: e
+    })
+  );
+}
+export {
+  v as DialogHeader
+};
+//# sourceMappingURL=DialogHeader.js.map

package/dist/granular/ui/components/Dialog/DialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.js","sources":["../../../../../src/ui/components/Dialog/DialogHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport function DialogHeader({\n  children,\n  className = \"\",\n  ...props\n}: DialogHeaderProps) {\n  return (\n    <div\n      className={`flex flex-col ${getSpacingClass(\"1.5\", \"space-y\")} ${getSpacingClass(\"lg\", \"p\")} ${getSpacingClass(\"base\", \"pb\")} ${className}`}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["DialogHeader","_a","_b","children","className","props","__objRest","jsx","__spreadProps","__spreadValues","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AASO,SAASA,EAAaC,GAIP;AAJO,MAAAC,IAAAD,GAC3B;AAAA,cAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,MAFeF,GAGxBG,IAAAC,EAHwBJ,GAGxB;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW,iBAAiBC,EAAgB,OAAO,SAAS,CAAC,IAAIA,EAAgB,MAAM,GAAG,CAAC,IAAIA,EAAgB,QAAQ,IAAI,CAAC,IAAIN,CAAS;AAAA,OACrIC,IAFL;AAAA,MAIE,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Dialog/DialogTitle.js

@@ -0,0 +1,53 @@
+"use client";
+var h = Object.defineProperty, x = Object.defineProperties;
+var I = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var a = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var s = (t, o, e) => o in t ? h(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e, m = (t, o) => {
+  for (var e in o || (o = {}))
+    a.call(o, e) && s(t, e, o[e]);
+  if (n)
+    for (var e of n(o))
+      l.call(o, e) && s(t, e, o[e]);
+  return t;
+}, c = (t, o) => x(t, I(o));
+var d = (t, o) => {
+  var e = {};
+  for (var i in t)
+    a.call(t, i) && o.indexOf(i) < 0 && (e[i] = t[i]);
+  if (t != null && n)
+    for (var i of n(t))
+      o.indexOf(i) < 0 && l.call(t, i) && (e[i] = t[i]);
+  return e;
+};
+import { jsx as y } from "react/jsx-runtime";
+import { useId as C } from "react";
+import { useDialogContext as D } from "../../providers/DialogContext.js";
+import { getTypographyClasses as T } from "../../tokens/typography.js";
+function v($) {
+  var r = $, {
+    as: t = "h2",
+    children: o,
+    className: e = "",
+    id: i
+  } = r, g = d(r, [
+    "as",
+    "children",
+    "className",
+    "id"
+  ]);
+  const f = D(), p = C(), u = i || f.titleId || p;
+  return /* @__PURE__ */ y(
+    t,
+    c(m({
+      id: u,
+      className: `${T("h3")} font-semibold leading-none tracking-tight ${e}`
+    }, g), {
+      children: o
+    })
+  );
+}
+export {
+  v as DialogTitle
+};
+//# sourceMappingURL=DialogTitle.js.map

package/dist/granular/ui/components/Dialog/DialogTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTitle.js","sources":["../../../../../src/ui/components/Dialog/DialogTitle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, type HTMLAttributes } from \"react\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport { getTypographyClasses } from \"../../tokens\";\n\nexport interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport function DialogTitle({\n  as: Component = \"h2\",\n  children,\n  className = \"\",\n  id,\n  ...props\n}: DialogTitleProps) {\n  const context = useDialogContext();\n  const generatedId = useId();\n  const finalId = id || context.titleId || generatedId;\n\n  return (\n    <Component\n      id={finalId}\n      className={`${getTypographyClasses(\"h3\")} font-semibold leading-none tracking-tight ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["DialogTitle","_a","_b","Component","children","className","id","props","__objRest","context","useDialogContext","generatedId","useId","finalId","jsx","__spreadProps","__spreadValues","getTypographyClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAYC,GAMP;AANO,MAAAC,IAAAD,GAC1B;AAAA,QAAIE,IAAY;AAAA,IAChB,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,IAAAC;AAAA,MAJ0BJ,GAKvBK,IAAAC,EALuBN,GAKvB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMO,IAAUC,EAAA,GACVC,IAAcC,EAAA,GACdC,IAAUP,KAAMG,EAAQ,WAAWE;AAEzC,SACE,gBAAAG;AAAA,IAACX;AAAA,IAAAY,EAAAC,EAAA;AAAA,MACC,IAAIH;AAAA,MACJ,WAAW,GAAGI,EAAqB,IAAI,CAAC,8CAA8CZ,CAAS;AAAA,OAC3FE,IAHL;AAAA,MAKE,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Dialog/DialogTrigger.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { isValidElement as u, cloneElement as a } from "react";
+import { useDialogContext as l } from "../../providers/DialogContext.js";
+function g({
+  children: o,
+  asChild: r = !1
+}) {
+  const { onOpenChange: t } = l();
+  return r && u(o) ? a(o, {
+    onClick: (i) => {
+      var e, n;
+      t(!0), (n = (e = o.props).onClick) == null || n.call(e, i);
+    }
+  }) : /* @__PURE__ */ p(
+    "button",
+    {
+      type: "button",
+      onClick: () => t(!0),
+      "aria-haspopup": "dialog",
+      children: o
+    }
+  );
+}
+export {
+  g as DialogTrigger
+};
+//# sourceMappingURL=DialogTrigger.js.map

package/dist/granular/ui/components/Dialog/DialogTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTrigger.js","sources":["../../../../../src/ui/components/Dialog/DialogTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { cloneElement, isValidElement, type ReactElement } from \"react\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\n\ntype TriggerChildProps = {\n  onClick?: (e: React.MouseEvent) => void;\n};\n\nexport interface DialogTriggerProps {\n  children: ReactElement<TriggerChildProps>;\n  asChild?: boolean;\n}\n\nexport function DialogTrigger({\n  children,\n  asChild = false,\n}: DialogTriggerProps) {\n  const { onOpenChange } = useDialogContext();\n\n  if (asChild && isValidElement<TriggerChildProps>(children)) {\n    return cloneElement(children, {\n      onClick: (e: React.MouseEvent) => {\n        onOpenChange(true);\n        children.props.onClick?.(e);\n      },\n    });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onOpenChange(true)}\n      aria-haspopup=\"dialog\"\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["DialogTrigger","children","asChild","onOpenChange","useDialogContext","isValidElement","cloneElement","e","_b","_a","jsx"],"mappings":";;;;AAcO,SAASA,EAAc;AAAA,EAC5B,UAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,GAAuB;AACrB,QAAM,EAAE,cAAAC,EAAA,IAAiBC,EAAA;AAEzB,SAAIF,KAAWG,EAAkCJ,CAAQ,IAChDK,EAAaL,GAAU;AAAA,IAC5B,SAAS,CAACM,MAAwB;;AAChC,MAAAJ,EAAa,EAAI,IACjBK,KAAAC,IAAAR,EAAS,OAAM,YAAf,QAAAO,EAAA,KAAAC,GAAyBF;AAAA,IAC3B;AAAA,EAAA,CACD,IAID,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMP,EAAa,EAAI;AAAA,MAChC,iBAAc;AAAA,MAEb,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}