@bioturing/components 0.26.2 → 0.28.1

package/dist/components/resizable/component.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import T, { useState as R, useCallback as U, useEffect as W, isValidElement as X } from "react";
+import { useResizable as Y } from "react-use-resizable";
+import Z from "merge-refs";
+import { mergeProps as K } from "@base-ui-components/react";
+import './style.css';/* empty css          */
+import { getReactElementProp as x } from "../utils/reactElement.js";
+import { useCls as A } from "../utils/antdUtils.js";
+import { clsx as h, cn as s } from "../utils/cn.js";
+import { WithRenderProp as a } from "../utils/WithRenderProp.js";
+const ue = ({
+  children: p,
+  resizable: c = !1,
+  handles: o = { bottom: !0, right: !0, left: !0, top: !0 },
+  absolutePositioning: V = !1,
+  classNames: t,
+  className: m,
+  style: I,
+  resetKey: B,
+  maxWidth: _,
+  maxHeight: $,
+  minWidth: j,
+  minHeight: q,
+  onResize: F,
+  maintainAspectRatio: r = !1,
+  ...N
+}) => {
+  const l = A(), [u, G] = R(null), [b, v] = R(), [H, y] = R(), [P, D] = R(!1), J = U(
+    (e) => {
+      if (G(e), e && !b && !H) {
+        const i = e.getBoundingClientRect();
+        i.width > 0 && i.height > 0 && r && (v(i.width), y(i.height));
+      }
+    },
+    [b, H, r]
+  );
+  W(() => {
+    if (B !== void 0 && u) {
+      u.style.width = "", u.style.height = "";
+      const e = u.getBoundingClientRect();
+      e.width > 0 && e.height > 0 && (r ? (v(e.width), y(e.height)) : (v(void 0), y(void 0)));
+    }
+  }, [B, u, r]);
+  const w = Y({
+    initialWidth: r ? b : void 0,
+    initialHeight: r ? H : void 0,
+    maxWidth: _,
+    maxHeight: $,
+    minWidth: j,
+    minHeight: q,
+    onResize: F,
+    maintainAspectRatio: r,
+    onDragStart: () => {
+      if (D(!0), u) {
+        const e = u.getBoundingClientRect();
+        e.width > 0 && !b && v(e.width), e.height > 0 && !H && y(e.height);
+      }
+    },
+    onDragEnd: () => D(!1)
+  }), S = X(p);
+  W(() => {
+    P ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
+  }, [P]);
+  const { ref: L, ...M } = w.getRootProps(), d = w.getHandleProps, g = w.rootRef, C = (e, i) => {
+    if (!e.current || !V) return;
+    const { widthDiff: E } = i;
+    e.current.style.left = `${parseInt(e.current.style.left || "0") - E}px`;
+  }, k = (e, i) => {
+    if (!e.current || !V) return;
+    const { heightDiff: E } = i;
+    e.current.style.top = `${parseInt(e.current.style.top || "0") - E}px`;
+  }, O = c ? [
+    o.top && !r && /* @__PURE__ */ n(
+      "div",
+      {
+        className: h(
+          l("resizable-resize-handle"),
+          t == null ? void 0 : t.resizeHandle
+        ),
+        "data-placement": "top-center",
+        ...d({
+          reverse: !0,
+          lockHorizontal: !0,
+          onResize: (e) => k(g, e)
+        })
+      },
+      "top"
+    ),
+    o.bottom && !r && /* @__PURE__ */ n(
+      "div",
+      {
+        className: h(
+          l("resizable-resize-handle"),
+          t == null ? void 0 : t.resizeHandle
+        ),
+        "data-placement": "bottom-left",
+        ...d({
+          lockHorizontal: !0
+        })
+      },
+      "bottom"
+    ),
+    o.left && !r && /* @__PURE__ */ n(
+      "div",
+      {
+        className: h(
+          l("resizable-resize-handle"),
+          t == null ? void 0 : t.resizeHandle
+        ),
+        "data-placement": "top-left",
+        ...d({
+          reverse: !0,
+          lockVertical: !0,
+          onResize: (e) => C(g, e)
+        })
+      },
+      "left"
+    ),
+    o.right && !r && /* @__PURE__ */ n(
+      "div",
+      {
+        className: h(
+          l("resizable-resize-handle"),
+          t == null ? void 0 : t.resizeHandle
+        ),
+        "data-placement": "top-right",
+        ...d({
+          lockVertical: !0
+        })
+      },
+      "right"
+    ),
+    // For aspect ratio maintenance, add corner handles that can resize both dimensions
+    o.right && o.bottom && /* @__PURE__ */ n(
+      "div",
+      {
+        className: h(
+          l("resizable-resize-handle"),
+          t == null ? void 0 : t.resizeHandle
+        ),
+        "data-placement": "bottom-right-corner",
+        ...d({
+          // No locks - allow both horizontal and vertical resizing
+        })
+      },
+      "bottom-right-corner"
+    ),
+    r && o.left && o.bottom && /* @__PURE__ */ n(
+      "div",
+      {
+        className: h(
+          l("resizable-resize-handle"),
+          t == null ? void 0 : t.resizeHandle
+        ),
+        "data-placement": "bottom-left-corner",
+        ...d({
+          reverse: !0,
+          onResize: (e) => C(g, e)
+        })
+      },
+      "bottom-left-corner"
+    ),
+    r && o.right && o.top && /* @__PURE__ */ n(
+      "div",
+      {
+        className: h(
+          l("resizable-resize-handle"),
+          t == null ? void 0 : t.resizeHandle
+        ),
+        "data-placement": "top-right-corner",
+        ...d({
+          reverse: !0,
+          onResize: (e) => k(g, e)
+        })
+      },
+      "top-right-corner"
+    ),
+    o.left && o.top && /* @__PURE__ */ n(
+      "div",
+      {
+        className: h(
+          l("resizable-resize-handle"),
+          t == null ? void 0 : t.resizeHandle
+        ),
+        "data-placement": "top-left-corner",
+        ...d({
+          reverse: !0,
+          onResize: (e) => {
+            C(g, e), k(g, e);
+          }
+        })
+      },
+      "top-left-corner"
+    )
+  ] : [], f = p, z = {
+    className: x(f, "className"),
+    style: x(f, "style"),
+    children: x(f, "children"),
+    ref: f.ref
+  }, Q = {
+    className: s(
+      c && l("resizable"),
+      t == null ? void 0 : t.root,
+      z.className,
+      m
+    ),
+    ref: Z(
+      c ? L : void 0,
+      J,
+      // Always need this for dimension measurement
+      f == null ? void 0 : f.ref
+    ),
+    style: { ...z.style, ...I },
+    ...P ? { "data-resizing": !0 } : {},
+    ...c ? { "data-resizable": !0 } : {},
+    children: S ? [
+      ...Array.isArray(z.children) ? z.children : [z.children],
+      ...O.filter(Boolean)
+    ] : p
+  };
+  return /* @__PURE__ */ n(
+    a,
+    {
+      render: (e) => {
+        const i = K(
+          e,
+          Q,
+          c ? M : {}
+        );
+        return S ? T.cloneElement(f, i) : /* @__PURE__ */ n("div", { ...i, children: p });
+      }
+    }
+  );
+};
+export {
+  ue as Resizable
+};
+//# sourceMappingURL=component.js.map

