@evinvest/uikit 0.19.0 → 0.21.0

package/dist/components/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { useRovingFocus } from \"../primitives/use-roving-focus\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  CONTEXT_MENU_CHECK_ITEM,\n  CONTEXT_MENU_CONTENT,\n  CONTEXT_MENU_ITEM,\n  CONTEXT_MENU_LABEL,\n  CONTEXT_MENU_SEPARATOR,\n  CONTEXT_MENU_SHORTCUT,\n  CONTEXT_MENU_SUB_CONTENT,\n  CONTEXT_MENU_SUB_TRIGGER,\n} from \"../generated/context-menu\";\n\ninterface ContextMenuContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  point: { x: number; y: number };\n  setPoint: (p: { x: number; y: number }) => void;\n}\n\nconst ContextMenuContext = React.createContext<ContextMenuContextValue | null>(null);\n\nfunction useContextMenu(): ContextMenuContextValue {\n  const ctx = React.useContext(ContextMenuContext);\n  if (!ctx) throw new Error(\"ContextMenu parts must be used within <ContextMenu>\");\n  return ctx;\n}\n\nexport interface ContextMenuProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function ContextMenu({ open, defaultOpen = false, onOpenChange, children }: ContextMenuProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const [point, setPoint] = React.useState({ x: 0, y: 0 });\n  return (\n    <ContextMenuContext.Provider value={{ open: isOpen, setOpen, point, setPoint }}>\n      <div data-slot=\"context-menu\">{children}</div>\n    </ContextMenuContext.Provider>\n  );\n}\n\nexport function ContextMenuPortal({ children }: { children?: React.ReactNode }) {\n  return <Portal>{children}</Portal>;\n}\n\nexport interface ContextMenuTriggerProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nexport function ContextMenuTrigger({ asChild = false, onContextMenu, ...props }: ContextMenuTriggerProps) {\n  const { setOpen, setPoint } = useContextMenu();\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      data-slot=\"context-menu-trigger\"\n      onContextMenu={(e: React.MouseEvent<HTMLDivElement>) => {\n        onContextMenu?.(e);\n        e.preventDefault();\n        setPoint({ x: e.clientX, y: e.clientY });\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function ContextMenuGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"context-menu-group\" role=\"group\" className={className} {...props} />;\n}\n\nconst ContextMenuCloseContext = React.createContext<() => void>(() => {});\n\nexport function ContextMenuContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { open, setOpen, point } = useContextMenu();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n  });\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  const items = () =>\n    Array.from(\n      contentRef.current?.querySelectorAll<HTMLElement>(\"[role^='menuitem']\") ?? [],\n    ).filter((el) => el.getAttribute(\"data-disabled\") === null);\n  const { activeIndex, onKeyDown: rovingKeyDown } = useRovingFocus({\n    count: 64,\n    orientation: \"vertical\",\n    loop: true,\n  });\n  React.useEffect(() => {\n    if (!open) return;\n    items()[activeIndex]?.focus();\n  }, [open, activeIndex]);\n  const close = React.useCallback(() => setOpen(false), [setOpen]);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <ContextMenuCloseContext.Provider value={close}>\n        <div\n          data-slot=\"context-menu-content\"\n          data-state={open ? \"open\" : \"closed\"}\n          data-side=\"bottom\"\n          role=\"menu\"\n          tabIndex={-1}\n          onKeyDown={(e) => {\n            rovingKeyDown(e);\n            if (e.key === \"Escape\") setOpen(false);\n          }}\n          ref={mergeRefs(dismissRef, presRef, contentRef)}\n          style={{ position: \"fixed\", top: point.y, left: point.x }}\n          className={cn(\n            CONTEXT_MENU_CONTENT,\n            className,\n          )}\n          {...(props as Record<string, unknown>)}\n        >\n          {children}\n        </div>\n      </ContextMenuCloseContext.Provider>\n    </Portal>\n  );\n}\n\nexport interface ContextMenuItemProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n  variant?: \"neutral\" | \"destructive\";\n  disabled?: boolean;\n}\n\nexport function ContextMenuItem({\n  className,\n  inset,\n  variant = \"neutral\",\n  disabled,\n  onClick,\n  onKeyDown,\n  ...props\n}: ContextMenuItemProps) {\n  const close = React.useContext(ContextMenuCloseContext);\n  return (\n    <div\n      data-slot=\"context-menu-item\"\n      data-inset={inset ? \"\" : undefined}\n      data-variant={variant}\n      data-disabled={disabled ? \"\" : undefined}\n      role=\"menuitem\"\n      tabIndex={disabled ? undefined : -1}\n      className={cn(\n        CONTEXT_MENU_ITEM,\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        onClick?.(e);\n        close();\n      }}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          (e.currentTarget as HTMLElement).click();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface ContextMenuCheckboxItemProps extends React.ComponentProps<\"div\"> {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport function ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  onClick,\n  ...props\n}: ContextMenuCheckboxItemProps) {\n  const close = React.useContext(ContextMenuCloseContext);\n  return (\n    <div\n      data-slot=\"context-menu-checkbox-item\"\n      role=\"menuitemcheckbox\"\n      aria-checked={checked}\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      data-disabled={disabled ? \"\" : undefined}\n      tabIndex={disabled ? undefined : -1}\n      className={cn(\n        CONTEXT_MENU_CHECK_ITEM,\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        onClick?.(e);\n        close();\n      }}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        {checked ? (\n          <svg className=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M20 6 9 17l-5-5\" />\n          </svg>\n        ) : null}\n      </span>\n      {children}\n    </div>\n  );\n}\n\ninterface ContextMenuRadioGroupContextValue {\n  value: string | undefined;\n  setValue: (next: string) => void;\n}\n\nconst ContextMenuRadioGroupContext =\n  React.createContext<ContextMenuRadioGroupContextValue | null>(null);\n\nexport interface ContextMenuRadioGroupProps extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport function ContextMenuRadioGroup({\n  className,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: ContextMenuRadioGroupProps) {\n  const ctx = React.useMemo<ContextMenuRadioGroupContextValue>(\n    () => ({ value, setValue: (next) => onValueChange?.(next) }),\n    [value, onValueChange],\n  );\n  return (\n    <ContextMenuRadioGroupContext.Provider value={ctx}>\n      <div data-slot=\"context-menu-radio-group\" role=\"group\" className={className} {...props}>\n        {children}\n      </div>\n    </ContextMenuRadioGroupContext.Provider>\n  );\n}\n\nexport interface ContextMenuRadioItemProps extends React.ComponentProps<\"div\"> {\n  value: string;\n  disabled?: boolean;\n}\n\nexport function ContextMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  onClick,\n  ...props\n}: ContextMenuRadioItemProps) {\n  const close = React.useContext(ContextMenuCloseContext);\n  const group = React.useContext(ContextMenuRadioGroupContext);\n  const checked = group?.value === value;\n  return (\n    <div\n      data-slot=\"context-menu-radio-item\"\n      role=\"menuitemradio\"\n      aria-checked={checked}\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      data-disabled={disabled ? \"\" : undefined}\n      tabIndex={disabled ? undefined : -1}\n      className={cn(\n        CONTEXT_MENU_CHECK_ITEM,\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        onClick?.(e);\n        group?.setValue(value);\n        close();\n      }}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        {checked ? (\n          <svg className=\"size-2 fill-current\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          </svg>\n        ) : null}\n      </span>\n      {children}\n    </div>\n  );\n}\n\nexport interface ContextMenuLabelProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n}\n\nexport function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {\n  return (\n    <div\n      data-slot=\"context-menu-label\"\n      data-inset={inset ? \"\" : undefined}\n      className={cn(CONTEXT_MENU_LABEL, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"context-menu-separator\"\n      role=\"separator\"\n      className={cn(CONTEXT_MENU_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(CONTEXT_MENU_SHORTCUT, className)}\n      {...props}\n    />\n  );\n}\n\n// Sub-menus render inline (nested) rather than in a separate floating layer:\n// the sub-content is revealed in place when its trigger toggles.\ninterface ContextMenuSubContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n}\n\nconst ContextMenuSubContext = React.createContext<ContextMenuSubContextValue | null>(null);\n\nexport interface ContextMenuSubProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function ContextMenuSub({ open, defaultOpen = false, onOpenChange, children }: ContextMenuSubProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  return (\n    <ContextMenuSubContext.Provider value={{ open: isOpen, setOpen }}>\n      <div data-slot=\"context-menu-sub\">{children}</div>\n    </ContextMenuSubContext.Provider>\n  );\n}\n\nexport interface ContextMenuSubTriggerProps extends React.ComponentProps<\"div\"> {\n  inset?: boolean;\n}\n\nexport function ContextMenuSubTrigger({ className, inset, children, onClick, ...props }: ContextMenuSubTriggerProps) {\n  const ctx = React.useContext(ContextMenuSubContext);\n  return (\n    <div\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset ? \"\" : undefined}\n      data-state={ctx?.open ? \"open\" : \"closed\"}\n      role=\"menuitem\"\n      aria-haspopup=\"menu\"\n      aria-expanded={ctx?.open}\n      tabIndex={-1}\n      className={cn(\n        CONTEXT_MENU_SUB_TRIGGER,\n        className,\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        ctx?.setOpen(!ctx.open);\n      }}\n      {...props}\n    >\n      {children}\n      <svg className=\"ml-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </div>\n  );\n}\n\nexport function ContextMenuSubContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = React.useContext(ContextMenuSubContext);\n  if (!ctx?.open) return null;\n  return (\n    <div\n      data-slot=\"context-menu-sub-content\"\n      data-state=\"open\"\n      role=\"menu\"\n      className={cn(\n        CONTEXT_MENU_SUB_CONTENT,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/date-time-picker.js

