@etus/ui 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/chunk-LNY2EXOV.js

@@ -0,0 +1,349 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, arrayMove, SortableContext, horizontalListSortingStrategy, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var sortableListVariants = cva(
+  // Base styles
+  "relative",
+  {
+    variants: {
+      direction: {
+        vertical: "flex flex-col",
+        horizontal: "flex flex-row flex-wrap"
+      },
+      gap: {
+        "0": "gap-0",
+        "1": "gap-1",
+        "2": "gap-2",
+        "3": "gap-3",
+        "4": "gap-4",
+        "6": "gap-6",
+        "8": "gap-8"
+      },
+      disabled: {
+        true: "opacity-60 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      direction: "vertical",
+      gap: "2",
+      disabled: false
+    }
+  }
+);
+var sortableListItemVariants = cva(
+  // Base styles
+  [
+    "relative",
+    "touch-none",
+    "select-none",
+    "transition-all duration-200 ease-out"
+  ],
+  {
+    variants: {
+      isDragging: {
+        true: [
+          "z-50",
+          "opacity-50",
+          "scale-[1.02]"
+        ],
+        false: ""
+      },
+      isSorting: {
+        true: "transition-transform",
+        false: ""
+      },
+      isOver: {
+        true: "",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "cursor-grab"
+      }
+    },
+    compoundVariants: [
+      {
+        isDragging: true,
+        disabled: false,
+        className: "cursor-grabbing"
+      }
+    ],
+    defaultVariants: {
+      isDragging: false,
+      isSorting: false,
+      isOver: false,
+      disabled: false
+    }
+  }
+);
+var sortableListHandleVariants = cva(
+  // Base styles
+  [
+    "inline-flex items-center justify-center",
+    "rounded-sm",
+    "p-1",
+    "text-muted-foreground",
+    "hover:text-foreground",
+    "hover:bg-accent",
+    "focus-visible:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-ring",
+    "focus-visible:ring-offset-2",
+    "transition-colors duration-150",
+    "touch-none"
+  ],
+  {
+    variants: {
+      isDragging: {
+        true: "cursor-grabbing text-foreground bg-accent",
+        false: "cursor-grab"
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      isDragging: false,
+      disabled: false
+    }
+  }
+);
+var sortableListOverlayVariants = cva(
+  // Base styles
+  [
+    "bg-background",
+    "shadow-lg",
+    "ring-2",
+    "ring-primary/20",
+    "rounded-md"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var SortableItemHandleContext = React.createContext(null);
+function useSortableItemHandle() {
+  const context = React.use(SortableItemHandleContext);
+  if (!context) {
+    throw new Error("SortableListDragHandle must be used within a SortableListItem");
+  }
+  return context;
+}
+var SortableListHandleContext = React.createContext({
+  handleRequired: false
+});
+function SortableList({
+  className,
+  direction = "vertical",
+  disabled = false,
+  gap = "2",
+  handle = false,
+  items,
+  keyExtractor,
+  onReorder,
+  renderItem,
+  strategy
+}) {
+  const [activeId, setActiveId] = React.useState(null);
+  const itemIds = React.useMemo(
+    () => items.map((item) => keyExtractor(item)),
+    [items, keyExtractor]
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const sortingStrategy = strategy ?? (direction === "horizontal" ? horizontalListSortingStrategy : verticalListSortingStrategy);
+  const handleDragStart = React.useCallback((event) => {
+    setActiveId(event.active.id);
+  }, []);
+  const handleDragEnd = React.useCallback((event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = itemIds.indexOf(String(active.id));
+      const newIndex = itemIds.indexOf(String(over.id));
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newItems = arrayMove(items, oldIndex, newIndex);
+        onReorder(newItems);
+      }
+    }
+    setActiveId(null);
+  }, [items, itemIds, onReorder]);
+  const handleDragCancel = React.useCallback(() => {
+    setActiveId(null);
+  }, []);
+  const activeItem = React.useMemo(() => {
+    if (activeId === null) return null;
+    return items.find((item) => keyExtractor(item) === String(activeId));
+  }, [activeId, items, keyExtractor]);
+  const activeIndex = React.useMemo(() => {
+    if (activeId === null) return -1;
+    return itemIds.indexOf(String(activeId));
+  }, [activeId, itemIds]);
+  const announcements = React.useMemo(() => ({
+    onDragCancel({ active }) {
+      return `Sorting was cancelled. Sortable item ${String(active.id)} was dropped.`;
+    },
+    onDragEnd({ active, over }) {
+      if (over) {
+        return `Sortable item ${String(active.id)} was dropped at position ${String(itemIds.indexOf(String(over.id)) + 1)} of ${String(itemIds.length)}`;
+      }
+      return `Sortable item ${String(active.id)} was dropped`;
+    },
+    onDragOver({ active, over }) {
+      if (over) {
+        return `Sortable item ${String(active.id)} was moved into position ${String(itemIds.indexOf(String(over.id)) + 1)} of ${String(itemIds.length)}`;
+      }
+      return;
+    },
+    onDragStart({ active }) {
+      return `Picked up sortable item ${String(active.id)}. Sortable item ${String(active.id)} is in position ${String(itemIds.indexOf(String(active.id)) + 1)} of ${String(itemIds.length)}`;
+    }
+  }), [itemIds]);
+  return /* @__PURE__ */ jsx(SortableListHandleContext, { value: { handleRequired: handle }, children: /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      accessibility: { announcements },
+      collisionDetection: closestCenter,
+      sensors,
+      onDragCancel: handleDragCancel,
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      children: [
+        /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            disabled,
+            items: itemIds,
+            strategy: sortingStrategy,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  sortableListVariants({ direction, disabled, gap }),
+                  className
+                ),
+                "aria-label": "Sortable list",
+                "data-slot": "sortable-list",
+                role: "listbox",
+                children: items.map((item, index) => /* @__PURE__ */ jsx(React.Fragment, { children: renderItem(item, index) }, keyExtractor(item)))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DragOverlay,
+          {
+            dropAnimation: {
+              duration: 200,
+              easing: "ease-out"
+            },
+            children: activeItem && activeIndex !== -1 ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(sortableListOverlayVariants()),
+                "data-slot": "sortable-list-overlay",
+                children: renderItem(activeItem, activeIndex)
+              }
+            ) : null
+          }
+        )
+      ]
+    }
+  ) });
+}
+function SortableListItem({
+  children,
+  className,
+  disabled = false,
+  id
+}) {
+  const { handleRequired } = React.use(SortableListHandleContext);
+  const {
+    attributes,
+    isDragging,
+    isSorting,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    disabled,
+    id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const handleContextValue = {
+    attributes,
+    isDragging,
+    listeners
+  };
+  const itemProps = handleRequired ? {} : { ...attributes, ...listeners };
+  return /* @__PURE__ */ jsx(SortableItemHandleContext, { value: handleContextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        sortableListItemVariants({
+          disabled,
+          isDragging,
+          isSorting
+        }),
+        className
+      ),
+      "aria-describedby": "sortable-instructions",
+      "aria-roledescription": "sortable",
+      "data-dragging": isDragging,
+      "data-slot": "sortable-list-item",
+      "data-sorting": isSorting,
+      role: "option",
+      style,
+      ...itemProps,
+      children
+    }
+  ) });
+}
+function SortableListDragHandle({
+  children,
+  className,
+  disabled = false,
+  ...props
+}) {
+  const { attributes, isDragging, listeners } = useSortableItemHandle();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        sortableListHandleVariants({ disabled, isDragging }),
+        className
+      ),
+      "data-slot": "sortable-list-handle",
+      disabled,
+      type: "button",
+      ...attributes,
+      ...listeners,
+      ...props,
+      children
+    }
+  );
+}
+
+export { SortableList, SortableListDragHandle, SortableListItem, sortableListHandleVariants, sortableListItemVariants, sortableListOverlayVariants, sortableListVariants };
+//# sourceMappingURL=chunk-LNY2EXOV.js.map
+//# sourceMappingURL=chunk-LNY2EXOV.js.map

