@bioturing/components 0.42.0 → 0.43.0

package/dist/components/select/component.js

@@ -1,62 +1,74 @@
 "use client";
-import { jsx as t, Fragment as y, jsxs as E } from "react/jsx-runtime";
-import { CaretDown as pe } from "@bioturing/assets";
-import { useFloatingPortalNode as me, useFloating as ue, autoUpdate as de, offset as fe, autoPlacement as ge, shift as he, size as be, FloatingOverlay as ye } from "@floating-ui/react";
-import G from "antd/es/checkbox";
+import { jsx as t, Fragment as y, jsxs as G } from "react/jsx-runtime";
+import { CaretDown as de } from "@bioturing/assets";
+import { useFloatingPortalNode as fe, offset as ge, autoPlacement as he, shift as be, size as ye, useFloating as Ae, autoUpdate as Ce, FloatingOverlay as Re } from "@floating-ui/react";
+import V from "antd/es/checkbox";
 import R from "antd/es/select";
-import { toMerged as Ce } from "es-toolkit";
-import { forwardRef as Ae, useCallback as c, useMemo as Re } from "react";
-import { useStableCallback as C } from "@base-ui/utils/useStableCallback";
-import { PopupPanelSize as V } from "../popup-panel/constants.js";
-import { Divider as ke } from "antd";
-import { SelectItem as xe } from "./item.js";
+import { toMerged as ke } from "es-toolkit";
+import { forwardRef as xe, useCallback as n, useMemo as T } from "react";
+import { useStableCallback as A } from "@base-ui/utils/useStableCallback";
+import { PopupPanelSize as U } from "../popup-panel/constants.js";
+import { Divider as ve } from "antd";
+import { SelectItem as we } from "./item.js";
 import './style.css';/* empty css          */
