@zovaris/sephiro 0.4.0

package/dist/index.js

@@ -0,0 +1,1351 @@
+// src/atoms/Badge/index.tsx
+import { cn } from "cn";
+
+// src/lib/node.ts
+var node = (value) => value;
+
+// src/atoms/Badge/index.tsx
+import { jsx } from "react/jsx-runtime";
+function Badge({
+  variant = "neutral",
+  size = "sm",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...node(props),
+      className: cn("sph-badge", className),
+      "data-variant": variant,
+      "data-size": size,
+      children: node(children)
+    }
+  );
+}
+
+// src/atoms/Button/index.tsx
+import { cn as cn3 } from "cn";
+
+// src/atoms/Spinner/index.tsx
+import { cn as cn2 } from "cn";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Spinner({
+  size = "md",
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      ...node(props),
+      className: cn2("sph-spinner", `sph-spinner--${size}`, className),
+      role: label ? "status" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true
+    }
+  );
+}
+
+// src/atoms/Button/index.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Button({
+  variant = "secondary",
+  size = "md",
+  loading = false,
+  disabled,
+  className,
+  type = "button",
+  children,
+  "aria-busy": ariaBusy,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      className: cn3("sph-button", className),
+      "data-variant": variant,
+      "data-size": size,
+      "data-loading": loading || void 0,
+      disabled: disabled || loading,
+      ...node(props),
+      "aria-busy": ariaBusy ?? (loading || void 0),
+      children: [
+        loading && /* @__PURE__ */ jsx3(Spinner, { size: "sm" }),
+        /* @__PURE__ */ jsx3("span", { className: "sph-button__label", children: node(children) })
+      ]
+    }
+  );
+}
+
+// src/atoms/Checkbox/index.tsx
+import { CheckIcon } from "@phosphor-icons/react";
+import { cn as cn4 } from "cn";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Checkbox({
+  label,
+  size = "md",
+  invalid = false,
+  className,
+  ...props
+}) {
+  const control = /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ...node(props),
+      type: "checkbox",
+      className: "sph-checkbox__input",
+      "data-size": size,
+      "aria-invalid": invalid ? true : props["aria-invalid"]
+    }
+  );
+  if (label === void 0) return control;
+  return /* @__PURE__ */ jsxs2("label", { className: cn4("sph-checkbox", className), "data-size": size, children: [
+    control,
+    /* @__PURE__ */ jsx4("span", { className: "sph-checkbox__box", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(CheckIcon, { className: "sph-checkbox__check" }) }),
+    /* @__PURE__ */ jsx4("span", { className: "sph-checkbox__label", children: node(label) })
+  ] });
+}
+
+// src/atoms/IconButton/index.tsx
+import { cn as cn5 } from "cn";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function IconButton({
+  icon,
+  label,
+  size = "md",
+  variant = "ghost",
+  loading = false,
+  disabled,
+  className,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      ...node(props),
+      type,
+      className: cn5("sph-icon-button", className),
+      "data-size": size,
+      "data-variant": variant,
+      "data-loading": loading || void 0,
+      "aria-label": label,
+      "aria-busy": loading ? true : props["aria-busy"],
+      disabled: disabled || loading,
+      children: loading ? /* @__PURE__ */ jsx5(Spinner, { size: size === "lg" ? "md" : "sm" }) : node(icon)
+    }
+  );
+}
+
+// src/atoms/Input/index.tsx
+import { cn as cn6 } from "cn";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Input({
+  invalid = false,
+  size = "md",
+  className,
+  "aria-invalid": ariaInvalid,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    "input",
+    {
+      ...node(props),
+      className: cn6("sph-input", className),
+      "data-size": size,
+      "aria-invalid": ariaInvalid ?? (invalid || void 0)
+    }
+  );
+}
+
+// src/atoms/Separator/index.tsx
+import { cn as cn7 } from "cn";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Separator({
+  orientation = "horizontal",
+  decorative = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    "hr",
+    {
+      ...node(props),
+      className: cn7("sph-separator", className),
+      "data-orientation": orientation,
+      role: decorative ? "presentation" : "separator",
+      "aria-orientation": decorative ? void 0 : orientation
+    }
+  );
+}
+
+// src/atoms/Skeleton/index.tsx
+import { cn as cn8 } from "cn";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Skeleton({
+  width,
+  height,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "span",
+    {
+      ...node(props),
+      className: cn8("sph-skeleton", className),
+      style: { ...style, width, height },
+      "aria-hidden": ariaLabel ? void 0 : true
+    }
+  );
+}
+
+// src/atoms/Slider/index.tsx
+import { cn as cn9 } from "cn";
+import { useId } from "react";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function Slider({
+  value,
+  onValueChange,
+  label,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = "md",
+  valueLabel,
+  invalid = false,
+  className,
+  disabled,
+  style,
+  id,
+  "aria-label": ariaLabel,
+  "aria-valuetext": ariaValueText,
+  "aria-invalid": ariaInvalid,
+  ...props
+}) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const range = max - min || 1;
+  const progress = Math.min(100, Math.max(0, (value - min) / range * 100));
+  const trackStyle = {
+    ...style,
+    "--sph-slider-progress": `${progress}%`
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn9("sph-slider", className),
+      "data-size": size,
+      "data-disabled": disabled || void 0,
+      "data-invalid": invalid || void 0,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "sph-slider__head", children: [
+          /* @__PURE__ */ jsx9("label", { className: "sph-slider__label", htmlFor: inputId, children: node(label) }),
+          valueLabel !== void 0 && /* @__PURE__ */ jsx9(
+            "output",
+            {
+              className: "sph-slider__value",
+              htmlFor: inputId,
+              "aria-hidden": "true",
+              children: node(valueLabel)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            ...node(props),
+            id: inputId,
+            type: "range",
+            className: "sph-slider__input",
+            min,
+            max,
+            step,
+            value,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-valuetext": ariaValueText ?? (typeof valueLabel === "string" ? valueLabel : void 0),
+            "aria-invalid": ariaInvalid ?? (invalid || void 0),
+            style: trackStyle,
+            onInput: (event) => onValueChange(Number(event.currentTarget.value))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/atoms/Surface/index.tsx
+import { cn as cn10 } from "cn";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Surface({
+  tone = "base",
+  padding = "md",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ...node(props),
+      className: cn10("sph-surface", className),
+      "data-tone": tone,
+      "data-padding": padding,
+      children: node(children)
+    }
+  );
+}
+
+// src/atoms/Textarea/index.tsx
+import { cn as cn11 } from "cn";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Textarea({
+  invalid = false,
+  size = "md",
+  className,
+  "aria-invalid": ariaInvalid,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    "textarea",
+    {
+      ...node(props),
+      className: cn11("sph-textarea", className),
+      "data-size": size,
+      "aria-invalid": ariaInvalid ?? (invalid || void 0)
+    }
+  );
+}
+
+// src/atoms/Toggle/index.tsx
+import { cn as cn12 } from "cn";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Toggle({
+  checked,
+  onCheckedChange,
+  label,
+  className,
+  disabled,
+  onClick,
+  size = "md",
+  "aria-checked": ariaChecked,
+  "aria-label": ariaLabel = label,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": ariaChecked ?? checked,
+      "aria-label": ariaLabel ?? label,
+      disabled,
+      className: cn12("sph-toggle", className),
+      "data-state": checked ? "checked" : "unchecked",
+      "data-size": size,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onCheckedChange(!checked);
+      },
+      ...node(props),
+      children: /* @__PURE__ */ jsx12("span", { className: "sph-toggle__track", children: /* @__PURE__ */ jsx12("span", { className: "sph-toggle__thumb" }) })
+    }
+  );
+}
+
+// src/molecules/Alert/index.tsx
+import { CheckIcon as CheckIcon2, InfoIcon, WarningIcon, XIcon } from "@phosphor-icons/react";
+import { cn as cn13 } from "cn";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var alertIcons = {
+  info: /* @__PURE__ */ jsx13(InfoIcon, { size: 16 }),
+  success: /* @__PURE__ */ jsx13(CheckIcon2, { size: 16 }),
+  warning: /* @__PURE__ */ jsx13(WarningIcon, { size: 16 }),
+  danger: /* @__PURE__ */ jsx13(XIcon, { size: 16 })
+};
+function Alert({
+  variant = "info",
+  title,
+  children,
+  dismissible = false,
+  onDismiss,
+  className,
+  role,
+  ...props
+}) {
+  if (title === void 0 && children === void 0) return null;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ...node(props),
+      className: cn13("sph-alert", className),
+      "data-variant": variant,
+      role: role ?? (variant === "danger" ? "alert" : "status"),
+      "aria-live": role ? void 0 : variant === "danger" ? "assertive" : "polite",
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: "sph-alert__icon", "aria-hidden": "true", children: alertIcons[variant] }),
+        /* @__PURE__ */ jsxs4("div", { className: "sph-alert__body", children: [
+          title !== void 0 && /* @__PURE__ */ jsx13("p", { className: "sph-alert__title", children: node(title) }),
+          children !== void 0 && /* @__PURE__ */ jsx13("div", { className: "sph-alert__content", children: node(children) })
+        ] }),
+        dismissible && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            className: "sph-alert__dismiss",
+            "aria-label": "Dismiss notification",
+            onClick: onDismiss,
+            children: /* @__PURE__ */ jsx13(XIcon, { size: 12, "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+var Notice = Alert;
+
+// src/molecules/Card/index.tsx
+import { cn as cn14 } from "cn";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+function Card({
+  title,
+  description,
+  header,
+  footer,
+  children,
+  interactive = false,
+  selected = false,
+  className,
+  ...props
+}) {
+  const hasHeader = header !== void 0 || title !== void 0 || description !== void 0;
+  return /* @__PURE__ */ jsxs5(
+    "article",
+    {
+      ...node(props),
+      className: cn14("sph-card", className),
+      "data-interactive": interactive || void 0,
+      "data-selected": selected || void 0,
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs5("header", { className: "sph-card__header", children: [
+          node(header),
+          title !== void 0 && /* @__PURE__ */ jsx14("h3", { className: "sph-card__title", children: node(title) }),
+          description !== void 0 && /* @__PURE__ */ jsx14("p", { className: "sph-card__description", children: node(description) })
+        ] }),
+        children !== void 0 && /* @__PURE__ */ jsx14("div", { className: "sph-card__content", children: node(children) }),
+        footer !== void 0 && /* @__PURE__ */ jsx14("footer", { className: "sph-card__footer", children: node(footer) })
+      ]
+    }
+  );
+}
+
+// src/molecules/Dialog/index.tsx
+import { XIcon as XIcon2 } from "@phosphor-icons/react";
+import { cn as cn15 } from "cn";
+import { useEffect, useId as useId2, useRef } from "react";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+function Dialog({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  closeLabel = "Close dialog",
+  closeOnOverlayClick = true,
+  className
+}) {
+  const id = useId2();
+  const titleId = `${id}-title`;
+  const descriptionId = description ? `${id}-description` : void 0;
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const dialog = dialogRef.current;
+    const focusable = () => Array.from(
+      dialog?.querySelectorAll(
+        "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
+      ) ?? []
+    ).filter((element) => !element.hasAttribute("disabled"));
+    requestAnimationFrame(() => focusable()[0]?.focus());
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const elements = focusable();
+      if (elements.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose, open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: "sph-dialog__backdrop",
+      role: "presentation",
+      onMouseDown: (event) => {
+        if (closeOnOverlayClick && event.target === event.currentTarget)
+          onClose();
+      },
+      children: /* @__PURE__ */ jsxs6(
+        "section",
+        {
+          ref: dialogRef,
+          className: cn15("sph-dialog", className),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": descriptionId,
+          children: [
+            /* @__PURE__ */ jsxs6("header", { className: "sph-dialog__header", children: [
+              /* @__PURE__ */ jsxs6("div", { className: "sph-dialog__heading", children: [
+                /* @__PURE__ */ jsx15("h2", { id: titleId, className: "sph-dialog__title", children: node(title) }),
+                description !== void 0 && /* @__PURE__ */ jsx15("p", { id: descriptionId, className: "sph-dialog__description", children: node(description) })
+              ] }),
+              /* @__PURE__ */ jsx15(
+                "button",
+                {
+                  type: "button",
+                  className: "sph-dialog__close",
+                  "aria-label": closeLabel,
+                  onClick: onClose,
+                  children: /* @__PURE__ */ jsx15(XIcon2, { size: 14, "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            children !== void 0 && /* @__PURE__ */ jsx15("div", { className: "sph-dialog__content", children: node(children) }),
+            footer !== void 0 && /* @__PURE__ */ jsx15("footer", { className: "sph-dialog__footer", children: node(footer) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/molecules/Field/index.tsx
+import { cn as cn17 } from "cn";
+import { useId as useId3 } from "react";
+
+// src/molecules/FieldMessage/index.tsx
+import { cn as cn16 } from "cn";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function FieldMessage({
+  variant = "hint",
+  className,
+  children,
+  ...props
+}) {
+  if (children === void 0 || children === null) return null;
+  return /* @__PURE__ */ jsx16(
+    "p",
+    {
+      ...node(props),
+      className: cn16("sph-field-message", className),
+      "data-variant": variant,
+      role: variant === "error" ? "alert" : void 0,
+      children: node(children)
+    }
+  );
+}
+
+// src/molecules/Field/index.tsx
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+function Field({
+  label,
+  htmlFor,
+  description,
+  message,
+  messageType = "hint",
+  required = false,
+  className,
+  children
+}) {
+  const generatedId = useId3();
+  const descriptionId = description ? `${generatedId}-description` : void 0;
+  const messageId = message ? `${generatedId}-message` : void 0;
+  return /* @__PURE__ */ jsxs7("div", { className: cn17("sph-field", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsxs7("label", { className: "sph-field__label", htmlFor, children: [
+      /* @__PURE__ */ jsx17("span", { children: node(label) }),
+      required && /* @__PURE__ */ jsx17("span", { className: "sph-field__required", children: "Required" })
+    ] }),
+    description !== void 0 && description !== null && /* @__PURE__ */ jsx17("p", { id: descriptionId, className: "sph-field__description", children: node(description) }),
+    /* @__PURE__ */ jsx17("div", { className: "sph-field__control", children: node(children) }),
+    message !== void 0 && message !== null && /* @__PURE__ */ jsx17(FieldMessage, { id: messageId, variant: messageType, children: node(message) })
+  ] });
+}
+
+// src/molecules/Menu/index.tsx
+import { cn as cn18 } from "cn";
+import { useEffect as useEffect2, useId as useId4, useRef as useRef2, useState } from "react";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+function Menu({
+  trigger,
+  items,
+  onSelect,
+  label = "Open menu",
+  align = "start",
+  disabled = false,
+  className
+}) {
+  const rootRef = useRef2(null);
+  const menuId = useId4();
+  const [open, setOpen] = useState(false);
+  const enabledIndexes = items.flatMap(
+    (item, index) => !item.separator && !item.disabled ? [index] : []
+  );
+  const close = () => setOpen(false);
+  const focusItem = (index) => document.getElementById(`${menuId}-${index}`)?.focus();
+  useEffect2(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) close();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+  const choose = (item) => {
+    if (item.disabled || item.separator || item.value === void 0) return;
+    onSelect?.(item.value);
+    close();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setOpen(true);
+      const index = enabledIndexes[event.key === "ArrowDown" ? 0 : enabledIndexes.length - 1];
+      if (index !== void 0) requestAnimationFrame(() => focusItem(index));
+    }
+  };
+  const handleItemKeyDown = (event, index) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      rootRef.current?.querySelector(".sph-menu__trigger")?.focus();
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      choose(items[index]);
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    const current = enabledIndexes.indexOf(index);
+    const nextPosition = event.key === "Home" ? 0 : event.key === "End" ? enabledIndexes.length - 1 : (current + (event.key === "ArrowDown" ? 1 : -1) + enabledIndexes.length) % enabledIndexes.length;
+    const nextIndex = enabledIndexes[nextPosition];
+    if (nextIndex !== void 0) focusItem(nextIndex);
+  };
+  return /* @__PURE__ */ jsxs8("div", { id: menuId, ref: rootRef, className: cn18("sph-menu", className), children: [
+    /* @__PURE__ */ jsx18(
+      "button",
+      {
+        type: "button",
+        className: "sph-menu__trigger",
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        disabled,
+        onClick: () => setOpen((current) => !current),
+        onKeyDown: handleKeyDown,
+        children: node(trigger)
+      }
+    ),
+    open && /* @__PURE__ */ jsx18("div", { className: "sph-menu__content", "data-align": align, role: "menu", children: items.map(
+      (item, index) => item.separator ? /* @__PURE__ */ jsx18(
+        "div",
+        {
+          className: "sph-menu__separator",
+          role: "separator"
+        },
+        `separator-${index}`
+      ) : /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          id: `${menuId}-${index}`,
+          type: "button",
+          role: "menuitem",
+          className: "sph-menu__item",
+          "data-danger": item.danger || void 0,
+          disabled: item.disabled,
+          onClick: () => choose(item),
+          onKeyDown: (event) => handleItemKeyDown(event, index),
+          children: [
+            /* @__PURE__ */ jsxs8("span", { className: "sph-menu__item-label", children: [
+              node(item.icon),
+              /* @__PURE__ */ jsx18("span", { children: node(item.label) })
+            ] }),
+            item.shortcut !== void 0 && /* @__PURE__ */ jsx18("span", { className: "sph-menu__shortcut", children: node(item.shortcut) })
+          ]
+        },
+        item.value ?? `item-${index}`
+      )
+    ) })
+  ] });
+}
+
+// src/molecules/Popover/index.tsx
+import { cn as cn19 } from "cn";
+import { useEffect as useEffect3, useId as useId5, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+function Popover({
+  trigger,
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  ariaLabel = "Popover",
+  placement = "start",
+  disabled = false,
+  className
+}) {
+  const id = useId5();
+  const rootRef = useRef3(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultOpen);
+  const isOpen = open ?? uncontrolledOpen;
+  const setOpen = (next) => {
+    setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  useEffect3(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+  const handleTriggerKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setOpen(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      ref: rootRef,
+      className: cn19("sph-popover", className),
+      "data-open": isOpen || void 0,
+      children: [
+        /* @__PURE__ */ jsx19(
+          "button",
+          {
+            type: "button",
+            className: "sph-popover__trigger",
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-controls": isOpen ? id : void 0,
+            disabled,
+            onClick: () => setOpen(!isOpen),
+            onKeyDown: handleTriggerKeyDown,
+            children: node(trigger)
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx19(
+          "div",
+          {
+            id,
+            className: "sph-popover__content",
+            "data-placement": placement,
+            role: "dialog",
+            "aria-label": ariaLabel,
+            children: node(children)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/molecules/RadioGroup/index.tsx
+import { cn as cn20 } from "cn";
+import { useId as useId6 } from "react";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+function RadioGroup({
+  value,
+  options,
+  onValueChange,
+  name,
+  label,
+  description,
+  size = "md",
+  orientation = "vertical",
+  disabled = false,
+  className
+}) {
+  const groupId = useId6();
+  const descriptionId = description ? `${groupId}-description` : void 0;
+  return /* @__PURE__ */ jsxs10(
+    "fieldset",
+    {
+      className: cn20("sph-radio-group", className),
+      "data-size": size,
+      "data-orientation": orientation,
+      disabled,
+      "aria-describedby": descriptionId,
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsx20("legend", { className: "sph-radio-group__legend", children: node(label) }),
+        description !== void 0 && /* @__PURE__ */ jsx20("p", { id: descriptionId, className: "sph-radio-group__description", children: node(description) }),
+        /* @__PURE__ */ jsx20("div", { className: "sph-radio-group__options", children: options.map((option, index) => {
+          const optionId = `${groupId}-${index}`;
+          const optionDescriptionId = option.description ? `${optionId}-description` : void 0;
+          return /* @__PURE__ */ jsxs10(
+            "label",
+            {
+              className: "sph-radio-group__option",
+              "data-disabled": option.disabled || void 0,
+              children: [
+                /* @__PURE__ */ jsx20(
+                  "input",
+                  {
+                    id: optionId,
+                    type: "radio",
+                    name,
+                    value: option.value,
+                    checked: value === option.value,
+                    disabled: disabled || option.disabled,
+                    "aria-describedby": optionDescriptionId,
+                    onChange: () => onValueChange(option.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx20("span", { className: "sph-radio-group__control", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs10("span", { className: "sph-radio-group__content", children: [
+                  /* @__PURE__ */ jsx20("span", { className: "sph-radio-group__label", children: node(option.label) }),
+                  option.description !== void 0 && /* @__PURE__ */ jsx20(
+                    "span",
+                    {
+                      id: optionDescriptionId,
+                      className: "sph-radio-group__option-description",
+                      children: node(option.description)
+                    }
+                  )
+                ] })
+              ]
+            },
+            option.value
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/molecules/Select/index.tsx
+import { cn as cn21 } from "cn";
+import { useEffect as useEffect4, useId as useId7, useRef as useRef4, useState as useState3 } from "react";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+function nextEnabled(options, start, direction) {
+  if (options.length === 0) return -1;
+  for (let step = 1; step <= options.length; step += 1) {
+    const index = (start + step * direction + options.length) % options.length;
+    if (!options[index]?.disabled) return index;
+  }
+  return -1;
+}
+function Select({
+  value,
+  options,
+  onValueChange,
+  id,
+  className,
+  placeholder = "Select an option",
+  ariaLabel,
+  ariaLabelledBy,
+  disabled = false,
+  size = "md"
+}) {
+  const generatedId = useId7();
+  const triggerId = id ?? `sph-select-${generatedId}`;
+  const listboxId = `${triggerId}-listbox`;
+  const rootRef = useRef4(null);
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const firstEnabled2 = options.findIndex((option) => !option.disabled);
+  const [open, setOpen] = useState3(false);
+  const [activeIndex, setActiveIndex] = useState3(
+    selectedIndex >= 0 ? selectedIndex : firstEnabled2
+  );
+  useEffect4(() => {
+    if (!open) return;
+    const close = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [open]);
+  useEffect4(() => {
+    if (!open)
+      setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabled2);
+  }, [firstEnabled2, open, selectedIndex]);
+  function choose(index) {
+    const option = options[index];
+    if (!option || option.disabled) return;
+    onValueChange(option.value);
+    setOpen(false);
+  }
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const next = nextEnabled(
+        options,
+        activeIndex,
+        event.key === "ArrowDown" ? 1 : -1
+      );
+      setOpen(true);
+      if (next >= 0) setActiveIndex(next);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const edge = event.key === "Home" ? firstEnabled2 : nextEnabled(options, 0, -1);
+      setOpen(true);
+      if (edge >= 0) setActiveIndex(edge);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (open) choose(activeIndex);
+      else setOpen(true);
+    }
+  }
+  const selected = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+  return /* @__PURE__ */ jsxs11("div", { ref: rootRef, className: cn21("sph-select", className), "data-size": size, children: [
+    /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        id: triggerId,
+        type: "button",
+        className: "sph-select__trigger",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-${activeIndex}` : void 0,
+        disabled: disabled || firstEnabled2 < 0,
+        onClick: () => setOpen((current) => !current),
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx21("span", { className: "sph-select__value", children: node(selected?.label ?? placeholder) }),
+          /* @__PURE__ */ jsx21("span", { className: "sph-select__caret", "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx21("div", { id: listboxId, role: "listbox", className: "sph-select__listbox", children: options.map((option, index) => /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        id: `${listboxId}-${index}`,
+        type: "button",
+        role: "option",
+        "aria-selected": index === selectedIndex,
+        disabled: option.disabled,
+        className: "sph-select__option",
+        "data-active": index === activeIndex || void 0,
+        onPointerMove: () => !option.disabled && setActiveIndex(index),
+        onClick: () => choose(index),
+        children: [
+          /* @__PURE__ */ jsx21("span", { children: node(option.label) }),
+          index === selectedIndex && /* @__PURE__ */ jsx21("span", { className: "sph-select__check", "aria-hidden": "true" })
+        ]
+      },
+      option.value
+    )) })
+  ] });
+}
+
+// src/molecules/Tabs/index.tsx
+import { cn as cn22 } from "cn";
+import { useId as useId8, useState as useState4 } from "react";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+function firstEnabled(items) {
+  return items.find((item) => !item.disabled)?.value;
+}
+function Tabs({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  children,
+  ariaLabel = "Tabs",
+  orientation = "horizontal",
+  className
+}) {
+  const generatedId = useId8();
+  const [uncontrolledValue, setUncontrolledValue] = useState4(
+    defaultValue ?? firstEnabled(items) ?? ""
+  );
+  const activeValue = value ?? uncontrolledValue;
+  const activeIndex = Math.max(
+    0,
+    items.findIndex((item) => item.value === activeValue)
+  );
+  const activeItem = items[activeIndex];
+  const setValue = (nextValue) => {
+    setUncontrolledValue(nextValue);
+    onValueChange?.(nextValue);
+  };
+  const move = (event, index) => {
+    const direction = orientation === "vertical" ? event.key === "ArrowDown" ? 1 : -1 : event.key === "ArrowRight" ? 1 : -1;
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key))
+      return;
+    event.preventDefault();
+    for (let step = 1; step <= items.length; step += 1) {
+      const next = (index + step * direction + items.length) % items.length;
+      if (!items[next]?.disabled) {
+        setValue(items[next].value);
+        document.getElementById(`${generatedId}-${next}`)?.focus();
+        return;
+      }
+    }
+  };
+  const panelId = `${generatedId}-panel`;
+  return /* @__PURE__ */ jsxs12("div", { className: cn22("sph-tabs", className), "data-orientation": orientation, children: [
+    /* @__PURE__ */ jsx22(
+      "div",
+      {
+        className: "sph-tabs__list",
+        role: "tablist",
+        "aria-label": ariaLabel,
+        "aria-orientation": orientation,
+        children: items.map((item, index) => {
+          const selected = item.value === activeValue;
+          return /* @__PURE__ */ jsx22(
+            "button",
+            {
+              id: `${generatedId}-${index}`,
+              type: "button",
+              role: "tab",
+              className: "sph-tabs__tab",
+              "aria-selected": selected,
+              "aria-controls": selected ? panelId : void 0,
+              tabIndex: selected ? 0 : -1,
+              disabled: item.disabled,
+              "data-selected": selected || void 0,
+              onClick: () => !item.disabled && setValue(item.value),
+              onKeyDown: (event) => move(event, index),
+              children: node(item.label)
+            },
+            item.value
+          );
+        })
+      }
+    ),
+    activeItem && (activeItem.content !== void 0 || children !== void 0) && /* @__PURE__ */ jsx22(
+      "div",
+      {
+        id: panelId,
+        className: "sph-tabs__panel",
+        role: "tabpanel",
+        "aria-labelledby": `${generatedId}-${activeIndex}`,
+        children: node(activeItem.content ?? children)
+      }
+    )
+  ] });
+}
+
+// src/molecules/Toast/index.tsx
+import { CheckIcon as CheckIcon3, InfoIcon as InfoIcon2, WarningIcon as WarningIcon2, XIcon as XIcon3 } from "@phosphor-icons/react";
+import { cn as cn23 } from "cn";
+import { useEffect as useEffect5 } from "react";
+import {
+  Toaster as SonnerToaster,
+  toast
+} from "sonner";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var toastIcons = {
+  success: /* @__PURE__ */ jsx23("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx23(CheckIcon3, { size: 20 }) }),
+  info: /* @__PURE__ */ jsx23("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx23(InfoIcon2, { size: 20 }) }),
+  warning: /* @__PURE__ */ jsx23("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx23(WarningIcon2, { size: 20 }) }),
+  error: /* @__PURE__ */ jsx23("span", { className: "sph-toast__status-icon", children: /* @__PURE__ */ jsx23(XIcon3, { size: 20 }) })
+};
+function Toast({
+  open = true,
+  id,
+  title,
+  description,
+  variant = "neutral",
+  action,
+  duration,
+  closeButton = true,
+  className
+}) {
+  useEffect5(() => {
+    if (!open) return;
+    const options = {
+      id,
+      action,
+      closeButton,
+      description: node(description),
+      duration,
+      className: cn23("sph-toast", className),
+      unstyled: true
+    };
+    const toastId = variant === "success" ? toast.success(node(title), options) : variant === "warning" ? toast.warning(node(title), options) : variant === "danger" ? toast.error(node(title), options) : toast(node(title), options);
+    return () => {
+      toast.dismiss(toastId);
+    };
+  }, [open, id, action, closeButton, duration, title, description, variant]);
+  return null;
+}
+function ToastViewport({
+  label = "Notifications",
+  className,
+  toastOptions,
+  theme = "system",
+  position = "top-right",
+  closeButton = true,
+  expand = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx23(
+    SonnerToaster,
+    {
+      ...node(props),
+      theme,
+      position,
+      closeButton,
+      icons: toastIcons,
+      containerAriaLabel: label,
+      expand,
+      className: cn23("sph-toast-viewport", className),
+      toastOptions: {
+        ...toastOptions,
+        closeButton: toastOptions?.closeButton ?? closeButton,
+        closeButtonAriaLabel: toastOptions?.closeButtonAriaLabel ?? "Dismiss notification",
+        className: cn23("sph-toast", toastOptions?.className),
+        unstyled: true
+      }
+    }
+  );
+}
+
+// src/molecules/Toolbar/index.tsx
+import { cn as cn24 } from "cn";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+function Toolbar({
+  label = "Toolbar",
+  orientation = "horizontal",
+  size = "sm",
+  start,
+  end,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      ...node(props),
+      className: cn24("sph-toolbar", className),
+      "data-orientation": orientation,
+      "data-size": size,
+      role: "toolbar",
+      "aria-label": label,
+      "aria-orientation": orientation,
+      children: [
+        start !== void 0 && /* @__PURE__ */ jsx24("div", { className: "sph-toolbar__start", children: node(start) }),
+        children !== void 0 && /* @__PURE__ */ jsx24("div", { className: "sph-toolbar__content", children: node(children) }),
+        end !== void 0 && /* @__PURE__ */ jsx24("div", { className: "sph-toolbar__end", children: node(end) })
+      ]
+    }
+  );
+}
+
+// src/molecules/Tooltip/index.tsx
+import { cn as cn25 } from "cn";
+import { useId as useId9, useRef as useRef5, useState as useState5 } from "react";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  delay = 400,
+  disabled = false,
+  className
+}) {
+  const id = useId9();
+  const timerRef = useRef5(void 0);
+  const [visible, setVisible] = useState5(false);
+  const show = () => {
+    if (disabled) return;
+    timerRef.current = setTimeout(() => setVisible(true), delay);
+  };
+  const hide = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs14(
+    "span",
+    {
+      className: cn25("sph-tooltip", className),
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        /* @__PURE__ */ jsx25(
+          "span",
+          {
+            className: "sph-tooltip__trigger",
+            "aria-describedby": visible ? id : void 0,
+            children: node(children)
+          }
+        ),
+        /* @__PURE__ */ jsx25(
+          "span",
+          {
+            id,
+            className: "sph-tooltip__content",
+            "data-side": side,
+            "data-visible": visible || void 0,
+            role: "tooltip",
+            hidden: !visible,
+            children: node(content)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/organisms/EmptyState/index.tsx
+import { TrayIcon } from "@phosphor-icons/react";
+import { cn as cn26 } from "cn";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+var emptyStateDefaultIcon = /* @__PURE__ */ jsx26(TrayIcon, { size: 20 });
+function EmptyState({
+  title,
+  description,
+  icon = emptyStateDefaultIcon,
+  action,
+  compact = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs15(
+    "section",
+    {
+      ...node(props),
+      className: cn26("sph-empty-state", className),
+      "data-compact": compact || void 0,
+      children: [
+        /* @__PURE__ */ jsx26("div", { className: "sph-empty-state__icon", "aria-hidden": "true", children: node(icon) }),
+        /* @__PURE__ */ jsx26("h2", { className: "sph-empty-state__title", children: node(title) }),
+        description !== void 0 && /* @__PURE__ */ jsx26("p", { className: "sph-empty-state__description", children: node(description) }),
+        action !== void 0 && /* @__PURE__ */ jsx26("div", { className: "sph-empty-state__action", children: node(action) })
+      ]
+    }
+  );
+}
+
+// src/organisms/Table/index.tsx
+import { cn as cn27 } from "cn";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+function Table({
+  columns,
+  rows,
+  caption,
+  emptyMessage = "No results",
+  rowKey,
+  density = "comfortable",
+  striped = false,
+  stickyHeader = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27("div", { className: cn27("sph-table-wrap", className), children: /* @__PURE__ */ jsxs16(
+    "table",
+    {
+      ...node(props),
+      className: "sph-table",
+      "data-density": density,
+      "data-striped": striped || void 0,
+      "data-sticky-header": stickyHeader || void 0,
+      children: [
+        caption !== void 0 && /* @__PURE__ */ jsx27("caption", { children: node(caption) }),
+        /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsx27("tr", { children: columns.map((column) => /* @__PURE__ */ jsx27(
+          "th",
+          {
+            scope: "col",
+            "data-align": column.align ?? "start",
+            style: { width: column.width },
+            children: node(column.label)
+          },
+          column.key
+        )) }) }),
+        /* @__PURE__ */ jsx27("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx27("tr", { children: /* @__PURE__ */ jsx27("td", { className: "sph-table__empty", colSpan: columns.length, children: node(emptyMessage) }) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx27("tr", { children: columns.map((column) => /* @__PURE__ */ jsx27("td", { "data-align": column.align ?? "start", children: node(
+          column.render ? column.render(row, rowIndex) : row[column.key]
+        ) }, column.key)) }, rowKey ? String(row[rowKey]) : rowIndex)) })
+      ]
+    }
+  ) });
+}
+export {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Dialog,
+  EmptyState,
+  Field,
+  FieldMessage,
+  IconButton,
+  Input,
+  Menu,
+  Notice,
+  Popover,
+  RadioGroup,
+  Select,
+  Separator,
+  Skeleton,
+  Slider,
+  Spinner,
+  Surface,
+  Table,
+  Tabs,
+  Textarea,
+  Toast,
+  ToastViewport,
+  Toggle,
+  Toolbar,
+  Tooltip,
+  toast
+};
+//# sourceMappingURL=index.js.map