package/dist/components/resizable/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/components/resizable/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState, isValidElement } from \"react\";\nimport { useResizable, type MoveValues } from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\nimport {\n  useCls,\n  clsx,\n  WithRenderProp,\n  WithRenderPropProps,\n  cn,\n  getReactElementProp,\n} from \"../utils\";\nimport { mergeProps } from \"@base-ui-components/react\";\n\nimport \"./style.css\";\n\nexport interface ResizableProps extends WithRenderPropProps {\n  /**\n   * Single React element child that will be enhanced with resize handles\n   */\n  children: React.ReactNode;\n  /**\n   * Whether the component should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Configure which resize handles to show\n   * @default { bottom: true, right: true, left: true, top: true }\n   */\n  handles?: {\n    bottom?: boolean;\n    right?: boolean;\n    left?: boolean;\n    top?: boolean;\n  };\n  /**\n   * Whether to use absolute positioning for left handle resizing\n   * Set to true when used in absolutely positioned containers like PopupPanel\n   * @default false\n   */\n  absolutePositioning?: boolean;\n  /**\n   * Custom class names for different parts of the resizable component\n   */\n  classNames?: {\n    root?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Key to reset dimensions to current element size\n   * When this value changes, the component will recalculate its dimensions\n   * Similar to React's key prop pattern for forcing component resets\n   */\n  resetKey?: React.Key;\n  /**\n   * Maximum width the component can be resized to\n   */\n  maxWidth?: number;\n  /**\n   * Maximum height the component can be resized to\n   */\n  maxHeight?: number;\n  /**\n   * Minimum width the component can be resized to\n   */\n  minWidth?: number;\n  /**\n   * Minimum height the component can be resized to\n   */\n  minHeight?: number;\n  /**\n   * Callback fired during resize operations\n   */\n  onResize?: (values: MoveValues) => void;\n  /**\n   * Whether to maintain aspect ratio during resize\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n}\n\nexport const Resizable = ({\n  children,\n  resizable = false,\n  handles = { bottom: true, right: true, left: true, top: true },\n  absolutePositioning = false,\n  classNames,\n  className: containerClassName,\n  style: containerStyle,\n  resetKey,\n  maxWidth,\n  maxHeight,\n  minWidth,\n  minHeight,\n  onResize,\n  maintainAspectRatio = false,\n  ...rest\n}: ResizableProps) => {\n  // Validate that children is a single React element\n  // if (!isValidElement(children)) {\n  //   throw new Error(\n  //     \"Resizable component expects a single React element as children\"\n  //   );\n  // }\n\n  const cls = useCls();\n  const [panelRef, setPanelRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const [resizing, setResizing] = useState(false);\n\n  const callbackRef = useCallback(\n    (node: HTMLDivElement) => {\n      setPanelRef(node);\n\n      // Get initial dimensions only once when ref is set\n      // For aspect ratio maintenance, we need initial dimensions immediately\n      // Otherwise, preserve natural width/height behavior\n      if (node && !width && !height) {\n        const rect = node.getBoundingClientRect();\n        if (rect.width > 0 && rect.height > 0) {\n          if (maintainAspectRatio) {\n            // Need dimensions for aspect ratio calculation\n            setWidth(rect.width);\n            setHeight(rect.height);\n          }\n          // For non-aspect-ratio cases, don't set dimensions to preserve natural behavior\n        }\n      }\n    },\n    [width, height, maintainAspectRatio]\n  );\n\n  // Reset dimensions when resetKey changes\n  useEffect(() => {\n    if (resetKey !== undefined && panelRef) {\n      // Clear the hook's inline styles to reset to natural size\n      panelRef.style.width = \"\";\n      panelRef.style.height = \"\";\n\n      // Force a reflow to get natural dimensions\n      const rect = panelRef.getBoundingClientRect();\n\n      if (rect.width > 0 && rect.height > 0) {\n        if (maintainAspectRatio) {\n          // For aspect ratio maintenance, re-measure and set dimensions\n          setWidth(rect.width);\n          setHeight(rect.height);\n        } else {\n          // Reset state to allow natural dimensions again\n          setWidth(undefined);\n          setHeight(undefined);\n        }\n\n        // Don't apply any explicit dimensions - let them remain natural\n        // panelRef.style.width = `${rect.width}px`;\n        // panelRef.style.height = `${rect.height}px`;\n      }\n    }\n  }, [resetKey, panelRef, maintainAspectRatio]);\n\n  // Initialize useResizable with current dimensions (or undefined if not ready)\n  // For aspect ratio maintenance, we need initial dimensions\n  // Otherwise, preserve natural width/height behavior until user starts resizing\n  const resizableHook = useResizable({\n    initialWidth: maintainAspectRatio ? width : undefined,\n    initialHeight: maintainAspectRatio ? height : undefined,\n    maxWidth,\n    maxHeight,\n    minWidth,\n    minHeight,\n    onResize,\n    maintainAspectRatio,\n    onDragStart: () => {\n      setResizing(true);\n      // Capture natural dimensions when user starts resizing\n      if (panelRef) {\n        const rect = panelRef.getBoundingClientRect();\n        if (rect.width > 0 && !width) {\n          setWidth(rect.width);\n        }\n        if (rect.height > 0 && !height) {\n          setHeight(rect.height);\n        }\n      }\n    },\n    onDragEnd: () => setResizing(false),\n  });\n\n  const isChildrenValidElement = isValidElement(children);\n\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n\n  // Get resizable props - useResizable hook handles cases where dimensions aren't ready\n  const { ref: rootRefProp, ...rootPropsWithoutRef } =\n    resizableHook.getRootProps();\n  const getHandleProps = resizableHook.getHandleProps;\n  const rootRef = resizableHook.rootRef;\n\n  // Handle reverse handle change for horizontal resizing (only for absolute positioning)\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current || !absolutePositioning) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  // Handle reverse handle change for vertical resizing (only for absolute positioning)\n  const onReverseHandleChangeVertical = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current || !absolutePositioning) return;\n    const { heightDiff } = values;\n    parent.current.style.top = `${\n      parseInt(parent.current.style.top || \"0\") - heightDiff\n    }px`;\n  };\n\n  const resizeHandles = resizable\n    ? [\n        handles.top && !maintainAspectRatio && (\n          <div\n            key=\"top\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-center\"\n            {...getHandleProps({\n              reverse: true,\n              lockHorizontal: true,\n              onResize: (values) =>\n                onReverseHandleChangeVertical(rootRef, values),\n            })}\n          />\n        ),\n        handles.bottom && !maintainAspectRatio && (\n          <div\n            key=\"bottom\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"bottom-left\"\n            {...getHandleProps({\n              lockHorizontal: true,\n            })}\n          />\n        ),\n        handles.left && !maintainAspectRatio && (\n          <div\n            key=\"left\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-left\"\n            {...getHandleProps({\n              reverse: true,\n              lockVertical: true,\n              onResize: (values) =>\n                onReverseHandleChangeHorizontal(rootRef, values),\n            })}\n          />\n        ),\n        handles.right && !maintainAspectRatio && (\n          <div\n            key=\"right\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-right\"\n            {...getHandleProps({\n              lockVertical: true,\n            })}\n          />\n        ),\n        // For aspect ratio maintenance, add corner handles that can resize both dimensions\n        handles.right && handles.bottom && (\n          <div\n            key=\"bottom-right-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"bottom-right-corner\"\n            {...getHandleProps({\n              // No locks - allow both horizontal and vertical resizing\n            })}\n          />\n        ),\n        maintainAspectRatio && handles.left && handles.bottom && (\n          <div\n            key=\"bottom-left-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"bottom-left-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) =>\n                onReverseHandleChangeHorizontal(rootRef, values),\n            })}\n          />\n        ),\n        maintainAspectRatio && handles.right && handles.top && (\n          <div\n            key=\"top-right-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-right-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) =>\n                onReverseHandleChangeVertical(rootRef, values),\n            })}\n          />\n        ),\n        handles.left && handles.top && (\n          <div\n            key=\"top-left-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle\n            )}\n            data-placement=\"top-left-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) => {\n                onReverseHandleChangeHorizontal(rootRef, values);\n                onReverseHandleChangeVertical(rootRef, values);\n              },\n            })}\n          />\n        ),\n      ]\n    : [];\n\n  const childElement = children as React.ReactElement & {\n    ref?: React.Ref<HTMLDivElement>;\n  };\n\n  const childElementProps = {\n    className: getReactElementProp<string>(childElement, \"className\"),\n    style: getReactElementProp<React.CSSProperties>(childElement, \"style\"),\n    children: getReactElementProp<React.ReactNode>(childElement, \"children\"),\n    ref: childElement.ref,\n  };\n\n  const childProps = {\n    className: cn(\n      resizable && cls(\"resizable\"),\n      classNames?.root,\n      childElementProps.className,\n      containerClassName\n    ),\n    ref: mergeRefs(\n      resizable ? rootRefProp : undefined,\n      callbackRef, // Always need this for dimension measurement\n      childElement?.ref\n    ),\n    style: { ...childElementProps.style, ...containerStyle },\n    ...(resizing ? { \"data-resizing\": true } : {}),\n    ...(resizable ? { \"data-resizable\": true } : {}),\n    children: isChildrenValidElement\n      ? [\n          ...(Array.isArray(childElementProps.children)\n            ? childElementProps.children\n            : [childElementProps.children]),\n          ...resizeHandles.filter(Boolean),\n        ]\n      : children,\n  };\n\n  return (\n    <WithRenderProp\n      render={(props) => {\n        // Merge the props from WithRenderProp with our childProps\n        const mergedProps = mergeProps(\n          props,\n          childProps,\n          resizable ? rootPropsWithoutRef : {}\n        );\n        if (isChildrenValidElement) {\n          return React.cloneElement(childElement, mergedProps);\n        } else {\n          return <div {...mergedProps}>{children}</div>;\n        }\n      }}\n    />\n  );\n};\n"],"names":["Resizable","children","resizable","handles","absolutePositioning","classNames","containerClassName","containerStyle","resetKey","maxWidth","maxHeight","minWidth","minHeight","onResize","maintainAspectRatio","rest","cls","useCls","panelRef","setPanelRef","useState","width","setWidth","height","setHeight","resizing","setResizing","callbackRef","useCallback","node","rect","useEffect","resizableHook","useResizable","isChildrenValidElement","isValidElement","rootRefProp","rootPropsWithoutRef","getHandleProps","rootRef","onReverseHandleChangeHorizontal","parent","values","widthDiff","onReverseHandleChangeVertical","heightDiff","resizeHandles","jsx","clsx","childElement","childElementProps","getReactElementProp","childProps","cn","mergeRefs","WithRenderProp","props","mergedProps","mergeProps","React"],"mappings":"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"}