-import { useValueAsRef as A } from "@base-ui/utils/useValueAsRef";
-import { useControlledState as T } from "../hooks/useControlledState.js";
-import { useCls as ve } from "../utils/antdUtils.js";
-import { clsx as U } from "../utils/cn.js";
+import { useValueAsRef as C } from "@base-ui/utils/useValueAsRef";
+import { useControlledState as W } from "../hooks/useControlledState.js";
+import { useCls as Me } from "../utils/antdUtils.js";
+import { clsx as $ } from "../utils/cn.js";
 const Oe = ({
   mode: f,
-  className: W,
-  open: $,
-  defaultOpen: q,
-  onOpenChange: B,
-  popupClassName: H,
-  onDropdownVisibleChange: J,
-  enhancePositioner: n,
-  getPopupContainer: K,
+  className: q,
+  open: B,
+  defaultOpen: H,
+  onOpenChange: J,
+  popupClassName: K,
+  onDropdownVisibleChange: L,
+  enhancePositioner: s,
+  getPopupContainer: Q,
   popupSize: l,
-  popupRender: L,
-  dropdownRender: Q,
+  popupRender: X,
+  dropdownRender: Y,
   classNames: k,
   styles: x = {},
   showSelectionSummary: v,
-  selectionSummaryRender: O,
-  value: X,
-  onChange: Y,
-  defaultValue: Z,
-  showSelectAll: w,
-  selectAllRender: _,
-  options: s,
-  ...z
+  selectionSummaryRender: w,
+  value: Z,
+  onChange: _,
+  defaultValue: z,
+  showSelectAll: M,
+  selectAllRender: ee,
+  options: c,
+  ...te
 }, a) => {
-  const ee = me({}), p = f === "multiple" || f === "tags", [M, S] = T(
-    $,
-    B || J,
-    q
-  ), m = ve(), [r, g] = T(
-    X,
-    Y,
-    Z
-  ), h = A(L), b = A(Q), P = A(_), { floatingStyles: te, refs: u } = ue({
-    placement: "bottom-start",
-    transform: !1,
-    open: n && M,
-    middleware: [
-      fe({
+  const oe = fe({}), p = f === "multiple" || f === "tags", [O, S] = W(
+    B,
+    J || L,
+    H
+  ), m = Me(), [o, g] = W(
+    Z,
+    _,
+    z
+  ), h = C(X), b = C(Y), P = C(ee), N = n(
+    ({
+      availableHeight: e,
+      availableWidth: r,
+      elements: i
+    }) => {
+      i.floating.style.setProperty(
+        "--available-width",
+        r + "px"
+      ), i.floating.style.setProperty(
+        "--available-height",
+        e + "px"
+      );
+    },
+    []
+  ), re = T(
+    () => [
+      ge({
         mainAxis: 4
       }),
-      ge({
+      he({
         allowedPlacements: [
           "bottom-start",
           "bottom-end",
@@ -66,63 +78,61 @@ const Oe = ({
           "top"
         ]
       }),
-      he({
+      be({
         padding: 8
       }),
-      be({
+      ye({
         padding: 8,
-        apply({ availableHeight: e, availableWidth: o, elements: i }) {
-          i.floating.style.setProperty(
-            "--available-width",
-            o + "px"
-          ), i.floating.style.setProperty(
-            "--available-height",
-            e + "px"
-          );
-        }
+        apply: N
       })
     ],
-    whileElementsMounted: de
-  }), re = c(
+    [N]
+  ), { floatingStyles: le, refs: u } = Ae({
+    placement: "bottom-start",
+    transform: !1,
+    open: s && O,
+    middleware: re,
+    whileElementsMounted: Ce
+  }), ne = n(
     (e) => {
-      const o = Array.isArray(e) ? e.length : 1;
-      return p ? o + ` ${o == 1 ? "item" : "items"} selected` : /* @__PURE__ */ t(y, { children: e });
+      const r = Array.isArray(e) ? e.length : 1;
+      return p ? r + ` ${r == 1 ? "item" : "items"} selected` : /* @__PURE__ */ t(y, { children: e });
     },
     [p]
-  ), oe = Re(
-    () => Array.isArray(s) ? s.map((e) => e.value) : [],
-    [s]
-  ), N = C(() => {
-    g(oe);
-  }), D = C(() => {
+  ), se = T(
+    () => Array.isArray(c) ? c.map((e) => e.value) : [],
+    [c]
+  ), D = A(() => {
+    g(se);
+  }), F = A(() => {
     g([]);
-  }), F = C(() => {
+  }), I = A(() => {
     S(!1);
-  }), I = c(
+  }), j = n(
     (e) => {
       if (!e) return;
-      const o = e.closest(".ds-select-dropdown");
-      u.setFloating(o);
+      const r = e.closest(".ds-select-dropdown");
+      u.setFloating(r);
     },
     [u]
-  ), le = U(
+  ), ce = $(
     m("select", v && "select-selection-summary"),
-    W
-  ), ne = U(
+    q
+  ), ae = $(
     m(
       "select-popup",
       p && "select-multiple",
-      n && "select-popup-enhanced"
+      s && "select-popup-enhanced"
     ),
-    k?.popup?.root || H
-  ), se = l && typeof l == "string" && l in V ? V[l] : typeof l == "number" ? l + "px" : l || "fit-content", d = c(
+    k?.popup?.root || K
+  ), ie = l && typeof l == "string" && l in U ? U[l] : typeof l == "number" ? l + "px" : l || "fit-content", d = n(
     (e) => {
-      const o = h.current ? h.current(e) : b.current ? b.current(e) : e;
-      if (!w) return o;
-      const i = Array.isArray(r) && r.length > 0, ie = Array.isArray(r) && r.length && r.length < s.length;
-      return /* @__PURE__ */ E(y, { children: [
+      const r = h.current ? h.current(e) : b.current ? b.current(e) : e;
+      if (!M) return r;
+      const i = Array.isArray(o) && o.length > 0, ue = Array.isArray(o) && o.length && o.length < c.length;
+      return /* @__PURE__ */ G(y, { children: [
         /* @__PURE__ */ t(
-          xe,
+          we,
           {
             className: m(
               "select-item",
@@ -130,90 +140,90 @@ const Oe = ({
               i && "select-item-option-selected",
               "select-item-option-active"
             ),
-            onMouseOver: (Me) => {
+            onMouseOver: (Pe) => {
             },
             selectAllRender: P.current,
             checked: i,
-            indeterminate: ie,
-            onSelectAll: N,
-            onDeselectAll: D
+            indeterminate: ue,
+            onSelectAll: D,
+            onDeselectAll: F
           }
         ),
-        /* @__PURE__ */ t(ke, {}),
-        o
+        /* @__PURE__ */ t(ve, {}),
+        r
       ] });
     },
     [
       h,
       b,
-      w,
-      r,
-      s,
+      M,
+      o,
+      c,
       m,
       P,
-      N,
-      D
+      D,
+      F
     ]
-  ), ce = c(
+  ), pe = n(
     (e) => {
       a && (typeof a == "function" ? a(e) : a.current = e), e && u.setReference(e?.nativeElement);
     },
     [a, u]
-  ), j = c(
-    (e) => /* @__PURE__ */ E(y, { children: [
-      /* @__PURE__ */ t(ye, { lockScroll: !0, onClick: F }),
-      /* @__PURE__ */ t("div", { ref: I, children: d(e) })
+  ), E = n(
+    (e) => /* @__PURE__ */ G(y, { children: [
+      /* @__PURE__ */ t(Re, { lockScroll: !0, onClick: I }),
+      /* @__PURE__ */ t("div", { ref: j, children: d(e) })
     ] }),
-    [F, I, d]
-  ), ae = c(
-    (e) => n ? j(e) : d(e),
-    [n, d, j]
+    [I, j, d]
+  ), me = n(
+    (e) => s ? E(e) : d(e),
+    [s, d, E]
   );
   return /* @__PURE__ */ t(
     R,
     {
-      ref: ce,
-      suffixIcon: /* @__PURE__ */ t(pe, { weight: "bold" }),
-      open: M,
+      ref: pe,
+      suffixIcon: /* @__PURE__ */ t(de, { weight: "bold" }),
+      open: O,
       onOpenChange: S,
-      value: r,
+      value: o,
       onChange: g,
       classNames: {
         popup: {
-          root: ne
+          root: ae
         },
         ...k
       },
       ...p ? {
-        menuItemSelectedIcon: ({ isSelected: e }) => /* @__PURE__ */ t("span", { className: "ant-select-checkbox-indicator", children: e ? /* @__PURE__ */ t(G, { checked: !0 }) : /* @__PURE__ */ t(G, { checked: !1 }) })
+        menuItemSelectedIcon: ({ isSelected: e }) => /* @__PURE__ */ t("span", { className: "ant-select-checkbox-indicator", children: e ? /* @__PURE__ */ t(V, { checked: !0 }) : /* @__PURE__ */ t(V, { checked: !1 }) })
       } : {},
       mode: f,
-      className: le,
-      styles: n ? Ce(x, {
+      className: ce,
+      styles: s ? ke(x, {
         popup: {
           root: {
             transition: "none",
-            ...te,
-            "--ds-select-popup-width": se
+            ...le,
+            "--ds-select-popup-width": ie
           }
         }
       }) : x,
-      getPopupContainer: K || (n ? () => ee || document.body : void 0),
-      popupRender: ae,
-      options: s,
+      getPopupContainer: Q || (s ? () => oe || document.body : void 0),
+      popupRender: me,
+      options: c,
       ...v ? {
         maxTagCount: 1,
         showSearch: !1,
-        labelRender: () => O ? O(r) : re(r)
+        labelRender: () => w ? w(o) : ne(o)
       } : {},
-      ...z
+      ...te
     }
   );
-}, we = Ae(Oe), He = Object.assign(we, {
+}, Se = xe(Oe), Ke = Object.assign(Se, {
   Option: R.Option,
   OptGroup: R.OptGroup
 });
 export {
-  He as Select
+  Ke as Select
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/select/component.tsx"],"sourcesContent":["\"use client\";\nimport { CaretDown } from \"@bioturing/assets\";\nimport {\n  autoPlacement,\n  autoUpdate,\n  FloatingOverlay,\n  offset,\n  shift,\n  size,\n  useFloating,\n  useFloatingPortalNode,\n} from \"@floating-ui/react\";\nimport { default as Checkbox } from \"antd/es/checkbox\";\nimport {\n  default as AntSelect,\n  type SelectProps as AntSelectProps,\n  type BaseOptionType,\n  type DefaultOptionType,\n} from \"antd/es/select\";\nimport { toMerged } from \"es-toolkit\";\nimport React, { CSSProperties, forwardRef, useCallback, useMemo } from \"react\";\nimport { useControlledState } from \"../hooks\";\nimport { useStableCallback } from \"@base-ui/utils/useStableCallback\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport { Divider } from \"antd\";\nimport { CheckboxProps } from \"../checkbox\";\nimport { SelectItem } from \"./item\";\nimport \"./style.css\";\nimport { BaseSelectRef } from \"rc-select\";\nimport { useValueAsRef } from \"@base-ui/utils/useValueAsRef\";\n// SelectItem component props\n\n// Define props interface extending Ant Design's SelectProps\nexport interface SelectProps<\n  ValueType = unknown,\n  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType\n> extends AntSelectProps<ValueType, OptionType> {\n  /**\n   * Whether to enhance the positioner using floating-ui\n   * @default false\n   */\n  enhancePositioner?: boolean;\n  /**\n   * Size of the popup panel\n   * Will be ignored if enhancePositioner is false\n   */\n  popupSize?: string | number | PopupPanelSize;\n  /**\n   * Show selection summary instead of tags in multiple case\n   * @default false\n   */\n  showSelectionSummary?: boolean;\n  /**\n   * Render function for the selection summary in multiple case\n   * @default (value) => `${value.length} items selected`\n   */\n  selectionSummaryRender?: (value: ValueType) => React.ReactNode;\n  /**\n   * Show select all option when in multiple mode\n   * @default false\n   */\n  showSelectAll?: boolean;\n  /**\n   * Render function for the select all option\n   */\n  selectAllRender?: (props: {\n    onClick: () => void;\n    checked: CheckboxProps[\"checked\"];\n    indeterminate: CheckboxProps[\"indeterminate\"];\n  }) => React.ReactNode;\n}\n\nexport type {\n  BaseOptionType as SelectBaseOptionType,\n  DefaultOptionType as SelectDefaultOptionType,\n};\n\n// Create inner function\nconst MainSelectInner = <\n  ValueType = unknown,\n  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType\n>(\n  {\n    mode,\n    className,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    popupClassName,\n    onDropdownVisibleChange,\n    enhancePositioner,\n    getPopupContainer,\n    popupSize,\n    popupRender,\n    dropdownRender,\n    classNames,\n    styles = {},\n    showSelectionSummary,\n    selectionSummaryRender,\n    value: valueProp,\n    onChange: onChangeProp,\n    defaultValue,\n    showSelectAll,\n    selectAllRender,\n    options,\n    ...rest\n  }: SelectProps<ValueType, OptionType>,\n  ref: React.Ref<React.ComponentRef<typeof AntSelect>>\n) => {\n  const portalNode = useFloatingPortalNode({});\n  const isMultiple = mode === \"multiple\" || mode === \"tags\";\n  const [open, setOpen] = useControlledState(\n    openProp,\n    onOpenChange || onDropdownVisibleChange,\n    defaultOpen\n  );\n  const cls = useCls();\n  const [value, onChange] = useControlledState(\n    valueProp,\n    onChangeProp,\n    defaultValue\n  );\n\n  // Stabilize render callback props used in useCallback dependencies\n  const stablePopupRender = useValueAsRef(popupRender);\n  const stableDropdownRender = useValueAsRef(dropdownRender);\n  const stableSelectAllRender = useValueAsRef(selectAllRender);\n\n  // enhancePositioner\n  const { floatingStyles, refs } = useFloating({\n    placement: \"bottom-start\",\n    transform: false,\n    open: enhancePositioner && open,\n    middleware: [\n      offset({\n        mainAxis: 4,\n      }),\n      autoPlacement({\n        allowedPlacements: [\n          \"bottom-start\",\n          \"bottom-end\",\n          \"bottom\",\n          \"top-start\",\n          \"top-end\",\n          \"top\",\n        ],\n      }),\n      shift({\n        padding: 8,\n      }),\n      size({\n        padding: 8,\n        apply({ availableHeight, availableWidth, elements }) {\n          // 2. Or, use a CSS variable:\n          elements.floating.style.setProperty(\n            \"--available-width\",\n            availableWidth + \"px\"\n          );\n          elements.floating.style.setProperty(\n            \"--available-height\",\n            availableHeight + \"px\"\n          );\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const defaultSelectionSummaryRender = useCallback(\n    (v: ValueType) => {\n      const count = Array.isArray(v) ? v.length : 1;\n      if (isMultiple) {\n        return count + ` ${count == 1 ? \"item\" : \"items\"} selected`;\n      }\n      return <>{v}</>;\n    },\n    [isMultiple]\n  );\n\n  // Memoize allValues calculation\n  const allValues = useMemo(\n    () => (Array.isArray(options) ? options.map((option) => option.value) : []),\n    [options]\n  );\n\n  // Create stable callbacks for select all/deselect all\n  const handleSelectAll = useStableCallback(() => {\n    onChange(allValues as ValueType);\n  });\n\n  const handleDeselectAll = useStableCallback(() => {\n    onChange([] as ValueType);\n  });\n\n  // Create stable callback for overlay click\n  const handleOverlayClick = useStableCallback(() => {\n    setOpen(false);\n  });\n\n  // Memoize floating ref callback\n  const floatingRefCallback = useCallback(\n    (node: HTMLElement | null) => {\n      if (!node) return;\n      const popupEl = node.closest(\".ds-select-dropdown\") as HTMLDivElement;\n      refs.setFloating(popupEl);\n    },\n    [refs]\n  );\n\n  const dsSelectClassname = clsx(\n    cls(\"select\", showSelectionSummary && \"select-selection-summary\"),\n    className\n  );\n\n  const dsPopupClassName = clsx(\n    cls(\n      \"select-popup\",\n      isMultiple && \"select-multiple\",\n      enhancePositioner && \"select-popup-enhanced\"\n    ),\n    classNames?.popup?.root || popupClassName\n  );\n  const popupWidth =\n    popupSize && typeof popupSize === \"string\" && popupSize in PopupPanelSize\n      ? PopupPanelSize[popupSize as keyof typeof PopupPanelSize]\n      : typeof popupSize === \"number\"\n      ? popupSize + \"px\"\n      : popupSize || \"fit-content\";\n  const customRenderMenu = useCallback(\n    (menu: React.ReactElement) => {\n      const renderedMenu = stablePopupRender.current\n        ? stablePopupRender.current(menu)\n        : stableDropdownRender.current\n        ? stableDropdownRender.current(menu)\n        : menu;\n      if (!showSelectAll) return renderedMenu;\n      const checked = Array.isArray(value) && value.length > 0;\n      const indeterminate =\n        Array.isArray(value) && value.length && value.length < options.length;\n      return (\n        <>\n          <SelectItem\n            className={cls(\n              \"select-item\",\n              \"select-item-option\",\n              checked && \"select-item-option-selected\",\n              \"select-item-option-active\"\n            )}\n            onMouseOver={(e) => {}}\n            selectAllRender={stableSelectAllRender.current}\n            checked={checked}\n            indeterminate={indeterminate}\n            onSelectAll={handleSelectAll}\n            onDeselectAll={handleDeselectAll}\n          />\n          <Divider />\n          {renderedMenu}\n        </>\n      );\n    },\n    [\n      stablePopupRender,\n      stableDropdownRender,\n      showSelectAll,\n      value,\n      options,\n      cls,\n      stableSelectAllRender,\n      handleSelectAll,\n      handleDeselectAll,\n    ]\n  );\n\n  const refCallback = useCallback(\n    (node: BaseSelectRef) => {\n      if (ref) {\n        if (typeof ref == \"function\") {\n          ref(node);\n        } else {\n          ref.current = node;\n        }\n      }\n      if (!node) return;\n      refs.setReference(node?.nativeElement as HTMLElement);\n    },\n    [ref, refs]\n  );\n\n  // Memoize enhanced popup render for enhancePositioner mode\n  const enhancedPopupRender = useCallback(\n    (menu: React.ReactElement) => {\n      return (\n        <>\n          <FloatingOverlay lockScroll onClick={handleOverlayClick} />\n          <div ref={floatingRefCallback}>{customRenderMenu(menu)}</div>\n        </>\n      );\n    },\n    [handleOverlayClick, floatingRefCallback, customRenderMenu]\n  );\n\n  // Memoize final popup render\n  const finalPopupRender = useCallback(\n    (menu: React.ReactElement) => {\n      if (!enhancePositioner) {\n        return customRenderMenu(menu);\n      }\n      return enhancedPopupRender(menu);\n    },\n    [enhancePositioner, customRenderMenu, enhancedPopupRender]\n  );\n\n  return (\n    <AntSelect\n      // ref={ref}\n      ref={refCallback}\n      suffixIcon={<CaretDown weight=\"bold\" />}\n      open={open}\n      onOpenChange={setOpen}\n      value={value}\n      onChange={onChange}\n      // for old version\n      // popupClassName={dsPopupClassName}\n      classNames={{\n        popup: {\n          root: dsPopupClassName,\n        },\n        ...classNames,\n      }}\n      {...(isMultiple\n        ? {\n            menuItemSelectedIcon: ({ isSelected }) => (\n              <span className=\"ant-select-checkbox-indicator\">\n                {isSelected ? (\n                  <Checkbox checked />\n                ) : (\n                  <Checkbox checked={false} />\n                )}\n              </span>\n            ),\n          }\n        : {})}\n      mode={mode}\n      className={dsSelectClassname}\n      styles={\n        enhancePositioner\n          ? toMerged(styles, {\n              popup: {\n                root: {\n                  transition: \"none\",\n                  ...floatingStyles,\n                  \"--ds-select-popup-width\": popupWidth,\n                } as CSSProperties,\n              },\n            })\n          : styles\n      }\n      getPopupContainer={\n        getPopupContainer ||\n        (enhancePositioner ? () => portalNode || document.body : undefined)\n      }\n      popupRender={finalPopupRender}\n      options={options}\n      {...(showSelectionSummary\n        ? {\n            maxTagCount: 1,\n            showSearch: false,\n            labelRender: () => {\n              if (selectionSummaryRender) {\n                return selectionSummaryRender(value);\n              }\n              return defaultSelectionSummaryRender(value);\n            },\n          }\n        : {})}\n      {...rest}\n    />\n  );\n};\n\n// Use forwardRef with type assertion\nconst MainSelect = forwardRef(MainSelectInner) as <\n  ValueType = unknown,\n  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType\n>(\n  props: SelectProps<ValueType, OptionType> & {\n    ref?: React.ForwardedRef<React.ComponentRef<typeof AntSelect>>;\n  }\n) => ReturnType<typeof MainSelectInner>;\n\nexport const Select = Object.assign(MainSelect, {\n  Option: AntSelect.Option,\n  OptGroup: AntSelect.OptGroup,\n});\n"],"names":["MainSelectInner","mode","className","openProp","defaultOpen","onOpenChange","popupClassName","onDropdownVisibleChange","enhancePositioner","getPopupContainer","popupSize","popupRender","dropdownRender","classNames","styles","showSelectionSummary","selectionSummaryRender","valueProp","onChangeProp","defaultValue","showSelectAll","selectAllRender","options","rest","ref","portalNode","useFloatingPortalNode","isMultiple","open","setOpen","useControlledState","cls","useCls","value","onChange","stablePopupRender","useValueAsRef","stableDropdownRender","stableSelectAllRender","floatingStyles","refs","useFloating","offset","autoPlacement","shift","size","availableHeight","availableWidth","elements","autoUpdate","defaultSelectionSummaryRender","useCallback","v","count","allValues","useMemo","option","handleSelectAll","useStableCallback","handleDeselectAll","handleOverlayClick","floatingRefCallback","node","popupEl","dsSelectClassname","clsx","dsPopupClassName","popupWidth","PopupPanelSize","customRenderMenu","menu","renderedMenu","checked","indeterminate","jsxs","Fragment","jsx","SelectItem","e","Divider","refCallback","enhancedPopupRender","FloatingOverlay","finalPopupRender","AntSelect","CaretDown","isSelected","Checkbox","toMerged","MainSelect","forwardRef","Select"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/select/component.tsx"],"sourcesContent":["\"use client\";\nimport { CaretDown } from \"@bioturing/assets\";\nimport {\n  autoPlacement,\n  autoUpdate,\n  FloatingOverlay,\n  offset,\n  shift,\n  size,\n  useFloating,\n  useFloatingPortalNode,\n  type MiddlewareState,\n} from \"@floating-ui/react\";\nimport { default as Checkbox } from \"antd/es/checkbox\";\nimport {\n  default as AntSelect,\n  type SelectProps as AntSelectProps,\n  type BaseOptionType,\n  type DefaultOptionType,\n} from \"antd/es/select\";\nimport { toMerged } from \"es-toolkit\";\nimport React, { CSSProperties, forwardRef, useCallback, useMemo } from \"react\";\nimport { useControlledState } from \"../hooks\";\nimport { useStableCallback } from \"@base-ui/utils/useStableCallback\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport { Divider } from \"antd\";\nimport { CheckboxProps } from \"../checkbox\";\nimport { SelectItem } from \"./item\";\nimport \"./style.css\";\nimport { BaseSelectRef } from \"rc-select\";\nimport { useValueAsRef } from \"@base-ui/utils/useValueAsRef\";\n// SelectItem component props\n\n// Define props interface extending Ant Design's SelectProps\nexport interface SelectProps<\n  ValueType = unknown,\n  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType\n> extends AntSelectProps<ValueType, OptionType> {\n  /**\n   * Whether to enhance the positioner using floating-ui\n   * @default false\n   */\n  enhancePositioner?: boolean;\n  /**\n   * Size of the popup panel\n   * Will be ignored if enhancePositioner is false\n   */\n  popupSize?: string | number | PopupPanelSize;\n  /**\n   * Show selection summary instead of tags in multiple case\n   * @default false\n   */\n  showSelectionSummary?: boolean;\n  /**\n   * Render function for the selection summary in multiple case\n   * @default (value) => `${value.length} items selected`\n   */\n  selectionSummaryRender?: (value: ValueType) => React.ReactNode;\n  /**\n   * Show select all option when in multiple mode\n   * @default false\n   */\n  showSelectAll?: boolean;\n  /**\n   * Render function for the select all option\n   */\n  selectAllRender?: (props: {\n    onClick: () => void;\n    checked: CheckboxProps[\"checked\"];\n    indeterminate: CheckboxProps[\"indeterminate\"];\n  }) => React.ReactNode;\n}\n\nexport type {\n  BaseOptionType as SelectBaseOptionType,\n  DefaultOptionType as SelectDefaultOptionType,\n};\n\n// Create inner function\nconst MainSelectInner = <\n  ValueType = unknown,\n  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType\n>(\n  {\n    mode,\n    className,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    popupClassName,\n    onDropdownVisibleChange,\n    enhancePositioner,\n    getPopupContainer,\n    popupSize,\n    popupRender,\n    dropdownRender,\n    classNames,\n    styles = {},\n    showSelectionSummary,\n    selectionSummaryRender,\n    value: valueProp,\n    onChange: onChangeProp,\n    defaultValue,\n    showSelectAll,\n    selectAllRender,\n    options,\n    ...rest\n  }: SelectProps<ValueType, OptionType>,\n  ref: React.Ref<React.ComponentRef<typeof AntSelect>>\n) => {\n  const portalNode = useFloatingPortalNode({});\n  const isMultiple = mode === \"multiple\" || mode === \"tags\";\n  const [open, setOpen] = useControlledState(\n    openProp,\n    onOpenChange || onDropdownVisibleChange,\n    defaultOpen\n  );\n  const cls = useCls();\n  const [value, onChange] = useControlledState(\n    valueProp,\n    onChangeProp,\n    defaultValue\n  );\n\n  // Stabilize render callback props used in useCallback dependencies\n  const stablePopupRender = useValueAsRef(popupRender);\n  const stableDropdownRender = useValueAsRef(dropdownRender);\n  const stableSelectAllRender = useValueAsRef(selectAllRender);\n\n  // Memoize size middleware apply function to prevent recreating on every render\n  const sizeApply = useCallback(\n    ({\n      availableHeight,\n      availableWidth,\n      elements,\n    }: MiddlewareState & {\n      availableWidth: number;\n      availableHeight: number;\n    }) => {\n      elements.floating.style.setProperty(\n        \"--available-width\",\n        availableWidth + \"px\"\n      );\n      elements.floating.style.setProperty(\n        \"--available-height\",\n        availableHeight + \"px\"\n      );\n    },\n    []\n  );\n\n  // Memoize floating UI middleware array to prevent recalculating position unnecessarily\n  const floatingMiddleware = useMemo(\n    () => [\n      offset({\n        mainAxis: 4,\n      }),\n      autoPlacement({\n        allowedPlacements: [\n          \"bottom-start\",\n          \"bottom-end\",\n          \"bottom\",\n          \"top-start\",\n          \"top-end\",\n          \"top\",\n        ],\n      }),\n      shift({\n        padding: 8,\n      }),\n      size({\n        padding: 8,\n        apply: sizeApply,\n      }),\n    ],\n    [sizeApply]\n  );\n\n  // enhancePositioner\n  const { floatingStyles, refs } = useFloating({\n    placement: \"bottom-start\",\n    transform: false,\n    open: enhancePositioner && open,\n    middleware: floatingMiddleware,\n    whileElementsMounted: autoUpdate,\n  });\n\n  const defaultSelectionSummaryRender = useCallback(\n    (v: ValueType) => {\n      const count = Array.isArray(v) ? v.length : 1;\n      if (isMultiple) {\n        return count + ` ${count == 1 ? \"item\" : \"items\"} selected`;\n      }\n      return <>{v}</>;\n    },\n    [isMultiple]\n  );\n\n  // Memoize allValues calculation\n  const allValues = useMemo(\n    () => (Array.isArray(options) ? options.map((option) => option.value) : []),\n    [options]\n  );\n\n  // Create stable callbacks for select all/deselect all\n  const handleSelectAll = useStableCallback(() => {\n    onChange(allValues as ValueType);\n  });\n\n  const handleDeselectAll = useStableCallback(() => {\n    onChange([] as ValueType);\n  });\n\n  // Create stable callback for overlay click\n  const handleOverlayClick = useStableCallback(() => {\n    setOpen(false);\n  });\n\n  // Memoize floating ref callback\n  const floatingRefCallback = useCallback(\n    (node: HTMLElement | null) => {\n      if (!node) return;\n      const popupEl = node.closest(\".ds-select-dropdown\") as HTMLDivElement;\n      refs.setFloating(popupEl);\n    },\n    [refs]\n  );\n\n  const dsSelectClassname = clsx(\n    cls(\"select\", showSelectionSummary && \"select-selection-summary\"),\n    className\n  );\n\n  const dsPopupClassName = clsx(\n    cls(\n      \"select-popup\",\n      isMultiple && \"select-multiple\",\n      enhancePositioner && \"select-popup-enhanced\"\n    ),\n    classNames?.popup?.root || popupClassName\n  );\n  const popupWidth =\n    popupSize && typeof popupSize === \"string\" && popupSize in PopupPanelSize\n      ? PopupPanelSize[popupSize as keyof typeof PopupPanelSize]\n      : typeof popupSize === \"number\"\n      ? popupSize + \"px\"\n      : popupSize || \"fit-content\";\n  const customRenderMenu = useCallback(\n    (menu: React.ReactElement) => {\n      const renderedMenu = stablePopupRender.current\n        ? stablePopupRender.current(menu)\n        : stableDropdownRender.current\n        ? stableDropdownRender.current(menu)\n        : menu;\n      if (!showSelectAll) return renderedMenu;\n      const checked = Array.isArray(value) && value.length > 0;\n      const indeterminate =\n        Array.isArray(value) && value.length && value.length < options.length;\n      return (\n        <>\n          <SelectItem\n            className={cls(\n              \"select-item\",\n              \"select-item-option\",\n              checked && \"select-item-option-selected\",\n              \"select-item-option-active\"\n            )}\n            onMouseOver={(e) => {}}\n            selectAllRender={stableSelectAllRender.current}\n            checked={checked}\n            indeterminate={indeterminate}\n            onSelectAll={handleSelectAll}\n            onDeselectAll={handleDeselectAll}\n          />\n          <Divider />\n          {renderedMenu}\n        </>\n      );\n    },\n    [\n      stablePopupRender,\n      stableDropdownRender,\n      showSelectAll,\n      value,\n      options,\n      cls,\n      stableSelectAllRender,\n      handleSelectAll,\n      handleDeselectAll,\n    ]\n  );\n\n  const refCallback = useCallback(\n    (node: BaseSelectRef) => {\n      if (ref) {\n        if (typeof ref == \"function\") {\n          ref(node);\n        } else {\n          ref.current = node;\n        }\n      }\n      if (!node) return;\n      refs.setReference(node?.nativeElement as HTMLElement);\n    },\n    [ref, refs]\n  );\n\n  // Memoize enhanced popup render for enhancePositioner mode\n  const enhancedPopupRender = useCallback(\n    (menu: React.ReactElement) => {\n      return (\n        <>\n          <FloatingOverlay lockScroll onClick={handleOverlayClick} />\n          <div ref={floatingRefCallback}>{customRenderMenu(menu)}</div>\n        </>\n      );\n    },\n    [handleOverlayClick, floatingRefCallback, customRenderMenu]\n  );\n\n  // Memoize final popup render\n  const finalPopupRender = useCallback(\n    (menu: React.ReactElement) => {\n      if (!enhancePositioner) {\n        return customRenderMenu(menu);\n      }\n      return enhancedPopupRender(menu);\n    },\n    [enhancePositioner, customRenderMenu, enhancedPopupRender]\n  );\n\n  return (\n    <AntSelect\n      // ref={ref}\n      ref={refCallback}\n      suffixIcon={<CaretDown weight=\"bold\" />}\n      open={open}\n      onOpenChange={setOpen}\n      value={value}\n      onChange={onChange}\n      // for old version\n      // popupClassName={dsPopupClassName}\n      classNames={{\n        popup: {\n          root: dsPopupClassName,\n        },\n        ...classNames,\n      }}\n      {...(isMultiple\n        ? {\n            menuItemSelectedIcon: ({ isSelected }) => (\n              <span className=\"ant-select-checkbox-indicator\">\n                {isSelected ? (\n                  <Checkbox checked />\n                ) : (\n                  <Checkbox checked={false} />\n                )}\n              </span>\n            ),\n          }\n        : {})}\n      mode={mode}\n      className={dsSelectClassname}\n      styles={\n        enhancePositioner\n          ? toMerged(styles, {\n              popup: {\n                root: {\n                  transition: \"none\",\n                  ...floatingStyles,\n                  \"--ds-select-popup-width\": popupWidth,\n                } as CSSProperties,\n              },\n            })\n          : styles\n      }\n      getPopupContainer={\n        getPopupContainer ||\n        (enhancePositioner ? () => portalNode || document.body : undefined)\n      }\n      popupRender={finalPopupRender}\n      options={options}\n      {...(showSelectionSummary\n        ? {\n            maxTagCount: 1,\n            showSearch: false,\n            labelRender: () => {\n              if (selectionSummaryRender) {\n                return selectionSummaryRender(value);\n              }\n              return defaultSelectionSummaryRender(value);\n            },\n          }\n        : {})}\n      {...rest}\n    />\n  );\n};\n\n// Use forwardRef with type assertion\nconst MainSelect = forwardRef(MainSelectInner) as <\n  ValueType = unknown,\n  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType\n>(\n  props: SelectProps<ValueType, OptionType> & {\n    ref?: React.ForwardedRef<React.ComponentRef<typeof AntSelect>>;\n  }\n) => ReturnType<typeof MainSelectInner>;\n\nexport const Select = Object.assign(MainSelect, {\n  Option: AntSelect.Option,\n  OptGroup: AntSelect.OptGroup,\n});\n"],"names":["MainSelectInner","mode","className","openProp","defaultOpen","onOpenChange","popupClassName","onDropdownVisibleChange","enhancePositioner","getPopupContainer","popupSize","popupRender","dropdownRender","classNames","styles","showSelectionSummary","selectionSummaryRender","valueProp","onChangeProp","defaultValue","showSelectAll","selectAllRender","options","rest","ref","portalNode","useFloatingPortalNode","isMultiple","open","setOpen","useControlledState","cls","useCls","value","onChange","stablePopupRender","useValueAsRef","stableDropdownRender","stableSelectAllRender","sizeApply","useCallback","availableHeight","availableWidth","elements","floatingMiddleware","useMemo","offset","autoPlacement","shift","size","floatingStyles","refs","useFloating","autoUpdate","defaultSelectionSummaryRender","v","count","allValues","option","handleSelectAll","useStableCallback","handleDeselectAll","handleOverlayClick","floatingRefCallback","node","popupEl","dsSelectClassname","clsx","dsPopupClassName","popupWidth","PopupPanelSize","customRenderMenu","menu","renderedMenu","checked","indeterminate","jsxs","Fragment","jsx","SelectItem","e","Divider","refCallback","enhancedPopupRender","FloatingOverlay","finalPopupRender","AntSelect","CaretDown","isSelected","Checkbox","toMerged","MainSelect","forwardRef","Select"],"mappings":"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"}

package/dist/components/toast/component.d.ts

@@ -1,12 +1,12 @@
 import { Toast as BaseToast } from '@base-ui/react';
-import { ToastData } from './types';
+import { ToastData, ToastProviderProps } from './types';
 declare function InnerToast({ toast, }: {
     toast: BaseToast.Root.ToastObject<ToastData>;
 }): import("react/jsx-runtime").JSX.Element;
 declare function ToastList({ className }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-declare function ToastProvider(props: BaseToast.Provider.Props): import("react/jsx-runtime").JSX.Element;
+declare function ToastProvider(props: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare const Toast: typeof InnerToast & {
     List: typeof ToastList;
     Provider: typeof ToastProvider;

package/dist/components/toast/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/toast/component.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AASpC,OAAO,aAAa,CAAC;AAErB,iBAAS,UAAU,CAAC,EAClB,KAAK,GACN,EAAE;IACD,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;CAC9C,2CAsFA;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAavD;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,2CAErD;AAED,eAAO,MAAM,KAAK;;;CAGhB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/toast/component.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAS7D,OAAO,aAAa,CAAC;AAErB,iBAAS,UAAU,CAAC,EAClB,KAAK,GACN,EAAE;IACD,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;CAC9C,2CAiFA;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAavD;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAE/C;AAED,eAAO,MAAM,KAAK;;;CAGhB,CAAC"}

package/dist/components/toast/component.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import { XIcon as N, CircleNotchIcon as g, CheckCircleIcon as w, XCircleIcon as C, WarningCircleIcon as I, InfoIcon as T } from "@bioturing/assets";
-import { Toast as t } from "@base-ui/react";
+import { Toast as e } from "@base-ui/react";
 import { toastManager as a } from "./function.js";
 import { useEffect as k, useCallback as b } from "react";
 import { Button as v } from "../button/component.js";
@@ -15,7 +15,7 @@ import { clsx as j } from "../utils/cn.js";
 function f({
   toast: o
 }) {
-  const e = p(), n = {
+  const t = p(), n = {
     info: /* @__PURE__ */ r(T, { weight: "fill" }),
     warning: /* @__PURE__ */ r(I, { weight: "fill" }),
     error: /* @__PURE__ */ r(C, { weight: "fill" }),
@@ -32,7 +32,7 @@ function f({
         "div",
         {
           ...m,
-          className: e(
+          className: t(
             "toast-description",
             s ? "toast-description-traceback" : "",
             d
@@ -59,31 +59,25 @@ function f({
             ) })
           ]
         }
-      ) : /* @__PURE__ */ r("p", { ...m, className: e("toast-description", d), children: l });
+      ) : /* @__PURE__ */ r("p", { ...m, className: t("toast-description", d), children: l });
     },
-    [s, e, o.id]
+    [s, t, o.id]
   );
-  return /* @__PURE__ */ c(t.Root, { toast: o, className: e("toast"), children: [
-    /* @__PURE__ */ r("span", { className: e("toast-icon-wrap"), children: /* @__PURE__ */ r("span", { className: e("toast-icon", `toast-icon-${i}`), children: n[i] }) }),
-    /* @__PURE__ */ c("div", { className: e("toast-content"), children: [
-      /* @__PURE__ */ r(t.Title, { className: e("toast-title") }),
-      /* @__PURE__ */ r(t.Description, { render: u })
+  return /* @__PURE__ */ c(e.Root, { toast: o, className: t("toast"), children: [
+    /* @__PURE__ */ r("span", { className: t("toast-icon-wrap"), children: /* @__PURE__ */ r("span", { className: t("toast-icon", `toast-icon-${i}`), children: n[i] }) }),
+    /* @__PURE__ */ c("div", { className: t("toast-content"), children: [
+      /* @__PURE__ */ r(e.Title, { className: t("toast-title") }),
+      /* @__PURE__ */ r(e.Description, { render: u })
     ] }),
-    /* @__PURE__ */ r(
-      t.Close,
-      {
-        className: e("toast-close"),
-        render: /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(M, { size: "small", children: /* @__PURE__ */ r(N, {}) }) })
-      }
-    )
+    /* @__PURE__ */ r(e.Close, { className: t("toast-close"), children: /* @__PURE__ */ r(M, { as: "span", size: "small", children: /* @__PURE__ */ r(N, {}) }) })
   ] });
 }
 function E({ className: o }) {
-  const { toasts: e } = t.useToastManager(), n = p();
-  return /* @__PURE__ */ r(t.Portal, { children: /* @__PURE__ */ r(t.Viewport, { className: j(n("toast-viewport"), o), children: e.map((i) => /* @__PURE__ */ r(f, { toast: i }, i.id)) }) });
+  const { toasts: t } = e.useToastManager(), n = p();
+  return /* @__PURE__ */ r(e.Portal, { children: /* @__PURE__ */ r(e.Viewport, { className: j(n("toast-viewport"), o), children: t.map((i) => /* @__PURE__ */ r(f, { toast: i }, i.id)) }) });
 }
 function y(o) {
-  return /* @__PURE__ */ r(t.Provider, { toastManager: a, ...o });
+  return /* @__PURE__ */ r(e.Provider, { toastManager: a, ...o });
 }
 const H = Object.assign(f, {
   List: E,

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/toast/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls, clsx } from \"../utils\";\nimport {\n  CheckCircleIcon,\n  CircleNotchIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from \"@bioturing/assets\";\nimport { Toast as BaseToast } from \"@base-ui/react\";\nimport { IconButton } from \"../icon-button\";\nimport { ToastData } from \"./types\";\nimport { toastManager } from \"./function\";\nimport { isTracebackError, type GenericHTMLProps } from \"../utils\";\nimport { useCallback, useEffect } from \"react\";\nimport { Button } from \"../button/component\";\nimport { Modal } from \"../modal\";\nimport { CodeBlock } from \"../code-block\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nfunction InnerToast({\n  toast,\n}: {\n  toast: BaseToast.Root.ToastObject<ToastData>;\n}) {\n  const cls = useCls();\n  const toastIconMap = {\n    info: <InfoIcon weight=\"fill\" />,\n    warning: <WarningCircleIcon weight=\"fill\" />,\n    error: <XCircleIcon weight=\"fill\" />,\n    success: <CheckCircleIcon weight=\"fill\" />,\n    progress: <CircleNotchIcon />,\n  };\n  const type = toast.data?.type || \"info\";\n  const isTraceback = isTracebackError(toast?.description);\n\n  // Update manager timeout for traceback to disable auto-dismiss\n  useEffect(() => {\n    if (isTraceback) {\n      toastManager.update(toast.id, { timeout: 0 });\n    }\n  }, [isTraceback, toast.id]);\n  // console.log(toast);\n  const renderDescription: BaseToast.Description.Props[\"render\"] = useCallback(\n    (props: GenericHTMLProps) => {\n      const { children, className, ...rest } = props;\n      if (isTraceback) {\n        return (\n          <div\n            {...rest}\n            className={cls(\n              \"toast-description\",\n              isTraceback ? \"toast-description-traceback\" : \"\",\n              className\n            )}\n          >\n            <p>\n              An unexpected error occurred.\n              <br />\n              Please contact us with error details for support.\n            </p>\n            <p>\n              <Button\n                size=\"small\"\n                onClick={() => {\n                  Modal.open({\n                    title: \"Error details\",\n                    content: <CodeBlock>{children}</CodeBlock>,\n                    hideOkButton: true,\n                  });\n                  toastManager.close(toast.id);\n                }}\n              >\n                View error details\n              </Button>\n            </p>\n          </div>\n        );\n      }\n      return (\n        <p {...rest} className={cls(\"toast-description\", className)}>\n          {children}\n        </p>\n      );\n    },\n    [isTraceback, cls, toast.id]\n  );\n  return (\n    <BaseToast.Root toast={toast} className={cls(\"toast\")}>\n      <span className={cls(\"toast-icon-wrap\")}>\n        <span className={cls(\"toast-icon\", `toast-icon-${type}`)}>\n          {toastIconMap[type]}\n        </span>\n      </span>\n      <div className={cls(\"toast-content\")}>\n        <BaseToast.Title className={cls(\"toast-title\")} />\n        <BaseToast.Description render={renderDescription} />\n      </div>\n      <BaseToast.Close\n        className={cls(\"toast-close\")}\n        render={\n          <span>\n            <IconButton size=\"small\">\n              <XIcon />\n            </IconButton>\n          </span>\n        }\n      ></BaseToast.Close>\n    </BaseToast.Root>\n  );\n}\n\nfunction ToastList({ className }: { className?: string }) {\n  const { toasts } = BaseToast.useToastManager();\n  const cls = useCls();\n\n  return (\n    <BaseToast.Portal>\n      <BaseToast.Viewport className={clsx(cls(\"toast-viewport\"), className)}>\n        {toasts.map((toast) => (\n          <InnerToast key={toast.id} toast={toast} />\n        ))}\n      </BaseToast.Viewport>\n    </BaseToast.Portal>\n  );\n}\n\nfunction ToastProvider(props: BaseToast.Provider.Props) {\n  return <BaseToast.Provider toastManager={toastManager} {...props} />;\n}\n\nexport const Toast = Object.assign(InnerToast, {\n  List: ToastList,\n  Provider: ToastProvider,\n});\n"],"names":["InnerToast","toast","cls","useCls","toastIconMap","jsx","InfoIcon","WarningCircleIcon","XCircleIcon","CheckCircleIcon","CircleNotchIcon","type","isTraceback","isTracebackError","useEffect","toastManager","renderDescription","useCallback","props","children","className","rest","jsxs","Button","Modal","CodeBlock","BaseToast","IconButton","XIcon","ToastList","toasts","clsx","ToastProvider","Toast"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/toast/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls, clsx } from \"../utils\";\nimport {\n  CheckCircleIcon,\n  CircleNotchIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from \"@bioturing/assets\";\nimport { Toast as BaseToast } from \"@base-ui/react\";\nimport { IconButton } from \"../icon-button\";\nimport { ToastData, type ToastProviderProps } from \"./types\";\nimport { toastManager } from \"./function\";\nimport { isTracebackError, type GenericHTMLProps } from \"../utils\";\nimport { useCallback, useEffect } from \"react\";\nimport { Button } from \"../button/component\";\nimport { Modal } from \"../modal\";\nimport { CodeBlock } from \"../code-block\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nfunction InnerToast({\n  toast,\n}: {\n  toast: BaseToast.Root.ToastObject<ToastData>;\n}) {\n  const cls = useCls();\n  const toastIconMap = {\n    info: <InfoIcon weight=\"fill\" />,\n    warning: <WarningCircleIcon weight=\"fill\" />,\n    error: <XCircleIcon weight=\"fill\" />,\n    success: <CheckCircleIcon weight=\"fill\" />,\n    progress: <CircleNotchIcon />,\n  };\n  const type = toast.data?.type || \"info\";\n  const isTraceback = isTracebackError(toast?.description);\n\n  // Update manager timeout for traceback to disable auto-dismiss\n  useEffect(() => {\n    if (isTraceback) {\n      toastManager.update(toast.id, { timeout: 0 });\n    }\n  }, [isTraceback, toast.id]);\n  // console.log(toast);\n  const renderDescription: BaseToast.Description.Props[\"render\"] = useCallback(\n    (props: GenericHTMLProps) => {\n      const { children, className, ...rest } = props;\n      if (isTraceback) {\n        return (\n          <div\n            {...rest}\n            className={cls(\n              \"toast-description\",\n              isTraceback ? \"toast-description-traceback\" : \"\",\n              className\n            )}\n          >\n            <p>\n              An unexpected error occurred.\n              <br />\n              Please contact us with error details for support.\n            </p>\n            <p>\n              <Button\n                size=\"small\"\n                onClick={() => {\n                  Modal.open({\n                    title: \"Error details\",\n                    content: <CodeBlock>{children}</CodeBlock>,\n                    hideOkButton: true,\n                  });\n                  toastManager.close(toast.id);\n                }}\n              >\n                View error details\n              </Button>\n            </p>\n          </div>\n        );\n      }\n      return (\n        <p {...rest} className={cls(\"toast-description\", className)}>\n          {children}\n        </p>\n      );\n    },\n    [isTraceback, cls, toast.id]\n  );\n  return (\n    <BaseToast.Root toast={toast} className={cls(\"toast\")}>\n      <span className={cls(\"toast-icon-wrap\")}>\n        <span className={cls(\"toast-icon\", `toast-icon-${type}`)}>\n          {toastIconMap[type]}\n        </span>\n      </span>\n      <div className={cls(\"toast-content\")}>\n        <BaseToast.Title className={cls(\"toast-title\")} />\n        <BaseToast.Description render={renderDescription} />\n      </div>\n      <BaseToast.Close className={cls(\"toast-close\")}>\n        <IconButton as=\"span\" size=\"small\">\n          <XIcon />\n        </IconButton>\n      </BaseToast.Close>\n    </BaseToast.Root>\n  );\n}\n\nfunction ToastList({ className }: { className?: string }) {\n  const { toasts } = BaseToast.useToastManager();\n  const cls = useCls();\n\n  return (\n    <BaseToast.Portal>\n      <BaseToast.Viewport className={clsx(cls(\"toast-viewport\"), className)}>\n        {toasts.map((toast) => (\n          <InnerToast key={toast.id} toast={toast} />\n        ))}\n      </BaseToast.Viewport>\n    </BaseToast.Portal>\n  );\n}\n\nfunction ToastProvider(props: ToastProviderProps) {\n  return <BaseToast.Provider toastManager={toastManager} {...props} />;\n}\n\nexport const Toast = Object.assign(InnerToast, {\n  List: ToastList,\n  Provider: ToastProvider,\n});\n"],"names":["InnerToast","toast","cls","useCls","toastIconMap","jsx","InfoIcon","WarningCircleIcon","XCircleIcon","CheckCircleIcon","CircleNotchIcon","type","isTraceback","isTracebackError","useEffect","toastManager","renderDescription","useCallback","props","children","className","rest","jsxs","Button","Modal","CodeBlock","BaseToast","IconButton","XIcon","ToastList","toasts","clsx","ToastProvider","Toast"],"mappings":"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"}

package/dist/components/toast/function.d.ts

@@ -1,11 +1,10 @@
-import { ToastManagerAddOptions } from '@base-ui/react';
-import { ToastData } from './types';
+import { ToastOptions } from './types';
 export declare const toastManager: import('@base-ui/react').ToastManager<any>;
-export declare const toast: ((message: string, options?: Omit<ToastManagerAddOptions<ToastData>, "data" | "description">) => string) & {
-    info: (message: string, options?: Omit<ToastManagerAddOptions<ToastData>, "data" | "description">) => string;
-    success: (message: string, options?: Omit<ToastManagerAddOptions<ToastData>, "data" | "description">) => string;
-    error: (message: string, options?: Omit<ToastManagerAddOptions<ToastData>, "data" | "description">) => string;
-    warning: (message: string, options?: Omit<ToastManagerAddOptions<ToastData>, "data" | "description">) => string;
-    progress: (message: string, options?: Omit<ToastManagerAddOptions<ToastData>, "data" | "description">) => string;
+export declare const toast: ((message: string, options?: ToastOptions) => string) & {
+    info: (message: string, options?: ToastOptions) => string;
+    success: (message: string, options?: ToastOptions) => string;
+    error: (message: string, options?: ToastOptions) => string;
+    warning: (message: string, options?: ToastOptions) => string;
+    progress: (message: string, options?: ToastOptions) => string;
 };
 //# sourceMappingURL=function.d.ts.map

package/dist/components/toast/function.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"function.d.ts","sourceRoot":"","sources":["../../../src/components/toast/function.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,YAAY,4CAAiC,CAAC;AAoB3D,eAAO,MAAM,KAAK,aAhBL,MAAM,YACL,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;oBADhE,MAAM,YACL,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;uBADhE,MAAM,YACL,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;qBADhE,MAAM,YACL,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;uBADhE,MAAM,YACL,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;wBADhE,MAAM,YACL,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CAqB3E,CAAC"}
+{"version":3,"file":"function.d.ts","sourceRoot":"","sources":["../../../src/components/toast/function.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,YAAY,EAAa,MAAM,SAAS,CAAC;AAElE,eAAO,MAAM,YAAY,4CAAiC,CAAC;AAoB3D,eAAO,MAAM,KAAK,aAhBL,MAAM,YACL,YAAY;oBADb,MAAM,YACL,YAAY;uBADb,MAAM,YACL,YAAY;qBADb,MAAM,YACL,YAAY;uBADb,MAAM,YACL,YAAY;wBADb,MAAM,YACL,YAAY;CAqBxB,CAAC"}

package/dist/components/toast/function.js.map

@@ -1 +1 @@
-{"version":3,"file":"function.js","sources":["../../../src/components/toast/function.ts"],"sourcesContent":["\"use client\";\nimport { Toast as BaseToast, ToastManagerAddOptions } from \"@base-ui/react\";\nimport type { ToastData } from \"./types\";\n\nexport const toastManager = BaseToast.createToastManager();\n\nfunction createToastTypeFunction(type: ToastData[\"type\"]) {\n  return (\n    message: string,\n    options?: Omit<ToastManagerAddOptions<ToastData>, \"data\" | \"description\">\n  ) => {\n    const toastId = toastManager.add<ToastData>({\n      description: message,\n      data: {\n        type: type,\n      },\n      // progress and error toasts should not auto close\n      ...(type === \"progress\" ? { timeout: 0 } : {}),\n      ...options,\n    });\n    return toastId;\n  };\n}\n\nexport const toast = Object.assign(createToastTypeFunction(\"info\"), {\n  info: createToastTypeFunction(\"info\"),\n  success: createToastTypeFunction(\"success\"),\n  error: createToastTypeFunction(\"error\"),\n  warning: createToastTypeFunction(\"warning\"),\n  progress: createToastTypeFunction(\"progress\"),\n});\n"],"names":["toastManager","BaseToast","createToastTypeFunction","type","message","options","toast"],"mappings":";;AAIO,MAAMA,IAAeC,EAAU,mBAAA;AAEtC,SAASC,EAAwBC,GAAyB;AACxD,SAAO,CACLC,GACAC,MAEgBL,EAAa,IAAe;AAAA,IAC1C,aAAaI;AAAA,IACb,MAAM;AAAA,MACJ,MAAAD;AAAA,IAAA;AAAA;AAAA,IAGF,GAAIA,MAAS,aAAa,EAAE,SAAS,EAAA,IAAM,CAAA;AAAA,IAC3C,GAAGE;AAAA,EAAA,CACJ;AAGL;AAEO,MAAMC,IAAQ,OAAO,OAAOJ,EAAwB,MAAM,GAAG;AAAA,EAClE,MAAMA,EAAwB,MAAM;AAAA,EACpC,SAASA,EAAwB,SAAS;AAAA,EAC1C,OAAOA,EAAwB,OAAO;AAAA,EACtC,SAASA,EAAwB,SAAS;AAAA,EAC1C,UAAUA,EAAwB,UAAU;AAC9C,CAAC;"}
+{"version":3,"file":"function.js","sources":["../../../src/components/toast/function.ts"],"sourcesContent":["\"use client\";\nimport { Toast as BaseToast } from \"@base-ui/react\";\nimport type { ToastData, ToastOptions, ToastType } from \"./types\";\n\nexport const toastManager = BaseToast.createToastManager();\n\nfunction createToastTypeFunction(type: ToastType) {\n  return (\n    message: string,\n    options?: ToastOptions\n  ) => {\n    const toastId = toastManager.add<ToastData>({\n      description: message,\n      data: {\n        type: type,\n      },\n      // progress and error toasts should not auto close\n      ...(type === \"progress\" ? { timeout: 0 } : {}),\n      ...options,\n    });\n    return toastId;\n  };\n}\n\nexport const toast = Object.assign(createToastTypeFunction(\"info\"), {\n  info: createToastTypeFunction(\"info\"),\n  success: createToastTypeFunction(\"success\"),\n  error: createToastTypeFunction(\"error\"),\n  warning: createToastTypeFunction(\"warning\"),\n  progress: createToastTypeFunction(\"progress\"),\n});\n"],"names":["toastManager","BaseToast","createToastTypeFunction","type","message","options","toast"],"mappings":";;AAIO,MAAMA,IAAeC,EAAU,mBAAA;AAEtC,SAASC,EAAwBC,GAAiB;AAChD,SAAO,CACLC,GACAC,MAEgBL,EAAa,IAAe;AAAA,IAC1C,aAAaI;AAAA,IACb,MAAM;AAAA,MACJ,MAAAD;AAAA,IAAA;AAAA;AAAA,IAGF,GAAIA,MAAS,aAAa,EAAE,SAAS,EAAA,IAAM,CAAA;AAAA,IAC3C,GAAGE;AAAA,EAAA,CACJ;AAGL;AAEO,MAAMC,IAAQ,OAAO,OAAOJ,EAAwB,MAAM,GAAG;AAAA,EAClE,MAAMA,EAAwB,MAAM;AAAA,EACpC,SAASA,EAAwB,SAAS;AAAA,EAC1C,OAAOA,EAAwB,OAAO;AAAA,EACtC,SAASA,EAAwB,SAAS;AAAA,EAC1C,UAAUA,EAAwB,UAAU;AAC9C,CAAC;"}

package/dist/components/toast/style.css

@@ -1 +1 @@
-@layer components{.ds-toast-viewport{position:fixed;width:100%;max-width:30rem;margin:0 auto;bottom:2rem;left:50%;transform:translate(-50%);top:auto;z-index:var(--ds-z-index-toast);display:flex;justify-content:center}.ds-toast{--gap: .5rem;--offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y) );font-family:var(--font-sans);position:absolute;box-sizing:border-box;background:var(--ds-color-bg-elevated);color:var(--ds-color-text);padding:.75rem 1rem;max-width:100%;display:inline-flex;gap:var(--gap);box-shadow:var(--ds-box-shadow-secondary);background-clip:padding-box;border-radius:.5rem;bottom:0;margin-right:0;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;cursor:default;z-index:calc(1000 - var(--toast-index));transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * -20%))) scale(calc(1 - (var(--toast-index) * .1)))}.ds-toast:after{top:100%}.ds-toast[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--offset-y))}.ds-toast[data-starting-style],.ds-toast[data-ending-style]:not([data-limited]){transform:translateY(150%)}.ds-toast[data-ending-style]{opacity:0}.ds-toast[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 150%))}.ds-toast[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 150%))}.ds-toast:after{content:"";position:absolute;width:100%;left:0;height:calc(var(--gap) + 1px)}.ds-toast-content{display:flex;flex:1;flex-direction:column;max-height:calc(100vh - 92px);gap:2;overflow-y:auto}.ds-toast-title{font-size:var(--ds-font-size-heading-5);font-weight:600;line-height:var(--ds-line-height-heading-5)}.ds-toast-description{font-size:var(--ds-font-size);line-height:var(--ds-line-height)}.ds-toast-description:last-child{margin-bottom:0}.ds-toast-description-traceback p:not(:first-child){margin-top:.5rem}.ds-toast-icon-wrap{width:1.25rem;font-size:1.25rem;display:block;flex:0}.ds-toast-icon{width:1.25rem;height:1.25rem;display:block}.ds-toast-icon.ds-toast-icon-info{color:var(--ds-color-primary)}.ds-toast-icon.ds-toast-icon-success{color:var(--ds-color-success)}.ds-toast-icon.ds-toast-icon-warning{color:var(--ds-color-warning)}.ds-toast-icon.ds-toast-icon-error{color:var(--ds-color-error)}.ds-toast-icon.ds-toast-icon-progress{color:var(--ds-color-primary);animation:var(--ds-animate-spin)}.ds-toast-close{margin-top:.125rem;display:flex}}
+@layer components{.ds-toast-viewport{position:fixed;width:100%;max-width:30rem;margin:0 auto;bottom:2rem;left:50%;transform:translate(-50%);top:auto;z-index:var(--ds-z-index-toast);display:flex;justify-content:center}.ds-toast{--gap: .5rem;--stack-step: .875rem;--scale-step: .1;--min-scale: .2;--offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y) );font-family:var(--font-sans);position:absolute;box-sizing:border-box;background:var(--ds-color-bg-elevated);color:var(--ds-color-text);padding:.75rem 1rem;max-width:100%;display:inline-flex;gap:var(--gap);box-shadow:var(--ds-box-shadow-secondary);background-clip:padding-box;border-radius:.5rem;bottom:0;margin-right:0;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;cursor:default;z-index:calc(1000 - var(--toast-index));transform-origin:bottom center;transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--stack-step) * -1))) scale(max(var(--min-scale),calc(1 - (var(--toast-index) * var(--scale-step)))));opacity:clamp(0,calc(9 - var(--toast-index)),1)}.ds-toast:after{top:100%}.ds-toast[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--offset-y));opacity:1}.ds-toast[data-starting-style],.ds-toast[data-ending-style]:not([data-limited]){transform:translateY(150%)}.ds-toast[data-ending-style]{opacity:0}.ds-toast[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 150%))}.ds-toast[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 150%))}.ds-toast:after{content:"";position:absolute;width:100%;left:0;height:calc(var(--gap) + 1px)}.ds-toast-content{display:flex;flex:1;flex-direction:column;max-height:calc(100vh - 92px);gap:2;overflow-y:auto}.ds-toast-title{font-size:var(--ds-font-size-heading-5);font-weight:600;line-height:var(--ds-line-height-heading-5)}.ds-toast-description{font-size:var(--ds-font-size);line-height:var(--ds-line-height)}.ds-toast-description:last-child{margin-bottom:0}.ds-toast-description-traceback p:not(:first-child){margin-top:.5rem}.ds-toast-icon-wrap{width:1.25rem;font-size:1.25rem;display:block;flex:0}.ds-toast-icon{width:1.25rem;height:1.25rem;display:block}.ds-toast-icon.ds-toast-icon-info{color:var(--ds-color-primary)}.ds-toast-icon.ds-toast-icon-success{color:var(--ds-color-success)}.ds-toast-icon.ds-toast-icon-warning{color:var(--ds-color-warning)}.ds-toast-icon.ds-toast-icon-error{color:var(--ds-color-error)}.ds-toast-icon.ds-toast-icon-progress{color:var(--ds-color-primary);animation:var(--ds-animate-spin)}.ds-toast-close{margin-top:.125rem;display:flex}}