@particle-academy/react-fancy 2.5.0 → 2.7.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useId, useRef, useEffect, useState, useCallback, useMemo, createContext, Children, isValidElement, cloneElement, useLayoutEffect, useContext, Fragment as Fragment$1 } from 'react';
+import { forwardRef, createContext, useId, useRef, useEffect, useState, useCallback, useMemo, Children, isValidElement, cloneElement, useLayoutEffect, useContext, Fragment as Fragment$1 } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LucideIcons from 'lucide-react';
@@ -2556,6 +2556,288 @@ var Action = forwardRef(
   }
 );
 Action.displayName = "Action";
+function useControllableState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(value) : next;
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChangeRef.current?.(nextValue);
+    },
+    [isControlled, value]
+  );
+  return [value, setValue];
+}
+var AccordionPanelContext = createContext(null);
+function useAccordionPanel() {
+  const ctx = useContext(AccordionPanelContext);
+  if (!ctx) {
+    throw new Error(
+      "AccordionPanel components must be used inside <AccordionPanel>"
+    );
+  }
+  return ctx;
+}
+var AccordionSectionContext = createContext(null);
+function useAccordionSection() {
+  const ctx = useContext(AccordionSectionContext);
+  if (!ctx) {
+    throw new Error(
+      "<AccordionPanel.Trigger> must be rendered inside <AccordionPanel.Section>"
+    );
+  }
+  return ctx;
+}
+function AccordionPanelSection({
+  id,
+  pinned = false,
+  className,
+  openClassName,
+  closedClassName,
+  unstyled,
+  children
+}) {
+  const panel = useAccordionPanel();
+  const { orientation, isOpen, toggle, registerSection } = panel;
+  useEffect(() => registerSection(id), [id, registerSection]);
+  const open = pinned || isOpen(id);
+  const sectionCtx = useMemo(
+    () => ({
+      id,
+      open,
+      pinned,
+      orientation,
+      toggle: () => toggle(id)
+    }),
+    [id, open, pinned, orientation, toggle]
+  );
+  return /* @__PURE__ */ jsx(AccordionSectionContext.Provider, { value: sectionCtx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-accordion-section": "",
+      "data-state": open ? "open" : "closed",
+      "data-pinned": pinned ? "" : void 0,
+      "data-orientation": orientation,
+      className: cn(
+        "flex shrink-0",
+        !unstyled && "items-center gap-1",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        className,
+        open ? openClassName : closedClassName
+      ),
+      children
+    }
+  ) });
+}
+AccordionPanelSection.displayName = "AccordionPanelSection";
+function renderSlot(slot, state) {
+  return typeof slot === "function" ? slot(state) : slot;
+}
+function AccordionPanelTrigger({
+  children,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const { id, open, orientation, toggle } = useAccordionSection();
+  const state = { id, open, orientation, toggle };
+  if (children !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-react-fancy-accordion-trigger": "",
+        "data-state": open ? "open" : "closed",
+        "data-orientation": orientation,
+        className,
+        children: renderSlot(children, state)
+      }
+    );
+  }
+  if (open) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        "aria-label": ariaLabel ?? "Collapse section",
+        "data-react-fancy-accordion-trigger": "",
+        "data-state": "open",
+        "data-orientation": orientation,
+        className: cn(
+          "group relative flex shrink-0 items-center justify-center cursor-pointer",
+          "text-zinc-500 dark:text-zinc-500",
+          "hover:text-zinc-900 dark:hover:text-zinc-100",
+          // Wide hitbox + thin visible line (drawn via ::before).
+          orientation === "horizontal" ? "w-3 self-stretch" : "h-3 self-stretch",
+          "before:absolute before:bg-zinc-200 dark:before:bg-zinc-700",
+          "before:transition-colors group-hover:before:bg-zinc-400 dark:group-hover:before:bg-zinc-500",
+          orientation === "horizontal" ? "before:top-0 before:bottom-0 before:w-px before:left-1/2 before:-translate-x-1/2" : "before:left-0 before:right-0 before:h-px before:top-1/2 before:-translate-y-1/2",
+          "transition-colors",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(
+          ChevronIcon,
+          {
+            orientation,
+            purpose: "collapse",
+            className: "relative opacity-0 group-hover:opacity-100 transition-opacity"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      "aria-label": ariaLabel ?? "Expand section",
+      "data-react-fancy-accordion-trigger": "",
+      "data-state": "closed",
+      "data-orientation": orientation,
+      className: cn(
+        "flex shrink-0 items-center justify-center rounded-md",
+        "text-zinc-400 dark:text-zinc-500",
+        "hover:text-zinc-900 dark:hover:text-zinc-100",
+        "hover:bg-zinc-100 dark:hover:bg-zinc-800",
+        "transition-colors cursor-pointer",
+        orientation === "horizontal" ? "h-8 w-6 mx-0.5" : "w-8 h-6 my-0.5",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(ChevronIcon, { orientation, purpose: "expand" })
+    }
+  );
+}
+AccordionPanelTrigger.displayName = "AccordionPanelTrigger";
+function ChevronIcon({
+  orientation,
+  purpose,
+  className
+}) {
+  const transform = orientation === "horizontal" ? "rotate(180deg)" : purpose === "expand" ? "rotate(90deg)" : "rotate(270deg)";
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      width: "12",
+      height: "12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { transform },
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "6 4 10 8 6 12" })
+    }
+  );
+}
+function AccordionPanelContent({
+  children,
+  className,
+  unstyled
+}) {
+  const { open, orientation } = useAccordionSection();
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-accordion-content": "",
+      "data-orientation": orientation,
+      className: cn(
+        !unstyled && "flex items-center gap-1",
+        !unstyled && (orientation === "horizontal" ? "flex-row" : "flex-col"),
+        className
+      ),
+      children
+    }
+  );
+}
+AccordionPanelContent.displayName = "AccordionPanelContent";
+function AccordionPanelRoot({
+  orientation = "horizontal",
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  className,
+  children
+}) {
+  const [openIds, setOpenIds] = useControllableState(
+    controlledValue,
+    defaultValue ?? [],
+    onValueChange
+  );
+  const openSet = useMemo(() => new Set(openIds), [openIds]);
+  const isOpen = useCallback((id) => openSet.has(id), [openSet]);
+  const open = useCallback(
+    (id) => {
+      setOpenIds(openSet.has(id) ? openIds ?? [] : [...openIds ?? [], id]);
+    },
+    [openSet, openIds, setOpenIds]
+  );
+  const close = useCallback(
+    (id) => {
+      setOpenIds((openIds ?? []).filter((x) => x !== id));
+    },
+    [openIds, setOpenIds]
+  );
+  const toggle = useCallback(
+    (id) => {
+      setOpenIds(
+        openSet.has(id) ? (openIds ?? []).filter((x) => x !== id) : [...openIds ?? [], id]
+      );
+    },
+    [openSet, openIds, setOpenIds]
+  );
+  const [sectionIds, setSectionIds] = useState([]);
+  const orderRef = useRef([]);
+  const registerSection = useCallback((id) => {
+    if (!orderRef.current.includes(id)) {
+      orderRef.current = [...orderRef.current, id];
+      setSectionIds(orderRef.current);
+    }
+    return () => {
+      orderRef.current = orderRef.current.filter((x) => x !== id);
+      setSectionIds(orderRef.current);
+    };
+  }, []);
+  const ctx = useMemo(
+    () => ({
+      orientation,
+      isOpen,
+      toggle,
+      open,
+      close,
+      sectionIds,
+      registerSection
+    }),
+    [orientation, isOpen, toggle, open, close, sectionIds, registerSection]
+  );
+  return /* @__PURE__ */ jsx(AccordionPanelContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-accordion-panel": "",
+      "data-orientation": orientation,
+      className: cn(
+        "inline-flex items-stretch",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        className
+      ),
+      children
+    }
+  ) });
+}
+AccordionPanelRoot.displayName = "AccordionPanel";
+var AccordionPanel = AccordionPanelRoot;
+AccordionPanel.Section = AccordionPanelSection;
+AccordionPanel.Trigger = AccordionPanelTrigger;
+AccordionPanel.Content = AccordionPanelContent;
 
 // src/components/inputs/inputs.utils.ts
 var inputSizeClasses = {
@@ -3442,24 +3724,6 @@ var Select = forwardRef(
   }
 );
 Select.displayName = "Select";