package/dist/components/resizable/style.css

@@ -0,0 +1 @@
+@layer components{.ds-resizable{position:relative}.ds-resizable-resize-handle{position:absolute;padding:.5rem;color:#fff;display:block}.ds-resizable-resize-handle[data-placement=top-left]{left:0;top:0;width:4px;height:100%;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;align-items:center}.ds-resizable-resize-handle[data-placement=top-right]{right:0;top:0;width:4px;height:100%;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;align-items:center}.ds-resizable-resize-handle[data-placement=bottom-left]{bottom:0;width:100%;height:4px;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:center}.ds-resizable-resize-handle[data-placement=top-center]{top:0;width:100%;height:4px;border-top-left-radius:.5rem;border-top-right-radius:.5rem;justify-content:center}.ds-resizable-resize-handle[data-placement=bottom-right-corner]{bottom:0;right:0;width:12px;height:12px;border-bottom-right-radius:.5rem;cursor:nw-resize}.ds-resizable-resize-handle[data-placement=bottom-left-corner]{bottom:0;left:0;width:12px;height:12px;border-bottom-left-radius:.5rem;cursor:ne-resize}.ds-resizable-resize-handle[data-placement=top-right-corner]{top:0;right:0;width:12px;height:12px;border-top-right-radius:.5rem;cursor:ne-resize}.ds-resizable-resize-handle[data-placement=top-left-corner]{top:0;left:0;width:12px;height:12px;border-top-left-radius:.5rem;cursor:nw-resize}}

package/dist/components/segmented/component.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
 import r from "antd/es/segmented";
-import { forwardRef as m } from "react";
+import { forwardRef as o } from "react";
 import './style.css';/* empty css          */
-const o = ({ className: s, ...e }, t) => /* @__PURE__ */ n(r, { ref: t, ...e }), i = m(o), p = i;
+const m = (e, t) => /* @__PURE__ */ n(r, { ref: t, ...e }), i = o(m), c = i;
 export {
-  p as Segmented
+  c as Segmented
 };
 //# sourceMappingURL=component.js.map

package/dist/components/segmented/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/segmented/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntSegmented,\n  type SegmentedProps as AntSegmentedProps,\n} from \"antd/es/segmented\";\n\nimport { forwardRef } from \"react\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type RcSegmentedValue = string | number;\n\n// Define props interface with default type parameter\nexport interface SegmentedProps<T = RcSegmentedValue>\n  extends AntSegmentedProps<T> {}\n\n// Create inner function with default type parameter\nconst MainSegmentedInner = <T,>(\n  { className, ...rest }: SegmentedProps<T>,\n  ref: React.Ref<React.ComponentRef<typeof AntSegmented>>\n) => {\n  return <AntSegmented ref={ref} {...rest} />;\n};\n\n// Use forwardRef with type assertion\nconst MainSegmented = forwardRef(MainSegmentedInner) as <T = RcSegmentedValue>(\n  props: SegmentedProps<T> & {\n    ref?: React.Ref<React.ComponentRef<typeof AntSegmented>>;\n  }\n) => ReturnType<typeof MainSegmentedInner>;\n\nexport const Segmented = MainSegmented;\n"],"names":["MainSegmentedInner","className","rest","ref","jsx","AntSegmented","MainSegmented","forwardRef","Segmented"],"mappings":";;;;;AAkBA,MAAMA,IAAqB,CACzB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAChBC,MAEQ,gBAAAC,EAAAC,GAAA,EAAa,KAAAF,GAAW,GAAGD,EAAM,CAAA,GAIrCI,IAAgBC,EAAWP,CAAkB,GAMtCQ,IAAYF;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/segmented/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntSegmented,\n  type SegmentedProps as AntSegmentedProps,\n} from \"antd/es/segmented\";\n\nimport { forwardRef } from \"react\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type RcSegmentedValue = string | number;\n\n// Define props interface with default type parameter\nexport interface SegmentedProps<T = RcSegmentedValue>\n  extends AntSegmentedProps<T> {}\n\n// Create inner function with default type parameter\nconst MainSegmentedInner = <T,>(\n  props: SegmentedProps<T>,\n  ref: React.Ref<React.ComponentRef<typeof AntSegmented>>\n) => {\n  return <AntSegmented ref={ref} {...props} />;\n};\n\n// Use forwardRef with type assertion\nconst MainSegmented = forwardRef(MainSegmentedInner) as <T = RcSegmentedValue>(\n  props: SegmentedProps<T> & {\n    ref?: React.Ref<React.ComponentRef<typeof AntSegmented>>;\n  }\n) => ReturnType<typeof MainSegmentedInner>;\n\nexport const Segmented = MainSegmented;\n"],"names":["MainSegmentedInner","props","ref","jsx","AntSegmented","MainSegmented","forwardRef","Segmented"],"mappings":";;;;;AAkBA,MAAMA,IAAqB,CACzBC,GACAC,MAEQ,gBAAAC,EAAAC,GAAA,EAAa,KAAAF,GAAW,GAAGD,EAAO,CAAA,GAItCI,IAAgBC,EAAWN,CAAkB,GAMtCO,IAAYF;"}