package/dist/chunk-LNY2EXOV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/advanced/SortableList/SortableList.variants.ts","../src/components/advanced/SortableList/SortableList.tsx"],"names":[],"mappings":"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","file":"chunk-LNY2EXOV.js","sourcesContent":["// SortableList/SortableList.variants.ts\nimport { cva } from \"class-variance-authority\"\n\n/**\n * Variants for the SortableList container\n */\nexport const sortableListVariants = cva(\n  // Base styles\n  \"relative\",\n  {\n    variants: {\n      direction: {\n        vertical: \"flex flex-col\",\n        horizontal: \"flex flex-row flex-wrap\",\n      },\n      gap: {\n        \"0\": \"gap-0\",\n        \"1\": \"gap-1\",\n        \"2\": \"gap-2\",\n        \"3\": \"gap-3\",\n        \"4\": \"gap-4\",\n        \"6\": \"gap-6\",\n        \"8\": \"gap-8\",\n      },\n      disabled: {\n        true: \"opacity-60 pointer-events-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"vertical\",\n      gap: \"2\",\n      disabled: false,\n    },\n  }\n)\n\n/**\n * Variants for the SortableListItem\n */\nexport const sortableListItemVariants = cva(\n  // Base styles\n  [\n    \"relative\",\n    \"touch-none\",\n    \"select-none\",\n    \"transition-all duration-200 ease-out\",\n  ],\n  {\n    variants: {\n      isDragging: {\n        true: [\n          \"z-50\",\n          \"opacity-50\",\n          \"scale-[1.02]\",\n        ],\n        false: \"\",\n      },\n      isSorting: {\n        true: \"transition-transform\",\n        false: \"\",\n      },\n      isOver: {\n        true: \"\",\n        false: \"\",\n      },\n      disabled: {\n        true: \"opacity-50 cursor-not-allowed\",\n        false: \"cursor-grab\",\n      },\n    },\n    compoundVariants: [\n      {\n        isDragging: true,\n        disabled: false,\n        className: \"cursor-grabbing\",\n      },\n    ],\n    defaultVariants: {\n      isDragging: false,\n      isSorting: false,\n      isOver: false,\n      disabled: false,\n    },\n  }\n)\n\n/**\n * Variants for the SortableListDragHandle\n */\nexport const sortableListHandleVariants = cva(\n  // Base styles\n  [\n    \"inline-flex items-center justify-center\",\n    \"rounded-sm\",\n    \"p-1\",\n    \"text-muted-foreground\",\n    \"hover:text-foreground\",\n    \"hover:bg-accent\",\n    \"focus-visible:outline-none\",\n    \"focus-visible:ring-2\",\n    \"focus-visible:ring-ring\",\n    \"focus-visible:ring-offset-2\",\n    \"transition-colors duration-150\",\n    \"touch-none\",\n  ],\n  {\n    variants: {\n      isDragging: {\n        true: \"cursor-grabbing text-foreground bg-accent\",\n        false: \"cursor-grab\",\n      },\n      disabled: {\n        true: \"cursor-not-allowed opacity-50 pointer-events-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      isDragging: false,\n      disabled: false,\n    },\n  }\n)\n\n/**\n * Variants for the drag overlay\n */\nexport const sortableListOverlayVariants = cva(\n  // Base styles\n  [\n    \"bg-background\",\n    \"shadow-lg\",\n    \"ring-2\",\n    \"ring-primary/20\",\n    \"rounded-md\",\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n","// SortableList/SortableList.tsx\nimport type {\n  SortableListDragHandleProps,\n  SortableListHandleContextValue,\n  SortableListItemProps,\n  SortableListProps,\n} from \"./SortableList.types\"\nimport type { DraggableAttributes, DraggableSyntheticListeners } from \"@dnd-kit/core\"\nimport type { DragEndEvent, DragStartEvent, UniqueIdentifier } from \"@dnd-kit/core\"\n\nimport {\n  closestCenter,\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\"\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  sortableListHandleVariants,\n  sortableListItemVariants,\n  sortableListOverlayVariants,\n  sortableListVariants,\n} from \"./SortableList.variants\"\n\n// ============================================\n// CONTEXT FOR SORTABLE HANDLE\n// ============================================\n\ninterface SortableItemHandleContextValue {\n  attributes: DraggableAttributes\n  isDragging: boolean\n  listeners: DraggableSyntheticListeners\n}\n\nconst SortableItemHandleContext = React.createContext<null | SortableItemHandleContextValue>(null)\n\n/**\n * Hook to access sortable handle context\n * @throws Error if used outside of SortableListItem\n */\nfunction useSortableItemHandle(): SortableItemHandleContextValue {\n  const context = React.use(SortableItemHandleContext)\n  if (!context) {\n    throw new Error(\"SortableListDragHandle must be used within a SortableListItem\")\n  }\n  return context\n}\n\n// Context for handle requirement\nconst SortableListHandleContext = React.createContext<SortableListHandleContextValue>({\n  handleRequired: false,\n})\n\n// ============================================\n// SORTABLE LIST\n// ============================================\n\n/**\n * SortableList - A reorderable list with drag and drop support\n *\n * @example\n * ```tsx\n * const [items, setItems] = useState([\n *   { id: \"1\", title: \"Item 1\" },\n *   { id: \"2\", title: \"Item 2\" },\n * ])\n *\n * <SortableList\n *   items={items}\n *   onReorder={setItems}\n *   keyExtractor={(item) => item.id}\n *   renderItem={(item) => (\n *     <SortableListItem id={item.id}>\n *       <div className=\"p-4 border rounded\">{item.title}</div>\n *     </SortableListItem>\n *   )}\n * />\n * ```\n */\nfunction SortableList<T>({\n  className,\n  direction = \"vertical\",\n  disabled = false,\n  gap = \"2\",\n  handle = false,\n  items,\n  keyExtractor,\n  onReorder,\n  renderItem,\n  strategy,\n}: SortableListProps<T>): React.ReactElement {\n  const [activeId, setActiveId] = React.useState<null | UniqueIdentifier>(null)\n\n  // Get the IDs for SortableContext\n  const itemIds = React.useMemo(\n    () => items.map((item) => keyExtractor(item)),\n    [items, keyExtractor]\n  )\n\n  // Configure sensors for drag detection\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 8,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  // Determine sorting strategy based on direction\n  const sortingStrategy = strategy ?? (\n    direction === \"horizontal\"\n      ? horizontalListSortingStrategy\n      : verticalListSortingStrategy\n  )\n\n  // Handle drag start\n  const handleDragStart = React.useCallback((event: DragStartEvent) => {\n    setActiveId(event.active.id)\n  }, [])\n\n  // Handle drag end - reorder items\n  const handleDragEnd = React.useCallback((event: DragEndEvent) => {\n    const { active, over } = event\n\n    if (over && active.id !== over.id) {\n      const oldIndex = itemIds.indexOf(String(active.id))\n      const newIndex = itemIds.indexOf(String(over.id))\n\n      if (oldIndex !== -1 && newIndex !== -1) {\n        const newItems = arrayMove(items, oldIndex, newIndex)\n        onReorder(newItems)\n      }\n    }\n\n    setActiveId(null)\n  }, [items, itemIds, onReorder])\n\n  // Handle drag cancel\n  const handleDragCancel = React.useCallback(() => {\n    setActiveId(null)\n  }, [])\n\n  // Find active item for overlay\n  const activeItem = React.useMemo(() => {\n    if (activeId === null) return null\n    return items.find((item) => keyExtractor(item) === String(activeId))\n  }, [activeId, items, keyExtractor])\n\n  // Find active index for overlay render\n  const activeIndex = React.useMemo(() => {\n    if (activeId === null) return -1\n    return itemIds.indexOf(String(activeId))\n  }, [activeId, itemIds])\n\n  // Accessibility announcements\n  const announcements = React.useMemo(() => ({\n    onDragCancel({ active }: { active: { id: UniqueIdentifier } }) {\n      return `Sorting was cancelled. Sortable item ${String(active.id)} was dropped.`\n    },\n    onDragEnd({ active, over }: { active: { id: UniqueIdentifier }; over: null | { id: UniqueIdentifier } }) {\n      if (over) {\n        return `Sortable item ${String(active.id)} was dropped at position ${String(itemIds.indexOf(String(over.id)) + 1)} of ${String(itemIds.length)}`\n      }\n      return `Sortable item ${String(active.id)} was dropped`\n    },\n    onDragOver({ active, over }: { active: { id: UniqueIdentifier }; over: null | { id: UniqueIdentifier } }) {\n      if (over) {\n        return `Sortable item ${String(active.id)} was moved into position ${String(itemIds.indexOf(String(over.id)) + 1)} of ${String(itemIds.length)}`\n      }\n      return\n    },\n    onDragStart({ active }: { active: { id: UniqueIdentifier } }) {\n      return `Picked up sortable item ${String(active.id)}. Sortable item ${String(active.id)} is in position ${String(itemIds.indexOf(String(active.id)) + 1)} of ${String(itemIds.length)}`\n    },\n  }), [itemIds])\n\n  return (\n    <SortableListHandleContext value={{ handleRequired: handle }}>\n      <DndContext\n        accessibility={{ announcements }}\n        collisionDetection={closestCenter}\n        sensors={sensors}\n        onDragCancel={handleDragCancel}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n      >\n        <SortableContext\n          disabled={disabled}\n          items={itemIds}\n          strategy={sortingStrategy}\n        >\n          <div\n            className={cn(\n              sortableListVariants({ direction, disabled, gap }),\n              className\n            )}\n            aria-label=\"Sortable list\"\n            data-slot=\"sortable-list\"\n            role=\"listbox\"\n          >\n            {items.map((item, index) => (\n              <React.Fragment key={keyExtractor(item)}>\n                {renderItem(item, index)}\n              </React.Fragment>\n            ))}\n          </div>\n        </SortableContext>\n\n        <DragOverlay\n          dropAnimation={{\n            duration: 200,\n            easing: \"ease-out\",\n          }}\n        >\n          {activeItem && activeIndex !== -1 ? (\n            <div\n              className={cn(sortableListOverlayVariants())}\n              data-slot=\"sortable-list-overlay\"\n            >\n              {renderItem(activeItem, activeIndex)}\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    </SortableListHandleContext>\n  )\n}\n\n// ============================================\n// SORTABLE LIST ITEM\n// ============================================\n\n/**\n * SortableListItem - An individual sortable item\n *\n * @example\n * ```tsx\n * <SortableListItem id=\"item-1\">\n *   <div className=\"p-4 border rounded\">Item content</div>\n * </SortableListItem>\n * ```\n */\nfunction SortableListItem({\n  children,\n  className,\n  disabled = false,\n  id,\n}: SortableListItemProps): React.ReactElement {\n  const { handleRequired } = React.use(SortableListHandleContext)\n\n  const {\n    attributes,\n    isDragging,\n    isSorting,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    disabled,\n    id,\n  })\n\n  const style: React.CSSProperties = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  // Context value for drag handle\n  const handleContextValue: SortableItemHandleContextValue = {\n    attributes,\n    isDragging,\n    listeners,\n  }\n\n  // If handle is not required, apply listeners to the item itself\n  const itemProps = handleRequired\n    ? {}\n    : { ...attributes, ...listeners }\n\n  return (\n    <SortableItemHandleContext value={handleContextValue}>\n      <div\n        ref={setNodeRef}\n        className={cn(\n          sortableListItemVariants({\n            disabled,\n            isDragging,\n            isSorting,\n          }),\n          className\n        )}\n        aria-describedby=\"sortable-instructions\"\n        aria-roledescription=\"sortable\"\n        data-dragging={isDragging}\n        data-slot=\"sortable-list-item\"\n        data-sorting={isSorting}\n        role=\"option\"\n        style={style}\n        {...itemProps}\n      >\n        {children}\n      </div>\n    </SortableItemHandleContext>\n  )\n}\n\n// ============================================\n// SORTABLE LIST DRAG HANDLE\n// ============================================\n\n/**\n * SortableListDragHandle - A drag handle for sortable items\n *\n * @example\n * ```tsx\n * <SortableListItem id=\"item-1\">\n *   <div className=\"flex items-center gap-2\">\n *     <SortableListDragHandle>\n *       <GripVerticalIcon className=\"h-4 w-4\" />\n *     </SortableListDragHandle>\n *     <span>Item content</span>\n *   </div>\n * </SortableListItem>\n * ```\n */\nfunction SortableListDragHandle({\n  children,\n  className,\n  disabled = false,\n  ...props\n}: SortableListDragHandleProps): React.ReactElement {\n  const { attributes, isDragging, listeners } = useSortableItemHandle()\n\n  return (\n    <button\n      className={cn(\n        sortableListHandleVariants({ disabled, isDragging }),\n        className\n      )}\n      data-slot=\"sortable-list-handle\"\n      disabled={disabled}\n      type=\"button\"\n      {...attributes}\n      {...listeners}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n}\n\n// ============================================\n// EXPORTS\n// ============================================\n\nexport {\n  SortableList,\n  SortableListDragHandle,\n  SortableListItem,\n}\n\nexport type {\n  SortableListDragHandleProps,\n  SortableListItemProps,\n  SortableListProps,\n} from \"./SortableList.types\"\n\n// Sorting strategies are already re-exported from DragAndDrop\n"]}

