@epoch32/visage 1.1.2 → 1.1.4

package/dist/index-8x8xz80v.js

@@ -0,0 +1,727 @@
+import {
+  isSignal2,
+  computed2,
+  onCleanup2,
+  createContext2,
+  useContext2,
+  signal2
+} from "./index-6kfe1nr4.js";
+import {
+  Show2,
+  Portal2
+} from "./index-5s255b3w.js";
+import {
+  Fragment2,
+  jsx2,
+  jsxs2
+} from "./index-9fvarkrx.js";
+
+// src/ui/utils.ts
+var idCounter = 0;
+function createId2(prefix = "visage") {
+  return `${prefix}-${++idCounter}`;
+}
+function createControllableSignal2(options) {
+  const isControlled = typeof options.value === "function";
+  const internal = signal2(options.defaultValue, { internal: true });
+  const getter = computed2(() => {
+    if (isControlled) {
+      const externalVal = options.value();
+      if (externalVal !== undefined)
+        return externalVal;
+    }
+    return internal();
+  }, { internal: true });
+  const setter = (next) => {
+    const currentVal = getter();
+    const nextVal = typeof next === "function" ? next(currentVal) : next;
+    internal.set(nextVal);
+    if (options.onChange && nextVal !== currentVal) {
+      options.onChange(nextVal);
+    }
+  };
+  return [getter, setter];
+}
+function trapFocus2(container, event) {
+  if (event.key !== "Tab")
+    return;
+  const focusables = container.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
+  if (focusables.length === 0) {
+    event.preventDefault();
+    return;
+  }
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  if (event.shiftKey) {
+    if (document.activeElement === first) {
+      last.focus();
+      event.preventDefault();
+    }
+  } else {
+    if (document.activeElement === last) {
+      first.focus();
+      event.preventDefault();
+    }
+  }
+}
+function onClickOutside2(elements, handler) {
+  const listener = (event) => {
+    const target = event.target;
+    if (!target)
+      return;
+    const list = Array.isArray(elements) ? elements : [elements];
+    const isInside = list.some((el) => el?.contains(target));
+    if (!isInside) {
+      handler(event);
+    }
+  };
+  if (typeof document !== "undefined") {
+    document.addEventListener("mousedown", listener, true);
+    document.addEventListener("touchstart", listener, true);
+  }
+  return () => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("mousedown", listener, true);
+      document.removeEventListener("touchstart", listener, true);
+    }
+  };
+}
+
+// src/ui/tabs.tsx
+var TabsContext = createContext2(null);
+function useTabsContext2() {
+  return useContext2(TabsContext);
+}
+function TabsRoot(props) {
+  const [value, setValue] = createControllableSignal2({
+    value: props.value,
+    defaultValue: props.defaultValue ?? (props.items && props.items.length > 0 ? props.items[0]?.value : ""),
+    onChange: props.onValueChange
+  });
+  const baseId = createId2("tabs");
+  const orientation = props.orientation ?? "horizontal";
+  const activationMode = props.activationMode ?? "automatic";
+  const ctx = {
+    value,
+    setValue,
+    orientation,
+    activationMode,
+    baseId
+  };
+  const {
+    as: Tag = "div",
+    value: _v,
+    defaultValue: _dv,
+    onValueChange: _ovc,
+    orientation: _ori,
+    activationMode: _am,
+    items,
+    listClass,
+    triggerClass,
+    contentClass,
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return TabsContext.Provider({
+    value: ctx,
+    children: () => /* @__PURE__ */ jsxs2(Tag, {
+      "data-orientation": orientation,
+      class: className,
+      style,
+      ...rest,
+      children: [
+        items ? /* @__PURE__ */ jsxs2(Fragment2, {
+          children: [
+            /* @__PURE__ */ jsx2(TabsList2, {
+              class: listClass,
+              children: items.map((item) => /* @__PURE__ */ jsxs2(TabsTrigger2, {
+                value: item.value,
+                disabled: item.disabled,
+                class: triggerClass,
+                children: [
+                  item.icon ? /* @__PURE__ */ jsx2("span", {
+                    class: "tab-icon",
+                    style: { display: "inline-flex", alignItems: "center" },
+                    children: typeof item.icon === "function" ? item.icon() : item.icon
+                  }) : null,
+                  typeof item.label === "function" ? item.label() : item.label
+                ]
+              }))
+            }),
+            items.map((item) => /* @__PURE__ */ jsx2(TabsContent2, {
+              value: item.value,
+              class: contentClass,
+              children: typeof item.content === "function" ? item.content() : item.content
+            }))
+          ]
+        }) : null,
+        children
+      ]
+    })
+  });
+}
+function TabsList2(props) {
+  const ctx = useContext2(TabsContext);
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    const target = e.target;
+    if (target?.getAttribute("role") !== "tab")
+      return;
+    const list = target.closest('[role="tablist"]');
+    if (!list)
+      return;
+    const tabs = Array.from(list.querySelectorAll('[role="tab"]:not([disabled])'));
+    const index = tabs.indexOf(target);
+    if (index === -1)
+      return;
+    let nextIndex = index;
+    const isHorizontal = (ctx?.orientation ?? "horizontal") === "horizontal";
+    const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+    const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+    if (e.key === prevKey) {
+      nextIndex = index === 0 ? tabs.length - 1 : index - 1;
+      e.preventDefault();
+    } else if (e.key === nextKey) {
+      nextIndex = index === tabs.length - 1 ? 0 : index + 1;
+      e.preventDefault();
+    } else if (e.key === "Home") {
+      nextIndex = 0;
+      e.preventDefault();
+    } else if (e.key === "End") {
+      nextIndex = tabs.length - 1;
+      e.preventDefault();
+    }
+    if (nextIndex !== index) {
+      const nextTab = tabs[nextIndex];
+      nextTab.focus();
+      if (ctx?.activationMode === "automatic") {
+        const val = nextTab.getAttribute("data-value");
+        if (val)
+          ctx.setValue(val);
+      }
+    }
+  };
+  const { as: Tag = "div", children, onKeyDown, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    role: "tablist",
+    "aria-orientation": ctx?.orientation ?? "horizontal",
+    class: className,
+    style,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children
+  });
+}
+function TabsTrigger2(props) {
+  const ctx = useContext2(TabsContext);
+  const isSelected = () => ctx ? ctx.value() === props.value : false;
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setValue(props.value);
+    }
+  };
+  const {
+    value,
+    disabled,
+    as: Tag = "button",
+    children,
+    onClick,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    id: ctx ? `${ctx.baseId}-trigger-${value}` : undefined,
+    type: Tag === "button" ? "button" : undefined,
+    role: "tab",
+    "aria-selected": () => String(isSelected()),
+    "aria-controls": ctx ? `${ctx.baseId}-panel-${value}` : undefined,
+    "data-state": () => isSelected() ? "active" : "inactive",
+    "data-active": () => isSelected() ? "true" : "false",
+    "data-value": value,
+    tabIndex: () => isSelected() ? 0 : -1,
+    disabled,
+    class: () => [className, isSelected() ? "active" : ""].filter(Boolean).join(" "),
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+function TabsContent2(props) {
+  const ctx = useContext2(TabsContext);
+  const isSelected = () => ctx ? ctx.value() === props.value : false;
+  const { value, forceMount, as: Tag = "div", children, class: className, style, ...rest } = props;
+  if (forceMount) {
+    return /* @__PURE__ */ jsx2(Tag, {
+      id: ctx ? `${ctx.baseId}-panel-${value}` : undefined,
+      role: "tabpanel",
+      "aria-labelledby": ctx ? `${ctx.baseId}-trigger-${value}` : undefined,
+      "data-state": () => isSelected() ? "active" : "inactive",
+      hidden: () => !isSelected(),
+      tabIndex: 0,
+      class: className,
+      style,
+      ...rest,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx2(Show2, {
+    when: isSelected,
+    children: /* @__PURE__ */ jsx2(Tag, {
+      id: ctx ? `${ctx.baseId}-panel-${value}` : undefined,
+      role: "tabpanel",
+      "aria-labelledby": ctx ? `${ctx.baseId}-trigger-${value}` : undefined,
+      "data-state": "active",
+      tabIndex: 0,
+      class: className,
+      style,
+      ...rest,
+      children
+    })
+  });
+}
+function createTabs2(options = {}) {
+  const activeSignal = typeof options.value === "function" ? options.value : signal2(options.defaultValue ?? "");
+  const value = activeSignal;
+  const setValue = (next) => {
+    if (isSignal2(activeSignal)) {
+      activeSignal.set(next);
+    }
+    if (options.onValueChange) {
+      options.onValueChange(next);
+    }
+  };
+  const baseId = createId2("tabs");
+  const orientation = options.orientation ?? "horizontal";
+  const activationMode = options.activationMode ?? "automatic";
+  const Root = (props) => {
+    const { as: Tag = "div", class: className, style, children, ...rest } = props;
+    return /* @__PURE__ */ jsx2(Tag, {
+      "data-orientation": orientation,
+      class: className,
+      style,
+      ...rest,
+      children
+    });
+  };
+  const List = (props) => {
+    const { as: Tag = "div", children, onKeyDown, class: className, style, ...rest } = props;
+    const handleKeyDown = (e) => {
+      if (onKeyDown)
+        onKeyDown(e);
+      if (e.defaultPrevented)
+        return;
+      const target = e.target;
+      if (target?.getAttribute("role") !== "tab")
+        return;
+      const list = target.closest('[role="tablist"]');
+      if (!list)
+        return;
+      const tabs = Array.from(list.querySelectorAll('[role="tab"]:not([disabled])'));
+      const index = tabs.indexOf(target);
+      if (index === -1)
+        return;
+      let nextIndex = index;
+      const isHorizontal = orientation === "horizontal";
+      const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+      const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+      if (e.key === prevKey) {
+        nextIndex = index === 0 ? tabs.length - 1 : index - 1;
+        e.preventDefault();
+      } else if (e.key === nextKey) {
+        nextIndex = index === tabs.length - 1 ? 0 : index + 1;
+        e.preventDefault();
+      } else if (e.key === "Home") {
+        nextIndex = 0;
+        e.preventDefault();
+      } else if (e.key === "End") {
+        nextIndex = tabs.length - 1;
+        e.preventDefault();
+      }
+      if (nextIndex !== index) {
+        const nextTab = tabs[nextIndex];
+        nextTab.focus();
+        if (activationMode === "automatic") {
+          const val = nextTab.getAttribute("data-value");
+          if (val)
+            setValue(val);
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx2(Tag, {
+      role: "tablist",
+      "aria-orientation": orientation,
+      class: className,
+      style,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children
+    });
+  };
+  const Trigger = (props) => {
+    const isSelected = () => value() === props.value;
+    const handleClick = (e) => {
+      if (props.onClick)
+        props.onClick(e);
+      if (!e.defaultPrevented) {
+        setValue(props.value);
+      }
+    };
+    const {
+      value: tabVal,
+      disabled,
+      as: Tag = "button",
+      children,
+      onClick,
+      class: className,
+      style,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsx2(Tag, {
+      id: `${baseId}-trigger-${tabVal}`,
+      type: Tag === "button" ? "button" : undefined,
+      role: "tab",
+      "aria-selected": () => String(isSelected()),
+      "aria-controls": `${baseId}-panel-${tabVal}`,
+      "data-state": () => isSelected() ? "active" : "inactive",
+      "data-active": () => isSelected() ? "true" : "false",
+      "data-value": tabVal,
+      tabIndex: () => isSelected() ? 0 : -1,
+      disabled,
+      class: () => [className, isSelected() ? "active" : ""].filter(Boolean).join(" "),
+      style,
+      onClick: handleClick,
+      ...rest,
+      children
+    });
+  };
+  const Content = (props) => {
+    const isSelected = () => value() === props.value;
+    const {
+      value: tabVal,
+      forceMount,
+      as: Tag = "div",
+      children,
+      class: className,
+      style,
+      ...rest
+    } = props;
+    if (forceMount) {
+      return /* @__PURE__ */ jsx2(Tag, {
+        id: `${baseId}-panel-${tabVal}`,
+        role: "tabpanel",
+        "aria-labelledby": `${baseId}-trigger-${tabVal}`,
+        "data-state": () => isSelected() ? "active" : "inactive",
+        hidden: () => !isSelected(),
+        tabIndex: 0,
+        class: className,
+        style,
+        ...rest,
+        children
+      });
+    }
+    return /* @__PURE__ */ jsx2(Show2, {
+      when: isSelected,
+      children: /* @__PURE__ */ jsx2(Tag, {
+        id: `${baseId}-panel-${tabVal}`,
+        role: "tabpanel",
+        "aria-labelledby": `${baseId}-trigger-${tabVal}`,
+        "data-state": "active",
+        tabIndex: 0,
+        class: className,
+        style,
+        ...rest,
+        children
+      })
+    });
+  };
+  return {
+    value,
+    setValue,
+    Root,
+    List,
+    Trigger,
+    Content
+  };
+}
+var Tabs2 = Object.assign(TabsRoot, {
+  Root: TabsRoot,
+  List: TabsList2,
+  Trigger: TabsTrigger2,
+  Content: TabsContent2,
+  create: createTabs2
+});
+
+// src/ui/tooltip.tsx
+var TooltipContext = createContext2(null);
+function useTooltipContext2() {
+  return useContext2(TooltipContext);
+}
+function TooltipRoot(props) {
+  const [open, setOpen] = createControllableSignal2({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const tooltipId = createId2("tooltip");
+  const triggerRef = { current: null };
+  const ctx = {
+    open,
+    setOpen,
+    openDelay: props.openDelay ?? 150,
+    closeDelay: props.closeDelay ?? 100,
+    tooltipId,
+    triggerRef
+  };
+  if (props.content !== undefined) {
+    return TooltipContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs2("span", {
+        class: "visage-tooltip-root",
+        style: { position: "relative", display: "inline-flex", alignItems: "center" },
+        children: [
+          /* @__PURE__ */ jsx2(TooltipTrigger2, {
+            as: props.triggerAs ?? "button",
+            class: props.triggerClass,
+            style: {
+              background: "transparent",
+              border: "none",
+              padding: 0,
+              display: "inline-flex",
+              alignItems: "center",
+              cursor: "help"
+            },
+            children: typeof props.children === "function" ? props.children() : props.children
+          }),
+          /* @__PURE__ */ jsx2(TooltipContent2, {
+            side: props.side,
+            class: props.contentClass,
+            style: props.contentStyle,
+            portalled: props.portalled ?? false,
+            children: typeof props.content === "function" ? props.content() : props.content
+          })
+        ]
+      })
+    });
+  }
+  return TooltipContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+function TooltipTrigger2(props) {
+  const ctx = useContext2(TooltipContext);
+  let openTimer = null;
+  let closeTimer = null;
+  const clearTimers = () => {
+    if (openTimer)
+      clearTimeout(openTimer);
+    if (closeTimer)
+      clearTimeout(closeTimer);
+    openTimer = null;
+    closeTimer = null;
+  };
+  const handleMouseEnter = (e) => {
+    if (props.onMouseEnter)
+      props.onMouseEnter(e);
+    clearTimers();
+    if (!ctx)
+      return;
+    if (ctx.openDelay > 0) {
+      openTimer = setTimeout(() => ctx.setOpen(true), ctx.openDelay);
+    } else {
+      ctx.setOpen(true);
+    }
+  };
+  const handleMouseLeave = (e) => {
+    if (props.onMouseLeave)
+      props.onMouseLeave(e);
+    clearTimers();
+    if (!ctx)
+      return;
+    if (ctx.closeDelay > 0) {
+      closeTimer = setTimeout(() => ctx.setOpen(false), ctx.closeDelay);
+    } else {
+      ctx.setOpen(false);
+    }
+  };
+  const handleFocus = (e) => {
+    if (props.onFocus)
+      props.onFocus(e);
+    clearTimers();
+    ctx?.setOpen(true);
+  };
+  const handleBlur = (e) => {
+    if (props.onBlur)
+      props.onBlur(e);
+    clearTimers();
+    ctx?.setOpen(false);
+  };
+  onCleanup2(clearTimers);
+  const {
+    as: Tag = "button",
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    ref: (el) => {
+      if (ctx)
+        ctx.triggerRef.current = el;
+    },
+    type: Tag === "button" ? "button" : undefined,
+    tabIndex: Tag === "button" ? undefined : 0,
+    "aria-describedby": ctx?.tooltipId,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style: { display: "inline-flex", alignItems: "center", ...style },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    ...rest,
+    children
+  });
+}
+function TooltipPortal2(props) {
+  return /* @__PURE__ */ jsx2(Portal2, {
+    mount: props.mount,
+    children: props.children
+  });
+}
+function TooltipContent2(props) {
+  const ctx = useContext2(TooltipContext);
+  const isOpen = () => ctx ? ctx.open() : false;
+  const {
+    forceMount,
+    as: Tag = "div",
+    children,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const content = forceMount ? /* @__PURE__ */ jsx2(Tag, {
+    id: ctx?.tooltipId,
+    role: "tooltip",
+    "data-state": () => isOpen() ? "open" : "closed",
+    hidden: () => !isOpen(),
+    class: className,
+    style,
+    ...rest,
+    children
+  }) : /* @__PURE__ */ jsx2(Show2, {
+    when: isOpen,
+    children: /* @__PURE__ */ jsx2(Tag, {
+      id: ctx?.tooltipId,
+      role: "tooltip",
+      "data-state": "open",
+      class: className,
+      style,
+      ...rest,
+      children
+    })
+  });
+  return portalled ? /* @__PURE__ */ jsx2(Portal2, {
+    mount,
+    children: content
+  }) : content;
+}
+var Tooltip3 = Object.assign(TooltipRoot, {
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger2,
+  Portal: TooltipPortal2,
+  Content: TooltipContent2
+});
+
+// src/ui/switch.tsx
+function SwitchRoot(props) {
+  const [checked, setChecked] = createControllableSignal2({
+    value: props.checked,
+    defaultValue: props.defaultChecked ?? false,
+    onChange: props.onCheckedChange
+  });
+  const toggle = () => {
+    const isDisabled = typeof props.disabled === "function" ? props.disabled() : Boolean(props.disabled);
+    if (isDisabled)
+      return;
+    setChecked(!checked());
+  };
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented) {
+      toggle();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  const {
+    checked: _c,
+    defaultChecked: _dc,
+    onCheckedChange: _occ,
+    disabled,
+    required,
+    name,
+    value,
+    thumbClass,
+    thumbStyle,
+    as: Tag = "button",
+    children,
+    onClick,
+    onKeyDown,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    role: "switch",
+    "aria-checked": checked,
+    "data-state": () => checked() ? "checked" : "unchecked",
+    disabled,
+    class: className,
+    style,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children: children !== undefined ? typeof children === "function" ? children() : children : /* @__PURE__ */ jsx2(SwitchThumb2, {
+      class: thumbClass,
+      style: thumbStyle
+    })
+  });
+}
+function SwitchThumb2(props) {
+  const { as: Tag = "span", class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    class: className,
+    style,
+    ...rest
+  });
+}
+var Switch2 = Object.assign(SwitchRoot, {
+  Root: SwitchRoot,
+  Thumb: SwitchThumb2
+});
+
+export { createId2, createControllableSignal2, trapFocus2, onClickOutside2, useTabsContext2, TabsList2, TabsTrigger2, TabsContent2, createTabs2, Tabs2, useTooltipContext2, TooltipTrigger2, TooltipPortal2, TooltipContent2, Tooltip3, SwitchThumb2, Switch2 };