@@ -0,0 +1,301 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { focusCandidates } from "../primitives/focus-scope.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { buttonVariants } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import {
+  DATE_TIME_PICKER_CLEAR,
+  DATE_TIME_PICKER_CONTENT,
+  DATE_TIME_PICKER_TIME,
+  DATE_TIME_PICKER_TIME_INPUT,
+  DATE_TIME_PICKER_TIME_SEPARATOR,
+  DATE_TIME_PICKER_TRIGGER
+} from "../generated/date-time-picker.js";
+const CALENDAR_ICON = [
+  "M8 2v4",
+  "M16 2v4",
+  "M3 10h18",
+  "M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
+];
+function CalendarIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: CALENDAR_ICON.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+    }
+  );
+}
+function XIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+    }
+  );
+}
+const pad = (n) => String(n).padStart(2, "0");
+function atMinute(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes());
+}
+function clampMoment(d, min, max) {
+  const lo = min && atMinute(min);
+  const hi = max && atMinute(max);
+  if (lo && d.getTime() < lo.getTime()) return lo;
+  if (hi && d.getTime() > hi.getTime()) return hi;
+  return d;
+}
+function parseField(raw, max) {
+  const digits = raw.replace(/\D/g, "").slice(-2);
+  if (digits === "") return null;
+  return Math.min(Number(digits), max);
+}
+const selectAll = (e) => e.currentTarget.select();
+function isoLabel(d) {
+  return `${d.getFullYear().toString().padStart(4, "0")}-${pad(d.getMonth() + 1)}-${pad(
+    d.getDate()
+  )} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function DateTimePicker({
+  value: valueProp,
+  defaultValue = null,
+  onChange,
+  min,
+  max,
+  locale,
+  format,
+  placeholder = "",
+  labels = {},
+  disabled = false,
+  name,
+  today = /* @__PURE__ */ new Date(),
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  align = "start",
+  className,
+  id,
+  ...rest
+}) {
+  const [value, setValue] = useControllableState({
+    ...valueProp !== void 0 ? { value: valueProp } : {},
+    defaultValue,
+    ...onChange ? { onChange } : {}
+  });
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  const rootRef = React.useRef(null);
+  const hoursRef = React.useRef(null);
+  const focusTrigger = () => rootRef.current?.querySelector("[data-slot=date-time-picker-trigger]")?.focus();
+  React.useEffect(() => {
+    if (!isOpen) return;
+    hoursRef.current?.focus();
+    return () => {
+      const active = document.activeElement;
+      const content = hoursRef.current?.closest("[data-slot=date-time-picker-content]");
+      const lost = !active || active === document.body || !!content?.contains(active);
+      if (lost) focusTrigger();
+    };
+  }, [isOpen]);
+  const emit = (next) => setValue(clampMoment(atMinute(next), min, max));
+  const base = () => value ? new Date(value.getTime()) : new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  const onSelect = (day) => emit(
+    new Date(
+      day.getFullYear(),
+      day.getMonth(),
+      day.getDate(),
+      value?.getHours() ?? 0,
+      value?.getMinutes() ?? 0
+    )
+  );
+  const onHours = (e) => {
+    const hour = parseField(e.target.value, 23);
+    if (hour === null) return;
+    const next = base();
+    next.setHours(hour);
+    emit(next);
+  };
+  const onMinutes = (e) => {
+    const minute = parseField(e.target.value, 59);
+    if (minute === null) return;
+    const next = base();
+    next.setMinutes(minute);
+    emit(next);
+  };
+  const onClear = () => {
+    setValue(null);
+    setOpen(false);
+  };
+  const onContentKeyDown = (e) => {
+    if (e.key !== "Tab") return;
+    const items = focusCandidates(e.currentTarget);
+    const edge = e.shiftKey ? items[0] : items[items.length - 1];
+    if (!edge || e.target !== edge) return;
+    e.preventDefault();
+    setOpen(false);
+    focusTrigger();
+  };
+  const onContentBlur = (e) => {
+    const next = e.relatedTarget;
+    if (!(next instanceof Node)) return;
+    if (e.currentTarget.contains(next) || rootRef.current?.contains(next)) return;
+    setOpen(false);
+  };
+  const label = value ? format ? format(value) : locale ? (
+    // The fields are 24-hour, so the label is too — even where the locale
+    // would default to 12-hour ("2:05 PM" over a "14" hours field).
+    new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium",
+      timeStyle: "short",
+      hourCycle: "h23"
+    }).format(value)
+  ) : isoLabel(value) : placeholder;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "date-time-picker", ref: rootRef, children: /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        type: "button",
+        "data-slot": "date-time-picker-trigger",
+        "data-placeholder": value ? void 0 : "true",
+        "aria-haspopup": "dialog",
+        className: cn(
+          buttonVariants({ variant: "outline", size: "md" }),
+          DATE_TIME_PICKER_TRIGGER,
+          className
+        ),
+        disabled,
+        ...id !== void 0 ? { id } : {},
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, {}),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    ),
+    name !== void 0 && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name,
+        value: value ? String(Math.floor(value.getTime() / 1e3)) : ""
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        "data-slot": "date-time-picker-content",
+        role: "dialog",
+        "aria-label": labels.dialog ?? "Choose date and time",
+        align,
+        onBlur: onContentBlur,
+        onKeyDown: onContentKeyDown,
+        className: DATE_TIME_PICKER_CONTENT,
+        children: [
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              ...value ? { selected: value } : {},
+              onSelect,
+              defaultMonth: value ?? min ?? today,
+              today,
+              disabled,
+              ...min ? { min } : {},
+              ...max ? { max } : {},
+              ...locale !== void 0 ? { locale } : {},
+              ...labels.previousMonth !== void 0 ? { previousMonthLabel: labels.previousMonth } : {},
+              ...labels.nextMonth !== void 0 ? { nextMonthLabel: labels.nextMonth } : {}
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: DATE_TIME_PICKER_TIME, "data-slot": "date-time-picker-time", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "text",
+                inputMode: "numeric",
+                onFocus: selectAll,
+                className: DATE_TIME_PICKER_TIME_INPUT,
+                ref: hoursRef,
+                "data-slot": "date-time-picker-hours",
+                "aria-label": labels.hours ?? "Hours",
+                value: pad(value?.getHours() ?? 0),
+                disabled,
+                onChange: onHours
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: DATE_TIME_PICKER_TIME_SEPARATOR, "aria-hidden": true, children: ":" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "text",
+                inputMode: "numeric",
+                onFocus: selectAll,
+                className: DATE_TIME_PICKER_TIME_INPUT,
+                "data-slot": "date-time-picker-minutes",
+                "aria-label": labels.minutes ?? "Minutes",
+                value: pad(value?.getMinutes() ?? 0),
+                disabled,
+                onChange: onMinutes
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: buttonVariants({ variant: "ghost", size: "sm", className: DATE_TIME_PICKER_CLEAR }),
+                "data-slot": "date-time-picker-clear",
+                disabled,
+                onClick: onClear,
+                children: labels.clear ?? "Clear"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: buttonVariants({ variant: "ghost", size: "sm", icon: true }),
+                "data-slot": "date-time-picker-close",
+                "aria-label": labels.close ?? "Close",
+                disabled,
+                onClick: () => setOpen(false),
+                children: /* @__PURE__ */ jsx(XIcon, {})
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  DateTimePicker
+};
+//# sourceMappingURL=date-time-picker.js.map

package/dist/components/date-time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-time-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { focusCandidates } from \"../primitives/focus-scope\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { buttonVariants } from \"./button\";\nimport { Calendar } from \"./calendar\";\nimport { Input } from \"./input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\nimport {\n  DATE_TIME_PICKER_CLEAR,\n  DATE_TIME_PICKER_CONTENT,\n  DATE_TIME_PICKER_TIME,\n  DATE_TIME_PICKER_TIME_INPUT,\n  DATE_TIME_PICKER_TIME_SEPARATOR,\n  DATE_TIME_PICKER_TRIGGER,\n} from \"../generated/date-time-picker\";\n\n// lucide `calendar`, inlined per the kit's no-icon-dep convention.\nconst CALENDAR_ICON = [\n  \"M8 2v4\",\n  \"M16 2v4\",\n  \"M3 10h18\",\n  \"M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\",\n] as const;\n\nfunction CalendarIcon() {\n  return (\n    <svg\n      className=\"size-4\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      {CALENDAR_ICON.map(d => (\n        <path key={d} d={d} />\n      ))}\n    </svg>\n  );\n}\n\n// lucide `x`, inlined like every other icon in the kit.\nfunction XIcon() {\n  return (\n    <svg\n      className=\"size-4\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\nconst pad = (n: number): string => String(n).padStart(2, \"0\");\n\n// The value always carries whole minutes: seconds/ms are dropped on every write.\nfunction atMinute(d: Date): Date {\n  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes());\n}\n\n/** Inclusive clamp at minute precision. */\nfunction clampMoment(d: Date, min: Date | undefined, max: Date | undefined): Date {\n  const lo = min && atMinute(min);\n  const hi = max && atMinute(max);\n  if (lo && d.getTime() < lo.getTime()) return lo;\n  if (hi && d.getTime() > hi.getTime()) return hi;\n  return d;\n}\n\n/**\n * Parses the digits an operator typed into an hours/minutes field. `null`\n * (nothing typed, or no digit at all) keeps the last value.\n *\n * The LAST two digits win: the field is controlled, so what the browser hands\n * over is the old value plus the keystroke (\"01\" + \"5\" = \"015\"), and the\n * freshest digits are the ones the operator meant.\n */\nfunction parseField(raw: string, max: number): number | null {\n  const digits = raw.replace(/\\D/g, \"\").slice(-2);\n  if (digits === \"\") return null;\n  return Math.min(Number(digits), max);\n}\n\n// A focused field is replaced, not appended to: with the whole value selected,\n// \"1\" then \"5\" reads as 15.\nconst selectAll = (e: React.FocusEvent<HTMLInputElement>) => e.currentTarget.select();\n\nfunction isoLabel(d: Date): string {\n  return `${d.getFullYear().toString().padStart(4, \"0\")}-${pad(d.getMonth() + 1)}-${pad(\n    d.getDate(),\n  )} ${pad(d.getHours())}:${pad(d.getMinutes())}`;\n}\n\n/** The picker's own strings; every one defaults to English. */\nexport interface DateTimePickerLabels {\n  /** `aria-label` of the calendar's previous-month button; \"Previous month\". */\n  previousMonth?: string;\n  /** `aria-label` of the calendar's next-month button; \"Next month\". */\n  nextMonth?: string;\n  /** `aria-label` of the hours input; \"Hours\". */\n  hours?: string;\n  /** `aria-label` of the minutes input; \"Minutes\". */\n  minutes?: string;\n  /** Text of the clear button; \"Clear\". */\n  clear?: string;\n  /** `aria-label` of the popover dialog; \"Choose date and time\". */\n  dialog?: string;\n  /** `aria-label` of the close button; \"Close\". */\n  close?: string;\n}\n\nexport interface DateTimePickerProps\n  extends React.AriaAttributes,\n    Pick<React.ComponentProps<\"button\">, \"onFocus\" | \"onBlur\"> {\n  /** Controlled value; `null` = empty. Local-zone `Date` (seconds/ms are zeroed on every change). */\n  value?: Date | null;\n  /** Uncontrolled seed; default `null`. */\n  defaultValue?: Date | null;\n  onChange?: (value: Date | null) => void;\n  /** Earliest allowed moment (inclusive, minute precision). */\n  min?: Date;\n  /** Latest allowed moment (inclusive, minute precision). */\n  max?: Date;\n  /**\n   * BCP-47 tag for the trigger label and calendar captions (`Intl`). Absent →\n   * `YYYY-MM-DD HH:MM` and English captions, like the Rust port.\n   */\n  locale?: string;\n  /** Overrides the trigger label entirely (e.g. the cabinet's `formatMoment`). */\n  format?: (value: Date) => string;\n  /** Shown on the trigger while empty; default \"\". */\n  placeholder?: string;\n  labels?: DateTimePickerLabels;\n  disabled?: boolean;\n  /** Renders a hidden `<input name>` carrying unix seconds (\"\" when empty) for plain forms. */\n  name?: string;\n  /**\n   * \"Today\" for the calendar highlight and as the day a typed time lands on\n   * while empty; default `new Date()`.\n   */\n  today?: Date;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** `PopoverContent` alignment; default \"start\". */\n  align?: \"start\" | \"center\" | \"end\";\n  /** Fused onto the trigger. */\n  className?: string;\n  /** Put on the trigger, so a `FieldLabel`'s `htmlFor` reaches it. */\n  id?: string;\n}\n\n/**\n * A date + time field over the kit's own bricks: an outline trigger opening a\n * popover with the `Calendar` and two numeric hours/minutes inputs — no native\n * `datetime-local`, so the browser's locale popup never appears.\n *\n * Every edit reports through `onChange`; the popover stays open after a day\n * click (the operator still sets the time) and closes on clear or on the close\n * button (which keeps the value). Opening moves focus into the hours field;\n * closing hands it back to the trigger unless the operator already focused\n * something else. Any other `aria-*` prop, `onFocus` and `onBlur` land on the\n * trigger.\n */\nexport function DateTimePicker({\n  value: valueProp,\n  defaultValue = null,\n  onChange,\n  min,\n  max,\n  locale,\n  format,\n  placeholder = \"\",\n  labels = {},\n  disabled = false,\n  name,\n  today = new Date(),\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  align = \"start\",\n  className,\n  id,\n  ...rest\n}: DateTimePickerProps) {\n  const [value, setValue] = useControllableState<Date | null>({\n    ...(valueProp !== undefined ? { value: valueProp } : {}),\n    defaultValue,\n    ...(onChange ? { onChange } : {}),\n  });\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const hoursRef = React.useRef<HTMLInputElement | null>(null);\n  const focusTrigger = () =>\n    rootRef.current?.querySelector<HTMLElement>(\"[data-slot=date-time-picker-trigger]\")?.focus();\n  // The content lives in a Portal, so the native tab order would skip it.\n  React.useEffect(() => {\n    if (!isOpen) return;\n    hoursRef.current?.focus();\n    return () => {\n      const active = document.activeElement;\n      const content = hoursRef.current?.closest(\"[data-slot=date-time-picker-content]\");\n      const lost = !active || active === document.body || !!content?.contains(active);\n      if (lost) focusTrigger();\n    };\n  }, [isOpen]);\n\n  const emit = (next: Date) => setValue(clampMoment(atMinute(next), min, max));\n  // A fresh copy of the moment a typed time edits: the value, or midnight of\n  // `today` while empty — never the consumer's own `Date` instance.\n  const base = () =>\n    value\n      ? new Date(value.getTime())\n      : new Date(today.getFullYear(), today.getMonth(), today.getDate());\n\n  const onSelect = (day: Date) =>\n    emit(\n      new Date(\n        day.getFullYear(),\n        day.getMonth(),\n        day.getDate(),\n        value?.getHours() ?? 0,\n        value?.getMinutes() ?? 0,\n      ),\n    );\n  const onHours = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const hour = parseField(e.target.value, 23);\n    if (hour === null) return;\n    const next = base();\n    next.setHours(hour);\n    emit(next);\n  };\n  const onMinutes = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const minute = parseField(e.target.value, 59);\n    if (minute === null) return;\n    const next = base();\n    next.setMinutes(minute);\n    emit(next);\n  };\n  const onClear = () => {\n    setValue(null);\n    setOpen(false);\n  };\n  // The content is portalled to the end of <body>, so Tab from its last\n  // control (and Shift+Tab from its first) has nowhere to go: focus falls out\n  // of the document and the dialog stays open over the page. Those two edges\n  // close the popover and hand focus back to the trigger — the document's tab\n  // order then continues from where the operator started. Middle controls keep\n  // the browser's default. Not a trap: the popover is non-modal.\n  const onContentKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Tab\") return;\n    const items = focusCandidates(e.currentTarget);\n    const edge = e.shiftKey ? items[0] : items[items.length - 1];\n    if (!edge || e.target !== edge) return;\n    e.preventDefault();\n    setOpen(false);\n    focusTrigger();\n  };\n  // Focus moving elsewhere by pointer or script (the dismissable layer only\n  // watches Escape and outside pointerdown). A null `relatedTarget` is the\n  // window losing focus (alt-tab), not the operator leaving: keep the popover\n  // for their return. Tab-out never reaches here — `onContentKeyDown` closes\n  // first.\n  const onContentBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    const next = e.relatedTarget;\n    if (!(next instanceof Node)) return;\n    if (e.currentTarget.contains(next) || rootRef.current?.contains(next)) return;\n    setOpen(false);\n  };\n\n  const label = value\n    ? format\n      ? format(value)\n      : locale\n        ? // The fields are 24-hour, so the label is too — even where the locale\n          // would default to 12-hour (\"2:05 PM\" over a \"14\" hours field).\n          new Intl.DateTimeFormat(locale, {\n            dateStyle: \"medium\",\n            timeStyle: \"short\",\n            hourCycle: \"h23\",\n          }).format(value)\n        : isoLabel(value)\n    : placeholder;\n\n  return (\n    <div data-slot=\"date-time-picker\" ref={rootRef}>\n      <Popover open={isOpen} onOpenChange={setOpen}>\n        <PopoverTrigger\n          type=\"button\"\n          data-slot=\"date-time-picker-trigger\"\n          data-placeholder={value ? undefined : \"true\"}\n          aria-haspopup=\"dialog\"\n          className={cn(\n            buttonVariants({ variant: \"outline\", size: \"md\" }),\n            DATE_TIME_PICKER_TRIGGER,\n            className,\n          )}\n          disabled={disabled}\n          {...(id !== undefined ? { id } : {})}\n          {...rest}\n        >\n          <CalendarIcon />\n          <span>{label}</span>\n        </PopoverTrigger>\n        {name !== undefined && (\n          <input\n            type=\"hidden\"\n            name={name}\n            value={value ? String(Math.floor(value.getTime() / 1000)) : \"\"}\n          />\n        )}\n        <PopoverContent\n          data-slot=\"date-time-picker-content\"\n          role=\"dialog\"\n          aria-label={labels.dialog ?? \"Choose date and time\"}\n          align={align}\n          onBlur={onContentBlur}\n          onKeyDown={onContentKeyDown}\n          className={DATE_TIME_PICKER_CONTENT}\n        >\n          <Calendar\n            {...(value ? { selected: value } : {})}\n            onSelect={onSelect}\n            // The content remounts on every open, so this lands on the value's month.\n            defaultMonth={value ?? min ?? today}\n            today={today}\n            disabled={disabled}\n            {...(min ? { min } : {})}\n            {...(max ? { max } : {})}\n            {...(locale !== undefined ? { locale } : {})}\n            {...(labels.previousMonth !== undefined\n              ? { previousMonthLabel: labels.previousMonth }\n              : {})}\n            {...(labels.nextMonth !== undefined ? { nextMonthLabel: labels.nextMonth } : {})}\n          />\n          <div className={DATE_TIME_PICKER_TIME} data-slot=\"date-time-picker-time\">\n            <Input\n              type=\"text\"\n              inputMode=\"numeric\"\n              onFocus={selectAll}\n              className={DATE_TIME_PICKER_TIME_INPUT}\n              ref={hoursRef}\n              data-slot=\"date-time-picker-hours\"\n              aria-label={labels.hours ?? \"Hours\"}\n              value={pad(value?.getHours() ?? 0)}\n              disabled={disabled}\n              onChange={onHours}\n            />\n            <span className={DATE_TIME_PICKER_TIME_SEPARATOR} aria-hidden>\n              :\n            </span>\n            <Input\n              type=\"text\"\n              inputMode=\"numeric\"\n              onFocus={selectAll}\n              className={DATE_TIME_PICKER_TIME_INPUT}\n              data-slot=\"date-time-picker-minutes\"\n              aria-label={labels.minutes ?? \"Minutes\"}\n              value={pad(value?.getMinutes() ?? 0)}\n              disabled={disabled}\n              onChange={onMinutes}\n            />\n            <button\n              type=\"button\"\n              className={buttonVariants({ variant: \"ghost\", size: \"sm\", className: DATE_TIME_PICKER_CLEAR })}\n              data-slot=\"date-time-picker-clear\"\n              disabled={disabled}\n              onClick={onClear}\n            >\n              {labels.clear ?? \"Clear\"}\n            </button>\n            <button\n              type=\"button\"\n              className={buttonVariants({ variant: \"ghost\", size: \"sm\", icon: true })}\n              data-slot=\"date-time-picker-close\"\n              aria-label={labels.close ?? \"Close\"}\n              disabled={disabled}\n              onClick={() => setOpen(false)}\n            >\n              <XIcon />\n            </button>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"],"mappings":";AA2CQ,cA0QA,YA1QA;AAzCR,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,eAAe;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MAEV,wBAAc,IAAI,OACjB,oBAAC,UAAa,KAAH,CAAS,CACrB;AAAA;AAAA,EACH;AAEJ;AAGA,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MAEX,8BAAC,UAAK,GAAE,wBAAuB;AAAA;AAAA,EACjC;AAEJ;AAEA,MAAM,MAAM,CAAC,MAAsB,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG;AAG5D,SAAS,SAAS,GAAe;AAC/B,SAAO,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,GAAG,EAAE,QAAQ,GAAG,EAAE,SAAS,GAAG,EAAE,WAAW,CAAC;AAC1F;AAGA,SAAS,YAAY,GAAS,KAAuB,KAA6B;AAChF,QAAM,KAAK,OAAO,SAAS,GAAG;AAC9B,QAAM,KAAK,OAAO,SAAS,GAAG;AAC9B,MAAI,MAAM,EAAE,QAAQ,IAAI,GAAG,QAAQ,EAAG,QAAO;AAC7C,MAAI,MAAM,EAAE,QAAQ,IAAI,GAAG,QAAQ,EAAG,QAAO;AAC7C,SAAO;AACT;AAUA,SAAS,WAAW,KAAa,KAA4B;AAC3D,QAAM,SAAS,IAAI,QAAQ,OAAO,EAAE,EAAE,MAAM,EAAE;AAC9C,MAAI,WAAW,GAAI,QAAO;AAC1B,SAAO,KAAK,IAAI,OAAO,MAAM,GAAG,GAAG;AACrC;AAIA,MAAM,YAAY,CAAC,MAA0C,EAAE,cAAc,OAAO;AAEpF,SAAS,SAAS,GAAiB;AACjC,SAAO,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI,EAAE,SAAS,IAAI,CAAC,CAAC,IAAI;AAAA,IAChF,EAAE,QAAQ;AAAA,EACZ,CAAC,IAAI,IAAI,EAAE,SAAS,CAAC,CAAC,IAAI,IAAI,EAAE,WAAW,CAAC,CAAC;AAC/C;AAyEO,SAAS,eAAe;AAAA,EAC7B,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,SAAS,CAAC;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,QAAQ,oBAAI,KAAK;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,OAAO,QAAQ,IAAI,qBAAkC;AAAA,IAC1D,GAAI,cAAc,SAAY,EAAE,OAAO,UAAU,IAAI,CAAC;AAAA,IACtD;AAAA,IACA,GAAI,WAAW,EAAE,SAAS,IAAI,CAAC;AAAA,EACjC,CAAC;AACD,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AAED,QAAM,UAAU,MAAM,OAA8B,IAAI;AACxD,QAAM,WAAW,MAAM,OAAgC,IAAI;AAC3D,QAAM,eAAe,MACnB,QAAQ,SAAS,cAA2B,sCAAsC,GAAG,MAAM;AAE7F,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,aAAS,SAAS,MAAM;AACxB,WAAO,MAAM;AACX,YAAM,SAAS,SAAS;AACxB,YAAM,UAAU,SAAS,SAAS,QAAQ,sCAAsC;AAChF,YAAM,OAAO,CAAC,UAAU,WAAW,SAAS,QAAQ,CAAC,CAAC,SAAS,SAAS,MAAM;AAC9E,UAAI,KAAM,cAAa;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,OAAO,CAAC,SAAe,SAAS,YAAY,SAAS,IAAI,GAAG,KAAK,GAAG,CAAC;AAG3E,QAAM,OAAO,MACX,QACI,IAAI,KAAK,MAAM,QAAQ,CAAC,IACxB,IAAI,KAAK,MAAM,YAAY,GAAG,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC;AAErE,QAAM,WAAW,CAAC,QAChB;AAAA,IACE,IAAI;AAAA,MACF,IAAI,YAAY;AAAA,MAChB,IAAI,SAAS;AAAA,MACb,IAAI,QAAQ;AAAA,MACZ,OAAO,SAAS,KAAK;AAAA,MACrB,OAAO,WAAW,KAAK;AAAA,IACzB;AAAA,EACF;AACF,QAAM,UAAU,CAAC,MAA2C;AAC1D,UAAM,OAAO,WAAW,EAAE,OAAO,OAAO,EAAE;AAC1C,QAAI,SAAS,KAAM;AACnB,UAAM,OAAO,KAAK;AAClB,SAAK,SAAS,IAAI;AAClB,SAAK,IAAI;AAAA,EACX;AACA,QAAM,YAAY,CAAC,MAA2C;AAC5D,UAAM,SAAS,WAAW,EAAE,OAAO,OAAO,EAAE;AAC5C,QAAI,WAAW,KAAM;AACrB,UAAM,OAAO,KAAK;AAClB,SAAK,WAAW,MAAM;AACtB,SAAK,IAAI;AAAA,EACX;AACA,QAAM,UAAU,MAAM;AACpB,aAAS,IAAI;AACb,YAAQ,KAAK;AAAA,EACf;AAOA,QAAM,mBAAmB,CAAC,MAA2C;AACnE,QAAI,EAAE,QAAQ,MAAO;AACrB,UAAM,QAAQ,gBAAgB,EAAE,aAAa;AAC7C,UAAM,OAAO,EAAE,WAAW,MAAM,CAAC,IAAI,MAAM,MAAM,SAAS,CAAC;AAC3D,QAAI,CAAC,QAAQ,EAAE,WAAW,KAAM;AAChC,MAAE,eAAe;AACjB,YAAQ,KAAK;AACb,iBAAa;AAAA,EACf;AAMA,QAAM,gBAAgB,CAAC,MAAwC;AAC7D,UAAM,OAAO,EAAE;AACf,QAAI,EAAE,gBAAgB,MAAO;AAC7B,QAAI,EAAE,cAAc,SAAS,IAAI,KAAK,QAAQ,SAAS,SAAS,IAAI,EAAG;AACvE,YAAQ,KAAK;AAAA,EACf;AAEA,QAAM,QAAQ,QACV,SACE,OAAO,KAAK,IACZ;AAAA;AAAA;AAAA,IAGE,IAAI,KAAK,eAAe,QAAQ;AAAA,MAC9B,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IACb,CAAC,EAAE,OAAO,KAAK;AAAA,MACf,SAAS,KAAK,IAClB;AAEJ,SACE,oBAAC,SAAI,aAAU,oBAAmB,KAAK,SACrC,+BAAC,WAAQ,MAAM,QAAQ,cAAc,SACnC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAU;AAAA,QACV,oBAAkB,QAAQ,SAAY;AAAA,QACtC,iBAAc;AAAA,QACd,WAAW;AAAA,UACT,eAAe,EAAE,SAAS,WAAW,MAAM,KAAK,CAAC;AAAA,UACjD;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAI,OAAO,SAAY,EAAE,GAAG,IAAI,CAAC;AAAA,QACjC,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa;AAAA,UACd,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACf;AAAA,IACC,SAAS,UACR;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,OAAO,QAAQ,OAAO,KAAK,MAAM,MAAM,QAAQ,IAAI,GAAI,CAAC,IAAI;AAAA;AAAA,IAC9D;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,OAAO,UAAU;AAAA,QAC7B;AAAA,QACA,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,QAEX;AAAA;AAAA,YAAC;AAAA;AAAA,cACE,GAAI,QAAQ,EAAE,UAAU,MAAM,IAAI,CAAC;AAAA,cACpC;AAAA,cAEA,cAAc,SAAS,OAAO;AAAA,cAC9B;AAAA,cACA;AAAA,cACC,GAAI,MAAM,EAAE,IAAI,IAAI,CAAC;AAAA,cACrB,GAAI,MAAM,EAAE,IAAI,IAAI,CAAC;AAAA,cACrB,GAAI,WAAW,SAAY,EAAE,OAAO,IAAI,CAAC;AAAA,cACzC,GAAI,OAAO,kBAAkB,SAC1B,EAAE,oBAAoB,OAAO,cAAc,IAC3C,CAAC;AAAA,cACJ,GAAI,OAAO,cAAc,SAAY,EAAE,gBAAgB,OAAO,UAAU,IAAI,CAAC;AAAA;AAAA,UAChF;AAAA,UACA,qBAAC,SAAI,WAAW,uBAAuB,aAAU,yBAC/C;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,WAAW;AAAA,gBACX,KAAK;AAAA,gBACL,aAAU;AAAA,gBACV,cAAY,OAAO,SAAS;AAAA,gBAC5B,OAAO,IAAI,OAAO,SAAS,KAAK,CAAC;AAAA,gBACjC;AAAA,gBACA,UAAU;AAAA;AAAA,YACZ;AAAA,YACA,oBAAC,UAAK,WAAW,iCAAiC,eAAW,MAAC,eAE9D;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,WAAW;AAAA,gBACX,aAAU;AAAA,gBACV,cAAY,OAAO,WAAW;AAAA,gBAC9B,OAAO,IAAI,OAAO,WAAW,KAAK,CAAC;AAAA,gBACnC;AAAA,gBACA,UAAU;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAW,eAAe,EAAE,SAAS,SAAS,MAAM,MAAM,WAAW,uBAAuB,CAAC;AAAA,gBAC7F,aAAU;AAAA,gBACV;AAAA,gBACA,SAAS;AAAA,gBAER,iBAAO,SAAS;AAAA;AAAA,YACnB;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAW,eAAe,EAAE,SAAS,SAAS,MAAM,MAAM,MAAM,KAAK,CAAC;AAAA,gBACtE,aAAU;AAAA,gBACV,cAAY,OAAO,SAAS;AAAA,gBAC5B;AAAA,gBACA,SAAS,MAAM,QAAQ,KAAK;AAAA,gBAE5B,8BAAC,SAAM;AAAA;AAAA,YACT;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/dialog.js

@@ -0,0 +1,207 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { useDismissableLayer } from "../primitives/dismissable-layer.js";
+import { useFocusScope } from "../primitives/focus-scope.js";
+import { usePresence } from "../primitives/presence.js";
+import { mergeRefs } from "../primitives/merge-refs.js";
+import { Portal } from "../primitives/portal.js";
+import { Slot } from "../primitives/slot.js";
+import {
+  DIALOG_CLOSE,
+  DIALOG_CONTENT,
+  DIALOG_DESCRIPTION,
+  DIALOG_FOOTER,
+  DIALOG_HEADER,
+  DIALOG_OVERLAY,
+  DIALOG_TITLE
+} from "../generated/dialog.js";
+const DialogContext = React.createContext(null);
+function useDialog() {
+  const ctx = React.useContext(DialogContext);
+  if (!ctx) throw new Error("Dialog parts must be used within <Dialog>");
+  return ctx;
+}
+function Dialog({ open, defaultOpen = false, onOpenChange, children }) {
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  const triggerRef = React.useRef(null);
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: { open: isOpen, setOpen, triggerRef }, children });
+}
+function DialogTrigger({ asChild = false, onClick, ...props }) {
+  const { open, setOpen, triggerRef } = useDialog();
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "dialog-trigger",
+      "aria-expanded": open,
+      ref: triggerRef,
+      onClick: (e) => {
+        onClick?.(e);
+        setOpen(true);
+      },
+      ...props
+    }
+  );
+}
+function DialogPortal({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function DialogOverlay({ className, ...props }) {
+  const { open, setOpen } = useDialog();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-overlay",
+      "data-state": open ? "open" : "closed",
+      onClick: () => setOpen(false),
+      className: cn(DIALOG_OVERLAY, className),
+      ...props
+    }
+  );
+}
+const XIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+  }
+);
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  const { open, setOpen, triggerRef } = useDialog();
+  const { isPresent, ref: presRef } = usePresence(open);
+  const focusRef = useFocusScope(open);
+  const dismissRef = useDismissableLayer({
+    enabled: open,
+    onDismiss: () => setOpen(false),
+    exclude: [triggerRef]
+  });
+  React.useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "dialog-content",
+        role: "dialog",
+        "aria-modal": "true",
+        "data-state": open ? "open" : "closed",
+        ref: mergeRefs(focusRef, dismissRef, presRef),
+        className: cn(DIALOG_CONTENT, className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-slot": "dialog-close",
+              onClick: () => setOpen(false),
+              className: DIALOG_CLOSE,
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogClose({ asChild = false, onClick, ...props }) {
+  const { setOpen } = useDialog();
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "dialog-close",
+      onClick: (e) => {
+        onClick?.(e);
+        setOpen(false);
+      },
+      ...props
+    }
+  );
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn(DIALOG_HEADER, className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(DIALOG_FOOTER, className),
+      ...props
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      "data-slot": "dialog-title",
+      className: cn(DIALOG_TITLE, className),
+      ...props
+    }
+  );
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "dialog-description",
+      className: cn(DIALOG_DESCRIPTION, className),
+      ...props
+    }
+  );
+}
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+};
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { useFocusScope } from \"../primitives/focus-scope\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  DIALOG_CLOSE,\n  DIALOG_CONTENT,\n  DIALOG_DESCRIPTION,\n  DIALOG_FOOTER,\n  DIALOG_HEADER,\n  DIALOG_OVERLAY,\n  DIALOG_TITLE,\n} from \"../generated/dialog\";\n\ninterface DialogContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\n\nfunction useDialog(): DialogContextValue {\n  const ctx = React.useContext(DialogContext);\n  if (!ctx) throw new Error(\"Dialog parts must be used within <Dialog>\");\n  return ctx;\n}\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function Dialog({ open, defaultOpen = false, onOpenChange, children }: DialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <DialogContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      {children}\n    </DialogContext.Provider>\n  );\n}\n\nexport interface DialogTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function DialogTrigger({ asChild = false, onClick, ...props }: DialogTriggerProps) {\n  const { open, setOpen, triggerRef } = useDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"dialog-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport type DialogPortalProps = { children?: React.ReactNode };\n\nexport function DialogPortal({ children }: DialogPortalProps) {\n  return <>{children}</>;\n}\n\nexport interface DialogOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  const { open, setOpen } = useDialog();\n  return (\n    <div\n      data-slot=\"dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      onClick={() => setOpen(false)}\n      className={cn(DIALOG_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nconst XIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n);\n\nexport interface DialogContentProps extends React.ComponentProps<\"div\"> {\n  showCloseButton?: boolean;\n}\n\nexport function DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  const { open, setOpen, triggerRef } = useDialog();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open);\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n  });\n  React.useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <DialogOverlay />\n      <div\n        data-slot=\"dialog-content\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(DIALOG_CONTENT, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        {children}\n        {showCloseButton && (\n          <button\n            type=\"button\"\n            data-slot=\"dialog-close\"\n            onClick={() => setOpen(false)}\n            className={DIALOG_CLOSE}\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </button>\n        )}\n      </div>\n    </Portal>\n  );\n}\n\nexport interface DialogCloseProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function DialogClose({ asChild = false, onClick, ...props }: DialogCloseProps) {\n  const { setOpen } = useDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"dialog-close\"\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(DIALOG_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(DIALOG_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"dialog-title\"\n      className={cn(DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"dialog-description\"\n      className={cn(DIALOG_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}