@bioturing/components 0.32.0 → 0.32.1

package/dist/components/command-palette/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/command-palette/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect } from \"react\";\nimport { Command } from \"../cmdk\";\nimport { DropdownMenuItemType } from \"../dropdown-menu/types\";\nimport { useDropdownMenu } from \"../dropdown-menu/useDropdownMenu\";\nimport { useControlledState } from \"../hooks\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { useCls, WithAntdTokens } from \"../utils\";\nimport \"./style.css\";\n\nexport type CommandPaletteShortcut = {\n  key: string;\n  metaKey?: boolean;\n  ctrlKey?: boolean;\n  altKey?: boolean;\n  shiftKey?: boolean;\n};\n\nexport interface CommandPaletteProps {\n  /** Whether the command palette is open */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Default open state\n   */\n  defaultOpen?: boolean;\n  /** Items to display in the command palette */\n  items?: DropdownMenuItemType[];\n  /** Keyboard shortcuts to open the palette */\n  shortcuts?: CommandPaletteShortcut[];\n  /** Placeholder text for the search input */\n  placeholder?: string;\n  /** Text to show when no results are found */\n  emptyText?: string;\n  /** Accessible label for the command palette */\n  label?: string;\n  /** Additional CSS class names */\n  className?: string;\n  classNames?: {\n    root?: string;\n    mask?: string;\n    content?: string;\n    group?: string;\n    item?: string;\n    groupLabel?: string;\n  };\n}\n\nconst defaultShortcuts: CommandPaletteShortcut[] = [\n  { key: \"k\", metaKey: true },\n  { key: \"k\", ctrlKey: true },\n];\n\nfunction matchesShortcut(\n  event: KeyboardEvent,\n  shortcut: CommandPaletteShortcut,\n): boolean {\n  return (\n    event.key.toLowerCase() === shortcut.key.toLowerCase() &&\n    !!event.metaKey === !!shortcut.metaKey &&\n    !!event.ctrlKey === !!shortcut.ctrlKey &&\n    !!event.altKey === !!shortcut.altKey &&\n    !!event.shiftKey === !!shortcut.shiftKey\n  );\n}\n\n// Default items for testing/demo purposes\n// const defaultItems: DropdownMenuItemType[] = [\n//   {\n//     type: \"item\",\n//     key: \"search\",\n//     label: \"Search files\",\n//     onClick: () => console.log(\"Search files\"),\n//   },\n//   {\n//     type: \"item\",\n//     key: \"new-file\",\n//     label: \"New file\",\n//     onClick: () => console.log(\"New file\"),\n//   },\n//   {\n//     type: \"item\",\n//     key: \"settings\",\n//     label: \"Open settings\",\n//     onClick: () => console.log(\"Open settings\"),\n//   },\n// ];\n\nexport const CommandPalette: React.FC<CommandPaletteProps> = ({\n  open,\n  onOpenChange,\n  defaultOpen,\n  items = [],\n  shortcuts = defaultShortcuts,\n  placeholder = \"Type a command or search...\",\n  emptyText = \"No results found.\",\n  label = \"Command Palette\",\n  className,\n  classNames,\n}) => {\n  const cls = useCls();\n  const [actualOpen, setActualOpen] = useControlledState(\n    open,\n    onOpenChange,\n    defaultOpen,\n  );\n\n  // Set up keyboard shortcuts\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const matchingShortcut = shortcuts.find((shortcut) =>\n        matchesShortcut(event, shortcut),\n      );\n\n      if (matchingShortcut) {\n        event.preventDefault();\n        setActualOpen(!actualOpen);\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [shortcuts, actualOpen, setActualOpen]);\n\n  const { renderGroup, itemGroups } = useDropdownMenu({\n    items,\n    inCombobox: true,\n    onOpenChange,\n  });\n\n  const renderMenuInner = useCallback(\n    () => (\n      <>\n        <Command.Input placeholder={placeholder} />\n        {/*{beforeList}*/}\n        <ScrollArea fadeEdges>\n          <Command.List\n            className={cls(\"dropdown-menu-list\", \"command-palette-list\")}\n          >\n            <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n              {emptyText}\n            </Command.Empty>\n            {itemGroups.map(renderGroup)}\n          </Command.List>\n        </ScrollArea>\n        {/*{afterList}*/}\n      </>\n    ),\n    [cls, emptyText, itemGroups, placeholder, renderGroup],\n  );\n  return (\n    <WithAntdTokens>\n      <Command.Dialog\n        open={actualOpen}\n        onOpenChange={setActualOpen}\n        label={label}\n        overlayClassName={cls(\"command-palette-overlay\", classNames?.mask)}\n        contentClassName={cls(\"command-palette-content\", classNames?.content)}\n        className={cls(\"command-palette\", className)}\n      >\n        {renderMenuInner()}\n      </Command.Dialog>\n    </WithAntdTokens>\n  );\n};\n"],"names":["defaultShortcuts","matchesShortcut","event","shortcut","CommandPalette","open","onOpenChange","defaultOpen","items","shortcuts","placeholder","emptyText","label","className","classNames","cls","useCls","actualOpen","setActualOpen","useControlledState","useEffect","handleKeyDown","renderGroup","itemGroups","useDropdownMenu","renderMenuInner","useCallback","jsxs","Fragment","jsx","Command","ScrollArea","WithAntdTokens"],"mappings":";;;;;;;;;;AAiDA,MAAMA,IAA6C;AAAA,EACjD,EAAE,KAAK,KAAK,SAAS,GAAK;AAAA,EAC1B,EAAE,KAAK,KAAK,SAAS,GAAK;AAC5B;AAEA,SAASC,EACPC,GACAC,GACS;AACT,SACED,EAAM,IAAI,YAAkB,MAAAC,EAAS,IAAI,YAAY,KACrD,CAAC,CAACD,EAAM,WAAY,CAAC,CAACC,EAAS,WAC/B,CAAC,CAACD,EAAM,WAAY,CAAC,CAACC,EAAS,WAC/B,CAAC,CAACD,EAAM,UAAW,CAAC,CAACC,EAAS,UAC9B,CAAC,CAACD,EAAM,YAAa,CAAC,CAACC,EAAS;AAEpC;AAwBO,MAAMC,IAAgD,CAAC;AAAA,EAC5D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC;AAAA,EACT,WAAAC,IAAYT;AAAA,EACZ,aAAAU,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,YAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAO,GACb,CAACC,GAAYC,CAAa,IAAIC;AAAA,IAClCd;AAAA,IACAC;AAAA,IACAC;AAAA,EACF;AAGA,EAAAa,EAAU,MAAM;AACR,UAAAC,IAAgB,CAACnB,MAAyB;AAK9C,MAJyBO,EAAU;AAAA,QAAK,CAACN,MACvCF,EAAgBC,GAAOC,CAAQ;AAAA,MACjC,MAGED,EAAM,eAAe,GACrBgB,EAAc,CAACD,CAAU;AAAA,IAE7B;AAES,oBAAA,iBAAiB,WAAWI,CAAa,GAC3C,MAAM,SAAS,oBAAoB,WAAWA,CAAa;AAAA,EACjE,GAAA,CAACZ,GAAWQ,GAAYC,CAAa,CAAC;AAEzC,QAAM,EAAE,aAAAI,GAAa,YAAAC,EAAW,IAAIC,EAAgB;AAAA,IAClD,OAAAhB;AAAA,IACA,YAAY;AAAA,IACZ,cAAAF;AAAA,EAAA,CACD,GAEKmB,IAAkBC;AAAA,IACtB,MAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAC,EAAAC,EAAQ,OAAR,EAAc,aAAApB,EAA0B,CAAA;AAAA,MAEzC,gBAAAmB,EAACE,GAAW,EAAA,WAAS,IACnB,UAAA,gBAAAJ;AAAA,QAACG,EAAQ;AAAA,QAAR;AAAA,UACC,WAAWf,EAAI,sBAAsB,sBAAsB;AAAA,UAE3D,UAAA;AAAA,YAAA,gBAAAc,EAACC,EAAQ,OAAR,EAAc,WAAWf,EAAI,qBAAqB,GAChD,UACHJ,GAAA;AAAA,YACCY,EAAW,IAAID,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EAE/B,CAAA;AAAA,IAAA,GAEF;AAAA,IAEF,CAACP,GAAKJ,GAAWY,GAAYb,GAAaY,CAAW;AAAA,EACvD;AACA,2BACGU,GACC,EAAA,UAAA,gBAAAH;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,MAAMb;AAAA,MACN,cAAcC;AAAA,MACd,OAAAN;AAAA,MACA,kBAAkBG,EAAI,2BAA2BD,KAAA,gBAAAA,EAAY,IAAI;AAAA,MACjE,kBAAkBC,EAAI,2BAA2BD,KAAA,gBAAAA,EAAY,OAAO;AAAA,MACpE,WAAWC,EAAI,mBAAmBF,CAAS;AAAA,MAE1C,UAAgBY,EAAA;AAAA,IAAA;AAAA,EAAA,GAErB;AAEJ;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/command-palette/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect } from \"react\";\nimport { Command } from \"../cmdk\";\nimport { DropdownMenuItemType } from \"../dropdown-menu/types\";\nimport { useDropdownMenu } from \"../dropdown-menu/useDropdownMenu\";\nimport { useControlledState } from \"../hooks\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { useCls, WithAntdTokens } from \"../utils\";\nimport \"./style.css\";\n\nexport type CommandPaletteShortcut = {\n  key: string;\n  metaKey?: boolean;\n  ctrlKey?: boolean;\n  altKey?: boolean;\n  shiftKey?: boolean;\n};\n\nexport interface CommandPaletteProps {\n  /** Whether the command palette is open */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Default open state\n   */\n  defaultOpen?: boolean;\n  /** Items to display in the command palette */\n  items?: DropdownMenuItemType[];\n  /** Keyboard shortcuts to open the palette */\n  shortcuts?: CommandPaletteShortcut[];\n  /** Placeholder text for the search input */\n  placeholder?: string;\n  /** Text to show when no results are found */\n  emptyText?: string;\n  /** Accessible label for the command palette */\n  label?: string;\n  /** Additional CSS class names */\n  className?: string;\n  classNames?: {\n    root?: string;\n    mask?: string;\n    content?: string;\n    group?: string;\n    item?: string;\n    groupLabel?: string;\n  };\n}\n\nconst defaultShortcuts: CommandPaletteShortcut[] = [\n  { key: \"k\", metaKey: true },\n  { key: \"k\", ctrlKey: true },\n];\n\nfunction matchesShortcut(\n  event: KeyboardEvent,\n  shortcut: CommandPaletteShortcut,\n): boolean {\n  return (\n    event.key.toLowerCase() === shortcut.key.toLowerCase() &&\n    !!event.metaKey === !!shortcut.metaKey &&\n    !!event.ctrlKey === !!shortcut.ctrlKey &&\n    !!event.altKey === !!shortcut.altKey &&\n    !!event.shiftKey === !!shortcut.shiftKey\n  );\n}\n\n// Default items for testing/demo purposes\n// const defaultItems: DropdownMenuItemType[] = [\n//   {\n//     type: \"item\",\n//     key: \"search\",\n//     label: \"Search files\",\n//     onClick: () => console.log(\"Search files\"),\n//   },\n//   {\n//     type: \"item\",\n//     key: \"new-file\",\n//     label: \"New file\",\n//     onClick: () => console.log(\"New file\"),\n//   },\n//   {\n//     type: \"item\",\n//     key: \"settings\",\n//     label: \"Open settings\",\n//     onClick: () => console.log(\"Open settings\"),\n//   },\n// ];\n\nexport const CommandPalette: React.FC<CommandPaletteProps> = ({\n  open,\n  onOpenChange,\n  defaultOpen,\n  items = [],\n  shortcuts = defaultShortcuts,\n  placeholder = \"Type a command or search...\",\n  emptyText = \"No results found.\",\n  label = \"Command Palette\",\n  className,\n  classNames,\n}) => {\n  const cls = useCls();\n  const [actualOpen, setActualOpen] = useControlledState(\n    open,\n    onOpenChange,\n    defaultOpen,\n  );\n\n  // Set up keyboard shortcuts\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const matchingShortcut = shortcuts.find((shortcut) =>\n        matchesShortcut(event, shortcut),\n      );\n\n      if (matchingShortcut) {\n        event.preventDefault();\n        setActualOpen(!actualOpen);\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [shortcuts, actualOpen, setActualOpen]);\n\n  const { renderGroup, itemGroups } = useDropdownMenu({\n    items,\n    inCombobox: true,\n    onOpenChange,\n  });\n\n  const renderMenuInner = useCallback(\n    () => (\n      <>\n        <Command.Input placeholder={placeholder} />\n        {/*{beforeList}*/}\n        <ScrollArea fadeEdges>\n          <Command.List\n            className={cls(\"dropdown-menu-list\", \"command-palette-list\")}\n          >\n            <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n              {emptyText}\n            </Command.Empty>\n            {itemGroups.map(renderGroup)}\n          </Command.List>\n        </ScrollArea>\n        {/*{afterList}*/}\n      </>\n    ),\n    [cls, emptyText, itemGroups, placeholder, renderGroup],\n  );\n  return (\n    <WithAntdTokens>\n      <Command.Dialog\n        open={actualOpen}\n        onOpenChange={setActualOpen}\n        label={label}\n        overlayClassName={cls(\"command-palette-overlay\", classNames?.mask)}\n        contentClassName={cls(\"command-palette-content\", classNames?.content)}\n        className={cls(\"command-palette\", className)}\n      >\n        {renderMenuInner()}\n      </Command.Dialog>\n    </WithAntdTokens>\n  );\n};\n"],"names":["defaultShortcuts","matchesShortcut","event","shortcut","CommandPalette","open","onOpenChange","defaultOpen","items","shortcuts","placeholder","emptyText","label","className","classNames","cls","useCls","actualOpen","setActualOpen","useControlledState","useEffect","handleKeyDown","renderGroup","itemGroups","useDropdownMenu","renderMenuInner","useCallback","jsxs","Fragment","jsx","Command","ScrollArea","WithAntdTokens"],"mappings":";;;;;;;;;;AAiDA,MAAMA,IAA6C;AAAA,EACjD,EAAE,KAAK,KAAK,SAAS,GAAA;AAAA,EACrB,EAAE,KAAK,KAAK,SAAS,GAAA;AACvB;AAEA,SAASC,EACPC,GACAC,GACS;AACT,SACED,EAAM,IAAI,YAAA,MAAkBC,EAAS,IAAI,YAAA,KACzC,CAAC,CAACD,EAAM,WAAY,CAAC,CAACC,EAAS,WAC/B,CAAC,CAACD,EAAM,WAAY,CAAC,CAACC,EAAS,WAC/B,CAAC,CAACD,EAAM,UAAW,CAAC,CAACC,EAAS,UAC9B,CAAC,CAACD,EAAM,YAAa,CAAC,CAACC,EAAS;AAEpC;AAwBO,MAAMC,IAAgD,CAAC;AAAA,EAC5D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,WAAAC,IAAYT;AAAA,EACZ,aAAAU,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,YAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAA,GACN,CAACC,GAAYC,CAAa,IAAIC;AAAA,IAClCd;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA;AAIF,EAAAa,EAAU,MAAM;AACd,UAAMC,IAAgB,CAACnB,MAAyB;AAK9C,MAJyBO,EAAU;AAAA,QAAK,CAACN,MACvCF,EAAgBC,GAAOC,CAAQ;AAAA,MAAA,MAI/BD,EAAM,eAAA,GACNgB,EAAc,CAACD,CAAU;AAAA,IAE7B;AAEA,oBAAS,iBAAiB,WAAWI,CAAa,GAC3C,MAAM,SAAS,oBAAoB,WAAWA,CAAa;AAAA,EACpE,GAAG,CAACZ,GAAWQ,GAAYC,CAAa,CAAC;AAEzC,QAAM,EAAE,aAAAI,GAAa,YAAAC,EAAA,IAAeC,EAAgB;AAAA,IAClD,OAAAhB;AAAA,IACA,YAAY;AAAA,IACZ,cAAAF;AAAA,EAAA,CACD,GAEKmB,IAAkBC;AAAA,IACtB,MACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAACC,EAAQ,OAAR,EAAc,aAAApB,EAAA,CAA0B;AAAA,MAEzC,gBAAAmB,EAACE,GAAA,EAAW,WAAS,IACnB,UAAA,gBAAAJ;AAAA,QAACG,EAAQ;AAAA,QAAR;AAAA,UACC,WAAWf,EAAI,sBAAsB,sBAAsB;AAAA,UAE3D,UAAA;AAAA,YAAA,gBAAAc,EAACC,EAAQ,OAAR,EAAc,WAAWf,EAAI,qBAAqB,GAChD,UAAAJ,GACH;AAAA,YACCY,EAAW,IAAID,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EAC7B,CACF;AAAA,IAAA,GAEF;AAAA,IAEF,CAACP,GAAKJ,GAAWY,GAAYb,GAAaY,CAAW;AAAA,EAAA;AAEvD,2BACGU,GAAA,EACC,UAAA,gBAAAH;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,MAAMb;AAAA,MACN,cAAcC;AAAA,MACd,OAAAN;AAAA,MACA,kBAAkBG,EAAI,2BAA2BD,GAAY,IAAI;AAAA,MACjE,kBAAkBC,EAAI,2BAA2BD,GAAY,OAAO;AAAA,MACpE,WAAWC,EAAI,mBAAmBF,CAAS;AAAA,MAE1C,UAAAY,EAAA;AAAA,IAAgB;AAAA,EAAA,GAErB;AAEJ;"}

