@bioturing/components 0.31.0 → 0.32.1

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;"}

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

@@ -0,0 +1,232 @@
+import { HTMLAttributes, ReactElement, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+/**
+ * Base data type for drag and drop operations
+ */
+export type UniqueIdentifier = string | number;
+export type Data = unknown;
+export type DraggableInfo<T extends Data = Data> = {
+    id: UniqueIdentifier;
+    data: T;
+};
+/**
+ * Event types for drag and drop operations
+ */
+export interface DragStartEvent<T extends Data = Data> {
+    active: {
+        id: UniqueIdentifier;
+        data: T;
+    };
+}
+export interface DragEndEvent<T extends Data = Data> {
+    active: {
+        id: UniqueIdentifier;
+        data: T;
+    };
+    over: {
+        id: UniqueIdentifier;
+    } | null;
+}
+/**
+ * Props for useDraggable hook
+ */
+export interface UseDraggableProps<T extends Data = Data> {
+    id: UniqueIdentifier;
+    data?: T;
+    disabled?: boolean;
+    onDragStart?: (event: DragStartEvent<T>) => void;
+    onDragEnd?: (event: DragEndEvent<T>) => void;
+}
+/**
+ * Props for useDroppable hook
+ */
+export interface UseDroppableProps<T extends Data = Data> {
+    id: UniqueIdentifier;
+    disabled?: boolean;
+    onDrop?: (item: DraggableInfo<T>) => void;
+    validate?: (item: DraggableInfo<T>) => boolean;
+}
+/**
+ * Function to render the item
+ */
+export type ItemRenderFn<T extends Data = Data> = (state: {
+    data: T;
+    id: UniqueIdentifier;
+}, props: HTMLAttributes<HTMLElement>) => ReactElement;
+/**
+ * Context for the Drag component to share state between components
+ */
+export interface DragDropContextType<T extends Data = Data> {
+    /**
+     * The currently active (dragging) info
+     */
+    active: DraggableInfo<T> | null;
+    /**
+     * Set the currently active info
+     */
+    setActive: (id: DraggableInfo<T> | null) => void;
+    /**
+     * Whether an item is being dragged
+     */
+    isDragging: boolean;
+    /**
+     * Set whether an item is being dragged
+     */
+    setIsDragging: (dragging: boolean) => void;
+    /**
+     * Callback fired when a drag operation starts
+     */
+    onDragStart?: (event: DragStartEvent<T>) => void;
+    /**
+     * Callback fired when a drag operation ends
+     */
+    onDragEnd?: (event: DragEndEvent<T>) => void;
+    /**
+     * Callback fired when an item is dropped on this zone
+     */
+    onDrop?: (item: DraggableInfo<T>) => void;
+}
+/**
+ * Props for the draggable item component
+ */
+export interface DragDropDraggableProps<T extends Data = Data> extends Omit<React.ComponentPropsWithoutRef<"div">, "id" | "onDragEnd" | "onDragStart"> {
+    /**
+     * Unique identifier for the draggable item
+     */
+    id: UniqueIdentifier;
+    /**
+     * Whether the item is disabled from being dragged
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Data to be passed to the drag event
+     */
+    data?: T;
+    /**
+     * Function to render the item
+     */
+    render?: useRender.RenderProp<DraggableInfo<T> & {
+        isDragging: boolean;
+    }>;
+    /**
+     * Callback fired when the drag operation ends
+     */
+    onDragEnd?: (event: DragEndEvent<T>) => void;
+    /**
+     * Callback fired when the drag operation starts
+     */
+    onDragStart?: (event: DragStartEvent<T>) => void;
+    /**
+     * Indicator to display if item is draggable
+     * @default false
+     */
+    indicator?: ReactNode | boolean;
+    /**
+     * Whether if only indicator is draggable
+     * @default false
+     */
+    onlyIndicatorDraggable?: boolean;
+}
+export type DragDropDropableRenderFnProps<T extends Data = Data, M extends boolean = false> = {
+    isOver: boolean;
+    id: UniqueIdentifier;
+    value: M extends true ? T[] : T;
+    onChange: (value: M extends true ? T[] : T) => void;
+};
+/**
+ * Props for the DropZone component
+ */
+export interface DragDropDroppableProps<T extends Data = Data, M extends boolean = false> extends Omit<React.ComponentPropsWithoutRef<"div">, "id" | "onDragEnter" | "onDragOver" | "onDragLeave" | "onDrop" | "onChange">, Omit<DragDropValueProps<T, M>, "id"> {
+    /**
+     * Unique identifier for the droppable area
+     */
+    id: UniqueIdentifier;
+    /**
+     * Whether the drop zone is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text to display when no children are provided
+     * @default "Drop items here"
+     */
+    placeholder?: ReactNode;
+    /**
+     * Icon to display when no children are provided
+     */
+    icon?: ReactNode;
+    /**
+     * Custom render function
+     */
+    render?: useRender.RenderProp<DragDropDropableRenderFnProps<T, M>>;
+    /**
+     * Callback fired when an item is dropped on this zone
+     */
+    onDrop?: (item: {
+        id: UniqueIdentifier;
+        data: T;
+    }) => void;
+    /**
+     * Validate if the item can be dropped
+     */
+    validate?: (item: DraggableInfo<T>) => boolean;
+}
+/**
+ * Props for the Drag component
+ */
+export interface DragDropProps<T extends Data = Data> {
+    /**
+     * Children of the component
+     */
+    children: ReactNode;
+    /**
+     * Callback fired when a drag operation ends
+     */
+    onDragEnd?: (event: DragEndEvent<T>) => void;
+    /**
+     * Callback fired when a drag operation starts
+     */
+    onDragStart?: (event: DragStartEvent<T>) => void;
+    /**
+     * Callback fired when an item is dropped on this zone
+     */
+    onDrop?: (item: DraggableInfo<T>) => void;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Whether to cancel drops on containers that don't handle the dropped item type
+     * @default true
+     */
+    cancelDrop?: boolean;
+}
+export interface DragDropValueProps<T extends Data = Data, M extends boolean = false> extends Omit<ComponentPropsWithoutRef<"div">, "onDragEnter" | "onDragOver" | "onDragLeave" | "onDrop" | "onChange"> {
+    /**
+     * Whether to allow multiple values
+     * @default false
+     */
+    multiple?: M;
+    /**
+     * The current value(s) of the drop zone
+     */
+    value?: M extends true ? T[] : T;
+    /**
+     * Callback fired when the value changes
+     */
+    onChange?: M extends true ? (value: T[]) => void : (value: T) => void;
+    /**
+     * Function to render the label for a single value
+     */
+    renderValueLabel?: (singleValue: T) => ReactElement | string;
+    /**
+     * Function to render the icon for a single value
+     */
+    renderValueIcon?: (singleValue: T) => ReactElement;
+    /**
+     * Maximum number of items that can be dropped
+     */
+    maxItems?: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { ForwardedRef } from 'react';
+import { DragDropValueProps, Data } from './types';
+declare function ValueInner<T extends Data, M extends boolean>({ value, onChange, multiple, renderValueLabel, renderValueIcon, className, style, maxItems, ...rest }: DragDropValueProps<T, M>, ref: ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const Value: <T extends Data, M extends boolean>(props: DragDropValueProps<T, M> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof ValueInner>;
+export {};
+//# sourceMappingURL=value.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/value.tsx"],"names":[],"mappings":"AAGA,OAAO,EAKL,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,kBAAkB,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAGxD,iBAAS,UAAU,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,OAAO,EACnD,EACE,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EAC3B,GAAG,EAAE,YAAY,CAAC,cAAc,CAAC,2CAwHlC;AAED,eAAO,MAAM,KAAK,EAAmC,CACnD,CAAC,SAAS,IAAI,EACd,CAAC,SAAS,OAAO,EAEjB,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACrE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}

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

@@ -1,78 +1,78 @@
 "use client";
-import { jsx as o, jsxs as T, Fragment as R } from "react/jsx-runtime";
-import { FileIcon as h, XIcon as q } from "@bioturing/assets";
-import { isEqual as x } from "es-toolkit";
-import { memo as y, forwardRef as B, useState as X, useCallback as t, cloneElement as v } from "react";
-import { Stack as A } from "../stack/index.js";
-import D from "merge-refs";
-import { Tag as G } from "../tag/component.js";
-import { useCls as H } from "../utils/antdUtils.js";
-import { Truncate as J } from "../truncate/component.js";
-import { IconButton as K } from "../icon-button/component.js";
-function L({
+import { jsx as o, jsxs as I, Fragment as h } from "react/jsx-runtime";
+import { FileIcon as M, XIcon as T } from "@bioturing/assets";
+import { isEqual as q } from "es-toolkit";
+import { memo as x, forwardRef as y, useState as B, useCallback as n, cloneElement as C } from "react";
+import { Stack as X } from "../stack/index.js";
+import v from "merge-refs";
+import { Tag as A } from "../tag/component.js";
+import { useCls as D } from "../utils/antdUtils.js";
+import { Truncate as G } from "../truncate/component.js";
+import { IconButton as H } from "../icon-button/component.js";
+function J({
   value: s,
-  onChange: n,
-  multiple: l,
+  onChange: c,
+  multiple: t,
   renderValueLabel: d,
   renderValueIcon: f,
-  className: E,
-  style: N,
+  className: R,
+  style: E,
   maxItems: m,
-  ...S
-}, k) {
-  const c = H(), [u, j] = X(null), w = t((r) => {
-    j(r);
-  }, []), i = t(
-    (r) => {
-      const e = d(r);
-      return typeof e == "string" ? /* @__PURE__ */ o(
-        J,
+  ...N
+}, S) {
+  const l = D(), [u, k] = B(null), g = n((e) => {
+    k(e);
+  }, []), i = n(
+    (e) => {
+      const r = d(e);
+      return typeof r == "string" ? /* @__PURE__ */ o(
+        G,
         {
           position: "middle",
-          className: c("dropzone-value-label"),
+          className: l("dropzone-value-label"),
           container: u,
-          children: e
+          children: r
         }
-      ) : /* @__PURE__ */ o("span", { className: c("dropzone-value-label"), children: e });
+      ) : /* @__PURE__ */ o("span", { className: l("dropzone-value-label"), children: r });
     },
-    [c, u, d]
-  ), a = t(
-    (r) => v(f(r) || /* @__PURE__ */ o(h, {}), {
-      className: c("dropzone-value-icon")
+    [l, u, d]
+  ), a = n(
+    (e) => C(f(e) || /* @__PURE__ */ o(M, {}), {
+      className: l("dropzone-value-icon")
     }),
-    [c, f]
-  ), b = t(
-    (r) => {
-      n(
-        s.filter((e) => !x(e, r))
+    [l, f]
+  ), b = n(
+    (e) => {
+      c(
+        s.filter((r) => !q(r, e))
       );
     },
-    [n, s]
-  ), z = t(() => {
-    l ? n([]) : n == null || n(null);
-  }, [n, l]), p = t(
-    (r) => {
-      const e = i(r);
-      return /* @__PURE__ */ T(R, { children: [
-        a(r),
-        e,
-        /* @__PURE__ */ o(K, { size: "small", onClick: z, children: /* @__PURE__ */ o(q, {}) })
+    [c, s]
+  ), z = n(() => {
+    t ? c([]) : c?.(null);
+  }, [c, t]), p = n(
+    (e) => {
+      const r = i(e);
+      return /* @__PURE__ */ I(h, { children: [
+        a(e),
+        r,
+        /* @__PURE__ */ o(H, { size: "small", onClick: z, children: /* @__PURE__ */ o(T, {}) })
       ] });
     },
     [i, a, z]
-  ), F = t(
-    (r) => m == 1 ? p(r[0]) : /* @__PURE__ */ o(R, { children: (r || []).map((e, I) => {
-      const M = i(e);
+  ), j = n(
+    (e) => m == 1 ? p(e[0]) : /* @__PURE__ */ o(h, { children: (e || []).map((r, w) => {
+      const F = i(r);
       return /* @__PURE__ */ o(
-        G,
+        A,
         {
-          icon: a(e),
+          icon: a(r),
           size: "large",
           closable: !0,
-          onClose: () => b(e),
-          children: M
+          onClose: () => b(r),
+          children: F
         },
-        I
+        w
       );
     }) }),
     [
@@ -84,25 +84,25 @@ function L({
     ]
   );
   return /* @__PURE__ */ o(
-    A,
+    X,
     {
-      ref: D(k, w),
-      gap: l ? 4 : 8,
+      ref: v(S, g),
+      gap: t ? 4 : 8,
       align: "center",
-      wrap: l && m !== 1,
-      className: c(
+      wrap: t && m !== 1,
+      className: l(
         "dropzone-value",
-        l && "dropzone-value-multiple",
-        E
+        t && "dropzone-value-multiple",
+        R
       ),
-      style: N,
-      ...S,
-      children: l ? F(s) : p(s)
+      style: E,
+      ...N,
+      children: t ? j(s) : p(s)
     }
   );
 }
-const g = y(B(L));
+const $ = x(y(J));
 export {
-  g as Value
+  $ as Value
 };
 //# sourceMappingURL=value.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"value.js","sources":["../../../src/components/drag-drop/value.tsx"],"sourcesContent":["\"use client\";\nimport { FileIcon, XIcon } from \"@bioturing/assets\";\nimport { isEqual } from \"es-toolkit\";\nimport {\n  cloneElement,\n  forwardRef,\n  memo,\n  useCallback,\n  type ForwardedRef,\n  useState,\n} from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport { Stack } from \"../stack\";\nimport { Tag } from \"../tag\";\nimport { Truncate } from \"../truncate\";\nimport { useCls } from \"../utils\";\nimport { DragDropValueProps, type Data } from \"./types\";\nimport mergeRefs from \"merge-refs\";\n\nfunction ValueInner<T extends Data, M extends boolean>(\n  {\n    value,\n    onChange,\n    multiple,\n    renderValueLabel,\n    renderValueIcon,\n    className,\n    style,\n    maxItems,\n    ...rest\n  }: DragDropValueProps<T, M>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const cls = useCls();\n\n  // todo: make this as reusable hook\n  const [containerEl, setContainerEl] = useState<HTMLDivElement>(null);\n  const containerRef = useCallback((el: HTMLDivElement | null) => {\n    setContainerEl(el);\n  }, []);\n\n  const renderLabel = useCallback(\n    (value: T) => {\n      const label = renderValueLabel(value);\n      return typeof label === \"string\" ? (\n        <Truncate\n          position=\"middle\"\n          className={cls(\"dropzone-value-label\")}\n          container={containerEl}\n        >\n          {label}\n        </Truncate>\n      ) : (\n        <span className={cls(\"dropzone-value-label\")}>{label}</span>\n      );\n    },\n    [cls, containerEl, renderValueLabel]\n  );\n\n  const renderedValueIcon = useCallback(\n    (value: T) => {\n      return cloneElement(renderValueIcon(value) || <FileIcon />, {\n        className: cls(\"dropzone-value-icon\"),\n      });\n    },\n    [cls, renderValueIcon]\n  );\n\n  const handleResetMultiple = useCallback(\n    (singleValue: T) => {\n      (onChange as (value: T[]) => void)(\n        (value as T[]).filter((v) => !isEqual(v, singleValue))\n      );\n    },\n    [onChange, value]\n  );\n\n  const handleResetSingle = useCallback(() => {\n    if (multiple) {\n      (onChange as (value: T[]) => void)([] as T[]);\n    } else {\n      onChange?.(null);\n    }\n  }, [onChange, multiple]);\n\n  const renderSingle = useCallback(\n    (value: T) => {\n      const label = renderLabel(value as T);\n      return (\n        <>\n          {renderedValueIcon(value as T)}\n          {label}\n          <IconButton size=\"small\" onClick={handleResetSingle}>\n            <XIcon />\n          </IconButton>\n        </>\n      );\n    },\n    [renderLabel, renderedValueIcon, handleResetSingle]\n  );\n\n  const renderMultiple = useCallback(\n    (value: T[]) => {\n      if (maxItems == 1) {\n        return renderSingle(value[0]);\n      }\n      return (\n        <>\n          {((value as T[]) || []).map((singleValue, index) => {\n            const label = renderLabel(singleValue);\n            return (\n              <Tag\n                key={index}\n                icon={renderedValueIcon(singleValue)}\n                size=\"large\"\n                closable\n                onClose={() => handleResetMultiple(singleValue)}\n              >\n                {label}\n              </Tag>\n            );\n          })}\n        </>\n      );\n    },\n    [\n      renderLabel,\n      renderedValueIcon,\n      maxItems,\n      renderSingle,\n      handleResetMultiple,\n    ]\n  );\n\n  return (\n    <Stack\n      ref={mergeRefs(ref, containerRef)}\n      gap={multiple ? 4 : 8}\n      align=\"center\"\n      wrap={multiple && maxItems !== 1}\n      className={cls(\n        \"dropzone-value\",\n        multiple && \"dropzone-value-multiple\",\n        className\n      )}\n      style={style}\n      {...rest}\n    >\n      {multiple ? renderMultiple(value as T[]) : renderSingle(value as T)}\n    </Stack>\n  );\n}\n\nexport const Value = memo(forwardRef(ValueInner)) as <\n  T extends Data,\n  M extends boolean\n>(\n  props: DragDropValueProps<T, M> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof ValueInner>;\n"],"names":["ValueInner","value","onChange","multiple","renderValueLabel","renderValueIcon","className","style","maxItems","rest","ref","cls","useCls","containerEl","setContainerEl","useState","containerRef","useCallback","el","renderLabel","label","jsx","Truncate","renderedValueIcon","cloneElement","FileIcon","handleResetMultiple","singleValue","v","isEqual","handleResetSingle","renderSingle","jsxs","Fragment","IconButton","XIcon","renderMultiple","index","Tag","Stack","mergeRefs","Value","memo","forwardRef"],"mappings":"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"}
+{"version":3,"file":"value.js","sources":["../../../src/components/drag-drop/value.tsx"],"sourcesContent":["\"use client\";\nimport { FileIcon, XIcon } from \"@bioturing/assets\";\nimport { isEqual } from \"es-toolkit\";\nimport {\n  cloneElement,\n  forwardRef,\n  memo,\n  useCallback,\n  type ForwardedRef,\n  useState,\n} from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport { Stack } from \"../stack\";\nimport { Tag } from \"../tag\";\nimport { Truncate } from \"../truncate\";\nimport { useCls } from \"../utils\";\nimport { DragDropValueProps, type Data } from \"./types\";\nimport mergeRefs from \"merge-refs\";\n\nfunction ValueInner<T extends Data, M extends boolean>(\n  {\n    value,\n    onChange,\n    multiple,\n    renderValueLabel,\n    renderValueIcon,\n    className,\n    style,\n    maxItems,\n    ...rest\n  }: DragDropValueProps<T, M>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const cls = useCls();\n\n  // todo: make this as reusable hook\n  const [containerEl, setContainerEl] = useState<HTMLDivElement>(null);\n  const containerRef = useCallback((el: HTMLDivElement | null) => {\n    setContainerEl(el);\n  }, []);\n\n  const renderLabel = useCallback(\n    (value: T) => {\n      const label = renderValueLabel(value);\n      return typeof label === \"string\" ? (\n        <Truncate\n          position=\"middle\"\n          className={cls(\"dropzone-value-label\")}\n          container={containerEl}\n        >\n          {label}\n        </Truncate>\n      ) : (\n        <span className={cls(\"dropzone-value-label\")}>{label}</span>\n      );\n    },\n    [cls, containerEl, renderValueLabel]\n  );\n\n  const renderedValueIcon = useCallback(\n    (value: T) => {\n      return cloneElement(renderValueIcon(value) || <FileIcon />, {\n        className: cls(\"dropzone-value-icon\"),\n      });\n    },\n    [cls, renderValueIcon]\n  );\n\n  const handleResetMultiple = useCallback(\n    (singleValue: T) => {\n      (onChange as (value: T[]) => void)(\n        (value as T[]).filter((v) => !isEqual(v, singleValue))\n      );\n    },\n    [onChange, value]\n  );\n\n  const handleResetSingle = useCallback(() => {\n    if (multiple) {\n      (onChange as (value: T[]) => void)([] as T[]);\n    } else {\n      onChange?.(null);\n    }\n  }, [onChange, multiple]);\n\n  const renderSingle = useCallback(\n    (value: T) => {\n      const label = renderLabel(value as T);\n      return (\n        <>\n          {renderedValueIcon(value as T)}\n          {label}\n          <IconButton size=\"small\" onClick={handleResetSingle}>\n            <XIcon />\n          </IconButton>\n        </>\n      );\n    },\n    [renderLabel, renderedValueIcon, handleResetSingle]\n  );\n\n  const renderMultiple = useCallback(\n    (value: T[]) => {\n      if (maxItems == 1) {\n        return renderSingle(value[0]);\n      }\n      return (\n        <>\n          {((value as T[]) || []).map((singleValue, index) => {\n            const label = renderLabel(singleValue);\n            return (\n              <Tag\n                key={index}\n                icon={renderedValueIcon(singleValue)}\n                size=\"large\"\n                closable\n                onClose={() => handleResetMultiple(singleValue)}\n              >\n                {label}\n              </Tag>\n            );\n          })}\n        </>\n      );\n    },\n    [\n      renderLabel,\n      renderedValueIcon,\n      maxItems,\n      renderSingle,\n      handleResetMultiple,\n    ]\n  );\n\n  return (\n    <Stack\n      ref={mergeRefs(ref, containerRef)}\n      gap={multiple ? 4 : 8}\n      align=\"center\"\n      wrap={multiple && maxItems !== 1}\n      className={cls(\n        \"dropzone-value\",\n        multiple && \"dropzone-value-multiple\",\n        className\n      )}\n      style={style}\n      {...rest}\n    >\n      {multiple ? renderMultiple(value as T[]) : renderSingle(value as T)}\n    </Stack>\n  );\n}\n\nexport const Value = memo(forwardRef(ValueInner)) as <\n  T extends Data,\n  M extends boolean\n>(\n  props: DragDropValueProps<T, M> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof ValueInner>;\n"],"names":["ValueInner","value","onChange","multiple","renderValueLabel","renderValueIcon","className","style","maxItems","rest","ref","cls","useCls","containerEl","setContainerEl","useState","containerRef","useCallback","el","renderLabel","label","jsx","Truncate","renderedValueIcon","cloneElement","FileIcon","handleResetMultiple","singleValue","v","isEqual","handleResetSingle","renderSingle","jsxs","Fragment","IconButton","XIcon","renderMultiple","index","Tag","Stack","mergeRefs","Value","memo","forwardRef"],"mappings":"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"}

package/dist/components/dropdown-menu/component.d.ts

@@ -0,0 +1,79 @@
+import { Menu } from '@base-ui-components/react/menu';
+import { PopoverProps } from 'antd/es/popover';
+import { Command } from '../cmdk';
+import { PopupPanelSize } from '../popup-panel/constants';
+import { DropdownMenuItemType } from './types';
+import { UseDropdownMenuProps } from './useDropdownMenu';
+export interface DropdownMenuProps extends Omit<UseDropdownMenuProps, "classNames"> {
+    /** Array of menu items to be displayed in the dropdown */
+    items: DropdownMenuItemType[];
+    /** Custom render function for the trigger element */
+    children?: React.ComponentProps<typeof Menu.Trigger>["render"];
+    /**
+     * Placement of the dropdown relative to the trigger element
+     * @default "bottomLeft"
+     */
+    placement?: PopoverProps["placement"];
+    /**
+     * Whether to open the dropdown on hover instead of click
+     * @default false
+     */
+    openOnHover?: boolean;
+    /**
+     * Controlled open state of the dropdown
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the dropdown open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Default open state of the dropdown
+     */
+    defaultOpen?: boolean;
+    /**
+     * Additional CSS class for the dropdown component
+     */
+    className?: string;
+    /**
+     * Custom class names for different parts of the dropdown
+     * @default {}
+     */
+    classNames?: {
+        root?: string;
+        trigger?: string;
+        popup?: string;
+        itemIcon?: string;
+        itemText?: string;
+        positioner?: string;
+    } & UseDropdownMenuProps["classNames"];
+    /**
+     * Whether to show search input
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * Size of the dropdown menu
+     * @default "auto"
+     */
+    size?: "auto" | keyof typeof PopupPanelSize;
+    /**
+     * Search placeholder
+     */
+    searchProps?: Omit<React.ComponentProps<typeof Command.Input>, "size" | "ref">;
+    /**
+     * Whether to match the width of the popup with the trigger
+     * @default false
+     */
+    popupMatchTriggerWidth?: boolean;
+    /**
+     * Content to display before the list
+     */
+    beforeList?: React.ReactNode;
+    /**
+     * Content to display after the list
+     */
+    afterList?: React.ReactNode;
+}
+export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, defaultOpen, className, itemRender, classNames, size, showSearch, inCombobox: inComboboxProp, searchProps, popupMatchTriggerWidth, beforeList, afterList, keepOpenOnSelect, highlightedItemKey, selectedItemKeys, getItemKeywords, showCheckbox, itemLabelRender, }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=component.d.ts.map

package/dist/components/dropdown-menu/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAEtD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AASpD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAMlC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG1E,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,YAAY,CAAC;IAChD,0DAA0D;IAC1D,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC/D;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAEvC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,OAAO,cAAc,CAAC;IAC5C;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,CAChB,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,EAC1C,MAAM,GAAG,KAAK,CACf,CAAC;IACF;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,GAAI,sWA0B1B,iBAAiB,4CA4InB,CAAC"}