package/dist/components/select/component.js

@@ -1,46 +1,61 @@
 "use client";
-import { jsx as o, jsxs as N, Fragment as D } from "react/jsx-runtime";
-import { CaretDown as R } from "@bioturing/assets";
-import a from "antd/es/select";
-import y from "antd/es/checkbox";
-import { forwardRef as U } from "react";
-import { useFloatingPortalNode as W, useFloating as q, autoUpdate as B, offset as H, autoPlacement as J, shift as K, size as L, FloatingOverlay as Q } from "@floating-ui/react";
-import { PopupPanelSize as w } from "../popup-panel/constants.js";
-import { toMerged as T } from "es-toolkit";
+import { jsx as r, Fragment as y, jsxs as S } from "react/jsx-runtime";
+import { CaretDown as tt } from "@bioturing/assets";
+import { useFloatingPortalNode as et, useFloating as ot, autoUpdate as rt, offset as lt, autoPlacement as nt, shift as st, size as at, FloatingOverlay as ct } from "@floating-ui/react";
+import j from "antd/es/checkbox";
+import b from "antd/es/select";
+import { toMerged as it } from "es-toolkit";
+import { forwardRef as pt, useCallback as D } from "react";
+import { PopupPanelSize as E } from "../popup-panel/constants.js";
+import { Divider as mt } from "antd";
+import { SelectItem as ut } from "./item.js";
 import './style.css';/* empty css          */