package/dist/components/command-palette/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/command-palette/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/command-palette/style.css

@@ -1 +1 @@
-@layer components{.ds-command-palette-overlay{background-color:var(--ds-color-bg-mask);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--ds-z-index-modal-mask)}.ds-command-palette-content{position:fixed;top:20%;left:50%;transform:translate(-50%);width:90%;max-width:640px;max-height:60vh;background:var(--ds-color-bg-elevated);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius-lg);box-shadow:0 10px 38px -10px #16171859,0 10px 20px -15px #16171833;overflow:hidden;z-index:var(--ds-z-index-modal);animation:commandPaletteIn var(--ds-motion-duration-fast) var(--ds-motion-ease-out)}.ds-command-palette-content:focus:not(:focus-visible){outline:none}.ds-command-palette{display:flex;flex-direction:column;height:100%}.ds-command-palette-list{padding:.5rem}.ds-command-palette [cmdk-input]{font-family:var(--ds-font-family);font-size:1rem;border:none;outline:none;background:transparent;padding:var(--ds-padding) var(--ds-padding-md);color:var(--ds-color-text);border-bottom:1px solid var(--ds-color-border);width:100%}.ds-command-palette [cmdk-input]::placeholder{color:var(--color-ds-color-text-placeholder)}.ds-command-palette [cmdk-empty]{display:flex;align-items:center;justify-content:center;height:5rem}@keyframes commandPaletteIn{0%{opacity:0;transform:translate(-50%) scale(.95) translateY(-10px)}to{opacity:1;transform:translate(-50%) scale(1) translateY(0)}}@media (prefers-color-scheme: dark){.ds-command-palette-overlay{background-color:var(--ds-color-bg-mask)}}@media (max-width: 640px){.ds-command-palette-content{top:10%;width:95%;max-height:70vh}}}
+@layer components{.ds-command-palette-overlay{background-color:var(--ds-color-bg-mask);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:fixed;inset:0;z-index:var(--ds-z-index-modal-mask)}.ds-command-palette-content{position:fixed;top:20%;left:50%;transform:translate(-50%);width:90%;max-width:640px;max-height:60vh;background:var(--ds-color-bg-elevated);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius-lg);box-shadow:0 10px 38px -10px #16171859,0 10px 20px -15px #16171833;overflow:hidden;z-index:var(--ds-z-index-modal);animation:commandPaletteIn var(--ds-motion-duration-fast) var(--ds-motion-ease-out)}.ds-command-palette-content:focus:not(:focus-visible){outline:none}.ds-command-palette{display:flex;flex-direction:column;height:100%}.ds-command-palette-list{padding:.5rem}.ds-command-palette [cmdk-input]{font-family:var(--ds-font-family);font-size:1rem;border:none;outline:none;background:transparent;padding:var(--ds-padding) var(--ds-padding-md);color:var(--ds-color-text);border-bottom:1px solid var(--ds-color-border);width:100%}.ds-command-palette [cmdk-input]::placeholder{color:var(--color-ds-color-text-placeholder)}.ds-command-palette [cmdk-empty]{display:flex;align-items:center;justify-content:center;height:5rem}@keyframes commandPaletteIn{0%{opacity:0;transform:translate(-50%) scale(.95) translateY(-10px)}to{opacity:1;transform:translate(-50%) scale(1) translateY(0)}}@media (prefers-color-scheme: dark){.ds-command-palette-overlay{background-color:var(--ds-color-bg-mask)}}@media (max-width: 640px){.ds-command-palette-content{top:10%;width:95%;max-height:70vh}}}

package/dist/components/drag-drop/context.d.ts

@@ -0,0 +1,10 @@
+import { DragDropContextType, Data } from './types';
+/**
+ * Drag context for sharing state between components
+ */
+export declare const DragDropContext: import('react').Context<DragDropContextType<unknown>>;
+/**
+ * Hook to access the Drag context
+ */
+export declare const useDragDropContext: <T extends Data = Data>() => DragDropContextType<T>;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/drag-drop/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/context.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAE9D;;GAEG;AACH,eAAO,MAAM,eAAe,uDAQ1B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,IAAI,GAAG,IAAI,OACvB,mBAAmB,CAAC,CAAC,CAAC,CAAC"}

package/dist/components/drag-drop/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../src/components/drag-drop/context.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport { type DragDropContextType, type Data } from \"./types\";\n\n/**\n * Drag context for sharing state between components\n */\nexport const DragDropContext = createContext<DragDropContextType>({\n  active: null,\n  setActive: () => {},\n  onDragStart: undefined,\n  onDragEnd: undefined,\n  onDrop: undefined,\n  isDragging: false,\n  setIsDragging: () => {},\n});\n\n/**\n * Hook to access the Drag context\n */\nexport const useDragDropContext = <T extends Data = Data>() =>\n  useContext(DragDropContext) as DragDropContextType<T>;\n"],"names":["DragDropContext","createContext","useDragDropContext","useContext"],"mappings":";;AAQO,MAAMA,IAAkBC,EAAmC;AAAA,EAChE,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA,EAAA;AACvB,CAAC,GAKYC,IAAqB,MAChCC,EAAWH,CAAe;"}
+{"version":3,"file":"context.js","sources":["../../../src/components/drag-drop/context.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport { type DragDropContextType, type Data } from \"./types\";\n\n/**\n * Drag context for sharing state between components\n */\nexport const DragDropContext = createContext<DragDropContextType>({\n  active: null,\n  setActive: () => {},\n  onDragStart: undefined,\n  onDragEnd: undefined,\n  onDrop: undefined,\n  isDragging: false,\n  setIsDragging: () => {},\n});\n\n/**\n * Hook to access the Drag context\n */\nexport const useDragDropContext = <T extends Data = Data>() =>\n  useContext(DragDropContext) as DragDropContextType<T>;\n"],"names":["DragDropContext","createContext","useDragDropContext","useContext"],"mappings":";;AAQO,MAAMA,IAAkBC,EAAmC;AAAA,EAChE,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA,EAAC;AACxB,CAAC,GAKYC,IAAqB,MAChCC,EAAWH,CAAe;"}

