@kamod-ch/ui 0.2.1

package/dist/chunk-TFLSEEM4.js

@@ -0,0 +1,88 @@
+import { cn } from './chunk-MS2ZNYCJ.js';
+import { jsx } from 'preact/jsx-runtime';
+
+// src/components/progress/progress-indeterminate-styles.ts
+var STYLE_ID = "kamod-ui-progress-indeterminate";
+var indeterminateKeyframesCss = `@keyframes kamod-progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(270%)}}[data-slot="progress"][data-state="indeterminate"] [data-slot="progress-indicator"]{animation:kamod-progress-indeterminate 1.2s ease-in-out infinite}@media (prefers-reduced-motion:reduce){[data-slot="progress"][data-state="indeterminate"] [data-slot="progress-indicator"]{animation:none}}`;
+function injectProgressIndeterminateStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = indeterminateKeyframesCss;
+  document.head.appendChild(style);
+}
+injectProgressIndeterminateStyles();
+var progressRootClass = [
+  "relative h-2.5 w-full overflow-hidden rounded-full bg-muted",
+  "ring-1 ring-inset ring-border/55 dark:ring-border/45",
+  "shadow-[inset_0_1px_2px_color-mix(in_oklab,var(--foreground)_6%,transparent)]",
+  "dark:shadow-[inset_0_1px_2px_color-mix(in_oklab,black_28%,transparent)]"
+].join(" ");
+var progressIndicatorShared = [
+  "rounded-full bg-primary",
+  "shadow-[inset_0_-1px_0_color-mix(in_oklab,var(--primary-foreground)_22%,transparent)]"
+].join(" ");
+var progressIndicatorDeterminateClass = [
+  "h-full w-full flex-1",
+  "transition-transform duration-300 ease-out motion-reduce:transition-none",
+  progressIndicatorShared
+].join(" ");
+var progressIndicatorIndeterminateClass = [
+  "absolute inset-y-0 left-0 w-[38%]",
+  progressIndicatorShared
+].join(" ");
+var Progress = ({
+  value = 0,
+  max = 100,
+  class: className,
+  indicatorClass,
+  indeterminate: indeterminateProp,
+  ...rest
+}) => {
+  const safeMax = max > 0 ? max : 100;
+  const isIndeterminate = indeterminateProp === true || value === null;
+  const numericValue = value === null || value === void 0 ? 0 : value;
+  const current = Math.max(0, Math.min(safeMax, numericValue));
+  const percent = Math.max(0, Math.min(100, current / safeMax * 100));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "progressbar",
+      "data-slot": "progress",
+      "data-state": isIndeterminate ? "indeterminate" : "determinate",
+      ...!isIndeterminate ? {
+        "aria-valuemin": 0,
+        "aria-valuemax": safeMax,
+        "aria-valuenow": current,
+        "data-value": current,
+        "data-max": safeMax
+      } : {
+        "aria-valuetext": "Indeterminate"
+      },
+      class: cn(progressRootClass, className),
+      ...rest,
+      children: isIndeterminate ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "progress-indicator",
+          class: cn(progressIndicatorIndeterminateClass, indicatorClass)
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "progress-indicator",
+          class: cn(progressIndicatorDeterminateClass, indicatorClass),
+          style: { transform: `translateX(-${100 - percent}%)` }
+        }
+      )
+    }
+  );
+};
+
+// src/components/progress/index.ts
+var progress_default = Progress;
+
+export { Progress, progress_default };
+//# sourceMappingURL=chunk-TFLSEEM4.js.map
+//# sourceMappingURL=chunk-TFLSEEM4.js.map