package/dist/chunk-LQVQ7SHG.js

@@ -0,0 +1,226 @@
+import { Checkbox } from './chunk-XETKCF73.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { useId, useState, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var checkboxGroupVariants = cva("grid gap-3", {
+  variants: {
+    orientation: {
+      vertical: "grid-flow-row",
+      horizontal: "grid-flow-col auto-cols-max"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var checkboxGroupItemWrapperVariants = cva(
+  "flex gap-2",
+  {
+    variants: {
+      hasDescription: {
+        true: "items-start",
+        false: "items-center"
+      }
+    },
+    defaultVariants: {
+      hasDescription: false
+    }
+  }
+);
+var checkboxGroupLabelVariants = cva(
+  [
+    "font-medium leading-tight cursor-pointer select-none",
+    "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var checkboxGroupDescriptionVariants = cva(
+  "text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-xs",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var checkboxGroupHeaderVariants = cva(
+  "font-medium text-foreground mb-2",
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function CheckboxGroupItem({
+  className,
+  size = "md",
+  label,
+  description,
+  id,
+  value,
+  checked,
+  onCheckedChange,
+  disabled,
+  name
+}) {
+  const generatedId = useId();
+  const itemId = id ?? generatedId;
+  const hasDescription = !!description;
+  const checkbox = /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked,
+      className: "mt-0.5",
+      disabled,
+      id: itemId,
+      name,
+      size,
+      value,
+      onCheckedChange: (state) => {
+        if (typeof state === "boolean") {
+          onCheckedChange?.(state);
+        }
+      }
+    }
+  );
+  if (!label) return checkbox;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        checkboxGroupItemWrapperVariants({ hasDescription }),
+        className
+      ),
+      "data-disabled": disabled ?? void 0,
+      "data-slot": "checkbox-group-item",
+      children: [
+        checkbox,
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: checkboxGroupLabelVariants({ size }),
+              "data-slot": "checkbox-group-item-label",
+              htmlFor: itemId,
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: checkboxGroupDescriptionVariants({ size }),
+              "data-slot": "checkbox-group-item-description",
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CheckboxGroup({
+  className,
+  label,
+  options,
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  orientation = "vertical",
+  size = "md",
+  disabled,
+  name,
+  required
+}) {
+  const groupId = useId();
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const selectedValues = isControlled ? controlledValue : internalValue;
+  const handleCheckedChange = useCallback(
+    (optionValue, checked) => {
+      const newValues = checked ? [...selectedValues, optionValue] : selectedValues.filter((v) => v !== optionValue);
+      if (!isControlled) {
+        setInternalValue(newValues);
+      }
+      onChange?.(newValues);
+    },
+    [selectedValues, isControlled, onChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-labelledby": label ? `${groupId}-label` : void 0,
+      "aria-required": required,
+      className: cn("flex flex-col", className),
+      "data-orientation": orientation,
+      "data-slot": "checkbox-group",
+      role: "group",
+      children: [
+        label && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: checkboxGroupHeaderVariants({ size }),
+            "data-slot": "checkbox-group-label",
+            id: `${groupId}-label`,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: checkboxGroupVariants({ orientation }),
+            "data-slot": "checkbox-group-items",
+            children: options.map((option) => /* @__PURE__ */ jsx(
+              CheckboxGroupItem,
+              {
+                checked: selectedValues.includes(option.value),
+                description: option.description,
+                disabled: disabled || option.disabled,
+                label: option.label,
+                name,
+                size,
+                value: option.value,
+                onCheckedChange: (checked) => {
+                  handleCheckedChange(option.value, checked);
+                }
+              },
+              option.value
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { CheckboxGroup, CheckboxGroupItem, checkboxGroupDescriptionVariants, checkboxGroupHeaderVariants, checkboxGroupItemWrapperVariants, checkboxGroupLabelVariants, checkboxGroupVariants };
+//# sourceMappingURL=chunk-LQVQ7SHG.js.map
+//# sourceMappingURL=chunk-LQVQ7SHG.js.map

package/dist/chunk-LQVQ7SHG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/CheckboxGroup/CheckboxGroup.variants.ts","../src/components/forms/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"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","file":"chunk-LQVQ7SHG.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const checkboxGroupVariants = cva(\"grid gap-3\", {\n  variants: {\n    orientation: {\n      vertical: \"grid-flow-row\",\n      horizontal: \"grid-flow-col auto-cols-max\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n})\n\nexport const checkboxGroupItemWrapperVariants = cva(\n  \"flex gap-2\",\n  {\n    variants: {\n      hasDescription: {\n        true: \"items-start\",\n        false: \"items-center\",\n      },\n    },\n    defaultVariants: {\n      hasDescription: false,\n    },\n  }\n)\n\nexport const checkboxGroupLabelVariants = cva(\n  [\n    \"font-medium leading-tight cursor-pointer select-none\",\n    \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const checkboxGroupDescriptionVariants = cva(\n  \"text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-xs\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const checkboxGroupHeaderVariants = cva(\n  \"font-medium text-foreground mb-2\",\n  {\n    variants: {\n      size: {\n        sm: \"text-sm\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type CheckboxGroupVariantProps = VariantProps<typeof checkboxGroupVariants>\nexport type CheckboxGroupItemWrapperVariantProps = VariantProps<typeof checkboxGroupItemWrapperVariants>\nexport type CheckboxGroupLabelVariantProps = VariantProps<typeof checkboxGroupLabelVariants>\nexport type CheckboxGroupDescriptionVariantProps = VariantProps<typeof checkboxGroupDescriptionVariants>\nexport type CheckboxGroupHeaderVariantProps = VariantProps<typeof checkboxGroupHeaderVariants>\n","\"use client\"\n\nimport type {\n  CheckboxGroupItemProps,\n  CheckboxGroupProps,\n} from \"./CheckboxGroup.types\"\n\nimport * as React from \"react\"\nimport { useCallback, useId, useState } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Checkbox } from \"../Checkbox\"\nimport {\n  checkboxGroupDescriptionVariants,\n  checkboxGroupHeaderVariants,\n  checkboxGroupItemWrapperVariants,\n  checkboxGroupLabelVariants,\n  checkboxGroupVariants,\n} from \"./CheckboxGroup.variants\"\n\n/**\n * CheckboxGroupItem - Individual checkbox with optional label and description\n *\n * @example\n * ```tsx\n * <CheckboxGroupItem\n *   value=\"option1\"\n *   label=\"Option 1\"\n *   description=\"Description for option 1\"\n *   checked={selected.includes(\"option1\")}\n *   onCheckedChange={(checked) => handleChange(\"option1\", checked)}\n * />\n * ```\n */\nfunction CheckboxGroupItem({\n  className,\n  size = \"md\",\n  label,\n  description,\n  id,\n  value,\n  checked,\n  onCheckedChange,\n  disabled,\n  name,\n}: CheckboxGroupItemProps) {\n  const generatedId = useId()\n  const itemId = id ?? generatedId\n  const hasDescription = !!description\n\n  const checkbox = (\n    <Checkbox\n      checked={checked}\n      className=\"mt-0.5\"\n      disabled={disabled}\n      id={itemId}\n      name={name}\n      size={size}\n      value={value}\n      onCheckedChange={(state) => {\n        if (typeof state === \"boolean\") {\n          onCheckedChange?.(state)\n        }\n      }}\n    />\n  )\n\n  if (!label) return checkbox\n\n  return (\n    <div\n      className={cn(\n        checkboxGroupItemWrapperVariants({ hasDescription }),\n        className\n      )}\n      data-disabled={disabled ?? undefined}\n      data-slot=\"checkbox-group-item\"\n    >\n      {checkbox}\n      <div className=\"grid gap-0.5\">\n        <label\n          className={checkboxGroupLabelVariants({ size })}\n          data-slot=\"checkbox-group-item-label\"\n          htmlFor={itemId}\n        >\n          {label}\n        </label>\n        {description && (\n          <p\n            className={checkboxGroupDescriptionVariants({ size })}\n            data-slot=\"checkbox-group-item-description\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * CheckboxGroup - A group of related checkboxes with shared state management\n *\n * @example\n * ```tsx\n * // Uncontrolled\n * <CheckboxGroup\n *   label=\"Select features\"\n *   options={[\n *     { value: \"feature1\", label: \"Feature 1\" },\n *     { value: \"feature2\", label: \"Feature 2\" },\n *     { value: \"feature3\", label: \"Feature 3\", disabled: true },\n *   ]}\n *   defaultValue={[\"feature1\"]}\n * />\n *\n * // Controlled\n * const [selected, setSelected] = useState([\"feature1\"])\n * <CheckboxGroup\n *   label=\"Select features\"\n *   options={[\n *     { value: \"feature1\", label: \"Feature 1\" },\n *     { value: \"feature2\", label: \"Feature 2\" },\n *   ]}\n *   value={selected}\n *   onChange={setSelected}\n * />\n * ```\n */\nfunction CheckboxGroup({\n  className,\n  label,\n  options,\n  value: controlledValue,\n  defaultValue = [],\n  onChange,\n  orientation = \"vertical\",\n  size = \"md\",\n  disabled,\n  name,\n  required,\n}: CheckboxGroupProps) {\n  const groupId = useId()\n\n  // Internal state for uncontrolled mode\n  const [internalValue, setInternalValue] = useState<string[]>(defaultValue)\n\n  // Determine if controlled\n  const isControlled = controlledValue !== undefined\n  const selectedValues = isControlled ? controlledValue : internalValue\n\n  const handleCheckedChange = useCallback(\n    (optionValue: string, checked: boolean) => {\n      const newValues = checked\n        ? [...selectedValues, optionValue]\n        : selectedValues.filter((v) => v !== optionValue)\n\n      if (!isControlled) {\n        setInternalValue(newValues)\n      }\n\n      onChange?.(newValues)\n    },\n    [selectedValues, isControlled, onChange]\n  )\n\n  return (\n    <div\n      aria-labelledby={label ? `${groupId}-label` : undefined}\n      aria-required={required}\n      className={cn(\"flex flex-col\", className)}\n      data-orientation={orientation}\n      data-slot=\"checkbox-group\"\n      role=\"group\"\n    >\n      {label && (\n        <span\n          className={checkboxGroupHeaderVariants({ size })}\n          data-slot=\"checkbox-group-label\"\n          id={`${groupId}-label`}\n        >\n          {label}\n          {required && (\n            <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n              *\n            </span>\n          )}\n        </span>\n      )}\n      <div\n        className={checkboxGroupVariants({ orientation })}\n        data-slot=\"checkbox-group-items\"\n      >\n        {options.map((option) => (\n          <CheckboxGroupItem\n            key={option.value}\n            checked={selectedValues.includes(option.value)}\n            description={option.description}\n            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Intentional: checking truthiness\n            disabled={disabled || option.disabled}\n            label={option.label}\n            name={name}\n            size={size}\n            value={option.value}\n            onCheckedChange={(checked) => {\n              handleCheckedChange(option.value, checked)\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport { CheckboxGroup, CheckboxGroupItem }\n"]}