package/dist/components/drag-drop/draggable.d.ts

@@ -0,0 +1,6 @@
+import { Data, DragDropDraggableProps } from './types';
+/**
+ * A draggable item component that can be used within the Drag context
+ */
+export declare const Draggable: <T extends Data = Data>({ id, children, className, disabled, data, style, render, onDragEnd, onDragStart, indicator, onlyIndicatorDraggable, ...rest }: DragDropDraggableProps<T>) => null;
+//# sourceMappingURL=draggable.d.ts.map

package/dist/components/drag-drop/draggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/draggable.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAI5D;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,gIAa9C,sBAAsB,CAAC,CAAC,CAAC,SA+D3B,CAAC"}

package/dist/components/drag-drop/draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.js","sources":["../../../src/components/drag-drop/draggable.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDraggable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDraggableProps } from \"./types\";\nimport { DotsSixVerticalIcon } from \"@bioturing/assets\";\nimport { cloneElement, isValidElement, HTMLProps } from \"react\";\n\n/**\n * A draggable item component that can be used within the Drag context\n */\nexport const Draggable = <T extends Data = Data>({\n  id,\n  children,\n  className,\n  disabled = false,\n  data,\n  style,\n  render,\n  onDragEnd,\n  onDragStart,\n  indicator = true,\n  onlyIndicatorDraggable = false,\n  ...rest\n}: DragDropDraggableProps<T>) => {\n  const cls = useCls();\n\n  const { attributes, listeners, isDragging, setNodeRef } = useDraggable({\n    id,\n    data,\n    disabled,\n    onDragEnd,\n    onDragStart,\n  });\n\n  const indicatorIcon =\n    indicator === true ? (\n      <DotsSixVerticalIcon\n        className={cls(\"draggable-indicator\")}\n        key={\"indicator-icon\" + id}\n      />\n    ) : (\n      indicator\n    );\n  const indicatorElement = isValidElement(indicatorIcon)\n    ? onlyIndicatorDraggable\n      ? cloneElement(indicatorIcon, {\n          ...attributes,\n          ...listeners,\n          key: \"indicator\" + id,\n        })\n      : indicatorIcon\n    : null;\n\n  const combinedChildren = [\n    indicatorElement,\n    ...(Array.isArray(children) ? children : [children]),\n  ];\n\n  const renderedElement = useRender({\n    render: render ? (\n      render\n    ) : (\n      <div className={clsx(cls(\"draggable\"), className)} />\n    ),\n    ref: setNodeRef,\n    props: {\n      children: combinedChildren,\n      className,\n      style: {\n        ...style,\n        touchAction: \"none\", // Prevents scrolling on touch devices while dragging\n        cursor: disabled ? \"default\" : \"grab\",\n        opacity: isDragging ? 0.5 : 1, // Visual feedback when dragging\n      },\n      ...rest,\n      ...attributes,\n      ...(!onlyIndicatorDraggable ? listeners : {}),\n    },\n    state: {\n      isDragging,\n      id,\n      data,\n    },\n  });\n\n  return renderedElement;\n};\n"],"names":["Draggable","id","children","className","disabled","data","style","render","onDragEnd","onDragStart","indicator","onlyIndicatorDraggable","rest","cls","useCls","attributes","listeners","isDragging","setNodeRef","useDraggable","indicatorIcon","jsx","DotsSixVerticalIcon","combinedChildren","isValidElement","cloneElement","useRender","clsx"],"mappings":";;;;;;;;AAYO,MAAMA,IAAY,CAAwB;AAAA,EAC/C,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,wBAAAC,IAAyB;AAAA,EACzB,GAAGC;AACL,MAAiC;AAC/B,QAAMC,IAAMC,EAAO,GAEb,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAAC,EAAA,IAAeC,EAAa;AAAA,IACrE,IAAAlB;AAAA,IACA,MAAAI;AAAA,IACA,UAAAD;AAAA,IACA,WAAAI;AAAA,IACA,aAAAC;AAAA,EAAA,CACD,GAEKW,IACJV,MAAc,KACZ,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWT,EAAI,qBAAqB;AAAA,IAAA;AAAA,IAC/B,mBAAmBZ;AAAA,EAAA,IAG1BS,GAYEa,IAAmB;AAAA,IAVAC,EAAeJ,CAAa,IACjDT,IACEc,EAAaL,GAAe;AAAA,MAC1B,GAAGL;AAAA,MACH,GAAGC;AAAA,MACH,KAAK,cAAcf;AAAA,IAAA,CACpB,IACDmB,IACF;AAAA,IAIF,GAAI,MAAM,QAAQlB,CAAQ,IAAIA,IAAW,CAACA,CAAQ;AAAA,EACpD;AA6BO,SA3BiBwB,EAAU;AAAA,IAChC,QAAQnB,KAGL,gBAAAc,EAAA,OAAA,EAAI,WAAWM,EAAKd,EAAI,WAAW,GAAGV,CAAS,EAAG,CAAA;AAAA,IAErD,KAAKe;AAAA,IACL,OAAO;AAAA,MACL,UAAUK;AAAA,MACV,WAAApB;AAAA,MACA,OAAO;AAAA,QACL,GAAGG;AAAA,QACH,aAAa;AAAA;AAAA,QACb,QAAQF,IAAW,YAAY;AAAA,QAC/B,SAASa,IAAa,MAAM;AAAA;AAAA,MAC9B;AAAA,MACA,GAAGL;AAAA,MACH,GAAGG;AAAA,MACH,GAAKJ,IAAqC,CAAA,IAAZK;AAAA,IAChC;AAAA,IACA,OAAO;AAAA,MACL,YAAAC;AAAA,MACA,IAAAhB;AAAA,MACA,MAAAI;AAAA,IAAA;AAAA,EACF,CACD;AAGH;"}
+{"version":3,"file":"draggable.js","sources":["../../../src/components/drag-drop/draggable.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDraggable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDraggableProps } from \"./types\";\nimport { DotsSixVerticalIcon } from \"@bioturing/assets\";\nimport { cloneElement, isValidElement, HTMLProps } from \"react\";\n\n/**\n * A draggable item component that can be used within the Drag context\n */\nexport const Draggable = <T extends Data = Data>({\n  id,\n  children,\n  className,\n  disabled = false,\n  data,\n  style,\n  render,\n  onDragEnd,\n  onDragStart,\n  indicator = true,\n  onlyIndicatorDraggable = false,\n  ...rest\n}: DragDropDraggableProps<T>) => {\n  const cls = useCls();\n\n  const { attributes, listeners, isDragging, setNodeRef } = useDraggable({\n    id,\n    data,\n    disabled,\n    onDragEnd,\n    onDragStart,\n  });\n\n  const indicatorIcon =\n    indicator === true ? (\n      <DotsSixVerticalIcon\n        className={cls(\"draggable-indicator\")}\n        key={\"indicator-icon\" + id}\n      />\n    ) : (\n      indicator\n    );\n  const indicatorElement = isValidElement(indicatorIcon)\n    ? onlyIndicatorDraggable\n      ? cloneElement(indicatorIcon, {\n          ...attributes,\n          ...listeners,\n          key: \"indicator\" + id,\n        })\n      : indicatorIcon\n    : null;\n\n  const combinedChildren = [\n    indicatorElement,\n    ...(Array.isArray(children) ? children : [children]),\n  ];\n\n  const renderedElement = useRender({\n    render: render ? (\n      render\n    ) : (\n      <div className={clsx(cls(\"draggable\"), className)} />\n    ),\n    ref: setNodeRef,\n    props: {\n      children: combinedChildren,\n      className,\n      style: {\n        ...style,\n        touchAction: \"none\", // Prevents scrolling on touch devices while dragging\n        cursor: disabled ? \"default\" : \"grab\",\n        opacity: isDragging ? 0.5 : 1, // Visual feedback when dragging\n      },\n      ...rest,\n      ...attributes,\n      ...(!onlyIndicatorDraggable ? listeners : {}),\n    },\n    state: {\n      isDragging,\n      id,\n      data,\n    },\n  });\n\n  return renderedElement;\n};\n"],"names":["Draggable","id","children","className","disabled","data","style","render","onDragEnd","onDragStart","indicator","onlyIndicatorDraggable","rest","cls","useCls","attributes","listeners","isDragging","setNodeRef","useDraggable","indicatorIcon","jsx","DotsSixVerticalIcon","combinedChildren","isValidElement","cloneElement","useRender","clsx"],"mappings":";;;;;;;;AAYO,MAAMA,IAAY,CAAwB;AAAA,EAC/C,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,wBAAAC,IAAyB;AAAA,EACzB,GAAGC;AACL,MAAiC;AAC/B,QAAMC,IAAMC,EAAA,GAEN,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAAC,EAAA,IAAeC,EAAa;AAAA,IACrE,IAAAlB;AAAA,IACA,MAAAI;AAAA,IACA,UAAAD;AAAA,IACA,WAAAI;AAAA,IACA,aAAAC;AAAA,EAAA,CACD,GAEKW,IACJV,MAAc,KACZ,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWT,EAAI,qBAAqB;AAAA,IAAA;AAAA,IAC/B,mBAAmBZ;AAAA,EAAA,IAG1BS,GAYEa,IAAmB;AAAA,IAVAC,EAAeJ,CAAa,IACjDT,IACEc,EAAaL,GAAe;AAAA,MAC1B,GAAGL;AAAA,MACH,GAAGC;AAAA,MACH,KAAK,cAAcf;AAAA,IAAA,CACpB,IACDmB,IACF;AAAA,IAIF,GAAI,MAAM,QAAQlB,CAAQ,IAAIA,IAAW,CAACA,CAAQ;AAAA,EAAA;AA8BpD,SA3BwBwB,EAAU;AAAA,IAChC,QAAQnB,KAGN,gBAAAc,EAAC,OAAA,EAAI,WAAWM,EAAKd,EAAI,WAAW,GAAGV,CAAS,EAAA,CAAG;AAAA,IAErD,KAAKe;AAAA,IACL,OAAO;AAAA,MACL,UAAUK;AAAA,MACV,WAAApB;AAAA,MACA,OAAO;AAAA,QACL,GAAGG;AAAA,QACH,aAAa;AAAA;AAAA,QACb,QAAQF,IAAW,YAAY;AAAA,QAC/B,SAASa,IAAa,MAAM;AAAA;AAAA,MAAA;AAAA,MAE9B,GAAGL;AAAA,MACH,GAAGG;AAAA,MACH,GAAKJ,IAAqC,CAAA,IAAZK;AAAA,IAAa;AAAA,IAE7C,OAAO;AAAA,MACL,YAAAC;AAAA,MACA,IAAAhB;AAAA,MACA,MAAAI;AAAA,IAAA;AAAA,EACF,CACD;AAGH;"}