package/dist/chunk-TFLSEEM4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/progress/progress-indeterminate-styles.ts","../src/components/progress/Progress.tsx","../src/components/progress/index.ts"],"names":[],"mappings":"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","file":"chunk-TFLSEEM4.js","sourcesContent":["const STYLE_ID = \"kamod-ui-progress-indeterminate\";\n\nconst indeterminateKeyframesCss = `@keyframes kamod-progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(270%)}}[data-slot=\"progress\"][data-state=\"indeterminate\"] [data-slot=\"progress-indicator\"]{animation:kamod-progress-indeterminate 1.2s ease-in-out infinite}@media (prefers-reduced-motion:reduce){[data-slot=\"progress\"][data-state=\"indeterminate\"] [data-slot=\"progress-indicator\"]{animation:none}}`;\n\nfunction injectProgressIndeterminateStyles(): void {\n  if (typeof document === \"undefined\") return;\n  if (document.getElementById(STYLE_ID)) return;\n  const style = document.createElement(\"style\");\n  style.id = STYLE_ID;\n  style.textContent = indeterminateKeyframesCss;\n  document.head.appendChild(style);\n}\n\ninjectProgressIndeterminateStyles();\n","import type { JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\nimport \"./progress-indeterminate-styles\";\n\nexport type ProgressProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  /** Set to `null` for an indeterminate bar (Radix-style). Ignored when `indeterminate` is true. */\n  value?: number | null;\n  max?: number;\n  indicatorClass?: string;\n  /** When true, shows an animated indeterminate bar regardless of `value`. */\n  indeterminate?: boolean;\n};\n\nconst progressRootClass = [\n  \"relative h-2.5 w-full overflow-hidden rounded-full bg-muted\",\n  \"ring-1 ring-inset ring-border/55 dark:ring-border/45\",\n  \"shadow-[inset_0_1px_2px_color-mix(in_oklab,var(--foreground)_6%,transparent)]\",\n  \"dark:shadow-[inset_0_1px_2px_color-mix(in_oklab,black_28%,transparent)]\",\n].join(\" \");\n\nconst progressIndicatorShared = [\n  \"rounded-full bg-primary\",\n  \"shadow-[inset_0_-1px_0_color-mix(in_oklab,var(--primary-foreground)_22%,transparent)]\",\n].join(\" \");\n\nconst progressIndicatorDeterminateClass = [\n  \"h-full w-full flex-1\",\n  \"transition-transform duration-300 ease-out motion-reduce:transition-none\",\n  progressIndicatorShared,\n].join(\" \");\n\nconst progressIndicatorIndeterminateClass = [\n  \"absolute inset-y-0 left-0 w-[38%]\",\n  progressIndicatorShared,\n].join(\" \");\n\nexport const Progress = ({\n  value = 0,\n  max = 100,\n  class: className,\n  indicatorClass,\n  indeterminate: indeterminateProp,\n  ...rest\n}: ProgressProps) => {\n  const safeMax = max > 0 ? max : 100;\n  const isIndeterminate = indeterminateProp === true || value === null;\n  const numericValue = value === null || value === undefined ? 0 : value;\n  const current = Math.max(0, Math.min(safeMax, numericValue));\n  const percent = Math.max(0, Math.min(100, (current / safeMax) * 100));\n\n  return (\n    <div\n      role=\"progressbar\"\n      data-slot=\"progress\"\n      data-state={isIndeterminate ? \"indeterminate\" : \"determinate\"}\n      {...(!isIndeterminate\n        ? {\n            \"aria-valuemin\": 0,\n            \"aria-valuemax\": safeMax,\n            \"aria-valuenow\": current,\n            \"data-value\": current,\n            \"data-max\": safeMax,\n          }\n        : {\n            \"aria-valuetext\": \"Indeterminate\",\n          })}\n      class={cn(progressRootClass, className)}\n      {...rest}\n    >\n      {isIndeterminate ? (\n        <div\n          data-slot=\"progress-indicator\"\n          class={cn(progressIndicatorIndeterminateClass, indicatorClass)}\n        />\n      ) : (\n        <div\n          data-slot=\"progress-indicator\"\n          class={cn(progressIndicatorDeterminateClass, indicatorClass)}\n          style={{ transform: `translateX(-${100 - percent}%)` }}\n        />\n      )}\n    </div>\n  );\n};\n","import { Progress } from \"./Progress\";\n\nexport { Progress };\n\nexport default Progress;\n"]}

package/dist/chunk-U2UNWXBC.js

