@kamod-ui/core 0.1.0

package/dist/chunk-LGO5HXMG.js

@@ -0,0 +1,592 @@
+import { createIdFactory, createDismissableLayer } from './chunk-HEQRODRF.js';
+import { cn } from './chunk-OMXWBB67.js';
+import { signal } from '@preact/signals';
+import { createContext, isValidElement, cloneElement } from 'preact';
+import { useMemo, useRef, useEffect, useContext } from 'preact/hooks';
+import { tv } from 'tailwind-variants';
+import { jsx, jsxs } from 'preact/jsx-runtime';
+
+var DropdownContext = createContext(null);
+var nextDropdownId = createIdFactory("kamod-dropdown");
+var useDropdown = () => {
+  const context = useContext(DropdownContext);
+  if (!context) throw new Error("Dropdown subcomponents must be used within Dropdown");
+  return context;
+};
+var dropdownRoot = tv({
+  base: "relative inline-flex"
+});
+var Dropdown = ({ defaultOpen = false, class: className, children, ...rest }) => {
+  const open = useMemo(() => signal(defaultOpen), []);
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  const instanceId = useMemo(() => nextDropdownId(), []);
+  useEffect(() => {
+    const layer = createDismissableLayer({
+      root: () => rootRef.current,
+      open: () => open.value,
+      onDismiss: () => {
+        open.value = false;
+      }
+    });
+    return () => layer.dispose();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    DropdownContext.Provider,
+    {
+      value: {
+        open,
+        setOpen: (next) => {
+          open.value = next;
+        },
+        triggerId: `${instanceId}-trigger`,
+        contentId: `${instanceId}-content`,
+        rootRef,
+        triggerRef,
+        contentRef
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: rootRef,
+          class: dropdownRoot({ class: className }),
+          "data-slot": "dropdown",
+          "data-state": open.value ? "open" : "closed",
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+};
+var DropdownCheckboxItem = ({
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  class: className,
+  children,
+  onClick,
+  ...rest
+}) => {
+  const internal = useMemo(() => signal(defaultChecked), []);
+  const isControlled = checkedProp !== void 0;
+  useEffect(() => {
+    if (checkedProp !== void 0) {
+      internal.value = checkedProp;
+    }
+  }, [checkedProp, internal]);
+  const checked = isControlled ? Boolean(checkedProp) : internal.value;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitemcheckbox",
+      "data-slot": "dropdown-checkbox-item",
+      "aria-checked": checked,
+      class: cn(
+        "relative flex w-full cursor-default select-none items-center gap-1 rounded-sm py-0.5 ps-7 pe-1.5 text-sm outline-none transition-colors duration-100",
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        const next = !checked;
+        if (!isControlled) {
+          internal.value = next;
+        }
+        onCheckedChange?.(next);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { class: "pointer-events-none absolute start-1.5 flex size-3 items-center justify-center", "aria-hidden": true, children: checked ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            class: "size-3.5",
+            children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+          }
+        ) : null }),
+        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 dropdownContent = tv({
+  base: [
+    // overflow-x visible so DropdownSubContent (absolute start-full) is not clipped; keep vertical scroll for long menus
+    "bg-white text-popover-foreground z-50 flex min-w-[7rem] flex-col gap-0 overflow-x-visible overflow-y-auto rounded-lg p-px shadow-md outline-none ring-1 ring-foreground/10 dark:bg-popover",
+    "dark:ring-foreground/15",
+    "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-100",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-100",
+    "absolute isolate max-h-96"
+  ],
+  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 DropdownContent = ({
+  forceMount = false,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  class: className,
+  style,
+  children,
+  onKeyDown,
+  ...rest
+}) => {
+  const dropdown = useDropdown();
+  if (!dropdown.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) => {
+        dropdown.contentRef.current = node;
+      },
+      id: dropdown.contentId,
+      role: "menu",
+      tabIndex: -1,
+      "aria-labelledby": dropdown.triggerId,
+      "data-slot": "dropdown-content",
+      "data-side": side,
+      "data-align": align,
+      "data-state": dropdown.open.value ? "open" : "closed",
+      class: `${positionBySide[side]} ${alignClass} ${dropdownContent({ side, class: className })}`,
+      style: inlineStyle ? { ...offsetStyle, ...inlineStyle } : offsetStyle,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          dropdown.setOpen(false);
+          dropdown.triggerRef.current?.focus();
+          return;
+        }
+        onKeyDown?.(event);
+      },
+      ...rest,
+      children
+    }
+  );
+};
+var DropdownGroup = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx("div", { role: "group", "data-slot": "dropdown-group", class: cn("p-1", className), ...rest, children });
+var dropdownItem = tv({
+  base: [
+    "relative flex w-full cursor-default select-none items-center gap-1 rounded-sm px-1 py-0.5 text-sm outline-none transition-colors duration-100 ease-out",
+    "text-popover-foreground hover:bg-accent hover:text-accent-foreground",
+    "focus:bg-accent focus:text-accent-foreground",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5"
+  ],
+  variants: {
+    variant: {
+      default: "",
+      destructive: "text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive dark:focus:bg-destructive/20 [&_svg]:text-destructive"
+    },
+    inset: {
+      true: "ps-6"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    inset: false
+  }
+});
+var DropdownItem = ({
+  inset = false,
+  variant = "default",
+  class: className,
+  children,
+  onClick,
+  ...rest
+}) => {
+  const dropdown = useDropdown();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      "data-slot": "dropdown-item",
+      "data-inset": inset ? "true" : void 0,
+      "data-variant": variant,
+      class: dropdownItem({ inset, variant, class: className }),
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        dropdown.setOpen(false);
+      },
+      ...rest,
+      children
+    }
+  );
+};
+var DropdownLabel = ({ inset = false, class: className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "dropdown-label",
+    "data-inset": inset ? "true" : void 0,
+    class: cn("text-muted-foreground px-1 py-0.5 text-xs font-semibold", inset && "ps-6", className),
+    ...rest,
+    children
+  }
+);
+var DropdownPortal = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", { "data-slot": "dropdown-portal", ...rest, children });
+var DropdownRadioContext = createContext(null);
+var DropdownRadioProvider = DropdownRadioContext.Provider;
+var useDropdownRadio = () => {
+  const ctx = useContext(DropdownRadioContext);
+  if (!ctx) throw new Error("DropdownRadioItem must be used within DropdownRadioGroup");
+  return ctx;
+};
+var useDropdownRadioRoot = (defaultValue, valueProp, onValueChange) => {
+  const internal = useMemo(() => signal(valueProp ?? defaultValue), []);
+  const controlledRef = useRef(false);
+  controlledRef.current = valueProp !== void 0;
+  useEffect(() => {
+    if (valueProp !== void 0) {
+      internal.value = valueProp;
+    }
+  }, [valueProp, internal]);
+  const onValueChangeRef = useRef(onValueChange);
+  onValueChangeRef.current = onValueChange;
+  return useMemo(
+    () => ({
+      value: internal,
+      setValue: (next) => {
+        if (!controlledRef.current) {
+          internal.value = next;
+        }
+        onValueChangeRef.current?.(next);
+      }
+    }),
+    [internal]
+  );
+};
+var DropdownRadioGroup = ({
+  value,
+  defaultValue = "",
+  onValueChange,
+  children,
+  ...rest
+}) => {
+  const ctx = useDropdownRadioRoot(defaultValue, value, onValueChange);
+  return /* @__PURE__ */ jsx(DropdownRadioProvider, { value: ctx, children: /* @__PURE__ */ jsx("div", { role: "group", "data-slot": "dropdown-radio-group", ...rest, children }) });
+};
+var DropdownRadioItem = ({
+  value,
+  class: className,
+  children,
+  onClick,
+  ...rest
+}) => {
+  const dropdown = useDropdown();
+  const radio = useDropdownRadio();
+  const selected = radio.value.value === value;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitemradio",
+      "data-slot": "dropdown-radio-item",
+      "aria-checked": selected,
+      class: cn(
+        "relative flex w-full cursor-default select-none items-center gap-1 rounded-sm py-0.5 ps-7 pe-1.5 text-sm outline-none transition-colors duration-100",
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        radio.setValue(value);
+        dropdown.setOpen(false);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { class: "pointer-events-none absolute start-1.5 flex size-3 items-center justify-center", "aria-hidden": true, children: selected ? /* @__PURE__ */ jsx("span", { class: "size-1.5 rounded-full bg-current" }) : null }),
+        children
+      ]
+    }
+  );
+};
+var DropdownSeparator = ({ class: className, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    role: "separator",
+    "data-slot": "dropdown-separator",
+    class: cn("bg-border -mx-px my-px h-px", className),
+    ...rest
+  }
+);
+var DropdownShortcut = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "data-slot": "dropdown-shortcut",
+    class: cn("text-muted-foreground ms-auto text-xs tracking-widest opacity-70", className),
+    ...rest,
+    children
+  }
+);
+var DropdownSubContext = createContext(null);
+var DropdownSubProvider = ({
+  children,
+  value
+}) => /* @__PURE__ */ jsx(DropdownSubContext.Provider, { value, children });
+var useDropdownSub = () => {
+  const ctx = useContext(DropdownSubContext);
+  if (!ctx) throw new Error("Dropdown subcomponents must be used within DropdownSub");
+  return ctx;
+};
+var useMemoDropdownSub = () => useMemo(() => {
+  const open = signal(false);
+  return {
+    open,
+    setOpen: (next) => {
+      open.value = next;
+    }
+  };
+}, []);
+var DropdownSub = ({ class: className, children, ...rest }) => {
+  const ctx = useMemoDropdownSub();
+  return /* @__PURE__ */ jsx(DropdownSubProvider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dropdown-sub",
+      class: cn("relative", className),
+      onPointerLeave: () => {
+        ctx.setOpen(false);
+      },
+      ...rest,
+      children
+    }
+  ) });
+};
+var DropdownSubContent = ({
+  class: className,
+  children,
+  onPointerEnter,
+  side = "inline-end",
+  ...rest
+}) => {
+  const sub = useDropdownSub();
+  if (!sub.open.value) return null;
+  const sidePosition = side === "inline-start" ? "end-full me-0.5 rtl:ms-0.5 rtl:me-0" : "start-full ms-0.5 rtl:me-0.5 rtl:ms-0";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "menu",
+      "data-slot": "dropdown-sub-content",
+      "data-side": side,
+      "data-state": "open",
+      class: cn(
+        "absolute top-0 z-50 min-w-[7rem] max-h-[min(24rem,calc(100dvh-2rem))] overflow-x-hidden overflow-y-auto rounded-lg bg-white p-px text-popover-foreground shadow-md outline-none ring-1 ring-foreground/10 dark:bg-popover dark:ring-foreground/15",
+        sidePosition,
+        className
+      ),
+      onPointerEnter: (e) => {
+        onPointerEnter?.(e);
+        sub.setOpen(true);
+      },
+      ...rest,
+      children
+    }
+  );
+};
+var ChevronRight = ({ class: className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    class: cn("size-3.5 shrink-0 rtl:rotate-180", className),
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+  }
+);
+var DropdownSubTrigger = ({
+  class: className,
+  children,
+  onClick,
+  onPointerEnter,
+  ...rest
+}) => {
+  const sub = useDropdownSub();
+  const open = sub.open.value;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      "data-slot": "dropdown-sub-trigger",
+      "data-state": open ? "open" : "closed",
+      "aria-expanded": open,
+      "aria-haspopup": "menu",
+      class: cn(
+        "flex w-full cursor-default select-none items-center gap-1 rounded-sm px-1 py-0.5 text-start text-sm outline-none transition-colors duration-100",
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        "[&_svg]:shrink-0",
+        className
+      ),
+      onPointerEnter: (e) => {
+        onPointerEnter?.(e);
+        if (e.defaultPrevented) return;
+        sub.setOpen(true);
+      },
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        sub.setOpen(!open);
+      },
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRight, { class: "ms-auto" })
+      ]
+    }
+  );
+};
+var dropdownTrigger = tv({
+  base: [
+    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap",
+    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+    "h-9 px-4 py-2"
+  ]
+});
+var callRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    ref.current = node;
+  }
+};
+var DropdownTrigger = ({
+  asChild = false,
+  class: className,
+  children,
+  onClick,
+  ref: outerRef,
+  ...rest
+}) => {
+  const dropdown = useDropdown();
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    dropdown.setOpen(!dropdown.open.value);
+  };
+  if (asChild) {
+    if (!isValidElement(children)) {
+      return null;
+    }
+    const childProps = children.props ?? {};
+    return cloneElement(children, {
+      ...childProps,
+      ...rest,
+      id: dropdown.triggerId,
+      "aria-controls": dropdown.contentId,
+      "aria-haspopup": "menu",
+      "aria-expanded": dropdown.open.value,
+      "data-slot": "dropdown-trigger",
+      "data-state": dropdown.open.value ? "open" : "closed",
+      onClick: (event) => {
+        childProps.onClick?.(event);
+        handleClick(event);
+      },
+      ref: (node) => {
+        dropdown.triggerRef.current = node;
+        callRef(childProps.ref, node);
+        callRef(outerRef, node);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: (node) => {
+        dropdown.triggerRef.current = node;
+        callRef(outerRef, node);
+      },
+      id: dropdown.triggerId,
+      type: "button",
+      class: dropdownTrigger({ class: className }),
+      "data-slot": "dropdown-trigger",
+      "data-state": dropdown.open.value ? "open" : "closed",
+      "aria-controls": dropdown.contentId,
+      "aria-haspopup": "menu",
+      "aria-expanded": dropdown.open.value,
+      onClick: (event) => handleClick(event),
+      ...rest,
+      children
+    }
+  );
+};
+
+// src/components/dropdown/index.ts
+var dropdown_default = {
+  Root: Dropdown,
+  Trigger: DropdownTrigger,
+  Content: DropdownContent,
+  Item: DropdownItem,
+  Label: DropdownLabel,
+  Separator: DropdownSeparator,
+  Group: DropdownGroup,
+  Shortcut: DropdownShortcut,
+  Sub: DropdownSub,
+  SubTrigger: DropdownSubTrigger,
+  SubContent: DropdownSubContent,
+  Portal: DropdownPortal,
+  CheckboxItem: DropdownCheckboxItem,
+  RadioGroup: DropdownRadioGroup,
+  RadioItem: DropdownRadioItem
+};
+
+export { Dropdown, DropdownCheckboxItem, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownShortcut, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger, dropdown_default };
+//# sourceMappingURL=chunk-LGO5HXMG.js.map
+//# sourceMappingURL=chunk-LGO5HXMG.js.map