-function useControllableState(controlledValue, defaultValue, onChange) {
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-  const isControlled = controlledValue !== void 0;
-  const value = isControlled ? controlledValue : uncontrolledValue;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const setValue = useCallback(
-    (next) => {
-      const nextValue = typeof next === "function" ? next(value) : next;
-      if (!isControlled) {
-        setUncontrolledValue(nextValue);
-      }
-      onChangeRef.current?.(nextValue);
-    },
-    [isControlled, value]
-  );
-  return [value, setValue];
-}
 var Checkbox = forwardRef(
   ({
     size = "md",
@@ -10849,11 +11113,13 @@ var KanbanColumnContext = createContext("");
 function useKanbanColumn() {
   return useContext(KanbanColumnContext);
 }
+var DEFAULT_COLUMN_CLASSES = "min-h-[200px] w-72 rounded-xl bg-zinc-50 p-3 dark:bg-zinc-800/50";
 function KanbanColumn({
   children,
   id,
   title,
-  className
+  className,
+  unstyled
 }) {
   const { onCardMove, draggedCard, dragSource } = useKanban();
   const [dragOver, setDragOver] = useState(false);
@@ -10880,7 +11146,8 @@ function KanbanColumn({
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       className: cn(
-        "flex min-h-[200px] w-72 flex-col rounded-xl bg-zinc-50 p-3 dark:bg-zinc-800/50",
+        "flex flex-col",
+        !unstyled && DEFAULT_COLUMN_CLASSES,
         dragOver && "ring-2 ring-blue-400 ring-inset",
         className
       ),
@@ -10892,7 +11159,8 @@ function KanbanColumn({
   ) });
 }
 KanbanColumn.displayName = "KanbanColumn";
-function KanbanCard({ children, id, className }) {
+var DEFAULT_CARD_CLASSES = "rounded-lg border border-zinc-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900";
+function KanbanCard({ children, id, className, unstyled }) {
   const { setDraggedCard, setDragSource } = useKanban();
   const columnId = useKanbanColumn();
   const handleDragStart = useCallback(() => {
@@ -10911,7 +11179,9 @@ function KanbanCard({ children, id, className }) {
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
       className: cn(
-        "cursor-grab rounded-lg border border-zinc-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md active:cursor-grabbing dark:border-zinc-700 dark:bg-zinc-900",
+        // Drag affordance — kept even when unstyled so users still see grab cursors.
+        "cursor-grab active:cursor-grabbing",
+        !unstyled && DEFAULT_CARD_CLASSES,
         className
       ),
       children
@@ -11593,7 +11863,7 @@ function DiagramToolbar({ className }) {
   const canImport = importableRef.current;
   const handleDownload = useCallback(
     async (format) => {
-      const { serializeToERD, serializeToUML, serializeToDFD } = await import('./diagram.serializers-OK4HP7AB.js');
+      const { serializeToERD, serializeToUML, serializeToDFD } = await import('./diagram.serializers-6RPUO46U.js');
       let content;
       switch (format) {
         case "erd":
@@ -11624,7 +11894,7 @@ function DiagramToolbar({ className }) {
       if (!file || !onImport) return;
       const text = await file.text();
       const ext = file.name.split(".").pop()?.toLowerCase();
-      const { deserializeSchema } = await import('./diagram.serializers-OK4HP7AB.js');
+      const { deserializeSchema } = await import('./diagram.serializers-6RPUO46U.js');
       let format = "erd";
       if (ext === "puml" || ext === "uml") format = "uml";
       else if (ext === "dfd") format = "dfd";
@@ -11692,9 +11962,12 @@ var VERTICAL_GAP = 60;
 function getEntityHeight(fieldCount) {
   return HEADER_HEIGHT2 + Math.max(fieldCount, 1) * FIELD_HEIGHT2;
 }
+function resolveEntityId(entity) {
+  return entity.id ?? entity.name;
+}
 function computeDiagramLayout(schema) {
   const positions = /* @__PURE__ */ new Map();
-  const entityIds = new Set(schema.entities.map((e) => e.id));
+  const entityIds = new Set(schema.entities.map(resolveEntityId));
   const incoming = /* @__PURE__ */ new Map();
   for (const id of entityIds) {
     incoming.set(id, /* @__PURE__ */ new Set());
@@ -11715,7 +11988,7 @@ function computeDiagramLayout(schema) {
     }
   }
   if (queue.length === 0 && entityIds.size > 0) {
-    const firstId = schema.entities[0].id;
+    const firstId = resolveEntityId(schema.entities[0]);
     rowAssignment.set(firstId, 0);
     assigned.add(firstId);
     queue.push(firstId);
@@ -11755,7 +12028,7 @@ function computeDiagramLayout(schema) {
   }
   const fieldCounts = /* @__PURE__ */ new Map();
   for (const entity of schema.entities) {
-    fieldCounts.set(entity.id, entity.fields?.length ?? 0);
+    fieldCounts.set(resolveEntityId(entity), entity.fields?.length ?? 0);
   }
   const sortedRows = Array.from(rows.keys()).sort((a, b) => a - b);
   let currentY = 0;
@@ -11952,7 +12225,7 @@ function FolderIcon({ open }) {
   }
   return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "shrink-0", children: /* @__PURE__ */ jsx("path", { d: "M1.5 3a1 1 0 011-1h3l1.5 1.5H13a1 1 0 011 1v8a1 1 0 01-1 1H2.5a1 1 0 01-1-1V3z", fill: "#fbbf24" }) });
 }
-function ChevronIcon({ open }) {
+function ChevronIcon2({ open }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -12134,7 +12407,7 @@ function TreeNode({ node, depth }) {
             ),
             style: { paddingLeft },
             children: [
-              isFolder && /* @__PURE__ */ jsx(ChevronIcon, { open: isExpanded }),
+              isFolder && /* @__PURE__ */ jsx(ChevronIcon2, { open: isExpanded }),
               !isFolder && /* @__PURE__ */ jsx("span", { className: "w-3.5 shrink-0" }),
               showIcons && (node.icon ?? (isFolder ? /* @__PURE__ */ jsx(FolderIcon, { open: isExpanded }) : /* @__PURE__ */ jsx(FileIcon, { ext: node.ext ?? node.label.split(".").pop() }))),
               /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
@@ -12263,6 +12536,6 @@ var TreeNav = Object.assign(TreeNavRoot, {
   Node: TreeNode
 });
 
-export { Accordion, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Canvas, Card, Carousel, Chart, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Diagram, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, Kanban, Menu2 as Menu, MobileMenu, Modal, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, RadioGroup, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Canvas, Card, Carousel, Chart, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Diagram, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, Kanban, Menu2 as Menu, MobileMenu, Modal, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, RadioGroup, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map