@@ -0,0 +1,242 @@
+import { createIdFactory, createDismissableLayer } from './chunk-PPYJQNE5.js';
+import { signal } from '@preact/signals';
+import { createContext, isValidElement, cloneElement } from 'preact';
+import { useContext, useMemo, useRef, useEffect } from 'preact/hooks';
+import { tv } from 'tailwind-variants';
+import { jsx } from 'preact/jsx-runtime';
+
+var PopoverContext = createContext(null);
+var nextPopoverId = createIdFactory("kamod-popover");
+var usePopover = () => {
+  const context = useContext(PopoverContext);
+  if (!context) throw new Error("Popover subcomponents must be used within Popover");
+  return context;
+};
+var popover = tv({
+  base: "relative inline-flex"
+});
+var Popover = ({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  class: className,
+  children,
+  ...rest
+}) => {
+  const isControlled = openProp !== void 0;
+  const open = useMemo(() => signal(isControlled ? openProp : defaultOpen), []);
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  const instanceId = useMemo(() => nextPopoverId(), []);
+  useEffect(() => {
+    if (isControlled && openProp !== void 0) {
+      open.value = openProp;
+    }
+  }, [openProp, isControlled, open]);
+  const setOpen = (next) => {
+    onOpenChange?.(next);
+    if (!isControlled) {
+      open.value = next;
+    }
+  };
+  const setOpenRef = useRef(setOpen);
+  setOpenRef.current = setOpen;
+  useEffect(() => {
+    const layer = createDismissableLayer({
+      root: () => rootRef.current,
+      open: () => open.value,
+      onDismiss: () => {
+        setOpenRef.current(false);
+      }
+    });
+    return () => layer.dispose();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    PopoverContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        triggerId: `${instanceId}-trigger`,
+        contentId: `${instanceId}-content`,
+        rootRef,
+        triggerRef,
+        contentRef
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: rootRef,
+          class: popover({ class: className }),
+          "data-slot": "popover",
+          "data-state": open.value ? "open" : "closed",
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+};
+var popoverTrigger = tv({
+  base: [
+    "inline-flex items-center justify-center",
+    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none"
+  ]
+});
+var callRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    ref.current = node;
+  }
+};
+var PopoverTrigger = ({
+  asChild = false,
+  class: className,
+  children,
+  onClick,
+  ref: outerRef,
+  ...rest
+}) => {
+  const popover2 = usePopover();
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    popover2.setOpen(!popover2.open.value);
+  };
+  if (asChild) {
+    if (!isValidElement(children)) {
+      return null;
+    }
+    const childProps = children.props ?? {};
+    return cloneElement(children, {
+      ...childProps,
+      ...rest,
+      id: popover2.triggerId,
+      "aria-controls": popover2.contentId,
+      "aria-haspopup": "dialog",
+      "aria-expanded": popover2.open.value,
+      "data-slot": "popover-trigger",
+      "data-state": popover2.open.value ? "open" : "closed",
+      onClick: (event) => {
+        childProps.onClick?.(event);
+        handleClick(event);
+      },
+      ref: (node) => {
+        popover2.triggerRef.current = node;
+        callRef(childProps.ref, node);
+        callRef(outerRef, node);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: (node) => {
+        popover2.triggerRef.current = node;
+        callRef(outerRef, node);
+      },
+      id: popover2.triggerId,
+      type: "button",
+      class: popoverTrigger({ class: className }),
+      "data-slot": "popover-trigger",
+      "data-state": popover2.open.value ? "open" : "closed",
+      "aria-controls": popover2.contentId,
+      "aria-haspopup": "dialog",
+      "aria-expanded": popover2.open.value,
+      onClick: (event) => handleClick(event),
+      ...rest,
+      children
+    }
+  );
+};
+var positionBySide = {
+  top: "bottom-full",
+  bottom: "top-full",
+  left: "right-full",
+  right: "left-full"
+};
+var alignByAxis = {
+  vertical: {
+    start: "left-0",
+    center: "left-1/2 -translate-x-1/2",
+    end: "right-0"
+  },
+  horizontal: {
+    start: "top-0",
+    center: "top-1/2 -translate-y-1/2",
+    end: "bottom-0"
+  }
+};
+var popoverContent = tv({
+  base: [
+    "bg-popover text-popover-foreground z-50 flex min-w-0 w-80 max-w-[calc(100vw-1.5rem)] max-h-[calc(100dvh-2rem)] flex-col gap-3 overflow-x-hidden overflow-y-auto rounded-lg border p-4 shadow-md outline-none",
+    "data-[state=open]:animate-in fade-in zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+    "absolute isolate"
+  ],
+  variants: {
+    side: {
+      bottom: "slide-in-from-top-2",
+      top: "slide-in-from-bottom-2",
+      right: "slide-in-from-left-2",
+      left: "slide-in-from-right-2"
+    }
+  },
+  defaultVariants: {
+    side: "bottom"
+  }
+});
+var PopoverContent = ({
+  forceMount = false,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  class: className,
+  style,
+  children,
+  onKeyDown,
+  ...rest
+}) => {
+  const popover2 = usePopover();
+  if (!popover2.open.value && !forceMount) return null;
+  const isVertical = side === "top" || side === "bottom";
+  const alignClass = isVertical ? alignByAxis.vertical[align] : alignByAxis.horizontal[align];
+  const inlineStyle = typeof style === "object" && style !== null ? style : void 0;
+  const offsetStyle = side === "bottom" ? { marginTop: `${sideOffset}px` } : side === "top" ? { marginBottom: `${sideOffset}px` } : side === "right" ? { marginLeft: `${sideOffset}px` } : { marginRight: `${sideOffset}px` };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        popover2.contentRef.current = node;
+      },
+      id: popover2.contentId,
+      role: "dialog",
+      tabIndex: -1,
+      "aria-labelledby": popover2.triggerId,
+      "data-slot": "popover-content",
+      "data-side": side,
+      "data-align": align,
+      "data-state": popover2.open.value ? "open" : "closed",
+      class: `${positionBySide[side]} ${alignClass} ${popoverContent({ side, class: className })}`,
+      style: inlineStyle ? { ...offsetStyle, ...inlineStyle } : offsetStyle,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          popover2.setOpen(false);
+          popover2.triggerRef.current?.focus();
+          return;
+        }
+        onKeyDown?.(event);
+      },
+      ...rest,
+      children
+    }
+  );
+};
+
+export { Popover, PopoverContent, PopoverTrigger, popover, popoverContent, popoverTrigger, usePopover };
+//# sourceMappingURL=chunk-U2UNWXBC.js.map
+//# sourceMappingURL=chunk-U2UNWXBC.js.map

