@mirror-physics/fractal-ui 0.1.1

package/dist/index.js

@@ -0,0 +1,1066 @@
+// src/components/Button/Button.tsx
+import * as React from "react";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+
+// src/components/Button/Button.tsx
+import { jsxs } from "react/jsx-runtime";
+var colorPalette = {
+  blue: {
+    0: "var(--blue-0)",
+    50: "var(--blue-50)",
+    100: "var(--blue-100)",
+    200: "var(--blue-200)",
+    500: "var(--blue-500)",
+    600: "var(--blue-600)",
+    700: "var(--blue-700)"
+  },
+  pink: {
+    0: "var(--pink-0)",
+    50: "var(--pink-50)",
+    100: "var(--pink-100)",
+    200: "var(--pink-200)",
+    500: "var(--pink-500)",
+    600: "var(--pink-600)",
+    700: "var(--pink-700)"
+  },
+  orange: {
+    0: "var(--orange-0)",
+    50: "var(--orange-50)",
+    100: "var(--orange-100)",
+    200: "var(--orange-200)",
+    500: "var(--orange-500)",
+    600: "var(--orange-600)",
+    700: "var(--orange-700)"
+  },
+  green: {
+    0: "var(--green-0)",
+    50: "var(--green-50)",
+    100: "var(--green-100)",
+    200: "var(--green-200)",
+    500: "var(--green-500)",
+    600: "var(--green-600)",
+    700: "var(--green-700)"
+  }
+};
+var sizeConfig = {
+  xs: { height: "28px", padding: "4px 8px", iconOnly: "28px", fontSize: "0.75rem" },
+  sm: { height: "32px", padding: "6px 12px", iconOnly: "32px", fontSize: "0.75rem" },
+  md: { height: "38px", padding: "8px 16px", iconOnly: "38px", fontSize: "0.875rem" },
+  lg: { height: "44px", padding: "10px 20px", iconOnly: "44px", fontSize: "1rem" },
+  xl: { height: "56px", padding: "14px 28px", iconOnly: "56px", fontSize: "1rem" }
+};
+function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled, color, hasIconOnly) {
+  const palette = colorPalette[color];
+  const size = sizeConfig[buttonSize];
+  const base = {
+    height: size.height,
+    padding: hasIconOnly ? "0" : size.padding,
+    borderRadius: hasIconOnly ? "var(--radius-lg, 8px)" : "var(--radius-full, 9999px)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontSize: size.fontSize,
+    transition: "background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease"
+  };
+  if (hasIconOnly) {
+    base.width = size.iconOnly;
+    base.justifyContent = "center";
+  }
+  if (disabled) {
+    if (buttonType === "ghost") {
+      return { ...base, backgroundColor: "transparent", border: "none", color: "var(--fg-disabled)" };
+    }
+    return { ...base, backgroundColor: "transparent", border: "1px solid var(--fg-disabled)", color: "var(--fg-disabled)" };
+  }
+  switch (buttonType) {
+    // Primary with text: dark pill. Icon-only: color palette (Synapse style).
+    case "primary":
+      if (hasIconOnly) {
+        return {
+          ...base,
+          backgroundColor: isActive ? palette[700] : isHovered ? palette[500] : palette[600],
+          border: "none",
+          color: "var(--fg-inverse)"
+        };
+      }
+      return {
+        ...base,
+        backgroundColor: "var(--fg-primary)",
+        border: "1px solid var(--fg-primary)",
+        color: "var(--fg-inverse)",
+        ...isHovered || isActive ? { opacity: 0.85 } : {}
+      };
+    // Secondary: neutral. Rest=canvas, hover=surface-1 (darken), pressed=surface-2. Subtle border, dark text.
+    case "secondary":
+      return {
+        ...base,
+        backgroundColor: isActive ? "var(--bg-surface-2)" : isHovered ? "var(--bg-surface-1)" : "var(--bg-canvas)",
+        border: "1px solid var(--border-subtle)",
+        color: "var(--fg-primary)"
+      };
+    // Ghost: no border. Rest=transparent, hover/press=surface-1.
+    case "ghost":
+      return {
+        ...base,
+        backgroundColor: isHovered || isActive ? "var(--bg-surface-1)" : "transparent",
+        border: "none",
+        color: "var(--fg-primary)"
+      };
+    // Danger: low-intensity destructive action. Text stays steady; hover deepens the light red surface.
+    case "danger":
+      return {
+        ...base,
+        backgroundColor: isHovered || isActive ? "var(--danger-button-surface-hover)" : "var(--danger-button-surface)",
+        border: "none",
+        color: "var(--danger-button-fg)"
+      };
+    default:
+      return base;
+  }
+}
+var Button = React.forwardRef(
+  ({ className, buttonType = "primary", buttonSize = "md", color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isActive, setIsActive] = React.useState(false);
+    const typeStyles = getButtonStyles(buttonType, isHovered, isActive, buttonSize, !!disabled, color, hasIconOnly);
+    const hasIconAndText = icon && children && !hasIconOnly;
+    const finalStyles = hasIconAndText ? { ...typeStyles, gap: "var(--space-2, 8px)", ...style } : { ...typeStyles, ...style };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn("fractal-button", `fractal-button--${buttonType}`, className),
+        style: finalStyles,
+        disabled,
+        onMouseEnter: (e) => {
+          setIsHovered(true);
+          props.onMouseEnter?.(e);
+        },
+        onMouseLeave: (e) => {
+          setIsHovered(false);
+          setIsActive(false);
+          props.onMouseLeave?.(e);
+        },
+        onMouseDown: (e) => {
+          setIsActive(true);
+          props.onMouseDown?.(e);
+        },
+        onMouseUp: (e) => {
+          setIsActive(false);
+          props.onMouseUp?.(e);
+        },
+        ...props,
+        children: [
+          iconPosition !== "right" && icon,
+          !hasIconOnly && children,
+          iconPosition === "right" && icon
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Card/Card.tsx
+import * as React2 from "react";
+import { Folder as FolderIcon } from "@mirror-physics/fractal-icons";
+import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
+var Card = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("fractal-card", className), ...props })
+);
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("fractal-card-header", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("fractal-card-title", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("fractal-card-description", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("fractal-card-content", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("fractal-card-footer", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+var FeatureCard = React2.forwardRef(
+  ({ icon, title, description, className, ...props }, ref) => /* @__PURE__ */ jsxs2("div", { ref, className: cn("fractal-feature-card", className), ...props, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "fractal-feature-card__icon", children: icon }),
+    /* @__PURE__ */ jsx("h3", { className: "fractal-feature-card__title", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "fractal-feature-card__description", children: description })
+  ] })
+);
+FeatureCard.displayName = "FeatureCard";
+var FolderCard = React2.forwardRef(
+  ({ name, sessionCount, selected, className, onClick, ...props }, ref) => /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref,
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.(e);
+        }
+      },
+      className: cn("fractal-folder-card", selected && "fractal-folder-card--selected", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "fractal-folder-card__header", children: [
+          /* @__PURE__ */ jsx(FolderIcon, { size: 16, className: "fractal-folder-card__icon", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "fractal-folder-card__name", children: name })
+        ] }),
+        sessionCount !== void 0 && /* @__PURE__ */ jsx("div", { className: "fractal-folder-card__footer", children: /* @__PURE__ */ jsxs2("span", { className: "fractal-folder-card__sessions", children: [
+          sessionCount,
+          " ",
+          sessionCount === 1 ? "session" : "sessions"
+        ] }) })
+      ]
+    }
+  )
+);
+FolderCard.displayName = "FolderCard";
+
+// src/components/PromptCard/PromptCard.tsx
+import * as React3 from "react";
+import { jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
+var titleToPrompt = (title) => typeof title === "string" || typeof title === "number" ? String(title) : "";
+var PromptCard = React3.forwardRef(
+  ({
+    title,
+    icon,
+    prompt,
+    tone = "blue",
+    highlighted,
+    disabled,
+    className,
+    onClick,
+    onPromptSelect,
+    ...props
+  }, ref) => {
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        onPromptSelect?.(prompt ?? titleToPrompt(title));
+      }
+    };
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        className: cn(
+          "fractal-prompt-card",
+          `fractal-prompt-card--${tone}`,
+          highlighted && "fractal-prompt-card--highlighted",
+          className
+        ),
+        onClick: handleClick,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx2("span", { className: "fractal-prompt-card__icon", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx2("span", { className: "fractal-prompt-card__title", children: title })
+        ]
+      }
+    );
+  }
+);
+PromptCard.displayName = "PromptCard";
+var PromptGrid = React3.forwardRef(
+  ({ compact, padded, className, ...props }, ref) => /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      className: cn(
+        "fractal-prompt-grid",
+        compact && "fractal-prompt-grid--compact",
+        padded && "fractal-prompt-grid--padded",
+        className
+      ),
+      ...props
+    }
+  )
+);
+PromptGrid.displayName = "PromptGrid";
+
+// src/components/Input/Input.tsx
+import * as React4 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input = React4.forwardRef(
+  ({ className, type, ...props }, ref) => /* @__PURE__ */ jsx3(
+    "input",
+    {
+      type,
+      ref,
+      className: cn("fractal-input", className),
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+
+// src/components/Label/Label.tsx
+import * as React5 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Label = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+    "label",
+    {
+      ref,
+      className: cn("fractal-label", className),
+      ...props
+    }
+  )
+);
+Label.displayName = "Label";
+
+// src/components/Alert/Alert.tsx
+import * as React6 from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var defaultIcons = {
+  default: "\u2139",
+  info: "\u2139",
+  success: "\u2713",
+  warning: "\u26A0",
+  error: "\u2715"
+};
+var Alert = React6.forwardRef(
+  ({ className, variant = "default", icon, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn("fractal-alert", `fractal-alert--${variant}`, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? defaultIcons[variant] }),
+        /* @__PURE__ */ jsx5("div", { className: "fractal-alert-content", children })
+      ]
+    }
+  )
+);
+Alert.displayName = "Alert";
+var AlertTitle = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx5("h5", { ref, className: cn("fractal-alert-title", className), ...props })
+);
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn("fractal-alert-description", className), ...props })
+);
+AlertDescription.displayName = "AlertDescription";
+
+// src/components/Toggle/Toggle.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Toggle({ checked, onChange, label, className }) {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      className: cn("fractal-toggle", className),
+      onClick: () => onChange(!checked),
+      children: [
+        /* @__PURE__ */ jsx6("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx6("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
+        label && /* @__PURE__ */ jsx6("span", { className: "fractal-toggle-label", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/Modal/Modal.tsx
+import { createPortal } from "react-dom";
+
+// src/hooks/useEscapeDismiss.ts
+import { useEffect, useRef } from "react";
+var nextId = 0;
+var stack = [];
+function insertSorted(entry) {
+  let i = 0;
+  while (i < stack.length && stack[i].priority >= entry.priority) {
+    if (stack[i].priority === entry.priority) break;
+    i++;
+  }
+  stack.splice(i, 0, entry);
+}
+function remove(id) {
+  const idx = stack.findIndex((e) => e.id === id);
+  if (idx >= 0) stack.splice(idx, 1);
+}
+var listenerInstalled = false;
+function ensureGlobalListener() {
+  if (listenerInstalled) return;
+  listenerInstalled = true;
+  window.addEventListener(
+    "keydown",
+    (e) => {
+      if (e.key !== "Escape") return;
+      if (stack.length === 0) return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      const top = stack[0];
+      top.handler();
+    },
+    { capture: true }
+  );
+}
+function useEscapeDismiss(priority, handler, enabled = true) {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+  useEffect(() => {
+    if (!enabled) return;
+    ensureGlobalListener();
+    const id = nextId++;
+    const entry = {
+      id,
+      priority,
+      handler: () => handlerRef.current()
+    };
+    insertSorted(entry);
+    return () => remove(id);
+  }, [priority, enabled]);
+}
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var CloseIcon = () => /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx7("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function Modal({ open, onClose, title, children, danger, warn, footer, noClose, size = "sm", className }) {
+  useEscapeDismiss(80, onClose, open && !noClose);
+  if (!open) return null;
+  const sizeClass = `fractal-modal-panel--${size}`;
+  const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
+  return createPortal(
+    /* @__PURE__ */ jsx7("div", { className: "fractal-modal-overlay", onClick: noClose ? void 0 : onClose, children: /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: cn("fractal-modal-panel", sizeClass, accentClass, className),
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs6("div", { className: "fractal-modal-title-row", children: [
+            /* @__PURE__ */ jsx7("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
+            !noClose && /* @__PURE__ */ jsx7("button", { type: "button", onClick: onClose, title: "Close", className: "fractal-modal-close", children: /* @__PURE__ */ jsx7(CloseIcon, {}) })
+          ] }),
+          /* @__PURE__ */ jsx7("div", { className: cn("fractal-modal-body", size === "lg" && "fractal-modal-body--lg"), children }),
+          footer && /* @__PURE__ */ jsx7("div", { className: "fractal-modal-footer", children: footer })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/components/DataTable/DataTable.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
+  return /* @__PURE__ */ jsx8("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs7("div", { className: "fractal-datatable-surface", children: [
+    header && /* @__PURE__ */ jsx8("div", { className: "fractal-datatable-header", children: header }),
+    data.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs7("table", { className: "fractal-datatable-table", children: [
+      /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx8("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
+      /* @__PURE__ */ jsx8("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx8(
+        "tr",
+        {
+          className: "fractal-datatable-row",
+          children: columns.map((col) => /* @__PURE__ */ jsx8("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
+        },
+        rowIndex
+      )) })
+    ] })
+  ] }) });
+}
+
+// src/components/Dropdown/Dropdown.tsx
+import * as React7 from "react";
+import { ChevronDown, ChevronUp } from "@mirror-physics/fractal-icons";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var MARGIN = 4;
+function Dropdown({
+  items,
+  selectedValue,
+  onSelect,
+  triggerLabel = "Options",
+  direction = "down",
+  align = "left",
+  triggerContent,
+  label,
+  noChevron = false,
+  size = "md",
+  triggerVariant = "outline",
+  className,
+  triggerClassName,
+  panelClassName,
+  closeOnSelect = true
+}) {
+  const [open, setOpen] = React7.useState(false);
+  const triggerRef = React7.useRef(null);
+  const panelRef = React7.useRef(null);
+  const [panelStyle, setPanelStyle] = React7.useState({});
+  const visibleItems = items.filter(
+    (item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
+  );
+  if (visibleItems.length === 0) return null;
+  const selectableItems = visibleItems.filter((i) => i.kind !== "header");
+  const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
+  const isUp = direction === "up";
+  const ChevronIcon = isUp ? ChevronUp : ChevronDown;
+  React7.useLayoutEffect(() => {
+    if (!open || !triggerRef.current || !panelRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const panelRect = panelRef.current.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const spaceBelow = vh - triggerRect.bottom - MARGIN;
+    const spaceAbove = triggerRect.top - MARGIN;
+    let placeAbove = isUp;
+    if (placeAbove && panelRect.height > spaceAbove && spaceBelow > spaceAbove) {
+      placeAbove = false;
+    } else if (!placeAbove && panelRect.height > spaceBelow && spaceAbove > spaceBelow) {
+      placeAbove = true;
+    }
+    const top = placeAbove ? -(panelRect.height + MARGIN) : triggerRect.height + MARGIN;
+    let left;
+    let right;
+    if (align === "right") {
+      right = 0;
+      const panelLeft = triggerRect.right - panelRect.width;
+      if (panelLeft < 0) {
+        right = void 0;
+        left = 0;
+      }
+    } else {
+      left = 0;
+      const panelRight = triggerRect.left + panelRect.width;
+      if (panelRight > vw) {
+        left = void 0;
+        right = 0;
+      }
+    }
+    setPanelStyle({ top, left, right });
+  }, [open, isUp, align]);
+  React7.useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  return /* @__PURE__ */ jsxs8("div", { className: cn("fractal-dropdown", className), children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-label": triggerLabel,
+        onClick: () => setOpen((o) => !o),
+        className: cn(
+          "fractal-dropdown-trigger",
+          `fractal-dropdown-trigger--${size}`,
+          `fractal-dropdown-trigger--${triggerVariant}`,
+          triggerClassName
+        ),
+        children: [
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            selected.icon != null && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
+            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-selected-text", children: selected.description })
+          ] }),
+          !noChevron && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx9(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref: panelRef,
+        role: "listbox",
+        "aria-label": triggerLabel,
+        className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
+        style: panelStyle,
+        children: [
+          label != null && /* @__PURE__ */ jsx9("div", { className: "fractal-dropdown-label", children: label }),
+          visibleItems.map((item, index) => {
+            const topDivider = item.border === "top" ? /* @__PURE__ */ jsx9("div", { className: "fractal-dropdown-separator" }) : null;
+            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx9("div", { className: "fractal-dropdown-separator" }) : null;
+            if (item.kind === "header") {
+              return /* @__PURE__ */ jsxs8(React7.Fragment, { children: [
+                topDivider,
+                /* @__PURE__ */ jsx9("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                bottomDivider
+              ] }, `header-${index}`);
+            }
+            const isSelected = item.value === selectedValue;
+            return /* @__PURE__ */ jsxs8(React7.Fragment, { children: [
+              topDivider,
+              /* @__PURE__ */ jsxs8(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  onClick: () => {
+                    onSelect(item.value);
+                    if (closeOnSelect) setOpen(false);
+                  },
+                  className: "fractal-dropdown-option",
+                  children: [
+                    item.icon != null && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-icon", children: item.icon }),
+                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-option-text", children: item.description }),
+                    item.trailing != null && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-trailing", children: item.trailing })
+                  ]
+                }
+              ),
+              bottomDivider
+            ] }, item.value);
+          })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/Link/Link.tsx
+import * as React8 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Link = React8.forwardRef(
+  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx10(
+    "a",
+    {
+      ref,
+      className: cn("fractal-link", `fractal-link--${theme}`, `fractal-link--${size}`, className),
+      ...props
+    }
+  )
+);
+Link.displayName = "Link";
+
+// src/components/Chip/Chip.tsx
+import * as React9 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Chip = React9.forwardRef(
+  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx11(
+    "span",
+    {
+      ref,
+      className: cn("fractal-chip", `fractal-chip--${tone}`, className),
+      ...props
+    }
+  )
+);
+Chip.displayName = "Chip";
+
+// src/components/SortableTable/SortableTable.tsx
+import { useMemo, useState as useState3 } from "react";
+import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function SortableTable({
+  columns,
+  data,
+  emptyMessage,
+  header,
+  size = "md",
+  className,
+  defaultSortKey = void 0,
+  defaultSortDirection = null,
+  sortKey: controlledKey,
+  sortDirection: controlledDirection,
+  onSortChange,
+  highlightRow
+}) {
+  const [internalKey, setInternalKey] = useState3(defaultSortKey ?? null);
+  const [internalDirection, setInternalDirection] = useState3(defaultSortDirection);
+  const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
+  const activeKey = isControlled ? controlledKey : internalKey;
+  const activeDirection = isControlled ? controlledDirection : internalDirection;
+  const sorted = useMemo(() => {
+    if (!activeKey || !activeDirection) return data;
+    const col = columns.find((c) => c.key === activeKey);
+    if (!col) return data;
+    const accessor = col.sortAccessor ?? ((row) => {
+      const value = row[activeKey];
+      return typeof value === "string" || typeof value === "number" ? value : null;
+    });
+    const copy = [...data];
+    copy.sort((a, b) => {
+      const av = accessor(a);
+      const bv = accessor(b);
+      if (av == null && bv == null) return 0;
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      if (typeof av === "number" && typeof bv === "number") {
+        return activeDirection === "asc" ? av - bv : bv - av;
+      }
+      const as = String(av).toLowerCase();
+      const bs = String(bv).toLowerCase();
+      if (as < bs) return activeDirection === "asc" ? -1 : 1;
+      if (as > bs) return activeDirection === "asc" ? 1 : -1;
+      return 0;
+    });
+    return copy;
+  }, [data, columns, activeKey, activeDirection]);
+  const handleSortClick = (key) => {
+    let nextDirection;
+    if (activeKey !== key) {
+      nextDirection = "asc";
+    } else if (activeDirection === "asc") {
+      nextDirection = "desc";
+    } else if (activeDirection === "desc") {
+      nextDirection = null;
+    } else {
+      nextDirection = "asc";
+    }
+    const nextKey = nextDirection === null ? null : key;
+    if (isControlled) {
+      onSortChange?.(nextKey, nextDirection);
+    } else {
+      setInternalKey(nextKey);
+      setInternalDirection(nextDirection);
+      onSortChange?.(nextKey, nextDirection);
+    }
+  };
+  return /* @__PURE__ */ jsx12("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, className), children: /* @__PURE__ */ jsxs9("div", { className: "fractal-sortable-table-surface", children: [
+    header && /* @__PURE__ */ jsx12("div", { className: "fractal-sortable-table-header", children: header }),
+    sorted.length === 0 ? /* @__PURE__ */ jsx12("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs9("table", { className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsx12("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
+        const isActive = activeKey === col.key && activeDirection !== null;
+        if (!col.sortable) {
+          return /* @__PURE__ */ jsx12(
+            "th",
+            {
+              className: "fractal-sortable-table-th",
+              style: { width: col.width },
+              children: col.header
+            },
+            col.key
+          );
+        }
+        return /* @__PURE__ */ jsx12(
+          "th",
+          {
+            className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
+            style: { width: col.width },
+            children: /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "fractal-sortable-table-sort-button",
+                  isActive && "fractal-sortable-table-sort-button--active"
+                ),
+                onClick: () => handleSortClick(col.key),
+                "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
+                children: [
+                  /* @__PURE__ */ jsx12("span", { children: col.header }),
+                  /* @__PURE__ */ jsx12("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx12(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx12(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx12(ArrowsUpDown, { size: 14 }) })
+                ]
+              }
+            )
+          },
+          col.key
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx12("tbody", { children: sorted.map((row, rowIndex) => {
+        const highlighted = highlightRow?.(row, rowIndex) ?? false;
+        return /* @__PURE__ */ jsx12(
+          "tr",
+          {
+            className: cn(
+              "fractal-sortable-table-row",
+              highlighted && "fractal-sortable-table-row--highlighted"
+            ),
+            children: columns.map((col) => /* @__PURE__ */ jsx12(
+              "td",
+              {
+                className: "fractal-sortable-table-td",
+                style: { width: col.width, textAlign: col.align ?? "left" },
+                children: col.render(row, rowIndex)
+              },
+              col.key
+            ))
+          },
+          rowIndex
+        );
+      }) })
+    ] })
+  ] }) });
+}
+
+// src/components/Tabs/Tabs.tsx
+import { useId, useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function Tabs({
+  items,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  className,
+  ariaLabel
+}) {
+  const reactId = useId();
+  const [internalValue, setInternalValue] = useState4(
+    defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
+  );
+  const isControlled = controlledValue !== void 0;
+  const activeId = isControlled ? controlledValue : internalValue;
+  const tabRefs = useRef3({});
+  const selectTab = (id) => {
+    if (isControlled) {
+      onValueChange?.(id);
+    } else {
+      setInternalValue(id);
+      onValueChange?.(id);
+    }
+  };
+  const focusable = items.filter((i) => !i.disabled);
+  const onKeyDown = (event) => {
+    const currentIndex = focusable.findIndex((i) => i.id === activeId);
+    if (currentIndex === -1) return;
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowRight":
+        nextIndex = (currentIndex + 1) % focusable.length;
+        break;
+      case "ArrowLeft":
+        nextIndex = (currentIndex - 1 + focusable.length) % focusable.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = focusable.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const nextId2 = focusable[nextIndex].id;
+    selectTab(nextId2);
+    requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: cn("fractal-tabs", className), children: [
+    /* @__PURE__ */ jsx13("div", { role: "tablist", "aria-label": ariaLabel, className: "fractal-tabs-list", children: items.map((item) => {
+      const isActive = item.id === activeId;
+      const tabId = `${reactId}-tab-${item.id}`;
+      const panelId = `${reactId}-panel-${item.id}`;
+      return /* @__PURE__ */ jsx13(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[item.id] = el;
+          },
+          id: tabId,
+          role: "tab",
+          type: "button",
+          "aria-selected": isActive,
+          "aria-controls": panelId,
+          tabIndex: isActive ? 0 : -1,
+          disabled: item.disabled,
+          className: cn(
+            "fractal-tabs-trigger",
+            isActive && "fractal-tabs-trigger--active",
+            item.disabled && "fractal-tabs-trigger--disabled"
+          ),
+          onClick: () => !item.disabled && selectTab(item.id),
+          onKeyDown,
+          children: item.label
+        },
+        item.id
+      );
+    }) }),
+    items.map((item) => {
+      const tabId = `${reactId}-tab-${item.id}`;
+      const panelId = `${reactId}-panel-${item.id}`;
+      const isActive = item.id === activeId;
+      return /* @__PURE__ */ jsx13(
+        "div",
+        {
+          id: panelId,
+          role: "tabpanel",
+          "aria-labelledby": tabId,
+          hidden: !isActive,
+          className: "fractal-tabs-panel",
+          children: isActive && item.content
+        },
+        item.id
+      );
+    })
+  ] });
+}
+
+// src/components/Disclosure/Disclosure.tsx
+import { useId as useId2, useState as useState5 } from "react";
+import { ChevronRight, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function Disclosure({
+  title,
+  meta,
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  className,
+  variant = "card"
+}) {
+  const reactId = useId2();
+  const headerId = `${reactId}-header`;
+  const panelId = `${reactId}-panel`;
+  const [internalOpen, setInternalOpen] = useState5(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const toggle = () => {
+    const next = !isOpen;
+    if (isControlled) {
+      onOpenChange?.(next);
+    } else {
+      setInternalOpen(next);
+      onOpenChange?.(next);
+    }
+  };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn(
+        "fractal-disclosure",
+        variant === "card" && "fractal-disclosure--card",
+        isOpen && "fractal-disclosure--open",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            type: "button",
+            id: headerId,
+            className: "fractal-disclosure-trigger",
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
+            onClick: toggle,
+            children: [
+              /* @__PURE__ */ jsx14("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx14(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx14(ChevronRight, { size: 16 }) }),
+              /* @__PURE__ */ jsx14("span", { className: "fractal-disclosure-title", children: title }),
+              meta && /* @__PURE__ */ jsx14("span", { className: "fractal-disclosure-meta", children: meta })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          "div",
+          {
+            id: panelId,
+            role: "region",
+            "aria-labelledby": headerId,
+            className: "fractal-disclosure-panel",
+            hidden: !isOpen,
+            children: /* @__PURE__ */ jsx14("div", { className: "fractal-disclosure-panel-inner", children })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Sidebar/Sidebar.tsx
+import * as React10 from "react";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+var Sidebar = React10.forwardRef(
+  ({ className, width, style, ...props }, ref) => /* @__PURE__ */ jsx15(
+    "aside",
+    {
+      ref,
+      className: cn("fractal-sidebar", className),
+      style: { ...style, ...width ? { "--fractal-sidebar-width": width } : {} },
+      ...props
+    }
+  )
+);
+Sidebar.displayName = "Sidebar";
+var SidebarHeader = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
+);
+SidebarHeader.displayName = "SidebarHeader";
+var SidebarBrand = React10.forwardRef(
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx15("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
+);
+SidebarBrand.displayName = "SidebarBrand";
+var SidebarNav = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx15("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
+);
+SidebarNav.displayName = "SidebarNav";
+var SidebarSection = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
+);
+SidebarSection.displayName = "SidebarSection";
+var SidebarNavItem = React10.forwardRef(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs12(
+    "button",
+    {
+      ref,
+      type,
+      className: cn("fractal-sidebar__nav-item", className),
+      "data-active": active || void 0,
+      "aria-current": active ? "page" : void 0,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx15("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx15("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ jsx15("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
+      ]
+    }
+  )
+);
+SidebarNavItem.displayName = "SidebarNavItem";
+var SidebarFooter = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
+);
+SidebarFooter.displayName = "SidebarFooter";
+export {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Chip,
+  DataTable,
+  Disclosure,
+  Dropdown,
+  FeatureCard,
+  FolderCard,
+  Input,
+  Label,
+  Link,
+  Modal,
+  PromptCard,
+  PromptGrid,
+  Sidebar,
+  SidebarBrand,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarNav,
+  SidebarNavItem,
+  SidebarSection,
+  SortableTable,
+  Tabs,
+  Toggle,
+  cn,
+  useEscapeDismiss
+};
+//# sourceMappingURL=index.js.map