-import { useControlledState as V } from "../hooks/useControlledState.js";
-import { clsx as C } from "../utils/cn.js";
-const X = ({
-  mode: i,
-  className: O,
-  open: k,
-  defaultOpen: v,
-  onOpenChange: M,
-  popupClassName: F,
-  onDropdownVisibleChange: P,
-  enhancePositioner: r,
-  getPopupContainer: I,
-  popupSize: e,
-  popupRender: c,
-  dropdownRender: f,
-  classNames: n,
-  styles: m = {},
-  ...j
-}, p) => {
-  var x;
-  const E = W({}), u = i === "multiple" || i === "tags", [d, g] = V(
-    k,
-    M || P,
-    v
-  ), { floatingStyles: S, refs: h } = q({
+import { useControlledState as N } from "../hooks/useControlledState.js";
+import { useCls as ft } from "../utils/antdUtils.js";
+import { clsx as G } from "../utils/cn.js";
+const dt = ({
+  mode: d,
+  className: T,
+  open: U,
+  defaultOpen: V,
+  onOpenChange: W,
+  popupClassName: $,
+  onDropdownVisibleChange: q,
+  enhancePositioner: s,
+  getPopupContainer: B,
+  popupSize: l,
+  popupRender: g,
+  dropdownRender: h,
+  classNames: c,
+  styles: C = {},
+  showSelectionSummary: x,
+  selectionSummaryRender: v,
+  value: H,
+  onChange: J,
+  defaultValue: K,
+  showSelectAll: A,
+  selectAllRender: O,
+  options: a,
+  ...L
+}, i) => {
+  var P;
+  const Q = et({}), p = d === "multiple" || d === "tags", [k, M] = N(
+    U,
+    W || q,
+    V
+  ), m = ft(), [e, u] = N(
+    H,
+    J,
+    K
+  ), { floatingStyles: R, refs: w } = ot({
     placement: "bottom-start",
     transform: !1,
-    open: r && d,
+    open: s && k,
     middleware: [
-      H({
+      lt({
         mainAxis: 4
       }),
-      J({
+      nt({
         allowedPlacements: [
           "bottom-start",
           "bottom-end",
@@ -50,87 +65,141 @@ const X = ({
           "top"
         ]
       }),
-      K({
+      st({
         padding: 8
       }),
-      L({
+      at({
         padding: 8,
-        apply({ availableHeight: t, availableWidth: s, elements: l }) {
-          l.floating.style.setProperty(
+        apply({ availableHeight: t, availableWidth: o, elements: n }) {
+          n.floating.style.setProperty(
             "--available-width",
-            s + "px"
-          ), l.floating.style.setProperty(
+            o + "px"
+          ), n.floating.style.setProperty(
             "--available-height",
             t + "px"
           );
         }
       })
     ],
-    whileElementsMounted: B
-  }), b = C(
-    "ds-select-popup",
-    u && "ds-select-multiple",
-    ((x = n == null ? void 0 : n.popup) == null ? void 0 : x.root) || F,
-    r && "ds-select-popup-enhanced"
-  ), A = e && typeof e == "string" && e in w ? w[e] : typeof e == "number" ? e + "px" : e || "fit-content";
-  return /* @__PURE__ */ o(
-    a,
+    whileElementsMounted: rt
+  }), X = D(
+    (t) => {
+      const o = Array.isArray(t) ? t.length : 1;
+      return p ? o + ` ${o == 1 ? "item" : "items"} selected` : /* @__PURE__ */ r(y, { children: t });
+    },
+    [p]
+  ), Y = G(
+    m("select", x && "select-selection-summary"),
+    T
+  ), F = G(
+    m(
+      "select-popup",
+      p && "select-multiple",
+      s && "select-popup-enhanced"
+    ),
+    ((P = c == null ? void 0 : c.popup) == null ? void 0 : P.root) || $
+  ), Z = l && typeof l == "string" && l in E ? E[l] : typeof l == "number" ? l + "px" : l || "fit-content", I = D(
+    (t) => {
+      const o = g ? g(t) : h ? h(t) : t;
+      if (!A) return o;
+      const n = Array.isArray(e) && e.length > 0, _ = Array.isArray(a) ? a.map((f) => f.value) : e.map((f) => f.value), z = Array.isArray(e) && e.length && e.length < a.length;
+      return /* @__PURE__ */ S(y, { children: [
+        /* @__PURE__ */ r(
+          ut,
+          {
+            className: m(
+              "select-item",
+              "select-item-option",
+              n && "select-item-option-selected",
+              "select-item-option-active"
+            ),
+            onMouseOver: (f) => {
+            },
+            selectAllRender: O,
+            checked: n,
+            indeterminate: z,
+            onSelectAll: () => u(_),
+            onDeselectAll: () => u([])
+          }
+        ),
+        /* @__PURE__ */ r(mt, {}),
+        o
+      ] });
+    },
+    [
+      g,
+      h,
+      A,
+      e,
+      a,
+      m,
+      O,
+      u
+    ]
+  );
+  return /* @__PURE__ */ r(
+    b,
     {
       ref: (t) => {
-        p && (typeof p == "function" ? p(t) : p.current = t), t && h.setReference(t == null ? void 0 : t.nativeElement);
+        i && (typeof i == "function" ? i(t) : i.current = t), t && w.setReference(t == null ? void 0 : t.nativeElement);
       },
-      suffixIcon: /* @__PURE__ */ o(R, { weight: "bold" }),
-      open: d,
-      onOpenChange: g,
-      popupClassName: b,
+      suffixIcon: /* @__PURE__ */ r(tt, { weight: "bold" }),
+      open: k,
+      onOpenChange: M,
+      value: e,
+      onChange: u,
+      popupClassName: F,
       classNames: {
         popup: {
-          root: b
+          root: F
         },
-        ...n
+        ...c
       },
-      ...u ? {
-        menuItemSelectedIcon: ({ isSelected: t }) => /* @__PURE__ */ o("span", { className: "ant-select-checkbox-indicator", children: t ? /* @__PURE__ */ o(y, { checked: !0 }) : /* @__PURE__ */ o(y, { checked: !1 }) })
+      ...p ? {
+        menuItemSelectedIcon: ({ isSelected: t }) => /* @__PURE__ */ r("span", { className: "ant-select-checkbox-indicator", children: t ? /* @__PURE__ */ r(j, { checked: !0 }) : /* @__PURE__ */ r(j, { checked: !1 }) })
       } : {},
-      mode: i,
-      className: C("ds-select", O),
-      styles: r ? T(m, {
+      mode: d,
+      className: Y,
+      styles: s ? it(C, {
         popup: {
           root: {
             transition: "none",
-            ...S,
-            "--ds-select-popup-width": A
+            ...R,
+            "--ds-select-popup-width": Z
           }
         }
-      }) : m,
-      getPopupContainer: I || (r ? () => E || document.body : void 0),
-      popupRender: (t) => {
-        const s = () => c ? c(t) : f ? f(t) : t;
-        return r ? /* @__PURE__ */ N(D, { children: [
-          /* @__PURE__ */ o(Q, { lockScroll: !0, onClick: () => g(!1) }),
-          /* @__PURE__ */ o(
-            "div",
-            {
-              ref: (l) => {
-                if (!l) return;
-                const G = l.closest(
-                  ".ds-select-dropdown"
-                );
-                h.setFloating(G);
-              },
-              children: s()
-            }
-          )
-        ] }) : s();
-      },
-      ...j
+      }) : C,
+      getPopupContainer: B || (s ? () => Q || document.body : void 0),
+      popupRender: (t) => s ? /* @__PURE__ */ S(y, { children: [
+        /* @__PURE__ */ r(ct, { lockScroll: !0, onClick: () => M(!1) }),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            ref: (o) => {
+              if (!o) return;
+              const n = o.closest(
+                ".ds-select-dropdown"
+              );
+              w.setFloating(n);
+            },
+            children: I(t)
+          }
+        )
+      ] }) : I(t),
+      options: a,
+      ...x ? {
+        maxTagCount: 1,
+        showSearch: !1,
+        labelRender: () => v ? v(e) : X(e)
+      } : {},
+      ...L
     }
   );
-}, Y = U(X), st = Object.assign(Y, {
-  Option: a.Option,
-  OptGroup: a.OptGroup
+}, gt = pt(dt), St = Object.assign(gt, {
+  Option: b.Option,
+  OptGroup: b.OptGroup
 });
 export {
-  st as Select
+  St as Select
 };
 //# sourceMappingURL=component.js.map