@mila_studios/mycelia-design-system 0.1.1

package/packages/ui/dist/components/date-picker.js

@@ -0,0 +1,217 @@
+import * as React2 from 'react';
+import { format } from 'date-fns';
+import { ChevronsUpDown, Calendar as Calendar$1 } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { Popover as Popover$1 } from 'radix-ui';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Calendar({ className, showOutsideDays = true, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      "data-slot": "calendar",
+      className: cn(
+        "mila-daypicker rounded-lg border border-solid border-[color:var(--mila-combobox-menu-border)] bg-[color:var(--mila-combobox-menu-bg)] p-3 shadow-[var(--mila-combobox-menu-shadow)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+var Popover = Popover$1.Root;
+var PopoverTrigger = Popover$1.Trigger;
+Popover$1.Anchor;
+var PopoverContent = React2.forwardRef(function PopoverContent2({ className, align = "center", sideOffset = 4, collisionPadding = 8, ...props }, ref) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      ref,
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      collisionPadding,
+      className: cn(
+        "z-50 w-72 rounded-lg border border-solid border-[color:var(--mila-combobox-menu-border)] bg-[color:var(--mila-combobox-menu-bg)] p-4 text-foreground shadow-[var(--mila-combobox-menu-shadow)] outline-none",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+PopoverContent.displayName = "PopoverContent";
+var comboboxTriggerVariants = cva(
+  [
+    "flex w-full min-w-0 cursor-pointer items-center gap-2 border border-solid bg-background text-left font-sans font-medium outline-none",
+    "shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] transition-[border-color,box-shadow,color]",
+    "border-[color:var(--mila-input-border)]",
+    "focus-visible:border-[color:var(--mila-input-border-focus)] focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-input-ring-focus)]",
+    "focus-visible:text-[color:var(--mila-input-text-focus)]",
+    "disabled:pointer-events-none disabled:border-[color:var(--mila-input-border)] disabled:bg-[color:var(--mila-input-bg-disabled)] disabled:text-[color:var(--mila-input-text-disabled)] disabled:opacity-50",
+    "aria-invalid:border-[color:var(--mila-input-border-error)] aria-invalid:focus-visible:ring-[color:var(--mila-input-ring-error)]"
+  ],
+  {
+    variants: {
+      size: {
+        mini: "min-h-6 gap-1 rounded-[4px] px-1.5 py-0.5",
+        sm: "min-h-8 gap-1.5 rounded-lg px-2 py-[5.5px]",
+        default: "min-h-9 gap-2 rounded-lg px-3 py-[7.5px]",
+        lg: "min-h-10 gap-2 rounded-lg px-4 py-[9.5px]"
+      },
+      lines: {
+        1: "",
+        2: ""
+      }
+    },
+    compoundVariants: [
+      { lines: 2, size: "lg", class: "min-h-[58px] items-start py-2" },
+      { lines: 2, size: "default", class: "min-h-[54px] items-start py-2" },
+      { lines: 2, size: "sm", class: "min-h-[50px] items-start py-1.5" },
+      { lines: 2, size: "mini", class: "min-h-[45px] items-start py-1.5" }
+    ],
+    defaultVariants: {
+      size: "default",
+      lines: 1
+    }
+  }
+);
+var valueTextClass = "truncate text-sm leading-normal tracking-[0.07px] text-[color:var(--mila-input-text-value)]";
+var placeholderTextClass = "truncate text-sm leading-normal tracking-[0.07px] text-[color:var(--mila-input-placeholder)]";
+var descriptionTextClass = "truncate text-xs font-normal leading-normal tracking-[0.18px] text-[color:var(--mila-combobox-item-muted)]";
+var ComboboxTrigger = React2.forwardRef(
+  function ComboboxTrigger2({
+    className,
+    size = "default",
+    lines = 1,
+    placeholder = "Select an item",
+    displayValue,
+    prepend,
+    leading,
+    description,
+    invalid,
+    disabled,
+    type = "button",
+    "aria-invalid": ariaInvalidProp,
+    children,
+    ...props
+  }, ref) {
+    const hasValue = displayValue != null && displayValue !== "" && !(typeof displayValue === "string" && displayValue.trim() === "");
+    const ariaInvalid = invalid === true || ariaInvalidProp === true || ariaInvalidProp === "true";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        role: "combobox",
+        disabled,
+        "data-slot": "combobox-trigger",
+        "data-size": size,
+        "data-lines": lines,
+        "aria-invalid": ariaInvalid || void 0,
+        className: cn(comboboxTriggerVariants({ size, lines }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+              leading ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leading }) : null,
+              prepend ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-medium tracking-[0.07px] text-[color:var(--mila-input-placeholder)]", children: prepend }) : null,
+              /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1", hasValue ? valueTextClass : placeholderTextClass), children: children ?? (hasValue ? displayValue : placeholder) })
+            ] }),
+            lines === 2 && description ? /* @__PURE__ */ jsx("span", { className: cn(descriptionTextClass, "ps-0"), children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronsUpDown,
+            {
+              className: cn(
+                "size-4 shrink-0 text-[color:var(--mila-input-placeholder)]",
+                lines === 2 && "self-center"
+              ),
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ComboboxTrigger.displayName = "ComboboxTrigger";
+var ComboboxContent = React2.forwardRef(function ComboboxContent2({ className, align = "start", sideOffset = 4, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      ref,
+      "data-slot": "combobox-content",
+      align,
+      sideOffset,
+      className: cn(
+        "w-[var(--radix-popover-trigger-width)] max-w-[min(100vw-2rem,320px)] min-w-[var(--radix-popover-trigger-width)] p-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+ComboboxContent.displayName = "ComboboxContent";
+var valueTextClass2 = "truncate text-sm leading-normal tracking-[0.07px] text-[color:var(--mila-input-text-value)]";
+var placeholderTextClass2 = "truncate text-sm leading-normal tracking-[0.07px] text-[color:var(--mila-input-placeholder)]";
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date",
+  dateFormat = "PPP",
+  size = "default",
+  disabled,
+  invalid,
+  className,
+  align = "start"
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const ariaInvalid = invalid === true ? true : void 0;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-invalid": ariaInvalid,
+        disabled,
+        "data-slot": "date-picker-trigger",
+        "data-size": size,
+        className: cn(
+          comboboxTriggerVariants({ size, lines: 1 }),
+          "justify-between",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 text-left", value ? valueTextClass2 : placeholderTextClass2), children: value ? format(value, dateFormat) : placeholder }),
+          /* @__PURE__ */ jsx(Calendar$1, { className: "size-4 shrink-0 text-[color:var(--mila-input-placeholder)]", "aria-hidden": true })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align, className: "w-auto p-0", "data-slot": "date-picker-content", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "single",
+        selected: value,
+        onSelect: (d) => {
+          onChange?.(d);
+          setOpen(false);
+        },
+        defaultMonth: value
+      }
+    ) })
+  ] });
+}
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };
+//# sourceMappingURL=date-picker.js.map
+//# sourceMappingURL=date-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/calendar.tsx","../../src/components/popover.tsx","../../src/components/combobox.tsx","../../src/components/date-picker.tsx"],"names":["PopoverPrimitive","React","PopoverContent","jsx","ComboboxTrigger","ComboboxContent","valueTextClass","placeholderTextClass","React3","jsxs","CalendarIcon"],"mappings":"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","file":"date-picker.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"../lib/utils.js\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({ className, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      data-slot=\"calendar\"\n      className={cn(\n        \"mila-daypicker rounded-lg border border-solid border-[color:var(--mila-combobox-menu-border)] bg-[color:var(--mila-combobox-menu-bg)] p-3 shadow-[var(--mila-combobox-menu-shadow)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../lib/utils.js\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(function PopoverContent(\n  { className, align = \"center\", sideOffset = 4, collisionPadding = 8, ...props },\n  ref\n) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        className={cn(\n          \"z-50 w-72 rounded-lg border border-solid border-[color:var(--mila-combobox-menu-border)] bg-[color:var(--mila-combobox-menu-bg)] p-4 text-foreground shadow-[var(--mila-combobox-menu-shadow)] outline-none\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n})\nPopoverContent.displayName = \"PopoverContent\"\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils.js\"\n\nimport { PopoverContent } from \"./popover.js\"\n\nconst comboboxTriggerVariants = cva(\n  [\n    \"flex w-full min-w-0 cursor-pointer items-center gap-2 border border-solid bg-background text-left font-sans font-medium outline-none\",\n    \"shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] transition-[border-color,box-shadow,color]\",\n    \"border-[color:var(--mila-input-border)]\",\n    \"focus-visible:border-[color:var(--mila-input-border-focus)] focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-input-ring-focus)]\",\n    \"focus-visible:text-[color:var(--mila-input-text-focus)]\",\n    \"disabled:pointer-events-none disabled:border-[color:var(--mila-input-border)] disabled:bg-[color:var(--mila-input-bg-disabled)] disabled:text-[color:var(--mila-input-text-disabled)] disabled:opacity-50\",\n    \"aria-invalid:border-[color:var(--mila-input-border-error)] aria-invalid:focus-visible:ring-[color:var(--mila-input-ring-error)]\",\n  ],\n  {\n    variants: {\n      size: {\n        mini: \"min-h-6 gap-1 rounded-[4px] px-1.5 py-0.5\",\n        sm: \"min-h-8 gap-1.5 rounded-lg px-2 py-[5.5px]\",\n        default: \"min-h-9 gap-2 rounded-lg px-3 py-[7.5px]\",\n        lg: \"min-h-10 gap-2 rounded-lg px-4 py-[9.5px]\",\n      },\n      lines: {\n        1: \"\",\n        2: \"\",\n      },\n    },\n    compoundVariants: [\n      { lines: 2, size: \"lg\", class: \"min-h-[58px] items-start py-2\" },\n      { lines: 2, size: \"default\", class: \"min-h-[54px] items-start py-2\" },\n      { lines: 2, size: \"sm\", class: \"min-h-[50px] items-start py-1.5\" },\n      { lines: 2, size: \"mini\", class: \"min-h-[45px] items-start py-1.5\" },\n    ],\n    defaultVariants: {\n      size: \"default\",\n      lines: 1,\n    },\n  }\n)\n\nconst valueTextClass =\n  \"truncate text-sm leading-normal tracking-[0.07px] text-[color:var(--mila-input-text-value)]\"\n\nconst placeholderTextClass =\n  \"truncate text-sm leading-normal tracking-[0.07px] text-[color:var(--mila-input-placeholder)]\"\n\nconst descriptionTextClass =\n  \"truncate text-xs font-normal leading-normal tracking-[0.18px] text-[color:var(--mila-combobox-item-muted)]\"\n\nexport type ComboboxTriggerProps = Omit<React.ComponentPropsWithoutRef<\"button\">, \"children\"> &\n  VariantProps<typeof comboboxTriggerVariants> & {\n    /** Shown when no `displayValue` */\n    placeholder?: string\n    /** Selected label (string or node). Empty → placeholder styling. */\n    displayValue?: React.ReactNode\n    /** Muted prefix before the value (Figma “Prepend:”). */\n    prepend?: React.ReactNode\n    /** Leading decoration (icon, avatar). */\n    leading?: React.ReactNode\n    /** Second line under the value (Figma 2-line combobox). */\n    description?: React.ReactNode\n    /** Shorthand for `aria-invalid`. */\n    invalid?: boolean\n    children?: React.ReactNode\n  }\n\nconst ComboboxTrigger = React.forwardRef<HTMLButtonElement, ComboboxTriggerProps>(\n  function ComboboxTrigger(\n    {\n      className,\n      size = \"default\",\n      lines = 1,\n      placeholder = \"Select an item\",\n      displayValue,\n      prepend,\n      leading,\n      description,\n      invalid,\n      disabled,\n      type = \"button\",\n      \"aria-invalid\": ariaInvalidProp,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const hasValue =\n      displayValue != null &&\n      displayValue !== \"\" &&\n      !(typeof displayValue === \"string\" && displayValue.trim() === \"\")\n    const ariaInvalid = invalid === true || ariaInvalidProp === true || ariaInvalidProp === \"true\"\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        role=\"combobox\"\n        disabled={disabled}\n        data-slot=\"combobox-trigger\"\n        data-size={size}\n        data-lines={lines}\n        aria-invalid={ariaInvalid || undefined}\n        className={cn(comboboxTriggerVariants({ size, lines }), className)}\n        {...props}\n      >\n        <span className=\"flex min-w-0 flex-1 flex-col gap-0.5 text-left\">\n          <span className=\"flex min-w-0 items-center gap-2\">\n            {leading ? <span className=\"shrink-0\">{leading}</span> : null}\n            {prepend ? (\n              <span className=\"shrink-0 text-sm font-medium tracking-[0.07px] text-[color:var(--mila-input-placeholder)]\">\n                {prepend}\n              </span>\n            ) : null}\n            <span className={cn(\"min-w-0 flex-1\", hasValue ? valueTextClass : placeholderTextClass)}>\n              {children ?? (hasValue ? displayValue : placeholder)}\n            </span>\n          </span>\n          {lines === 2 && description ? (\n            <span className={cn(descriptionTextClass, \"ps-0\")}>{description}</span>\n          ) : null}\n        </span>\n        <ChevronsUpDown\n          className={cn(\n            \"size-4 shrink-0 text-[color:var(--mila-input-placeholder)]\",\n            lines === 2 && \"self-center\"\n          )}\n          aria-hidden\n        />\n      </button>\n    )\n  }\n)\nComboboxTrigger.displayName = \"ComboboxTrigger\"\n\nconst ComboboxContent = React.forwardRef<\n  React.ElementRef<typeof PopoverContent>,\n  React.ComponentPropsWithoutRef<typeof PopoverContent>\n>(function ComboboxContent({ className, align = \"start\", sideOffset = 4, ...props }, ref) {\n  return (\n    <PopoverContent\n      ref={ref}\n      data-slot=\"combobox-content\"\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"w-[var(--radix-popover-trigger-width)] max-w-[min(100vw-2rem,320px)] min-w-[var(--radix-popover-trigger-width)] p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nComboboxContent.displayName = \"ComboboxContent\"\n\nexport { ComboboxContent, ComboboxTrigger, comboboxTriggerVariants }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport type { VariantProps } from \"class-variance-authority\"\n\nimport { Calendar } from \"./calendar.js\"\nimport { comboboxTriggerVariants } from \"./combobox.js\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover.js\"\nimport { cn } from \"../lib/utils.js\"\n\nconst valueTextClass =\n  \"truncate text-sm leading-normal tracking-[0.07px] text-[color:var(--mila-input-text-value)]\"\n\nconst placeholderTextClass =\n  \"truncate text-sm leading-normal tracking-[0.07px] text-[color:var(--mila-input-placeholder)]\"\n\nexport type DatePickerProps = {\n  value?: Date\n  onChange?: (date: Date | undefined) => void\n  placeholder?: string\n  /** `date-fns` format string (default `PPP`). */\n  dateFormat?: string\n  size?: VariantProps<typeof comboboxTriggerVariants>[\"size\"]\n  disabled?: boolean\n  invalid?: boolean\n  className?: string\n  /** Popover content `align` (default `start`). */\n  align?: React.ComponentProps<typeof PopoverContent>[\"align\"]\n}\n\nfunction DatePicker({\n  value,\n  onChange,\n  placeholder = \"Pick a date\",\n  dateFormat = \"PPP\",\n  size = \"default\",\n  disabled,\n  invalid,\n  className,\n  align = \"start\",\n}: DatePickerProps) {\n  const [open, setOpen] = React.useState(false)\n  const ariaInvalid =\n    invalid === true ? true : undefined\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-invalid={ariaInvalid}\n          disabled={disabled}\n          data-slot=\"date-picker-trigger\"\n          data-size={size}\n          className={cn(\n            comboboxTriggerVariants({ size, lines: 1 }),\n            \"justify-between\",\n            className\n          )}\n        >\n          <span className={cn(\"min-w-0 flex-1 text-left\", value ? valueTextClass : placeholderTextClass)}>\n            {value ? format(value, dateFormat) : placeholder}\n          </span>\n          <CalendarIcon className=\"size-4 shrink-0 text-[color:var(--mila-input-placeholder)]\" aria-hidden />\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align={align} className=\"w-auto p-0\" data-slot=\"date-picker-content\">\n        <Calendar\n          mode=\"single\"\n          selected={value}\n          onSelect={(d) => {\n            onChange?.(d)\n            setOpen(false)\n          }}\n          defaultMonth={value}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nDatePicker.displayName = \"DatePicker\"\n\nexport { DatePicker }\n"]}

package/packages/ui/dist/components/dialog.d.mts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Dialog as Dialog$1 } from 'radix-ui';
+
+declare const Dialog: React.FC<Dialog$1.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<Dialog$1.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<Dialog$1.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<Dialog$1.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Scrollable body between header and footer (Figma “Scrollable” variants). */
+declare const DialogBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/** Figma close control: 16px icon, 32px target, focus ring. */
+declare const DialogCloseButton: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Dialog, DialogBody, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/packages/ui/dist/components/dialog.js

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { Dialog as Dialog$1 } from 'radix-ui';
+import { X } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Dialog = Dialog$1.Root;
+var DialogTrigger = Dialog$1.Trigger;
+var DialogPortal = Dialog$1.Portal;
+var DialogClose = Dialog$1.Close;
+var DialogOverlay = React.forwardRef(function DialogOverlay2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Overlay,
+    {
+      ref,
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-[color:var(--mila-dialog-overlay-bg)]",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React.forwardRef(function DialogContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      Dialog$1.Content,
+      {
+        ref,
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 flex w-[calc(100vw-2rem)] max-w-[640px] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-[8px] bg-[color:var(--mila-dialog-bg)] shadow-[var(--mila-dialog-shadow)] outline-none",
+          "focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-dialog-content-focus-ring)] focus-visible:ring-offset-0",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          className
+        ),
+        ...props,
+        children
+      }
+    )
+  ] });
+});
+DialogContent.displayName = "DialogContent";
+var DialogHeader = React.forwardRef(
+  function DialogHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "dialog-header",
+        className: cn("flex flex-col gap-2 p-4 text-left", className),
+        ...props
+      }
+    );
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogBody = React.forwardRef(
+  function DialogBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "dialog-body",
+        className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-2", className),
+        ...props
+      }
+    );
+  }
+);
+DialogBody.displayName = "DialogBody";
+var DialogFooter = React.forwardRef(
+  function DialogFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "dialog-footer",
+        className: cn("flex flex-col-reverse gap-2 p-4 sm:flex-row sm:justify-end", className),
+        ...props
+      }
+    );
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      ref,
+      "data-slot": "dialog-title",
+      className: cn(
+        "font-sans text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-[color:var(--mila-dialog-title-fg)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React.forwardRef(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      ref,
+      "data-slot": "dialog-description",
+      className: cn(
+        "font-sans text-sm font-normal leading-normal tracking-[0.07px] text-[color:var(--mila-dialog-description-fg)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+var DialogCloseButton = React.forwardRef(function DialogCloseButton2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Close,
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "text-[color:var(--mila-dialog-close-fg)] inline-flex size-8 shrink-0 items-center justify-center rounded-sm opacity-70 outline-none transition-opacity",
+        "hover:opacity-100",
+        "focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-dialog-close-focus-ring)] focus-visible:ring-offset-0",
+        "disabled:pointer-events-none",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true, strokeWidth: 2 })
+    }
+  );
+});
+DialogCloseButton.displayName = "DialogCloseButton";
+
+export { Dialog, DialogBody, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+//# sourceMappingURL=dialog.js.map
+//# sourceMappingURL=dialog.js.map

package/packages/ui/dist/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/dialog.tsx"],"names":["DialogPrimitive","DialogOverlay","DialogContent","DialogHeader","DialogBody","DialogFooter","DialogTitle","DialogDescription","DialogCloseButton"],"mappings":"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","file":"dialog.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils.js\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(function DialogOverlay({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-[color:var(--mila-dialog-overlay-bg)]\",\n        \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDialogOverlay.displayName = \"DialogOverlay\"\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(function DialogContent({ className, children, ...props }, ref) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed left-[50%] top-[50%] z-50 flex w-[calc(100vw-2rem)] max-w-[640px] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-[8px] bg-[color:var(--mila-dialog-bg)] shadow-[var(--mila-dialog-shadow)] outline-none\",\n          \"focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-dialog-content-focus-ring)] focus-visible:ring-offset-0\",\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n})\nDialogContent.displayName = \"DialogContent\"\n\nconst DialogHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<\"div\">>(\n  function DialogHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"dialog-header\"\n        className={cn(\"flex flex-col gap-2 p-4 text-left\", className)}\n        {...props}\n      />\n    )\n  }\n)\nDialogHeader.displayName = \"DialogHeader\"\n\n/** Scrollable body between header and footer (Figma “Scrollable” variants). */\nconst DialogBody = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<\"div\">>(\n  function DialogBody({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"dialog-body\"\n        className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-2\", className)}\n        {...props}\n      />\n    )\n  }\n)\nDialogBody.displayName = \"DialogBody\"\n\nconst DialogFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<\"div\">>(\n  function DialogFooter({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"dialog-footer\"\n        className={cn(\"flex flex-col-reverse gap-2 p-4 sm:flex-row sm:justify-end\", className)}\n        {...props}\n      />\n    )\n  }\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(function DialogTitle({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Title\n      ref={ref}\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"font-sans text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-[color:var(--mila-dialog-title-fg)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDialogTitle.displayName = \"DialogTitle\"\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(function DialogDescription({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"font-sans text-sm font-normal leading-normal tracking-[0.07px] text-[color:var(--mila-dialog-description-fg)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDialogDescription.displayName = \"DialogDescription\"\n\n/** Figma close control: 16px icon, 32px target, focus ring. */\nconst DialogCloseButton = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>(function DialogCloseButton({ className, children, ...props }, ref) {\n  return (\n    <DialogPrimitive.Close\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"text-[color:var(--mila-dialog-close-fg)] inline-flex size-8 shrink-0 items-center justify-center rounded-sm opacity-70 outline-none transition-opacity\",\n        \"hover:opacity-100\",\n        \"focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-dialog-close-focus-ring)] focus-visible:ring-offset-0\",\n        \"disabled:pointer-events-none\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? <X className=\"size-4\" aria-hidden strokeWidth={2} />}\n    </DialogPrimitive.Close>\n  )\n})\nDialogCloseButton.displayName = \"DialogCloseButton\"\n\nexport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogCloseButton,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"]}

package/packages/ui/dist/components/drawer.d.mts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Dialog } from 'radix-ui';
+
+/** MILA Drawer (Figma Obra shadcn — node 301:245123): bottom sheet, full width, top radius 10px, dialog shadow, drag handle, default max height 300px. */
+declare const Drawer: React.FC<Dialog.DialogProps>;
+declare const DrawerTrigger: React.ForwardRefExoticComponent<Dialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: React.ForwardRefExoticComponent<Dialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: React.FC<Dialog.DialogPortalProps>;
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Dialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Dialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showHandle?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<Dialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<Dialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

package/packages/ui/dist/components/drawer.js

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { Dialog } from 'radix-ui';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Drawer = Dialog.Root;
+var DrawerTrigger = Dialog.Trigger;
+var DrawerClose = Dialog.Close;
+var DrawerPortal = Dialog.Portal;
+var DrawerOverlay = React.forwardRef(function DrawerOverlay2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Overlay,
+    {
+      ref,
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-[color:var(--mila-dialog-overlay-bg)]",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+DrawerOverlay.displayName = "DrawerOverlay";
+var DrawerHandle = React.forwardRef(
+  function DrawerHandle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "drawer-handle",
+        className: cn(
+          "bg-[color:var(--mila-drawer-handle-bg)] pointer-events-none absolute top-2 left-1/2 h-[3px] w-[50px] -translate-x-1/2 rounded-[2px]",
+          className
+        ),
+        "aria-hidden": true,
+        ...props
+      }
+    );
+  }
+);
+DrawerHandle.displayName = "DrawerHandle";
+var DrawerContent = React.forwardRef(
+  function DrawerContent2({ className, children, showHandle = true, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+      /* @__PURE__ */ jsx(DrawerOverlay, {}),
+      /* @__PURE__ */ jsxs(
+        Dialog.Content,
+        {
+          ref,
+          "data-slot": "drawer-content",
+          className: cn(
+            "fixed inset-x-0 bottom-0 z-50 flex max-h-[min(300px,90dvh)] w-full flex-col overflow-hidden rounded-t-[10px] bg-[color:var(--mila-dialog-bg)] shadow-[var(--mila-dialog-shadow)] outline-none",
+            "focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-dialog-content-focus-ring)] focus-visible:ring-offset-0",
+            "data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            className
+          ),
+          ...props,
+          children: [
+            showHandle ? /* @__PURE__ */ jsx(DrawerHandle, {}) : null,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "relative flex min-h-0 flex-1 flex-col",
+                  showHandle ? "pt-6" : "pt-4"
+                ),
+                children
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = React.forwardRef(
+  function DrawerHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "drawer-header",
+        className: cn("flex shrink-0 flex-col gap-2 px-6 pt-0 pb-0 text-left", className),
+        ...props
+      }
+    );
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerBody = React.forwardRef(
+  function DrawerBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "drawer-body",
+        className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4", className),
+        ...props
+      }
+    );
+  }
+);
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = React.forwardRef(
+  function DrawerFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "drawer-footer",
+        className: cn("flex shrink-0 flex-col-reverse gap-2 px-6 pt-2 pb-4 sm:flex-row sm:justify-end", className),
+        ...props
+      }
+    );
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React.forwardRef(function DrawerTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      ref,
+      "data-slot": "drawer-title",
+      className: cn(
+        "font-sans text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-[color:var(--mila-dialog-title-fg)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React.forwardRef(function DrawerDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Description,
+    {
+      ref,
+      "data-slot": "drawer-description",
+      className: cn(
+        "font-sans text-sm font-normal leading-normal tracking-[0.07px] text-[color:var(--mila-dialog-description-fg)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+DrawerDescription.displayName = "DrawerDescription";
+
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
+//# sourceMappingURL=drawer.js.map
+//# sourceMappingURL=drawer.js.map

package/packages/ui/dist/components/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/drawer.tsx"],"names":["DrawerPrimitive","DrawerOverlay","DrawerHandle","DrawerContent","DrawerHeader","DrawerBody","DrawerFooter","DrawerTitle","DrawerDescription"],"mappings":"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","file":"drawer.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DrawerPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../lib/utils.js\"\n\n/** MILA Drawer (Figma Obra shadcn — node 301:245123): bottom sheet, full width, top radius 10px, dialog shadow, drag handle, default max height 300px. */\nconst Drawer = DrawerPrimitive.Root\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(function DrawerOverlay({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Overlay\n      ref={ref}\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-[color:var(--mila-dialog-overlay-bg)]\",\n        \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDrawerOverlay.displayName = \"DrawerOverlay\"\n\nconst DrawerHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<\"div\">>(\n  function DrawerHandle({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"drawer-handle\"\n        className={cn(\n          \"bg-[color:var(--mila-drawer-handle-bg)] pointer-events-none absolute top-2 left-1/2 h-[3px] w-[50px] -translate-x-1/2 rounded-[2px]\",\n          className\n        )}\n        aria-hidden\n        {...props}\n      />\n    )\n  }\n)\nDrawerHandle.displayName = \"DrawerHandle\"\n\ntype DrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {\n  showHandle?: boolean\n}\n\nconst DrawerContent = React.forwardRef<React.ElementRef<typeof DrawerPrimitive.Content>, DrawerContentProps>(\n  function DrawerContent({ className, children, showHandle = true, ...props }, ref) {\n    return (\n      <DrawerPortal>\n        <DrawerOverlay />\n        <DrawerPrimitive.Content\n          ref={ref}\n          data-slot=\"drawer-content\"\n          className={cn(\n            \"fixed inset-x-0 bottom-0 z-50 flex max-h-[min(300px,90dvh)] w-full flex-col overflow-hidden rounded-t-[10px] bg-[color:var(--mila-dialog-bg)] shadow-[var(--mila-dialog-shadow)] outline-none\",\n            \"focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-dialog-content-focus-ring)] focus-visible:ring-offset-0\",\n            \"data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n            className\n          )}\n          {...props}\n        >\n          {showHandle ? <DrawerHandle /> : null}\n          <div\n            className={cn(\n              \"relative flex min-h-0 flex-1 flex-col\",\n              showHandle ? \"pt-6\" : \"pt-4\"\n            )}\n          >\n            {children}\n          </div>\n        </DrawerPrimitive.Content>\n      </DrawerPortal>\n    )\n  }\n)\nDrawerContent.displayName = \"DrawerContent\"\n\nconst DrawerHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<\"div\">>(\n  function DrawerHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"drawer-header\"\n        className={cn(\"flex shrink-0 flex-col gap-2 px-6 pt-0 pb-0 text-left\", className)}\n        {...props}\n      />\n    )\n  }\n)\nDrawerHeader.displayName = \"DrawerHeader\"\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<\"div\">>(\n  function DrawerBody({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"drawer-body\"\n        className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4\", className)}\n        {...props}\n      />\n    )\n  }\n)\nDrawerBody.displayName = \"DrawerBody\"\n\nconst DrawerFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<\"div\">>(\n  function DrawerFooter({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"drawer-footer\"\n        className={cn(\"flex shrink-0 flex-col-reverse gap-2 px-6 pt-2 pb-4 sm:flex-row sm:justify-end\", className)}\n        {...props}\n      />\n    )\n  }\n)\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(function DrawerTitle({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Title\n      ref={ref}\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"font-sans text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-[color:var(--mila-dialog-title-fg)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDrawerTitle.displayName = \"DrawerTitle\"\n\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(function DrawerDescription({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Description\n      ref={ref}\n      data-slot=\"drawer-description\"\n      className={cn(\n        \"font-sans text-sm font-normal leading-normal tracking-[0.07px] text-[color:var(--mila-dialog-description-fg)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDrawerDescription.displayName = \"DrawerDescription\"\n\nexport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHandle,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n}\n"]}