package/dist/chunk-U2UNWXBC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/popover/Popover.tsx","../src/components/popover/PopoverTrigger.tsx","../src/components/popover/PopoverContent.tsx"],"names":["tv","popover","jsx"],"mappings":";;;;;;;AAiBA,IAAM,cAAA,GAAiB,cAA0C,IAAI,CAAA;AACrE,IAAM,aAAA,GAAgB,gBAAgB,eAAe,CAAA;AAE9C,IAAM,aAAa,MAAM;AAC9B,EAAA,MAAM,OAAA,GAAU,WAAW,cAAc,CAAA;AACzC,EAAA,IAAI,CAAC,OAAA,EAAS,MAAM,IAAI,MAAM,mDAAmD,CAAA;AACjF,EAAA,OAAO,OAAA;AACT;AAEO,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,IAAA,EAAM;AACR,CAAC;AASM,IAAM,UAAU,CAAC;AAAA,EACtB,IAAA,EAAM,QAAA;AAAA,EACN,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAoB;AAClB,EAAA,MAAM,eAAe,QAAA,KAAa,MAAA;AAClC,EAAA,MAAM,IAAA,GAAO,QAAQ,MAAM,MAAA,CAAO,eAAe,QAAA,GAAW,WAAW,CAAA,EAAG,EAAE,CAAA;AAC5E,EAAA,MAAM,OAAA,GAAU,OAA8B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAA,GAAa,OAA2B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAA,GAAa,OAA8B,IAAI,CAAA;AACrD,EAAA,MAAM,aAAa,OAAA,CAAQ,MAAM,aAAA,EAAc,EAAG,EAAE,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,IAAgB,aAAa,MAAA,EAAW;AAC1C,MAAA,IAAA,CAAK,KAAA,GAAQ,QAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,YAAA,EAAc,IAAI,CAAC,CAAA;AAEjC,EAAA,MAAM,OAAA,GAAU,CAAC,IAAA,KAAkB;AACjC,IAAA,YAAA,GAAe,IAAI,CAAA;AACnB,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA,IAAA,CAAK,KAAA,GAAQ,IAAA;AAAA,IACf;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,OAAO,OAAO,CAAA;AACjC,EAAA,UAAA,CAAW,OAAA,GAAU,OAAA;AAErB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,sBAAA,CAAuB;AAAA,MACnC,IAAA,EAAM,MAAM,OAAA,CAAQ,OAAA;AAAA,MACpB,IAAA,EAAM,MAAM,IAAA,CAAK,KAAA;AAAA,MACjB,WAAW,MAAM;AACf,QAAA,UAAA,CAAW,QAAQ,KAAK,CAAA;AAAA,MAC1B;AAAA,KACD,CAAA;AACD,IAAA,OAAO,MAAM,MAAM,OAAA,EAAQ;AAAA,EAC7B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA,CAAe,QAAA;AAAA,IAAf;AAAA,MACC,KAAA,EAAO;AAAA,QACL,IAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAA,EAAW,GAAG,UAAU,CAAA,QAAA,CAAA;AAAA,QACxB,SAAA,EAAW,GAAG,UAAU,CAAA,QAAA,CAAA;AAAA,QACxB,OAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,OAAA;AAAA,UACL,KAAA,EAAO,OAAA,CAAQ,EAAE,KAAA,EAAO,WAAiC,CAAA;AAAA,UACzD,WAAA,EAAU,SAAA;AAAA,UACV,YAAA,EAAY,IAAA,CAAK,KAAA,GAAQ,MAAA,GAAS,QAAA;AAAA,UACjC,GAAG,IAAA;AAAA,UAEH;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AClGO,IAAM,iBAAiBA,EAAAA,CAAG;AAAA,EAC/B,IAAA,EAAM;AAAA,IACJ,yCAAA;AAAA,IACA,+FAAA;AAAA,IACA;AAAA;AAEJ,CAAC;AAOD,IAAM,OAAA,GAAU,CAAwB,GAAA,EAAc,IAAA,KAAmB;AACvE,EAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,IAAA,GAAA,CAAI,IAAI,CAAA;AAAA,EACV,WAAW,GAAA,IAAO,OAAO,GAAA,KAAQ,QAAA,IAAY,aAAa,GAAA,EAAK;AAC7D,IAAC,IAA8B,OAAA,GAAU,IAAA;AAAA,EAC3C;AACF,CAAA;AAEO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,OAAA,GAAU,KAAA;AAAA,EACV,KAAA,EAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA,EAAK,QAAA;AAAA,EACL,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,MAAMC,WAAU,UAAA,EAAW;AAE3B,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA+C;AAClE,IAAA,OAAA,GAAU,KAAkD,CAAA;AAC5D,IAAA,IAAI,MAAM,gBAAA,EAAkB;AAC5B,IAAAA,QAAAA,CAAQ,OAAA,CAAQ,CAACA,QAAAA,CAAQ,KAAK,KAAK,CAAA;AAAA,EACrC,CAAA;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,IAAI,CAAC,cAAA,CAAe,QAAQ,CAAA,EAAG;AAC7B,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,MAAM,UAAA,GAAc,QAAA,CAAS,KAAA,IAAS,EAAC;AAKvC,IAAA,OAAO,aAAa,QAAA,EAAU;AAAA,MAC5B,GAAI,UAAA;AAAA,MACJ,GAAI,IAAA;AAAA,MACJ,IAAIA,QAAAA,CAAQ,SAAA;AAAA,MACZ,iBAAiBA,QAAAA,CAAQ,SAAA;AAAA,MACzB,eAAA,EAAiB,QAAA;AAAA,MACjB,eAAA,EAAiBA,SAAQ,IAAA,CAAK,KAAA;AAAA,MAC9B,WAAA,EAAa,iBAAA;AAAA,MACb,YAAA,EAAcA,QAAAA,CAAQ,IAAA,CAAK,KAAA,GAAQ,MAAA,GAAS,QAAA;AAAA,MAC5C,OAAA,EAAS,CAAC,KAAA,KAA+C;AACvD,QAAA,UAAA,CAAW,UAAU,KAAK,CAAA;AAC1B,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA,MACnB,CAAA;AAAA,MACA,GAAA,EAAK,CAAC,IAAA,KAA6B;AACjC,QAAAA,QAAAA,CAAQ,WAAW,OAAA,GAAU,IAAA;AAC7B,QAAA,OAAA,CAAQ,UAAA,CAAW,KAAK,IAAI,CAAA;AAC5B,QAAA,OAAA,CAAQ,UAAU,IAAI,CAAA;AAAA,MACxB;AAAA,KACQ,CAAA;AAAA,EACZ;AAEA,EAAA,uBACEC,GAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,QAAAD,QAAAA,CAAQ,WAAW,OAAA,GAAU,IAAA;AAC7B,QAAA,OAAA,CAAQ,UAAU,IAAI,CAAA;AAAA,MACxB,CAAA;AAAA,MACA,IAAIA,QAAAA,CAAQ,SAAA;AAAA,MACZ,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAO,cAAA,CAAe,EAAE,KAAA,EAAO,WAAiC,CAAA;AAAA,MAChE,WAAA,EAAU,iBAAA;AAAA,MACV,YAAA,EAAYA,QAAAA,CAAQ,IAAA,CAAK,KAAA,GAAQ,MAAA,GAAS,QAAA;AAAA,MAC1C,iBAAeA,QAAAA,CAAQ,SAAA;AAAA,MACvB,eAAA,EAAc,QAAA;AAAA,MACd,eAAA,EAAeA,SAAQ,IAAA,CAAK,KAAA;AAAA,MAC5B,OAAA,EAAS,CAAC,KAAA,KAAU,WAAA,CAAY,KAAuD,CAAA;AAAA,MACtF,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;ACxFA,IAAM,cAAA,GAAiB;AAAA,EACrB,GAAA,EAAK,aAAA;AAAA,EACL,MAAA,EAAQ,UAAA;AAAA,EACR,IAAA,EAAM,YAAA;AAAA,EACN,KAAA,EAAO;AACT,CAAA;AAEA,IAAM,WAAA,GAAc;AAAA,EAClB,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,QAAA;AAAA,IACP,MAAA,EAAQ,2BAAA;AAAA,IACR,GAAA,EAAK;AAAA,GACP;AAAA,EACA,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,OAAA;AAAA,IACP,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAK;AAAA;AAET,CAAA;AAEO,IAAM,iBAAiBD,EAAAA,CAAG;AAAA,EAC/B,IAAA,EAAM;AAAA,IACJ,8MAAA;AAAA,IACA,iDAAA;AAAA,IACA,6FAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAK,wBAAA;AAAA,MACL,KAAA,EAAO,sBAAA;AAAA,MACP,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC;AAWM,IAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA,GAAa,KAAA;AAAA,EACb,IAAA,GAAO,QAAA;AAAA,EACP,KAAA,GAAQ,QAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,KAAA,EAAO,SAAA;AAAA,EACP,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,MAAMC,WAAU,UAAA,EAAW;AAC3B,EAAA,IAAI,CAACA,QAAAA,CAAQ,IAAA,CAAK,KAAA,IAAS,CAAC,YAAY,OAAO,IAAA;AAE/C,EAAA,MAAM,UAAA,GAAa,IAAA,KAAS,KAAA,IAAS,IAAA,KAAS,QAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,aAAa,WAAA,CAAY,QAAA,CAAS,KAAK,CAAA,GAAI,WAAA,CAAY,WAAW,KAAK,CAAA;AAC1F,EAAA,MAAM,cAAc,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,OAAO,KAAA,GAAQ,MAAA;AAC1E,EAAA,MAAM,WAAA,GACJ,IAAA,KAAS,QAAA,GACL,EAAE,SAAA,EAAW,CAAA,EAAG,UAAU,CAAA,EAAA,CAAA,EAAK,GAC/B,IAAA,KAAS,KAAA,GACP,EAAE,YAAA,EAAc,CAAA,EAAG,UAAU,CAAA,EAAA,CAAA,EAAK,GAClC,IAAA,KAAS,OAAA,GACP,EAAE,UAAA,EAAY,CAAA,EAAG,UAAU,CAAA,EAAA,CAAA,EAAK,GAChC,EAAE,WAAA,EAAa,CAAA,EAAG,UAAU,CAAA,EAAA,CAAA,EAAK;AAE3C,EAAA,uBACEC,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,QAAAD,QAAAA,CAAQ,WAAW,OAAA,GAAU,IAAA;AAAA,MAC/B,CAAA;AAAA,MACA,IAAIA,QAAAA,CAAQ,SAAA;AAAA,MACZ,IAAA,EAAK,QAAA;AAAA,MACL,QAAA,EAAU,EAAA;AAAA,MACV,mBAAiBA,QAAAA,CAAQ,SAAA;AAAA,MACzB,WAAA,EAAU,iBAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,YAAA,EAAY,KAAA;AAAA,MACZ,YAAA,EAAYA,QAAAA,CAAQ,IAAA,CAAK,KAAA,GAAQ,MAAA,GAAS,QAAA;AAAA,MAC1C,KAAA,EAAO,CAAA,EAAG,cAAA,CAAe,IAAI,CAAC,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA,EAAI,cAAA,CAAe,EAAE,IAAA,EAAM,KAAA,EAAO,SAAA,EAAiC,CAAC,CAAA,CAAA;AAAA,MAChH,OAAO,WAAA,GAAc,EAAE,GAAG,WAAA,EAAa,GAAG,aAAY,GAAI,WAAA;AAAA,MAC1D,SAAA,EAAW,CAAC,KAAA,KAAU;AACpB,QAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAAA,QAAAA,CAAQ,QAAQ,KAAK,CAAA;AACrB,UAAAA,QAAAA,CAAQ,UAAA,CAAW,OAAA,EAAS,KAAA,EAAM;AAClC,UAAA;AAAA,QACF;AACA,QAAA,SAAA,GAAY,KAAK,CAAA;AAAA,MACnB,CAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"chunk-U2UNWXBC.js","sourcesContent":["import { signal } from \"@preact/signals\";\nimport type { ComponentChildren, JSX } from \"preact\";\nimport { createContext } from \"preact\";\nimport { useContext, useEffect, useMemo, useRef } from \"preact/hooks\";\nimport { tv } from \"tailwind-variants\";\nimport { createDismissableLayer, createIdFactory } from \"../../lib/interactive\";\n\ntype PopoverContextValue = {\n  open: ReturnType<typeof signal<boolean>>;\n  setOpen: (next: boolean) => void;\n  triggerId: string;\n  contentId: string;\n  rootRef: { current: HTMLDivElement | null };\n  triggerRef: { current: HTMLElement | null };\n  contentRef: { current: HTMLDivElement | null };\n};\n\nconst PopoverContext = createContext<PopoverContextValue | null>(null);\nconst nextPopoverId = createIdFactory(\"kamod-popover\");\n\nexport const usePopover = () => {\n  const context = useContext(PopoverContext);\n  if (!context) throw new Error(\"Popover subcomponents must be used within Popover\");\n  return context;\n};\n\nexport const popover = tv({\n  base: \"relative inline-flex\",\n});\n\nexport type PopoverProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: ComponentChildren;\n};\n\nexport const Popover = ({\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  class: className,\n  children,\n  ...rest\n}: PopoverProps) => {\n  const isControlled = openProp !== undefined;\n  const open = useMemo(() => signal(isControlled ? openProp : defaultOpen), []);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const instanceId = useMemo(() => nextPopoverId(), []);\n\n  useEffect(() => {\n    if (isControlled && openProp !== undefined) {\n      open.value = openProp;\n    }\n  }, [openProp, isControlled, open]);\n\n  const setOpen = (next: boolean) => {\n    onOpenChange?.(next);\n    if (!isControlled) {\n      open.value = next;\n    }\n  };\n\n  const setOpenRef = useRef(setOpen);\n  setOpenRef.current = setOpen;\n\n  useEffect(() => {\n    const layer = createDismissableLayer({\n      root: () => rootRef.current,\n      open: () => open.value,\n      onDismiss: () => {\n        setOpenRef.current(false);\n      },\n    });\n    return () => layer.dispose();\n  }, []);\n\n  return (\n    <PopoverContext.Provider\n      value={{\n        open,\n        setOpen,\n        triggerId: `${instanceId}-trigger`,\n        contentId: `${instanceId}-content`,\n        rootRef,\n        triggerRef,\n        contentRef,\n      }}\n    >\n      <div\n        ref={rootRef}\n        class={popover({ class: className as string | undefined })}\n        data-slot=\"popover\"\n        data-state={open.value ? \"open\" : \"closed\"}\n        {...rest}\n      >\n        {children}\n      </div>\n    </PopoverContext.Provider>\n  );\n};\n","import { type ComponentChildren, cloneElement, isValidElement, type JSX } from \"preact\";\nimport { tv } from \"tailwind-variants\";\nimport { usePopover } from \"./Popover\";\n\nexport const popoverTrigger = tv({\n  base: [\n    \"inline-flex items-center justify-center\",\n    \"focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3\",\n    \"disabled:pointer-events-none\",\n  ],\n});\n\nexport type PopoverTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n  asChild?: boolean;\n  children?: ComponentChildren;\n};\n\nconst callRef = <T extends HTMLElement>(ref: unknown, node: T | null) => {\n  if (typeof ref === \"function\") {\n    ref(node);\n  } else if (ref && typeof ref === \"object\" && \"current\" in ref) {\n    (ref as { current: T | null }).current = node;\n  }\n};\n\nexport const PopoverTrigger = ({\n  asChild = false,\n  class: className,\n  children,\n  onClick,\n  ref: outerRef,\n  ...rest\n}: PopoverTriggerProps) => {\n  const popover = usePopover();\n\n  const handleClick = (event: JSX.TargetedMouseEvent<HTMLElement>) => {\n    onClick?.(event as JSX.TargetedMouseEvent<HTMLButtonElement>);\n    if (event.defaultPrevented) return;\n    popover.setOpen(!popover.open.value);\n  };\n\n  if (asChild) {\n    if (!isValidElement(children)) {\n      return null;\n    }\n\n    const childProps = (children.props ?? {}) as JSX.HTMLAttributes<HTMLElement> & {\n      ref?: unknown;\n      onClick?: (event: JSX.TargetedMouseEvent<HTMLElement>) => void;\n    };\n\n    return cloneElement(children, {\n      ...(childProps as Record<string, unknown>),\n      ...(rest as Record<string, unknown>),\n      id: popover.triggerId,\n      \"aria-controls\": popover.contentId,\n      \"aria-haspopup\": \"dialog\",\n      \"aria-expanded\": popover.open.value,\n      \"data-slot\": \"popover-trigger\",\n      \"data-state\": popover.open.value ? \"open\" : \"closed\",\n      onClick: (event: JSX.TargetedMouseEvent<HTMLElement>) => {\n        childProps.onClick?.(event);\n        handleClick(event);\n      },\n      ref: (node: HTMLElement | null) => {\n        popover.triggerRef.current = node;\n        callRef(childProps.ref, node);\n        callRef(outerRef, node);\n      },\n    } as never);\n  }\n\n  return (\n    <button\n      ref={(node) => {\n        popover.triggerRef.current = node;\n        callRef(outerRef, node);\n      }}\n      id={popover.triggerId}\n      type=\"button\"\n      class={popoverTrigger({ class: className as string | undefined })}\n      data-slot=\"popover-trigger\"\n      data-state={popover.open.value ? \"open\" : \"closed\"}\n      aria-controls={popover.contentId}\n      aria-haspopup=\"dialog\"\n      aria-expanded={popover.open.value}\n      onClick={(event) => handleClick(event as unknown as JSX.TargetedMouseEvent<HTMLElement>)}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { usePopover } from \"./Popover\";\n\nconst positionBySide = {\n  top: \"bottom-full\",\n  bottom: \"top-full\",\n  left: \"right-full\",\n  right: \"left-full\",\n} as const;\n\nconst alignByAxis = {\n  vertical: {\n    start: \"left-0\",\n    center: \"left-1/2 -translate-x-1/2\",\n    end: \"right-0\",\n  },\n  horizontal: {\n    start: \"top-0\",\n    center: \"top-1/2 -translate-y-1/2\",\n    end: \"bottom-0\",\n  },\n} as const;\n\nexport const popoverContent = tv({\n  base: [\n    \"bg-popover text-popover-foreground z-50 flex min-w-0 w-80 max-w-[calc(100vw-1.5rem)] max-h-[calc(100dvh-2rem)] flex-col gap-3 overflow-x-hidden overflow-y-auto rounded-lg border p-4 shadow-md outline-none\",\n    \"data-[state=open]:animate-in fade-in zoom-in-95\",\n    \"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95\",\n    \"absolute isolate\",\n  ],\n  variants: {\n    side: {\n      bottom: \"slide-in-from-top-2\",\n      top: \"slide-in-from-bottom-2\",\n      right: \"slide-in-from-left-2\",\n      left: \"slide-in-from-right-2\",\n    },\n  },\n  defaultVariants: {\n    side: \"bottom\",\n  },\n});\n\nexport type PopoverContentProps = JSX.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof popoverContent> & {\n    forceMount?: boolean;\n    side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    align?: \"start\" | \"center\" | \"end\";\n    sideOffset?: number;\n    children?: ComponentChildren;\n  };\n\nexport const PopoverContent = ({\n  forceMount = false,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  class: className,\n  style,\n  children,\n  onKeyDown,\n  ...rest\n}: PopoverContentProps) => {\n  const popover = usePopover();\n  if (!popover.open.value && !forceMount) return null;\n\n  const isVertical = side === \"top\" || side === \"bottom\";\n  const alignClass = isVertical ? alignByAxis.vertical[align] : alignByAxis.horizontal[align];\n  const inlineStyle = typeof style === \"object\" && style !== null ? style : undefined;\n  const offsetStyle: JSX.CSSProperties =\n    side === \"bottom\"\n      ? { marginTop: `${sideOffset}px` }\n      : side === \"top\"\n        ? { marginBottom: `${sideOffset}px` }\n        : side === \"right\"\n          ? { marginLeft: `${sideOffset}px` }\n          : { marginRight: `${sideOffset}px` };\n\n  return (\n    <div\n      ref={(node) => {\n        popover.contentRef.current = node;\n      }}\n      id={popover.contentId}\n      role=\"dialog\"\n      tabIndex={-1}\n      aria-labelledby={popover.triggerId}\n      data-slot=\"popover-content\"\n      data-side={side}\n      data-align={align}\n      data-state={popover.open.value ? \"open\" : \"closed\"}\n      class={`${positionBySide[side]} ${alignClass} ${popoverContent({ side, class: className as string | undefined })}`}\n      style={inlineStyle ? { ...offsetStyle, ...inlineStyle } : offsetStyle}\n      onKeyDown={(event) => {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          popover.setOpen(false);\n          popover.triggerRef.current?.focus();\n          return;\n        }\n        onKeyDown?.(event);\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n"]}