package/dist/components/drag-drop/droppable.d.ts

@@ -0,0 +1,9 @@
+import { Data, DragDropDroppableProps } from './types';
+/**
+ * A drop zone component that can receive draggable items
+ * Styled similarly to the Upload component's droppable area
+ */
+declare const DroppableInner: <T extends Data = Data, M extends boolean = false>({ id, children, className, disabled, placeholder, icon, render, onDrop, validate, multiple, value, onChange, maxItems, renderValueLabel, renderValueIcon, ...rest }: DragDropDroppableProps<T, M>) => null;
+export declare const Droppable: typeof DroppableInner;
+export {};
+//# sourceMappingURL=droppable.d.ts.map

package/dist/components/drag-drop/droppable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"droppable.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/droppable.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,IAAI,EAAE,sBAAsB,EAAiB,MAAM,SAAS,CAAC;AAI3E;;;GAGG;AACH,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,CAAC,SAAS,OAAO,GAAG,KAAK,EAAE,qKAiBvE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,SAgG9B,CAAC;AAEF,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAC"}

package/dist/components/drag-drop/droppable.js.map

@@ -1 +1 @@
-{"version":3,"file":"droppable.js","sources":["../../../src/components/drag-drop/droppable.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useMemo, memo } from \"react\";\nimport { useDroppable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { ArrowsOutCardinalIcon } from \"@bioturing/assets\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDroppableProps, DraggableInfo } from \"./types\";\nimport { Value } from \"./value\";\nimport { uniqWith, isEqual } from \"es-toolkit\";\n\n/**\n * A drop zone component that can receive draggable items\n * Styled similarly to the Upload component's droppable area\n */\nconst DroppableInner = <T extends Data = Data, M extends boolean = false>({\n  id,\n  children,\n  className,\n  disabled = false,\n  placeholder = \"Drop items here\",\n  icon = <ArrowsOutCardinalIcon />,\n  render,\n  onDrop,\n  validate,\n  multiple,\n  value,\n  onChange,\n  maxItems,\n  renderValueLabel,\n  renderValueIcon,\n  ...rest\n}: DragDropDroppableProps<T, M>) => {\n  const cls = useCls();\n  const handleOnDrop = useCallback(\n    (item: DraggableInfo<T>) => {\n      if (onDrop) {\n        onDrop(item);\n      }\n      if (onChange) {\n        if (multiple) {\n          (onChange as (value: T[]) => void)(\n            uniqWith([...(value as T[]), item.data], isEqual)\n          );\n        } else {\n          (onChange as (value: T) => void)(item.data);\n        }\n      }\n    },\n    [onDrop, onChange, multiple, value]\n  );\n  const { isOver, setNodeRef, attributes, listeners } = useDroppable({\n    id,\n    disabled,\n    onDrop: handleOnDrop,\n    validate,\n  });\n\n  // memoize value props to avoid re-renders\n  const valueProps = useMemo(\n    () => ({\n      value,\n      onChange,\n      multiple,\n      renderValueLabel,\n      renderValueIcon,\n      maxItems,\n    }),\n    [value, onChange, multiple, renderValueLabel, renderValueIcon, maxItems]\n  );\n\n  // memoize dropzone content\n  const dropzoneContent = useMemo(\n    () =>\n      children || (\n        <div className={cls(\"drop-zone-content\")}>\n          <div className={cls(\"drop-zone-icon\")}>{icon}</div>\n          <div className={cls(\"drop-zone-text\")}>{placeholder}</div>\n        </div>\n      ),\n    [children, cls, icon, placeholder]\n  );\n\n  // memoize default render tree\n  const defaultRender = useCallback<\n    (props: Record<string, unknown>) => React.ReactElement\n  >(\n    ({ className, ...props }) => {\n      if (!value || (multiple && Array.isArray(value) && !value.length)) {\n        return (\n          <div\n            className={clsx(cls(\"drop-zone\"), className as string)}\n            {...props}\n          >\n            {dropzoneContent}\n          </div>\n        );\n      }\n      // return value when there is a value\n      return (\n        <Value<T, M>\n          {...valueProps}\n          className={className as string}\n          {...props}\n        />\n      );\n    },\n    [value, multiple, valueProps, dropzoneContent, cls]\n  );\n\n  const renderedElement = useRender({\n    render: render ?? defaultRender,\n    ref: setNodeRef,\n    props: {\n      className: className,\n      ...attributes,\n      ...listeners,\n      ...rest,\n    },\n    state: {\n      isOver,\n      value,\n      onChange: onChange as (value: M extends true ? T[] : T) => void,\n      id,\n    },\n  });\n\n  return renderedElement;\n};\n\nexport const Droppable = memo(DroppableInner) as typeof DroppableInner;\n"],"names":["DroppableInner","id","children","className","disabled","placeholder","icon","ArrowsOutCardinalIcon","render","onDrop","validate","multiple","value","onChange","maxItems","renderValueLabel","renderValueIcon","rest","cls","useCls","handleOnDrop","useCallback","item","uniqWith","isEqual","isOver","setNodeRef","attributes","listeners","useDroppable","valueProps","useMemo","dropzoneContent","jsxs","jsx","defaultRender","props","clsx","Value","useRender","Droppable","memo"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAiB,CAAmD;AAAA,EACxE,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,MAAAC,sBAAQC,GAAsB,EAAA;AAAA,EAC9B,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAoC;AAClC,QAAMC,IAAMC,EAAO,GACbC,IAAeC;AAAA,IACnB,CAACC,MAA2B;AAC1B,MAAIb,KACFA,EAAOa,CAAI,GAETT,KAECA;AAAA,QADCF,IAEAY,EAAS,CAAC,GAAIX,GAAeU,EAAK,IAAI,GAAGE,CAAO,IAGjBF,EAAK;AAAA,MAFtC;AAAA,IAKN;AAAA,IACA,CAACb,GAAQI,GAAUF,GAAUC,CAAK;AAAA,EACpC,GACM,EAAE,QAAAa,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAa;AAAA,IACjE,IAAA5B;AAAA,IACA,UAAAG;AAAA,IACA,QAAQgB;AAAA,IACR,UAAAV;AAAA,EAAA,CACD,GAGKoB,IAAaC;AAAA,IACjB,OAAO;AAAA,MACL,OAAAnB;AAAA,MACA,UAAAC;AAAA,MACA,UAAAF;AAAA,MACA,kBAAAI;AAAA,MACA,iBAAAC;AAAA,MACA,UAAAF;AAAA,IAAA;AAAA,IAEF,CAACF,GAAOC,GAAUF,GAAUI,GAAkBC,GAAiBF,CAAQ;AAAA,EACzE,GAGMkB,IAAkBD;AAAA,IACtB,MACE7B,KACE,gBAAA+B,EAAC,SAAI,WAAWf,EAAI,mBAAmB,GACrC,UAAA;AAAA,MAAA,gBAAAgB,EAAC,OAAI,EAAA,WAAWhB,EAAI,gBAAgB,GAAI,UAAKZ,GAAA;AAAA,wBAC5C,OAAI,EAAA,WAAWY,EAAI,gBAAgB,GAAI,UAAYb,EAAA,CAAA;AAAA,IAAA,GACtD;AAAA,IAEJ,CAACH,GAAUgB,GAAKZ,GAAMD,CAAW;AAAA,EACnC,GAGM8B,IAAgBd;AAAA,IAGpB,CAAC,EAAE,WAAAlB,GAAW,GAAGiC,QACX,CAACxB,KAAUD,KAAY,MAAM,QAAQC,CAAK,KAAK,CAACA,EAAM,SAEtD,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWG,EAAKnB,EAAI,WAAW,GAAGf,CAAmB;AAAA,QACpD,GAAGiC;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IACH,IAKF,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,WAAW3B;AAAAA,QACV,GAAGiC;AAAA,MAAA;AAAA,IACN;AAAA,IAGJ,CAACxB,GAAOD,GAAUmB,GAAYE,GAAiBd,CAAG;AAAA,EACpD;AAmBO,SAjBiBqB,EAAU;AAAA,IAChC,QAAQ/B,KAAU2B;AAAA,IAClB,KAAKT;AAAA,IACL,OAAO;AAAA,MACL,WAAAvB;AAAA,MACA,GAAGwB;AAAA,MACH,GAAGC;AAAA,MACH,GAAGX;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAAQ;AAAA,MACA,OAAAb;AAAA,MACA,UAAAC;AAAA,MACA,IAAAZ;AAAA,IAAA;AAAA,EACF,CACD;AAGH,GAEauC,IAAYC,EAAKzC,CAAc;"}
+{"version":3,"file":"droppable.js","sources":["../../../src/components/drag-drop/droppable.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useMemo, memo } from \"react\";\nimport { useDroppable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { ArrowsOutCardinalIcon } from \"@bioturing/assets\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDroppableProps, DraggableInfo } from \"./types\";\nimport { Value } from \"./value\";\nimport { uniqWith, isEqual } from \"es-toolkit\";\n\n/**\n * A drop zone component that can receive draggable items\n * Styled similarly to the Upload component's droppable area\n */\nconst DroppableInner = <T extends Data = Data, M extends boolean = false>({\n  id,\n  children,\n  className,\n  disabled = false,\n  placeholder = \"Drop items here\",\n  icon = <ArrowsOutCardinalIcon />,\n  render,\n  onDrop,\n  validate,\n  multiple,\n  value,\n  onChange,\n  maxItems,\n  renderValueLabel,\n  renderValueIcon,\n  ...rest\n}: DragDropDroppableProps<T, M>) => {\n  const cls = useCls();\n  const handleOnDrop = useCallback(\n    (item: DraggableInfo<T>) => {\n      if (onDrop) {\n        onDrop(item);\n      }\n      if (onChange) {\n        if (multiple) {\n          (onChange as (value: T[]) => void)(\n            uniqWith([...(value as T[]), item.data], isEqual)\n          );\n        } else {\n          (onChange as (value: T) => void)(item.data);\n        }\n      }\n    },\n    [onDrop, onChange, multiple, value]\n  );\n  const { isOver, setNodeRef, attributes, listeners } = useDroppable({\n    id,\n    disabled,\n    onDrop: handleOnDrop,\n    validate,\n  });\n\n  // memoize value props to avoid re-renders\n  const valueProps = useMemo(\n    () => ({\n      value,\n      onChange,\n      multiple,\n      renderValueLabel,\n      renderValueIcon,\n      maxItems,\n    }),\n    [value, onChange, multiple, renderValueLabel, renderValueIcon, maxItems]\n  );\n\n  // memoize dropzone content\n  const dropzoneContent = useMemo(\n    () =>\n      children || (\n        <div className={cls(\"drop-zone-content\")}>\n          <div className={cls(\"drop-zone-icon\")}>{icon}</div>\n          <div className={cls(\"drop-zone-text\")}>{placeholder}</div>\n        </div>\n      ),\n    [children, cls, icon, placeholder]\n  );\n\n  // memoize default render tree\n  const defaultRender = useCallback<\n    (props: Record<string, unknown>) => React.ReactElement\n  >(\n    ({ className, ...props }) => {\n      if (!value || (multiple && Array.isArray(value) && !value.length)) {\n        return (\n          <div\n            className={clsx(cls(\"drop-zone\"), className as string)}\n            {...props}\n          >\n            {dropzoneContent}\n          </div>\n        );\n      }\n      // return value when there is a value\n      return (\n        <Value<T, M>\n          {...valueProps}\n          className={className as string}\n          {...props}\n        />\n      );\n    },\n    [value, multiple, valueProps, dropzoneContent, cls]\n  );\n\n  const renderedElement = useRender({\n    render: render ?? defaultRender,\n    ref: setNodeRef,\n    props: {\n      className: className,\n      ...attributes,\n      ...listeners,\n      ...rest,\n    },\n    state: {\n      isOver,\n      value,\n      onChange: onChange as (value: M extends true ? T[] : T) => void,\n      id,\n    },\n  });\n\n  return renderedElement;\n};\n\nexport const Droppable = memo(DroppableInner) as typeof DroppableInner;\n"],"names":["DroppableInner","id","children","className","disabled","placeholder","icon","ArrowsOutCardinalIcon","render","onDrop","validate","multiple","value","onChange","maxItems","renderValueLabel","renderValueIcon","rest","cls","useCls","handleOnDrop","useCallback","item","uniqWith","isEqual","isOver","setNodeRef","attributes","listeners","useDroppable","valueProps","useMemo","dropzoneContent","jsxs","jsx","defaultRender","props","clsx","Value","useRender","Droppable","memo"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAiB,CAAmD;AAAA,EACxE,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,MAAAC,sBAAQC,GAAA,EAAsB;AAAA,EAC9B,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAoC;AAClC,QAAMC,IAAMC,EAAA,GACNC,IAAeC;AAAA,IACnB,CAACC,MAA2B;AAC1B,MAAIb,KACFA,EAAOa,CAAI,GAETT,KAECA;AAAA,QADCF,IAEAY,EAAS,CAAC,GAAIX,GAAeU,EAAK,IAAI,GAAGE,CAAO,IAGjBF,EAAK;AAAA,MAHY;AAAA,IAMxD;AAAA,IACA,CAACb,GAAQI,GAAUF,GAAUC,CAAK;AAAA,EAAA,GAE9B,EAAE,QAAAa,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAa;AAAA,IACjE,IAAA5B;AAAA,IACA,UAAAG;AAAA,IACA,QAAQgB;AAAA,IACR,UAAAV;AAAA,EAAA,CACD,GAGKoB,IAAaC;AAAA,IACjB,OAAO;AAAA,MACL,OAAAnB;AAAA,MACA,UAAAC;AAAA,MACA,UAAAF;AAAA,MACA,kBAAAI;AAAA,MACA,iBAAAC;AAAA,MACA,UAAAF;AAAA,IAAA;AAAA,IAEF,CAACF,GAAOC,GAAUF,GAAUI,GAAkBC,GAAiBF,CAAQ;AAAA,EAAA,GAInEkB,IAAkBD;AAAA,IACtB,MACE7B,KACE,gBAAA+B,EAAC,SAAI,WAAWf,EAAI,mBAAmB,GACrC,UAAA;AAAA,MAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAWhB,EAAI,gBAAgB,GAAI,UAAAZ,GAAK;AAAA,wBAC5C,OAAA,EAAI,WAAWY,EAAI,gBAAgB,GAAI,UAAAb,EAAA,CAAY;AAAA,IAAA,GACtD;AAAA,IAEJ,CAACH,GAAUgB,GAAKZ,GAAMD,CAAW;AAAA,EAAA,GAI7B8B,IAAgBd;AAAA,IAGpB,CAAC,EAAE,WAAAlB,GAAW,GAAGiC,QACX,CAACxB,KAAUD,KAAY,MAAM,QAAQC,CAAK,KAAK,CAACA,EAAM,SAEtD,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWG,EAAKnB,EAAI,WAAW,GAAGf,CAAmB;AAAA,QACpD,GAAGiC;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IAAA,IAML,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,WAAW3B;AAAAA,QACV,GAAGiC;AAAA,MAAA;AAAA,IAAA;AAAA,IAIV,CAACxB,GAAOD,GAAUmB,GAAYE,GAAiBd,CAAG;AAAA,EAAA;AAoBpD,SAjBwBqB,EAAU;AAAA,IAChC,QAAQ/B,KAAU2B;AAAA,IAClB,KAAKT;AAAA,IACL,OAAO;AAAA,MACL,WAAAvB;AAAA,MACA,GAAGwB;AAAA,MACH,GAAGC;AAAA,MACH,GAAGX;AAAA,IAAA;AAAA,IAEL,OAAO;AAAA,MACL,QAAAQ;AAAA,MACA,OAAAb;AAAA,MACA,UAAAC;AAAA,MACA,IAAAZ;AAAA,IAAA;AAAA,EACF,CACD;AAGH,GAEauC,IAAYC,EAAKzC,CAAc;"}

package/dist/components/drag-drop/hooks.d.ts

@@ -0,0 +1,42 @@
+import { Data, UseDraggableProps, UseDroppableProps } from './types';
+/**
+ * Hook for making an element draggable using HTML5 drag and drop API
+ */
+export declare function useDraggable<T extends Data = Data>({ id, data, disabled, onDragStart: onDragStartProp, onDragEnd: onDragEndProp, }: UseDraggableProps<T>): {
+    isDragging: boolean;
+    setNodeRef: (node: HTMLElement | null) => void;
+    attributes: {
+        draggable: boolean;
+        role: string;
+        "aria-pressed": boolean;
+        tabIndex: number;
+        "data-dragging": boolean;
+        "data-disabled": boolean;
+    };
+    listeners: {
+        onDragStart: (e: React.DragEvent) => void;
+        onDragEnd: (_e: React.DragEvent) => void;
+    };
+};
+/**
+ * Hook for making an element a drop target using HTML5 drag and drop API
+ */
+export declare function useDroppable<T extends Data = Data>({ id, disabled, validate, onDrop: onDropProp, }: UseDroppableProps<T>): {
+    isOver: boolean;
+    setNodeRef: (node: HTMLElement | null) => void;
+    attributes: {
+        "data-droppable": boolean;
+        "data-over": boolean;
+        "data-disabled": boolean;
+        "data-dragging": boolean;
+        "data-valid": boolean;
+    };
+    valid: any;
+    listeners: {
+        onDragEnter: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDragLeave: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+    };
+};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/components/drag-drop/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/hooks.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,IAAI,EACT,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAGjB;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,EAClD,EAAE,EACF,IAAI,EACJ,QAAgB,EAChB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,GACzB,EAAE,iBAAiB,CAAC,CAAC,CAAC;;uBAKiB,WAAW,GAAG,IAAI;;;;;;;;;;yBAelD,KAAK,CAAC,SAAS;wBAuDd,KAAK,CAAC,SAAS;;EA8BvB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,EAClD,EAAE,EACF,QAAgB,EAChB,QAAqB,EACrB,MAAM,EAAE,UAAU,GACnB,EAAE,iBAAiB,CAAC,CAAC,CAAC;;uBAKiB,WAAW,GAAG,IAAI;;;;;;;;;;yBAqBlD,KAAK,CAAC,SAAS;wBASf,KAAK,CAAC,SAAS;yBASf,KAAK,CAAC,SAAS;oBAWf,KAAK,CAAC,SAAS;;EA6DtB"}

package/dist/components/drag-drop/hooks.js

@@ -1,146 +1,144 @@
 "use client";
-import { useState as R, useRef as N, useCallback as u, useEffect as A } from "react";
-import { useDragDropContext as z } from "./context.js";
-function k({
-  id: c,
+import { useState as C, useRef as R, useCallback as g, useEffect as O } from "react";
+import { useDragDropContext as N } from "./context.js";
+function z({
+  id: u,
   data: r,
   disabled: n = !1,
-  onDragStart: y,
-  onDragEnd: E
+  onDragStart: h,
+  onDragEnd: d
 }) {
-  const [g, i] = R(!1), x = N(null), e = N(null), I = u((a) => {
-    x.current = a;
+  const [i, l] = C(!1), E = R(null), e = R(null), y = g((a) => {
+    E.current = a;
   }, []), {
     setActive: o,
-    onDragStart: m,
-    onDragEnd: v,
-    setIsDragging: p
-  } = z(), d = y || m, l = E || v, S = u(
+    onDragStart: x,
+    onDragEnd: p,
+    setIsDragging: D
+  } = N(), v = h || x, f = d || p, I = g(
     (a) => {
-      var D, O, T, j;
       if (n) return;
-      i(!0), p(!0);
-      const f = { data: r, id: c };
-      o(f), d && d({ active: f });
+      l(!0), D(!0);
+      const m = { data: r, id: u };
+      o(m), v && v({ active: m });
       let t;
       try {
-        t = JSON.stringify({ id: c, data: r });
-      } catch (h) {
-        console.error("Error serializing data:", h);
+        t = JSON.stringify({ id: u, data: r });
+      } catch (c) {
+        console.error("Error serializing data:", c);
         return;
       }
-      (D = a.dataTransfer) == null || D.setData("application/json", t), (O = a.dataTransfer) == null || O.setData("text/plain", t);
-      const s = x.current;
+      a.dataTransfer?.setData("application/json", t), a.dataTransfer?.setData("text/plain", t);
+      const s = E.current;
       if (s) {
-        const h = s.getBoundingClientRect();
-        e.current = s.cloneNode(!0), e.current.style.maxWidth = "400px", e.current.style.position = "absolute", e.current.style.pointerEvents = "none", e.current.style.top = "-99px", e.current.style.left = "-99px", e.current.style.zIndex = "-1", (T = s.parentElement) == null || T.appendChild(e.current), (j = a.dataTransfer) == null || j.setDragImage(
+        const c = s.getBoundingClientRect();
+        e.current = s.cloneNode(!0), e.current.style.maxWidth = "400px", e.current.style.position = "absolute", e.current.style.pointerEvents = "none", e.current.style.top = "-99px", e.current.style.left = "-99px", e.current.style.zIndex = "-1", s.parentElement?.appendChild(e.current), a.dataTransfer?.setDragImage(
           e.current,
-          a.clientX - h.left,
-          a.clientY - h.top
+          a.clientX - c.left,
+          a.clientY - c.top
         );
       }
     },
-    [c, r, n, d, o, p]
-  ), C = u(
+    [u, r, n, v, o, D]
+  ), S = g(
     (a) => {
-      var f;
-      n || (i(!1), p(!1), (f = e.current) == null || f.remove(), l && l({ active: { data: r, id: c }, over: null }));
+      n || (l(!1), D(!1), e.current?.remove(), f && f({ active: { data: r, id: u }, over: null }));
     },
-    [c, r, n, l, p]
+    [u, r, n, f, D]
   );
   return {
-    isDragging: g,
-    setNodeRef: I,
+    isDragging: i,
+    setNodeRef: y,
     attributes: {
       draggable: !n,
       role: "button",
-      "aria-pressed": g,
+      "aria-pressed": i,
       tabIndex: n ? -1 : 0,
-      "data-dragging": g ? !0 : void 0,
+      "data-dragging": i ? !0 : void 0,
       "data-disabled": n ? !0 : void 0
     },
     listeners: {
-      onDragStart: S,
-      onDragEnd: C
+      onDragStart: I,
+      onDragEnd: S
     }
   };
 }
-function B({
-  id: c,
+function A({
+  id: u,
   disabled: r = !1,
   validate: n = () => !0,
-  onDrop: y
+  onDrop: h
 }) {
-  const [E, g] = R(!1), [i, x] = R(void 0), e = N(null), I = u((t) => {
+  const [d, i] = C(!1), [l, E] = C(void 0), e = R(null), y = g((t) => {
     e.current = t;
   }, []), {
     active: o,
-    setActive: m,
-    onDragEnd: v,
-    onDrop: p,
-    isDragging: d
-  } = z(), l = y || p;
-  A(() => {
-    o && n && x(n(o));
+    setActive: x,
+    onDragEnd: p,
+    onDrop: D,
+    isDragging: v
+  } = N(), f = h || D;
+  O(() => {
+    o && n && E(n(o));
   }, [o, n]);
-  const S = u(
+  const I = g(
     (t) => {
-      r || (t.preventDefault(), g(!0));
+      r || (t.preventDefault(), i(!0));
     },
     [r]
-  ), C = u(
+  ), S = g(
     (t) => {
       r || (t.preventDefault(), t.dataTransfer.dropEffect = "move");
     },
     [r]
-  ), a = u(
+  ), a = g(
     (t) => {
-      r || t.currentTarget === t.target && g(!1);
+      r || t.currentTarget === t.target && i(!1);
     },
     [r]
-  ), f = u(
+  ), m = g(
     (t) => {
-      if (!r && (t.preventDefault(), !!i))
+      if (!r && (t.preventDefault(), !!l))
         try {
           const s = t.dataTransfer.getData("application/json");
-          let D;
+          let c;
           if (s)
-            D = JSON.parse(s);
+            c = JSON.parse(s);
           else if (o)
-            D = o;
+            c = o;
           else
             return;
-          l && l(D), v && o && v({
-            active: D,
-            over: { id: c }
-          }), g(!1), m(null);
+          f && f(c), p && o && p({
+            active: c,
+            over: { id: u }
+          }), i(!1), x(null);
         } catch (s) {
           console.error("Error processing drop:", s);
         }
     },
-    [r, c, o, l, v, m, i]
+    [r, u, o, f, p, x, l]
   );
   return {
-    isOver: E,
-    setNodeRef: I,
+    isOver: d,
+    setNodeRef: y,
     attributes: {
       "data-droppable": !0,
-      "data-over": E ? !0 : void 0,
+      "data-over": d ? !0 : void 0,
       "data-disabled": r ? !0 : void 0,
-      "data-dragging": d ? !0 : void 0,
-      "data-valid": i ? !0 : void 0
+      "data-dragging": v ? !0 : void 0,
+      "data-valid": l ? !0 : void 0
     },
-    valid: i,
+    valid: l,
     listeners: {
-      onDragEnter: S,
-      onDragOver: C,
+      onDragEnter: I,
+      onDragOver: S,
       onDragLeave: a,
-      onDrop: f
+      onDrop: m
     }
   };
 }
 export {
-  k as useDraggable,
-  B as useDroppable
+  z as useDraggable,
+  A as useDroppable
 };
 //# sourceMappingURL=hooks.js.map

package/dist/components/drag-drop/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/components/drag-drop/hooks.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState, useEffect } from \"react\";\n\nimport {\n  DraggableInfo,\n  type Data,\n  type UseDraggableProps,\n  type UseDroppableProps,\n} from \"./types\";\nimport { useDragDropContext } from \"./context\";\n\n/**\n * Hook for making an element draggable using HTML5 drag and drop API\n */\nexport function useDraggable<T extends Data = Data>({\n  id,\n  data,\n  disabled = false,\n  onDragStart: onDragStartProp,\n  onDragEnd: onDragEndProp,\n}: UseDraggableProps<T>) {\n  const [isDragging, setIsDragging] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n  const thumbnailNodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    setActive,\n    onDragStart: onDragStartContext,\n    onDragEnd: onDragEndContext,\n    setIsDragging: setIsDraggingContext,\n  } = useDragDropContext();\n\n  const onDragStart = onDragStartProp || onDragStartContext;\n  const onDragEnd = onDragEndProp || onDragEndContext;\n\n  const handleDragStart = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(true);\n      setIsDraggingContext(true);\n\n      // Update the active item in context\n      const dragItem = { data, id };\n      setActive(dragItem);\n\n      // Call the onDragStart callback if available\n      if (onDragStart) {\n        onDragStart({ active: dragItem });\n      }\n\n      // Set data transfer\n      let dataPayload: string;\n      try {\n        dataPayload = JSON.stringify({ id, data });\n      } catch (error) {\n        console.error(\"Error serializing data:\", error);\n        return;\n      }\n      e.dataTransfer?.setData(\"application/json\", dataPayload);\n\n      // For Firefox compatibility\n      e.dataTransfer?.setData(\"text/plain\", dataPayload);\n\n      // Set drag image (optional)\n      const node = nodeRef.current;\n      if (node) {\n        const nodeRect = node.getBoundingClientRect();\n\n        thumbnailNodeRef.current = node.cloneNode(true) as HTMLElement;\n        thumbnailNodeRef.current.style.maxWidth = \"400px\";\n        thumbnailNodeRef.current.style.position = \"absolute\";\n        thumbnailNodeRef.current.style.pointerEvents = \"none\";\n        thumbnailNodeRef.current.style.top = \"-99px\";\n        thumbnailNodeRef.current.style.left = \"-99px\";\n        thumbnailNodeRef.current.style.zIndex = \"-1\";\n\n        node.parentElement?.appendChild(thumbnailNodeRef.current);\n\n        // Use the node itself as the drag image\n        e.dataTransfer?.setDragImage(\n          thumbnailNodeRef.current,\n          e.clientX - nodeRect.left,\n          e.clientY - nodeRect.top\n        );\n      }\n    },\n    [id, data, disabled, onDragStart, setActive, setIsDraggingContext]\n  );\n\n  const handleDragEnd = useCallback(\n    (_e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(false);\n      setIsDraggingContext(false);\n      thumbnailNodeRef.current?.remove();\n\n      if (onDragEnd) {\n        onDragEnd({ active: { data, id }, over: null });\n      }\n    },\n    [id, data, disabled, onDragEnd, setIsDraggingContext]\n  );\n\n  return {\n    isDragging,\n    setNodeRef,\n    attributes: {\n      draggable: !disabled,\n      role: \"button\",\n      \"aria-pressed\": isDragging,\n      tabIndex: disabled ? -1 : 0,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n    },\n    listeners: {\n      onDragStart: handleDragStart,\n      onDragEnd: handleDragEnd,\n    },\n  };\n}\n\n/**\n * Hook for making an element a drop target using HTML5 drag and drop API\n */\nexport function useDroppable<T extends Data = Data>({\n  id,\n  disabled = false,\n  validate = () => true,\n  onDrop: onDropProp,\n}: UseDroppableProps<T>) {\n  const [isOver, setIsOver] = useState(false);\n  const [valid, setValid] = useState(undefined);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    active,\n    setActive,\n    onDragEnd,\n    onDrop: onDropContext,\n    isDragging,\n  } = useDragDropContext<T>();\n\n  const onDrop = onDropProp || onDropContext;\n\n  useEffect(() => {\n    if (active && validate) {\n      setValid(validate(active));\n    }\n  }, [active, validate]);\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      setIsOver(true);\n    },\n    [disabled]\n  );\n\n  const handleDragOver = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault(); // Necessary to allow dropping\n      e.dataTransfer.dropEffect = \"move\";\n    },\n    [disabled]\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      // Only set isOver to false if we're leaving this element (not a child)\n      if (e.currentTarget === e.target) {\n        setIsOver(false);\n      }\n    },\n    [disabled]\n  );\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      if (!valid) return;\n\n      try {\n        // Try to get data from dataTransfer\n        const jsonData = e.dataTransfer.getData(\"application/json\");\n        let draggedItem: DraggableInfo<T>;\n\n        if (jsonData) {\n          draggedItem = JSON.parse(jsonData);\n        } else if (active) {\n          // Fall back to active item from context if dataTransfer is not available\n          draggedItem = active;\n        } else {\n          return; // No item to drop\n        }\n\n        // Call the component's onDrop handler if provided\n        if (onDrop) {\n          onDrop(draggedItem);\n        }\n\n        // Call the onDragEnd callback from context if available\n        if (onDragEnd && active) {\n          onDragEnd({\n            active: draggedItem,\n            over: { id },\n          });\n        }\n\n        setIsOver(false);\n\n        // Reset the active item in context\n        setActive(null);\n      } catch (error) {\n        console.error(\"Error processing drop:\", error);\n      }\n    },\n    [disabled, id, active, onDrop, onDragEnd, setActive, valid]\n  );\n\n  return {\n    isOver,\n    setNodeRef,\n    attributes: {\n      \"data-droppable\": true,\n      \"data-over\": isOver ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-valid\": valid ? true : undefined,\n    },\n    valid,\n    listeners: {\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDrop: handleDrop,\n    },\n  };\n}\n"],"names":["useDraggable","id","data","disabled","onDragStartProp","onDragEndProp","isDragging","setIsDragging","useState","nodeRef","useRef","thumbnailNodeRef","setNodeRef","useCallback","node","setActive","onDragStartContext","onDragEndContext","setIsDraggingContext","useDragDropContext","onDragStart","onDragEnd","handleDragStart","e","dragItem","dataPayload","error","_a","_b","nodeRect","_c","_d","handleDragEnd","_e","useDroppable","validate","onDropProp","isOver","setIsOver","valid","setValid","active","onDropContext","onDrop","useEffect","handleDragEnter","handleDragOver","handleDragLeave","handleDrop","jsonData","draggedItem"],"mappings":"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"}
+{"version":3,"file":"hooks.js","sources":["../../../src/components/drag-drop/hooks.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState, useEffect } from \"react\";\n\nimport {\n  DraggableInfo,\n  type Data,\n  type UseDraggableProps,\n  type UseDroppableProps,\n} from \"./types\";\nimport { useDragDropContext } from \"./context\";\n\n/**\n * Hook for making an element draggable using HTML5 drag and drop API\n */\nexport function useDraggable<T extends Data = Data>({\n  id,\n  data,\n  disabled = false,\n  onDragStart: onDragStartProp,\n  onDragEnd: onDragEndProp,\n}: UseDraggableProps<T>) {\n  const [isDragging, setIsDragging] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n  const thumbnailNodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    setActive,\n    onDragStart: onDragStartContext,\n    onDragEnd: onDragEndContext,\n    setIsDragging: setIsDraggingContext,\n  } = useDragDropContext();\n\n  const onDragStart = onDragStartProp || onDragStartContext;\n  const onDragEnd = onDragEndProp || onDragEndContext;\n\n  const handleDragStart = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(true);\n      setIsDraggingContext(true);\n\n      // Update the active item in context\n      const dragItem = { data, id };\n      setActive(dragItem);\n\n      // Call the onDragStart callback if available\n      if (onDragStart) {\n        onDragStart({ active: dragItem });\n      }\n\n      // Set data transfer\n      let dataPayload: string;\n      try {\n        dataPayload = JSON.stringify({ id, data });\n      } catch (error) {\n        console.error(\"Error serializing data:\", error);\n        return;\n      }\n      e.dataTransfer?.setData(\"application/json\", dataPayload);\n\n      // For Firefox compatibility\n      e.dataTransfer?.setData(\"text/plain\", dataPayload);\n\n      // Set drag image (optional)\n      const node = nodeRef.current;\n      if (node) {\n        const nodeRect = node.getBoundingClientRect();\n\n        thumbnailNodeRef.current = node.cloneNode(true) as HTMLElement;\n        thumbnailNodeRef.current.style.maxWidth = \"400px\";\n        thumbnailNodeRef.current.style.position = \"absolute\";\n        thumbnailNodeRef.current.style.pointerEvents = \"none\";\n        thumbnailNodeRef.current.style.top = \"-99px\";\n        thumbnailNodeRef.current.style.left = \"-99px\";\n        thumbnailNodeRef.current.style.zIndex = \"-1\";\n\n        node.parentElement?.appendChild(thumbnailNodeRef.current);\n\n        // Use the node itself as the drag image\n        e.dataTransfer?.setDragImage(\n          thumbnailNodeRef.current,\n          e.clientX - nodeRect.left,\n          e.clientY - nodeRect.top\n        );\n      }\n    },\n    [id, data, disabled, onDragStart, setActive, setIsDraggingContext]\n  );\n\n  const handleDragEnd = useCallback(\n    (_e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(false);\n      setIsDraggingContext(false);\n      thumbnailNodeRef.current?.remove();\n\n      if (onDragEnd) {\n        onDragEnd({ active: { data, id }, over: null });\n      }\n    },\n    [id, data, disabled, onDragEnd, setIsDraggingContext]\n  );\n\n  return {\n    isDragging,\n    setNodeRef,\n    attributes: {\n      draggable: !disabled,\n      role: \"button\",\n      \"aria-pressed\": isDragging,\n      tabIndex: disabled ? -1 : 0,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n    },\n    listeners: {\n      onDragStart: handleDragStart,\n      onDragEnd: handleDragEnd,\n    },\n  };\n}\n\n/**\n * Hook for making an element a drop target using HTML5 drag and drop API\n */\nexport function useDroppable<T extends Data = Data>({\n  id,\n  disabled = false,\n  validate = () => true,\n  onDrop: onDropProp,\n}: UseDroppableProps<T>) {\n  const [isOver, setIsOver] = useState(false);\n  const [valid, setValid] = useState(undefined);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    active,\n    setActive,\n    onDragEnd,\n    onDrop: onDropContext,\n    isDragging,\n  } = useDragDropContext<T>();\n\n  const onDrop = onDropProp || onDropContext;\n\n  useEffect(() => {\n    if (active && validate) {\n      setValid(validate(active));\n    }\n  }, [active, validate]);\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      setIsOver(true);\n    },\n    [disabled]\n  );\n\n  const handleDragOver = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault(); // Necessary to allow dropping\n      e.dataTransfer.dropEffect = \"move\";\n    },\n    [disabled]\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      // Only set isOver to false if we're leaving this element (not a child)\n      if (e.currentTarget === e.target) {\n        setIsOver(false);\n      }\n    },\n    [disabled]\n  );\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      if (!valid) return;\n\n      try {\n        // Try to get data from dataTransfer\n        const jsonData = e.dataTransfer.getData(\"application/json\");\n        let draggedItem: DraggableInfo<T>;\n\n        if (jsonData) {\n          draggedItem = JSON.parse(jsonData);\n        } else if (active) {\n          // Fall back to active item from context if dataTransfer is not available\n          draggedItem = active;\n        } else {\n          return; // No item to drop\n        }\n\n        // Call the component's onDrop handler if provided\n        if (onDrop) {\n          onDrop(draggedItem);\n        }\n\n        // Call the onDragEnd callback from context if available\n        if (onDragEnd && active) {\n          onDragEnd({\n            active: draggedItem,\n            over: { id },\n          });\n        }\n\n        setIsOver(false);\n\n        // Reset the active item in context\n        setActive(null);\n      } catch (error) {\n        console.error(\"Error processing drop:\", error);\n      }\n    },\n    [disabled, id, active, onDrop, onDragEnd, setActive, valid]\n  );\n\n  return {\n    isOver,\n    setNodeRef,\n    attributes: {\n      \"data-droppable\": true,\n      \"data-over\": isOver ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-valid\": valid ? true : undefined,\n    },\n    valid,\n    listeners: {\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDrop: handleDrop,\n    },\n  };\n}\n"],"names":["useDraggable","id","data","disabled","onDragStartProp","onDragEndProp","isDragging","setIsDragging","useState","nodeRef","useRef","thumbnailNodeRef","setNodeRef","useCallback","node","setActive","onDragStartContext","onDragEndContext","setIsDraggingContext","useDragDropContext","onDragStart","onDragEnd","handleDragStart","e","dragItem","dataPayload","error","nodeRect","handleDragEnd","_e","useDroppable","validate","onDropProp","isOver","setIsOver","valid","setValid","active","onDropContext","onDrop","useEffect","handleDragEnter","handleDragOver","handleDragLeave","handleDrop","jsonData","draggedItem"],"mappings":";;;AAcO,SAASA,EAAoC;AAAA,EAClD,IAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAaC;AAAA,EACb,WAAWC;AACb,GAAyB;AACvB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5CC,IAAUC,EAA2B,IAAI,GACzCC,IAAmBD,EAA2B,IAAI,GAElDE,IAAaC,EAAY,CAACC,MAA6B;AAC3D,IAAAL,EAAQ,UAAUK;AAAA,EACpB,GAAG,CAAA,CAAE,GAEC;AAAA,IACJ,WAAAC;AAAA,IACA,aAAaC;AAAA,IACb,WAAWC;AAAA,IACX,eAAeC;AAAA,EAAA,IACbC,EAAA,GAEEC,IAAchB,KAAmBY,GACjCK,IAAYhB,KAAiBY,GAE7BK,IAAkBT;AAAA,IACtB,CAACU,MAAuB;AACtB,UAAIpB,EAAU;AAEd,MAAAI,EAAc,EAAI,GAClBW,EAAqB,EAAI;AAGzB,YAAMM,IAAW,EAAE,MAAAtB,GAAM,IAAAD,EAAA;AACzB,MAAAc,EAAUS,CAAQ,GAGdJ,KACFA,EAAY,EAAE,QAAQI,GAAU;AAIlC,UAAIC;AACJ,UAAI;AACF,QAAAA,IAAc,KAAK,UAAU,EAAE,IAAAxB,GAAI,MAAAC,GAAM;AAAA,MAC3C,SAASwB,GAAO;AACd,gBAAQ,MAAM,2BAA2BA,CAAK;AAC9C;AAAA,MACF;AACA,MAAAH,EAAE,cAAc,QAAQ,oBAAoBE,CAAW,GAGvDF,EAAE,cAAc,QAAQ,cAAcE,CAAW;AAGjD,YAAMX,IAAOL,EAAQ;AACrB,UAAIK,GAAM;AACR,cAAMa,IAAWb,EAAK,sBAAA;AAEtB,QAAAH,EAAiB,UAAUG,EAAK,UAAU,EAAI,GAC9CH,EAAiB,QAAQ,MAAM,WAAW,SAC1CA,EAAiB,QAAQ,MAAM,WAAW,YAC1CA,EAAiB,QAAQ,MAAM,gBAAgB,QAC/CA,EAAiB,QAAQ,MAAM,MAAM,SACrCA,EAAiB,QAAQ,MAAM,OAAO,SACtCA,EAAiB,QAAQ,MAAM,SAAS,MAExCG,EAAK,eAAe,YAAYH,EAAiB,OAAO,GAGxDY,EAAE,cAAc;AAAA,UACdZ,EAAiB;AAAA,UACjBY,EAAE,UAAUI,EAAS;AAAA,UACrBJ,EAAE,UAAUI,EAAS;AAAA,QAAA;AAAA,MAEzB;AAAA,IACF;AAAA,IACA,CAAC1B,GAAIC,GAAMC,GAAUiB,GAAaL,GAAWG,CAAoB;AAAA,EAAA,GAG7DU,IAAgBf;AAAA,IACpB,CAACgB,MAAwB;AACvB,MAAI1B,MAEJI,EAAc,EAAK,GACnBW,EAAqB,EAAK,GAC1BP,EAAiB,SAAS,OAAA,GAEtBU,KACFA,EAAU,EAAE,QAAQ,EAAE,MAAAnB,GAAM,IAAAD,KAAM,MAAM,MAAM;AAAA,IAElD;AAAA,IACA,CAACA,GAAIC,GAAMC,GAAUkB,GAAWH,CAAoB;AAAA,EAAA;AAGtD,SAAO;AAAA,IACL,YAAAZ;AAAA,IACA,YAAAM;AAAA,IACA,YAAY;AAAA,MACV,WAAW,CAACT;AAAA,MACZ,MAAM;AAAA,MACN,gBAAgBG;AAAA,MAChB,UAAUH,IAAW,KAAK;AAAA,MAC1B,iBAAiBG,IAAa,KAAO;AAAA,MACrC,iBAAiBH,IAAW,KAAO;AAAA,IAAA;AAAA,IAErC,WAAW;AAAA,MACT,aAAamB;AAAA,MACb,WAAWM;AAAA,IAAA;AAAA,EACb;AAEJ;AAKO,SAASE,EAAoC;AAAA,EAClD,IAAA7B;AAAA,EACA,UAAAE,IAAW;AAAA,EACX,UAAA4B,IAAW,MAAM;AAAA,EACjB,QAAQC;AACV,GAAyB;AACvB,QAAM,CAACC,GAAQC,CAAS,IAAI1B,EAAS,EAAK,GACpC,CAAC2B,GAAOC,CAAQ,IAAI5B,EAAS,MAAS,GACtCC,IAAUC,EAA2B,IAAI,GAEzCE,IAAaC,EAAY,CAACC,MAA6B;AAC3D,IAAAL,EAAQ,UAAUK;AAAA,EACpB,GAAG,CAAA,CAAE,GAEC;AAAA,IACJ,QAAAuB;AAAA,IACA,WAAAtB;AAAA,IACA,WAAAM;AAAA,IACA,QAAQiB;AAAA,IACR,YAAAhC;AAAA,EAAA,IACEa,EAAA,GAEEoB,IAASP,KAAcM;AAE7B,EAAAE,EAAU,MAAM;AACd,IAAIH,KAAUN,KACZK,EAASL,EAASM,CAAM,CAAC;AAAA,EAE7B,GAAG,CAACA,GAAQN,CAAQ,CAAC;AAErB,QAAMU,IAAkB5B;AAAA,IACtB,CAACU,MAAuB;AACtB,MAAIpB,MACJoB,EAAE,eAAA,GACFW,EAAU,EAAI;AAAA,IAChB;AAAA,IACA,CAAC/B,CAAQ;AAAA,EAAA,GAGLuC,IAAiB7B;AAAA,IACrB,CAACU,MAAuB;AACtB,MAAIpB,MACJoB,EAAE,eAAA,GACFA,EAAE,aAAa,aAAa;AAAA,IAC9B;AAAA,IACA,CAACpB,CAAQ;AAAA,EAAA,GAGLwC,IAAkB9B;AAAA,IACtB,CAACU,MAAuB;AACtB,MAAIpB,KAEAoB,EAAE,kBAAkBA,EAAE,UACxBW,EAAU,EAAK;AAAA,IAEnB;AAAA,IACA,CAAC/B,CAAQ;AAAA,EAAA,GAGLyC,IAAa/B;AAAA,IACjB,CAACU,MAAuB;AACtB,UAAI,CAAApB,MACJoB,EAAE,eAAA,GACE,EAACY;AAEL,YAAI;AAEF,gBAAMU,IAAWtB,EAAE,aAAa,QAAQ,kBAAkB;AAC1D,cAAIuB;AAEJ,cAAID;AACF,YAAAC,IAAc,KAAK,MAAMD,CAAQ;AAAA,mBACxBR;AAET,YAAAS,IAAcT;AAAA;AAEd;AAIF,UAAIE,KACFA,EAAOO,CAAW,GAIhBzB,KAAagB,KACfhB,EAAU;AAAA,YACR,QAAQyB;AAAA,YACR,MAAM,EAAE,IAAA7C,EAAA;AAAA,UAAG,CACZ,GAGHiC,EAAU,EAAK,GAGfnB,EAAU,IAAI;AAAA,QAChB,SAASW,GAAO;AACd,kBAAQ,MAAM,0BAA0BA,CAAK;AAAA,QAC/C;AAAA,IACF;AAAA,IACA,CAACvB,GAAUF,GAAIoC,GAAQE,GAAQlB,GAAWN,GAAWoB,CAAK;AAAA,EAAA;AAG5D,SAAO;AAAA,IACL,QAAAF;AAAA,IACA,YAAArB;AAAA,IACA,YAAY;AAAA,MACV,kBAAkB;AAAA,MAClB,aAAaqB,IAAS,KAAO;AAAA,MAC7B,iBAAiB9B,IAAW,KAAO;AAAA,MACnC,iBAAiBG,IAAa,KAAO;AAAA,MACrC,cAAc6B,IAAQ,KAAO;AAAA,IAAA;AAAA,IAE/B,OAAAA;AAAA,IACA,WAAW;AAAA,MACT,aAAaM;AAAA,MACb,YAAYC;AAAA,MACZ,aAAaC;AAAA,MACb,QAAQC;AAAA,IAAA;AAAA,EACV;AAEJ;"}

package/dist/components/drag-drop/index.d.ts

@@ -0,0 +1,26 @@
+import { DragEndEvent, DragStartEvent, Data as DragData, DragDropDraggableProps, DragDropDroppableProps, DragDropProps } from './types';
+/**
+ * The root component for the drag and drop functionality
+ */
+export declare function DragDropRoot<T extends DragData = DragData>({ children, onDragEnd: _onDragEnd, onDragStart: _onDragStart, onDrop: _onDrop, className, }: DragDropProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Drag component with subcomponents
+ */
+export declare const DragDrop: typeof DragDropRoot & {
+    /**
+     * Item that can be dragged
+     */
+    Draggable: <T extends DragData = unknown>({ id, children, className, disabled, data, style, render, onDragEnd, onDragStart, indicator, onlyIndicatorDraggable, ...rest }: DragDropDraggableProps<T>) => null;
+    /**
+     * Zone where items can be dropped
+     */
+    Droppable: <T extends DragData = unknown, M extends boolean = false>({ id, children, className, disabled, placeholder, icon, render, onDrop, validate, multiple, value, onChange, maxItems, renderValueLabel, renderValueIcon, ...rest }: DragDropDroppableProps<T, M>) => null;
+    /**
+     * Value component to display the value of the dragged item
+     */
+    Value: <T extends DragData, M extends boolean>(props: import('./types').DragDropValueProps<T, M> & {
+        ref?: import('react').ForwardedRef<HTMLDivElement>;
+    }) => ReturnType<(<T_1 extends DragData, M_1 extends boolean>({ value, onChange, multiple, renderValueLabel, renderValueIcon, className, style, maxItems, ...rest }: import('./types').DragDropValueProps<T_1, M_1>, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element)>;
+};
+export type { DragEndEvent, DragStartEvent, DragDropDraggableProps, DragDropDroppableProps, DragData, DragDropProps, };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/drag-drop/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,IAAI,IAAI,QAAQ,EAErB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AASjB,OAAO,aAAa,CAAC;AAErB;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAE,EAC1D,QAAQ,EAER,SAAS,EAAE,UAAU,EACrB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,OAAO,EACf,SAAS,GACV,EAAE,aAAa,CAAC,CAAC,CAAC,2CA6BlB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;IACnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;WAY+rD,CAAC;;CAVnsD,CAAC;AAEH,YAAY,EACV,YAAY,EACZ,cAAc,EACd,sBAAsB,EACtB,sBAAsB,EACtB,QAAQ,EACR,aAAa,GACd,CAAC"}

package/dist/components/drag-drop/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/drag-drop/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type DragEndEvent,\n  type DragStartEvent,\n  type Data as DragData,\n  type UniqueIdentifier,\n  type DragDropDraggableProps,\n  type DragDropDroppableProps,\n  type DragDropProps,\n} from \"./types\";\nimport { useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { Draggable } from \"./draggable\";\nimport { Droppable } from \"./droppable\";\nimport { Value } from \"./value\";\nimport { DragDropContext } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n/**\n * The root component for the drag and drop functionality\n */\nexport function DragDropRoot<T extends DragData = DragData>({\n  children,\n  // These callbacks are passed to child components via context\n  onDragEnd: _onDragEnd,\n  onDragStart: _onDragStart,\n  onDrop: _onDrop,\n  className,\n}: DragDropProps<T>) {\n  const cls = useCls();\n  const [active, setActive] = useState<{\n    data: T;\n    id: UniqueIdentifier;\n  } | null>(null);\n\n  const [isDragging, setIsDragging] = useState(false);\n\n  // These functions are now handled directly in the Item and DropZone components\n\n  // Create context value for child components\n  const contextValue = {\n    active,\n    setActive: (item: { data: unknown; id: UniqueIdentifier } | null) => {\n      setActive(item as { data: T; id: UniqueIdentifier } | null);\n    },\n    isDragging,\n    setIsDragging,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    onDrop: _onDrop,\n  };\n\n  return (\n    <DragDropContext.Provider value={contextValue}>\n      <div className={clsx(cls(\"drag-container\"), className)}>{children}</div>\n    </DragDropContext.Provider>\n  );\n}\n\n/**\n * Drag component with subcomponents\n */\nexport const DragDrop = Object.assign(DragDropRoot, {\n  /**\n   * Item that can be dragged\n   */\n  Draggable,\n\n  /**\n   * Zone where items can be dropped\n   */\n  Droppable,\n\n  /**\n   * Value component to display the value of the dragged item\n   */\n  Value,\n});\n\nexport type {\n  DragEndEvent,\n  DragStartEvent,\n  DragDropDraggableProps,\n  DragDropDroppableProps,\n  DragData,\n  DragDropProps,\n};\n"],"names":["DragDropRoot","children","_onDragEnd","_onDragStart","_onDrop","className","cls","useCls","active","setActive","useState","isDragging","setIsDragging","contextValue","item","DragDropContext","jsx","clsx","DragDrop","Draggable","Droppable","Value"],"mappings":";;;;;;;;;;AAwBO,SAASA,EAA4C;AAAA,EAC1D,UAAAC;AAAA;AAAA,EAEA,WAAWC;AAAA,EACX,aAAaC;AAAA,EACb,QAAQC;AAAA,EACR,WAAAC;AACF,GAAqB;AACnB,QAAMC,IAAMC,EAAO,GACb,CAACC,GAAQC,CAAS,IAAIC,EAGlB,IAAI,GAER,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAK5CG,IAAe;AAAA,IACnB,QAAAL;AAAA,IACA,WAAW,CAACM,MAAyD;AACnE,MAAAL,EAAUK,CAAgD;AAAA,IAC5D;AAAA,IACA,YAAAH;AAAA,IACA,eAAAC;AAAA,IACA,aAAaT;AAAA,IACb,WAAWD;AAAA,IACX,QAAQE;AAAA,EACV;AAEA,2BACGW,EAAgB,UAAhB,EAAyB,OAAOF,GAC/B,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAWC,EAAKX,EAAI,gBAAgB,GAAGD,CAAS,GAAI,UAAAJ,EAAS,CAAA,GACpE;AAEJ;AAKa,MAAAiB,IAAW,OAAO,OAAOlB,GAAc;AAAA;AAAA;AAAA;AAAA,EAIlD,WAAAmB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAAC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAAC;AACF,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/drag-drop/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type DragEndEvent,\n  type DragStartEvent,\n  type Data as DragData,\n  type UniqueIdentifier,\n  type DragDropDraggableProps,\n  type DragDropDroppableProps,\n  type DragDropProps,\n} from \"./types\";\nimport { useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { Draggable } from \"./draggable\";\nimport { Droppable } from \"./droppable\";\nimport { Value } from \"./value\";\nimport { DragDropContext } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n/**\n * The root component for the drag and drop functionality\n */\nexport function DragDropRoot<T extends DragData = DragData>({\n  children,\n  // These callbacks are passed to child components via context\n  onDragEnd: _onDragEnd,\n  onDragStart: _onDragStart,\n  onDrop: _onDrop,\n  className,\n}: DragDropProps<T>) {\n  const cls = useCls();\n  const [active, setActive] = useState<{\n    data: T;\n    id: UniqueIdentifier;\n  } | null>(null);\n\n  const [isDragging, setIsDragging] = useState(false);\n\n  // These functions are now handled directly in the Item and DropZone components\n\n  // Create context value for child components\n  const contextValue = {\n    active,\n    setActive: (item: { data: unknown; id: UniqueIdentifier } | null) => {\n      setActive(item as { data: T; id: UniqueIdentifier } | null);\n    },\n    isDragging,\n    setIsDragging,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    onDrop: _onDrop,\n  };\n\n  return (\n    <DragDropContext.Provider value={contextValue}>\n      <div className={clsx(cls(\"drag-container\"), className)}>{children}</div>\n    </DragDropContext.Provider>\n  );\n}\n\n/**\n * Drag component with subcomponents\n */\nexport const DragDrop = Object.assign(DragDropRoot, {\n  /**\n   * Item that can be dragged\n   */\n  Draggable,\n\n  /**\n   * Zone where items can be dropped\n   */\n  Droppable,\n\n  /**\n   * Value component to display the value of the dragged item\n   */\n  Value,\n});\n\nexport type {\n  DragEndEvent,\n  DragStartEvent,\n  DragDropDraggableProps,\n  DragDropDroppableProps,\n  DragData,\n  DragDropProps,\n};\n"],"names":["DragDropRoot","children","_onDragEnd","_onDragStart","_onDrop","className","cls","useCls","active","setActive","useState","isDragging","setIsDragging","contextValue","item","DragDropContext","jsx","clsx","DragDrop","Draggable","Droppable","Value"],"mappings":";;;;;;;;;;AAwBO,SAASA,EAA4C;AAAA,EAC1D,UAAAC;AAAA;AAAA,EAEA,WAAWC;AAAA,EACX,aAAaC;AAAA,EACb,QAAQC;AAAA,EACR,WAAAC;AACF,GAAqB;AACnB,QAAMC,IAAMC,EAAA,GACN,CAACC,GAAQC,CAAS,IAAIC,EAGlB,IAAI,GAER,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAK5CG,IAAe;AAAA,IACnB,QAAAL;AAAA,IACA,WAAW,CAACM,MAAyD;AACnE,MAAAL,EAAUK,CAAgD;AAAA,IAC5D;AAAA,IACA,YAAAH;AAAA,IACA,eAAAC;AAAA,IACA,aAAaT;AAAA,IACb,WAAWD;AAAA,IACX,QAAQE;AAAA,EAAA;AAGV,2BACGW,EAAgB,UAAhB,EAAyB,OAAOF,GAC/B,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWC,EAAKX,EAAI,gBAAgB,GAAGD,CAAS,GAAI,UAAAJ,GAAS,GACpE;AAEJ;AAKO,MAAMiB,IAAW,OAAO,OAAOlB,GAAc;AAAA;AAAA;AAAA;AAAA,EAIlD,WAAAmB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAAC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAAC;AACF,CAAC;"}