@bioturing/components 0.33.1 → 0.35.2

package/dist/components/truncate/useOverflowDetection.js

@@ -0,0 +1,54 @@
+import { useState as E, useCallback as s, useLayoutEffect as p } from "react";
+import { checkOverflow as k } from "./helpers.js";
+const z = (h = {}) => {
+  const {
+    container: n,
+    additionalElements: f = [],
+    enabled: t = !0,
+    type: l = "horizontal",
+    availableHeight: u,
+    text: a
+  } = h, [b, v] = E(!1), r = s(() => n ? n instanceof HTMLElement ? n : "current" in n ? n.current : null : null, [n]), i = s(() => {
+    const e = r();
+    return e ? k(e, {
+      type: l,
+      availableHeight: u,
+      text: a
+    }) : !1;
+  }, [r, l, u, a]), c = s(() => {
+    if (!t) return;
+    const e = i();
+    v(e);
+  }, [i, t]), w = s(
+    (e, o, m) => {
+      const d = e.filter(Boolean);
+      if (d.length === 0) return;
+      window.document.fonts?.ready?.then(o);
+      const O = new ResizeObserver(() => {
+        window.requestAnimationFrame(o);
+      });
+      return d.forEach((g) => O.observe(g)), () => {
+        O.disconnect(), m && m();
+      };
+    },
+    []
+  );
+  return p(() => {
+    if (!t) {
+      v(!1);
+      return;
+    }
+    const e = r();
+    if (!e) return;
+    const o = [e, ...f];
+    return w(o, c);
+  }, [t, r, f, w, c]), {
+    isOverflowing: b,
+    checkOverflowNow: i,
+    recheckOverflow: c
+  };
+};
+export {
+  z as useOverflowDetection
+};
+//# sourceMappingURL=useOverflowDetection.js.map

package/dist/components/truncate/useOverflowDetection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowDetection.js","sources":["../../../src/components/truncate/useOverflowDetection.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from \"react\";\nimport { checkOverflow, OverflowCheckOptions } from \"./helpers\";\n\nexport interface UseOverflowDetectionOptions extends OverflowCheckOptions {\n  /** Element to observe for size changes */\n  container?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Additional elements to observe (e.g., parent containers) */\n  additionalElements?: (HTMLElement | null)[];\n  /** Whether to enable the overflow detection */\n  enabled?: boolean;\n}\n\nexport interface UseOverflowDetectionResult {\n  /** Whether the content is currently overflowing */\n  isOverflowing: boolean;\n  /** Function to manually check overflow */\n  checkOverflowNow: () => boolean;\n  /** Function to manually trigger a recheck */\n  recheckOverflow: () => void;\n}\n\nexport const useOverflowDetection = (\n  options: UseOverflowDetectionOptions = {}\n): UseOverflowDetectionResult => {\n  const {\n    container: containerProp,\n    additionalElements = [],\n    enabled = true,\n    type = \"horizontal\",\n    availableHeight,\n    text,\n  } = options;\n\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const getContainer = useCallback((): HTMLElement | null => {\n    if (!containerProp) return null;\n\n    if (containerProp instanceof HTMLElement) {\n      return containerProp;\n    }\n\n    if (\"current\" in containerProp) {\n      return containerProp.current;\n    }\n\n    return null;\n  }, [containerProp]);\n\n  const checkOverflowNow = useCallback((): boolean => {\n    const container = getContainer();\n    if (!container) return false;\n\n    return checkOverflow(container, {\n      type,\n      availableHeight,\n      text,\n    });\n  }, [getContainer, type, availableHeight, text]);\n\n  const recheckOverflow = useCallback(() => {\n    if (!enabled) return;\n\n    const newIsOverflowing = checkOverflowNow();\n    setIsOverflowing(newIsOverflowing);\n  }, [checkOverflowNow, enabled]);\n\n  const observe = useCallback(\n    (\n      elements: (HTMLElement | null)[],\n      callback: () => void,\n      cleanup?: () => void\n    ) => {\n      const validElements = elements.filter(Boolean) as HTMLElement[];\n      if (validElements.length === 0) return;\n\n      // Wait for fonts to load\n      window.document.fonts?.ready?.then(callback);\n\n      const observer = new ResizeObserver(() => {\n        window.requestAnimationFrame(callback);\n      });\n\n      validElements.forEach((el) => observer.observe(el));\n\n      return () => {\n        observer.disconnect();\n        if (cleanup) cleanup();\n      };\n    },\n    []\n  );\n\n  useLayoutEffect(() => {\n    if (!enabled) {\n      setIsOverflowing(false);\n      return;\n    }\n\n    const container = getContainer();\n    if (!container) return;\n\n    const elementsToObserve = [container, ...additionalElements];\n\n    return observe(elementsToObserve, recheckOverflow);\n  }, [enabled, getContainer, additionalElements, observe, recheckOverflow]);\n\n  return {\n    isOverflowing,\n    checkOverflowNow,\n    recheckOverflow,\n  };\n};"],"names":["useOverflowDetection","options","containerProp","additionalElements","enabled","type","availableHeight","text","isOverflowing","setIsOverflowing","useState","getContainer","useCallback","checkOverflowNow","container","checkOverflow","recheckOverflow","newIsOverflowing","observe","elements","callback","cleanup","validElements","observer","el","useLayoutEffect","elementsToObserve"],"mappings":";;AAqBO,MAAMA,IAAuB,CAClCC,IAAuC,OACR;AAC/B,QAAM;AAAA,IACJ,WAAWC;AAAA,IACX,oBAAAC,IAAqB,CAAA;AAAA,IACrB,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,iBAAAC;AAAA,IACA,MAAAC;AAAA,EAAA,IACEN,GAEE,CAACO,GAAeC,CAAgB,IAAIC,EAAS,EAAK,GAElDC,IAAeC,EAAY,MAC1BV,IAEDA,aAAyB,cACpBA,IAGL,aAAaA,IACRA,EAAc,UAGhB,OAVoB,MAW1B,CAACA,CAAa,CAAC,GAEZW,IAAmBD,EAAY,MAAe;AAClD,UAAME,IAAYH,EAAA;AAClB,WAAKG,IAEEC,EAAcD,GAAW;AAAA,MAC9B,MAAAT;AAAA,MACA,iBAAAC;AAAA,MACA,MAAAC;AAAA,IAAA,CACD,IANsB;AAAA,EAOzB,GAAG,CAACI,GAAcN,GAAMC,GAAiBC,CAAI,CAAC,GAExCS,IAAkBJ,EAAY,MAAM;AACxC,QAAI,CAACR,EAAS;AAEd,UAAMa,IAAmBJ,EAAA;AACzB,IAAAJ,EAAiBQ,CAAgB;AAAA,EACnC,GAAG,CAACJ,GAAkBT,CAAO,CAAC,GAExBc,IAAUN;AAAA,IACd,CACEO,GACAC,GACAC,MACG;AACH,YAAMC,IAAgBH,EAAS,OAAO,OAAO;AAC7C,UAAIG,EAAc,WAAW,EAAG;AAGhC,aAAO,SAAS,OAAO,OAAO,KAAKF,CAAQ;AAE3C,YAAMG,IAAW,IAAI,eAAe,MAAM;AACxC,eAAO,sBAAsBH,CAAQ;AAAA,MACvC,CAAC;AAED,aAAAE,EAAc,QAAQ,CAACE,MAAOD,EAAS,QAAQC,CAAE,CAAC,GAE3C,MAAM;AACX,QAAAD,EAAS,WAAA,GACLF,KAASA,EAAA;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,SAAAI,EAAgB,MAAM;AACpB,QAAI,CAACrB,GAAS;AACZ,MAAAK,EAAiB,EAAK;AACtB;AAAA,IACF;AAEA,UAAMK,IAAYH,EAAA;AAClB,QAAI,CAACG,EAAW;AAEhB,UAAMY,IAAoB,CAACZ,GAAW,GAAGX,CAAkB;AAE3D,WAAOe,EAAQQ,GAAmBV,CAAe;AAAA,EACnD,GAAG,CAACZ,GAASO,GAAcR,GAAoBe,GAASF,CAAe,CAAC,GAEjE;AAAA,IACL,eAAAR;AAAA,IACA,kBAAAK;AAAA,IACA,iBAAAG;AAAA,EAAA;AAEJ;"}

package/dist/components/utils/WithRenderProp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithRenderProp.d.ts","sourceRoot":"","sources":["../../../src/components/utils/WithRenderProp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,mBAAmB,CAC7B,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,KAAK,SAAS,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAC9D,MAAM,EACN,OAAO,CACR,IACC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACrC,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,mBAAmB,GACvB,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAE/D,OAAO,mBAAmB,CAAC,CAAC,EAAE,KAAK,CAAC,EACpC,KAAK,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAU3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAsC,CAC/D,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAE/D,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IACrC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C,KACE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"WithRenderProp.d.ts","sourceRoot":"","sources":["../../../src/components/utils/WithRenderProp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,mBAAmB,CAC7B,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,KAAK,SAAS,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAC9D,MAAM,EACN,OAAO,CACR,IACC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACrC,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,mBAAmB,GACvB,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAE/D,OAAO,mBAAmB,CAAC,CAAC,EAAE,KAAK,CAAC,EACpC,KAAK,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAW3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAsC,CAC/D,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAE/D,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IACrC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C,KACE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/utils/WithRenderProp.js

@@ -1,16 +1,16 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { useRender as i } from "@base-ui-components/react/use-render";
-const c = (e, r) => {
-  const { render: n, as: t = "div", state: o, ...d } = e;
-  return i({
-    render: n || ((s) => /* @__PURE__ */ m(t, { ...s })),
+import { forwardRef as s } from "react";
+import { useRender as m } from "@base-ui-components/react/use-render";
+const p = (e, r) => {
+  const { render: t, as: n = "div", state: o, ...d } = e;
+  return m({
+    render: t,
     props: d,
     state: o,
-    ref: r
+    ref: r,
+    defaultTagName: n
   });
-}, l = p(c);
+}, i = s(p);
 export {
-  l as WithRenderProp
+  i as WithRenderProp
 };
 //# sourceMappingURL=WithRenderProp.js.map

package/dist/components/utils/WithRenderProp.js.map

@@ -1 +1 @@
-{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { ElementTypeToDOMType } from \"./types\";\n\nexport type WithRenderPropProps<\n  T extends React.ElementType = \"div\",\n  State extends Record<string | number | symbol, unknown> = Record<\n    string,\n    unknown\n  >\n> = React.ComponentPropsWithoutRef<T> & {\n  render?: useRender.RenderProp<State>;\n  as?: T;\n  state?: State;\n};\n\nconst WithRenderPropInner = <\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n>(\n  props: WithRenderPropProps<T, State>,\n  ref: React.ForwardedRef<T>\n) => {\n  const { render, as: Tag = \"div\", state, ...etc } = props;\n  const renderedElement = useRender({\n    render: render || ((props) => <Tag {...props} />),\n    props: etc,\n    state,\n    ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n  });\n  return renderedElement;\n};\n\nexport const WithRenderProp = forwardRef(WithRenderPropInner) as <\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n>(\n  props: WithRenderPropProps<T, State> & {\n    ref?: React.Ref<ElementTypeToDOMType<T>>;\n  }\n) => ReturnType<typeof WithRenderPropInner>;\n"],"names":["WithRenderPropInner","props","ref","render","Tag","state","etc","useRender","jsx","WithRenderProp","forwardRef"],"mappings":";;;AAgBA,MAAMA,IAAsB,CAI1BC,GACAC,MACG;AACH,QAAM,EAAE,QAAAC,GAAQ,IAAIC,IAAM,OAAO,OAAAC,GAAO,GAAGC,MAAQL;AAOnD,SANwBM,EAAU;AAAA,IAChC,QAAQJ,MAAW,CAACF,MAAU,gBAAAO,EAACJ,GAAA,EAAK,GAAGH,EAAAA,CAAO;AAAA,IAC9C,OAAOK;AAAA,IACP,OAAAD;AAAA,IACA,KAAAH;AAAA,EAAA,CACD;AAEH,GAEaO,IAAiBC,EAAWV,CAAmB;"}
+{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef, JSX } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { ElementTypeToDOMType } from \"./types\";\n\nexport type WithRenderPropProps<\n  T extends React.ElementType = \"div\",\n  State extends Record<string | number | symbol, unknown> = Record<\n    string,\n    unknown\n  >\n> = React.ComponentPropsWithoutRef<T> & {\n  render?: useRender.RenderProp<State>;\n  as?: T;\n  state?: State;\n};\n\nconst WithRenderPropInner = <\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n>(\n  props: WithRenderPropProps<T, State>,\n  ref: React.ForwardedRef<T>\n) => {\n  const { render, as = \"div\", state, ...etc } = props;\n  const renderedElement = useRender({\n    render: render,\n    props: etc,\n    state,\n    ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n    defaultTagName: as as keyof JSX.IntrinsicElements,\n  });\n  return renderedElement;\n};\n\nexport const WithRenderProp = forwardRef(WithRenderPropInner) as <\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n>(\n  props: WithRenderPropProps<T, State> & {\n    ref?: React.Ref<ElementTypeToDOMType<T>>;\n  }\n) => ReturnType<typeof WithRenderPropInner>;\n"],"names":["WithRenderPropInner","props","ref","render","as","state","etc","useRender","WithRenderProp","forwardRef"],"mappings":";;AAgBA,MAAMA,IAAsB,CAI1BC,GACAC,MACG;AACH,QAAM,EAAE,QAAAC,GAAQ,IAAAC,IAAK,OAAO,OAAAC,GAAO,GAAGC,MAAQL;AAQ9C,SAPwBM,EAAU;AAAA,IAChC,QAAAJ;AAAA,IACA,OAAOG;AAAA,IACP,OAAAD;AAAA,IACA,KAAAH;AAAA,IACA,gBAAgBE;AAAA,EAAA,CACjB;AAEH,GAEaI,IAAiBC,EAAWT,CAAmB;"}

package/dist/components/vertical-collapsible-panel/component.d.ts

@@ -60,6 +60,20 @@ export interface VerticalCollapsiblePanelProps {
      * Keeping it as mounted, just hide the content
      */
     keepMounted?: boolean;
+    /**
+     * Custom expand icon
+     */
+    expandIcon?: React.ReactNode | ((props: {
+        open: boolean;
+        className?: string;
+    }) => React.ReactNode);
+    /**
+     * Custom collapse icon
+     */
+    collapseIcon?: React.ReactNode | ((props: {
+        open: boolean;
+        className?: string;
+    }) => React.ReactNode);
 }
 export declare const VerticalCollapsiblePanel: React.FC<VerticalCollapsiblePanelProps>;
 //# sourceMappingURL=component.d.ts.map

package/dist/components/vertical-collapsible-panel/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-collapsible-panel/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;SAEK;IACL,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAC7C,6BAA6B,CA6H9B,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-collapsible-panel/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;SAEK;IACL,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EACP,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EACT,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACzE;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAC7C,6BAA6B,CAmJ9B,CAAC"}

package/dist/components/vertical-collapsible-panel/component.js

@@ -1,94 +1,101 @@
 "use client";
-import { jsxs as r, jsx as l } from "react/jsx-runtime";
-import { useState as I, useRef as g, useEffect as j } from "react";
-import { Collapsible as n } from "@base-ui-components/react";
-import { MinusCircle as M, PlusCircle as R } from "@bioturing/assets";
-import { useControlledState as S } from "../hooks/useControlledState.js";
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { useState as S, useRef as A, useEffect as E } from "react";
+import { Collapsible as m } from "@base-ui-components/react";
+import { MinusCircleIcon as T, PlusCircleIcon as V } from "@bioturing/assets";
+import { useControlledState as $ } from "../hooks/useControlledState.js";
 import './style.css';/* empty css          */
-import { Transition as A } from "../transition/component.js";
-import { useCls as E } from "../utils/antdUtils.js";
-import { useAnimationsFinished as T } from "../hooks/base-ui.js";
-import { clsx as a } from "../utils/cn.js";
-import { Truncate as V } from "../truncate/component.js";
-import { IconButton as f } from "../icon-button/component.js";
-const X = ({
-  children: h,
+import { Transition as q } from "../transition/component.js";
+import { useCls as z } from "../utils/antdUtils.js";
+import { useAnimationsFinished as D } from "../hooks/base-ui.js";
+import { clsx as n } from "../utils/cn.js";
+import { Truncate as G } from "../truncate/component.js";
+import { IconButton as y } from "../icon-button/component.js";
+const ee = ({
+  children: C,
   title: i,
-  defaultOpen: b = !1,
-  open: u,
-  onOpenChange: N,
-  className: x,
-  headerClassName: y,
-  headerInnerClassName: C,
-  bodyClassName: v,
+  defaultOpen: v = !1,
+  open: x,
+  onOpenChange: O,
+  className: g,
+  headerClassName: w,
+  headerInnerClassName: R,
+  bodyClassName: k,
   contentPadding: o = "16px",
-  afterTitle: p,
-  actions: O,
-  useTitleAsTrigger: c = !0,
-  keepMounted: w = !1
+  afterTitle: d,
+  actions: B,
+  useTitleAsTrigger: f = !0,
+  keepMounted: F = !1,
+  expandIcon: c,
+  collapseIcon: p
 }) => {
-  const e = E(), [s, t] = S(
-    u,
-    N,
-    b
-  ), [k, B] = I(s), m = g(null), d = T(m, {
-    waitForNextTick: s
+  const e = z(), [l, u] = $(
+    x,
+    O,
+    v
+  ), [I, j] = S(l), h = A(null), b = D(h, {
+    waitForNextTick: l
   });
-  return j(() => {
-    d(() => {
-      B(s);
+  E(() => {
+    b(() => {
+      j(l);
     });
-  }, [s, d]), /* @__PURE__ */ r(
-    n.Root,
+  }, [l, b]);
+  const r = e(
+    "collapsible-panel-caret",
+    l && e("collapsible-panel-caret-open")
+  ), t = typeof c == "function" ? c({
+    open: l,
+    className: r
+  }) : c, N = typeof p == "function" ? p({
+    open: l,
+    className: r
+  }) : p || t;
+  return /* @__PURE__ */ a(
+    m.Root,
     {
-      className: a(e("collapsible-panel"), x),
-      open: s,
-      onOpenChange: t,
-      ref: m,
+      className: n(e("collapsible-panel"), g),
+      open: l,
+      onOpenChange: u,
+      ref: h,
       children: [
-        /* @__PURE__ */ r("div", { className: a(e("collapsible-panel-header"), y), children: [
-          /* @__PURE__ */ r(
+        /* @__PURE__ */ a("div", { className: n(e("collapsible-panel-header"), w), children: [
+          /* @__PURE__ */ a(
             "div",
             {
-              className: a(
+              className: n(
                 e("collapsible-panel-header-inner"),
-                C
+                R
               ),
               children: [
-                /* @__PURE__ */ l(
+                /* @__PURE__ */ s(
                   "div",
                   {
                     className: e("collapsible-panel-header-text"),
-                    onClick: c ? () => t((F) => !F) : void 0,
-                    style: c ? {
+                    onClick: f ? () => u((M) => !M) : void 0,
+                    style: f ? {
                       cursor: "pointer"
                     } : {},
-                    children: typeof i == "string" ? /* @__PURE__ */ l(V, { children: i }) : i
+                    children: typeof i == "string" ? /* @__PURE__ */ s(G, { children: i }) : i
                   }
                 ),
-                /* @__PURE__ */ r("div", { className: e("collapsible-panel-header-actions"), children: [
-                  s && O,
-                  /* @__PURE__ */ l(
-                    n.Trigger,
+                /* @__PURE__ */ a("div", { className: e("collapsible-panel-header-actions"), children: [
+                  l && B,
+                  /* @__PURE__ */ s(
+                    m.Trigger,
                     {
                       className: e("collapsible-panel-trigger"),
-                      render: s ? /* @__PURE__ */ l(f, { children: /* @__PURE__ */ l(
-                        M,
+                      render: l ? /* @__PURE__ */ s(y, { children: N || /* @__PURE__ */ s(
+                        T,
                         {
-                          weight: "bold",
-                          className: a(
-                            e("collapsible-panel-caret"),
-                            s && e("collapsible-panel-caret-open")
-                          )
+                          weight: "regular",
+                          className: r
                         }
-                      ) }) : /* @__PURE__ */ l(f, { children: /* @__PURE__ */ l(
-                        R,
+                      ) }) : /* @__PURE__ */ s(y, { children: t || /* @__PURE__ */ s(
+                        V,
                         {
-                          weight: "bold",
-                          className: a(
-                            e("collapsible-panel-caret"),
-                            s && e("collapsible-panel-caret-open")
-                          )
+                          weight: "regular",
+                          className: r
                         }
                       ) })
                     }
@@ -97,23 +104,23 @@ const X = ({
               ]
             }
           ),
-          s && p && /* @__PURE__ */ l("div", { className: e("collapsible-panel-header-after"), children: p })
+          l && d && /* @__PURE__ */ s("div", { className: e("collapsible-panel-header-after"), children: d })
         ] }),
-        /* @__PURE__ */ l(
-          n.Panel,
+        /* @__PURE__ */ s(
+          m.Panel,
           {
             className: e("collapsible-panel-content"),
             style: typeof o < "u" ? {
               "--ds-content-padding": o === !1 || o === 0 ? "0" : typeof o == "number" ? `${o}px` : o
             } : {},
-            keepMounted: w,
-            children: /* @__PURE__ */ l(
-              A,
+            keepMounted: F,
+            children: /* @__PURE__ */ s(
+              q,
               {
-                show: k,
-                className: a(e("collapsible-panel-body"), v),
+                show: I,
+                className: n(e("collapsible-panel-body"), k),
                 keepMounted: !0,
-                children: /* @__PURE__ */ l("div", { children: h })
+                children: /* @__PURE__ */ s("div", { children: C })
               }
             )
           }
@@ -123,6 +130,6 @@ const X = ({
   );
 };
 export {
-  X as VerticalCollapsiblePanel
+  ee as VerticalCollapsiblePanel
 };
 //# sourceMappingURL=component.js.map

package/dist/components/vertical-collapsible-panel/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/vertical-collapsible-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { Collapsible } from \"@base-ui-components/react\";\nimport { MinusCircle, PlusCircle } from \"@bioturing/assets\";\nimport { useCls, clsx } from \"../utils\";\nimport { useControlledState } from \"../hooks/useControlledState\";\nimport { Transition } from \"../transition\";\nimport { useAnimationsFinished } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { Truncate } from \"../truncate\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface VerticalCollapsiblePanelProps {\n  /**\n   * The content of the panel that will be toggled\n   */\n  children: React.ReactNode;\n  /**\n   * The header of the panel\n   */\n  title?: React.ReactNode;\n  /**\n   * Indicate if the title should be used as a trigger\n   * @default true\n   */\n  useTitleAsTrigger?: boolean;\n  /**\n   * Custom Content Padding\n   * @default \"24px\"\n   */\n  contentPadding?: number | string | boolean;\n  /**\n   * Add more content below the title\n   * Only show when panel is open\n   */\n  afterTitle?: React.ReactNode;\n\n  /**\n   * Whether the panel is expanded by default\n   */\n  defaultOpen?: boolean;\n  /**\n   * Control the open state (makes the component controlled)\n   */\n  open?: boolean;\n  /**\n   * Callback when the open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional class name for the component\n   */\n  className?: string;\n  /**\n   * Addtional class name for the header\n   */\n  headerClassName?: string;\n  /**\n   * Addtional class name for the header\n   */\n  headerInnerClassName?: string;\n  /**\n   * Addtional class name for the body\n   * */\n  bodyClassName?: string;\n  /**\n   * Actions to be displayed in the header\n   * Only show when panel is open\n   */\n  actions?: React.ReactNode;\n  /**\n   * Keeping it as mounted, just hide the content\n   */\n  keepMounted?: boolean;\n}\n\nexport const VerticalCollapsiblePanel: React.FC<\n  VerticalCollapsiblePanelProps\n> = ({\n  children,\n  title,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  className,\n  headerClassName,\n  headerInnerClassName,\n  bodyClassName,\n  contentPadding = \"16px\",\n  afterTitle,\n  actions,\n  useTitleAsTrigger = true,\n  keepMounted = false,\n}) => {\n  const cls = useCls();\n  // Use useControlledState for open state\n  const [isOpen, setIsOpen] = useControlledState(\n    controlledOpen,\n    onOpenChange,\n    defaultOpen\n  );\n  const [isBodyOpen, setIsBodyOpen] = useState(isOpen);\n  const ref = useRef<HTMLDivElement>(null);\n  const runOnceAnimationsFinish = useAnimationsFinished(ref, {\n    waitForNextTick: isOpen,\n  });\n  useEffect(() => {\n    runOnceAnimationsFinish(() => {\n      setIsBodyOpen(isOpen);\n    });\n  }, [isOpen, runOnceAnimationsFinish]);\n  return (\n    <Collapsible.Root\n      className={clsx(cls(\"collapsible-panel\"), className)}\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      ref={ref}\n    >\n      <div className={clsx(cls(\"collapsible-panel-header\"), headerClassName)}>\n        <div\n          className={clsx(\n            cls(\"collapsible-panel-header-inner\"),\n            headerInnerClassName\n          )}\n        >\n          <div\n            className={cls(\"collapsible-panel-header-text\")}\n            onClick={\n              useTitleAsTrigger ? () => setIsOpen((open) => !open) : undefined\n            }\n            style={\n              useTitleAsTrigger\n                ? {\n                    cursor: \"pointer\",\n                  }\n                : {}\n            }\n          >\n            {typeof title == \"string\" ? <Truncate>{title}</Truncate> : title}\n          </div>\n          <div className={cls(\"collapsible-panel-header-actions\")}>\n            {isOpen && actions}\n            <Collapsible.Trigger\n              className={cls(\"collapsible-panel-trigger\")}\n              render={\n                isOpen ? (\n                  <IconButton>\n                    <MinusCircle\n                      weight=\"bold\"\n                      className={clsx(\n                        cls(\"collapsible-panel-caret\"),\n                        isOpen && cls(\"collapsible-panel-caret-open\")\n                      )}\n                    />\n                  </IconButton>\n                ) : (\n                  <IconButton>\n                    <PlusCircle\n                      weight=\"bold\"\n                      className={clsx(\n                        cls(\"collapsible-panel-caret\"),\n                        isOpen && cls(\"collapsible-panel-caret-open\")\n                      )}\n                    />\n                  </IconButton>\n                )\n              }\n            ></Collapsible.Trigger>\n          </div>\n        </div>\n        {isOpen && afterTitle && (\n          <div className={cls(\"collapsible-panel-header-after\")}>\n            {afterTitle}\n          </div>\n        )}\n      </div>\n      <Collapsible.Panel\n        className={cls(\"collapsible-panel-content\")}\n        style={\n          (typeof contentPadding != \"undefined\"\n            ? {\n                \"--ds-content-padding\":\n                  contentPadding === false || contentPadding === 0\n                    ? \"0\"\n                    : typeof contentPadding == \"number\"\n                    ? `${contentPadding}px`\n                    : contentPadding,\n              }\n            : {}) as React.CSSProperties\n        }\n        keepMounted={keepMounted}\n      >\n        <Transition\n          show={isBodyOpen}\n          className={clsx(cls(\"collapsible-panel-body\"), bodyClassName)}\n          keepMounted\n        >\n          <div>{children}</div>\n        </Transition>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  );\n};\n"],"names":["VerticalCollapsiblePanel","children","title","defaultOpen","controlledOpen","onOpenChange","className","headerClassName","headerInnerClassName","bodyClassName","contentPadding","afterTitle","actions","useTitleAsTrigger","keepMounted","cls","useCls","isOpen","setIsOpen","useControlledState","isBodyOpen","setIsBodyOpen","useState","ref","useRef","runOnceAnimationsFinish","useAnimationsFinished","useEffect","jsxs","Collapsible","clsx","jsx","open","Truncate","IconButton","MinusCircle","PlusCircle","Transition"],"mappings":";;;;;;;;;;;;;AA8EO,MAAMA,IAET,CAAC;AAAA,EACH,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAMC;AAAA,EACN,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,aAAAC,IAAc;AAChB,MAAM;AACJ,QAAMC,IAAMC,EAAA,GAEN,CAACC,GAAQC,CAAS,IAAIC;AAAA,IAC1Bf;AAAA,IACAC;AAAA,IACAF;AAAA,EAAA,GAEI,CAACiB,GAAYC,CAAa,IAAIC,EAASL,CAAM,GAC7CM,IAAMC,EAAuB,IAAI,GACjCC,IAA0BC,EAAsBH,GAAK;AAAA,IACzD,iBAAiBN;AAAA,EAAA,CAClB;AACD,SAAAU,EAAU,MAAM;AACd,IAAAF,EAAwB,MAAM;AAC5B,MAAAJ,EAAcJ,CAAM;AAAA,IACtB,CAAC;AAAA,EACH,GAAG,CAACA,GAAQQ,CAAuB,CAAC,GAElC,gBAAAG;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAKf,EAAI,mBAAmB,GAAGT,CAAS;AAAA,MACnD,MAAMW;AAAA,MACN,cAAcC;AAAA,MACd,KAAAK;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAK,EAAC,SAAI,WAAWE,EAAKf,EAAI,0BAA0B,GAAGR,CAAe,GACnE,UAAA;AAAA,UAAA,gBAAAqB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAA,gBACTf,EAAI,gCAAgC;AAAA,gBACpCP;AAAA,cAAA;AAAA,cAGF,UAAA;AAAA,gBAAA,gBAAAuB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWhB,EAAI,+BAA+B;AAAA,oBAC9C,SACEF,IAAoB,MAAMK,EAAU,CAACc,MAAS,CAACA,CAAI,IAAI;AAAA,oBAEzD,OACEnB,IACI;AAAA,sBACE,QAAQ;AAAA,oBAAA,IAEV,CAAA;AAAA,oBAGL,iBAAOX,KAAS,WAAW,gBAAA6B,EAACE,GAAA,EAAU,aAAM,IAAc/B;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAE7D,gBAAA0B,EAAC,OAAA,EAAI,WAAWb,EAAI,kCAAkC,GACnD,UAAA;AAAA,kBAAAE,KAAUL;AAAA,kBACX,gBAAAmB;AAAA,oBAACF,EAAY;AAAA,oBAAZ;AAAA,sBACC,WAAWd,EAAI,2BAA2B;AAAA,sBAC1C,QACEE,IACE,gBAAAc,EAACG,GAAA,EACC,UAAA,gBAAAH;AAAA,wBAACI;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,WAAWL;AAAA,4BACTf,EAAI,yBAAyB;AAAA,4BAC7BE,KAAUF,EAAI,8BAA8B;AAAA,0BAAA;AAAA,wBAC9C;AAAA,sBAAA,EACF,CACF,IAEA,gBAAAgB,EAACG,GAAA,EACC,UAAA,gBAAAH;AAAA,wBAACK;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,WAAWN;AAAA,4BACTf,EAAI,yBAAyB;AAAA,4BAC7BE,KAAUF,EAAI,8BAA8B;AAAA,0BAAA;AAAA,wBAC9C;AAAA,sBAAA,EACF,CACF;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAGL,EAAA,CACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEDE,KAAUN,KACT,gBAAAoB,EAAC,OAAA,EAAI,WAAWhB,EAAI,gCAAgC,GACjD,UAAAJ,EAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAoB;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACC,WAAWd,EAAI,2BAA2B;AAAA,YAC1C,OACG,OAAOL,IAAkB,MACtB;AAAA,cACE,wBACEA,MAAmB,MAASA,MAAmB,IAC3C,MACA,OAAOA,KAAkB,WACzB,GAAGA,CAAc,OACjBA;AAAA,YAAA,IAER,CAAA;AAAA,YAEN,aAAAI;AAAA,YAEA,UAAA,gBAAAiB;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,MAAMjB;AAAA,gBACN,WAAWU,EAAKf,EAAI,wBAAwB,GAAGN,CAAa;AAAA,gBAC5D,aAAW;AAAA,gBAEX,UAAA,gBAAAsB,EAAC,SAAK,UAAA9B,EAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/vertical-collapsible-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { Collapsible } from \"@base-ui-components/react\";\nimport {\n  MinusCircle,\n  MinusCircleIcon,\n  PlusCircle,\n  PlusCircleIcon,\n} from \"@bioturing/assets\";\nimport { useCls, clsx } from \"../utils\";\nimport { useControlledState } from \"../hooks/useControlledState\";\nimport { Transition } from \"../transition\";\nimport { useAnimationsFinished } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { Truncate } from \"../truncate\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface VerticalCollapsiblePanelProps {\n  /**\n   * The content of the panel that will be toggled\n   */\n  children: React.ReactNode;\n  /**\n   * The header of the panel\n   */\n  title?: React.ReactNode;\n  /**\n   * Indicate if the title should be used as a trigger\n   * @default true\n   */\n  useTitleAsTrigger?: boolean;\n  /**\n   * Custom Content Padding\n   * @default \"24px\"\n   */\n  contentPadding?: number | string | boolean;\n  /**\n   * Add more content below the title\n   * Only show when panel is open\n   */\n  afterTitle?: React.ReactNode;\n\n  /**\n   * Whether the panel is expanded by default\n   */\n  defaultOpen?: boolean;\n  /**\n   * Control the open state (makes the component controlled)\n   */\n  open?: boolean;\n  /**\n   * Callback when the open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional class name for the component\n   */\n  className?: string;\n  /**\n   * Addtional class name for the header\n   */\n  headerClassName?: string;\n  /**\n   * Addtional class name for the header\n   */\n  headerInnerClassName?: string;\n  /**\n   * Addtional class name for the body\n   * */\n  bodyClassName?: string;\n  /**\n   * Actions to be displayed in the header\n   * Only show when panel is open\n   */\n  actions?: React.ReactNode;\n  /**\n   * Keeping it as mounted, just hide the content\n   */\n  keepMounted?: boolean;\n  /**\n   * Custom expand icon\n   */\n  expandIcon?:\n    | React.ReactNode\n    | ((props: { open: boolean; className?: string }) => React.ReactNode);\n  /**\n   * Custom collapse icon\n   */\n  collapseIcon?:\n    | React.ReactNode\n    | ((props: { open: boolean; className?: string }) => React.ReactNode);\n}\n\nexport const VerticalCollapsiblePanel: React.FC<\n  VerticalCollapsiblePanelProps\n> = ({\n  children,\n  title,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  className,\n  headerClassName,\n  headerInnerClassName,\n  bodyClassName,\n  contentPadding = \"16px\",\n  afterTitle,\n  actions,\n  useTitleAsTrigger = true,\n  keepMounted = false,\n  expandIcon,\n  collapseIcon,\n}) => {\n  const cls = useCls();\n  // Use useControlledState for open state\n  const [isOpen, setIsOpen] = useControlledState(\n    controlledOpen,\n    onOpenChange,\n    defaultOpen\n  );\n  const [isBodyOpen, setIsBodyOpen] = useState(isOpen);\n  const ref = useRef<HTMLDivElement>(null);\n  const runOnceAnimationsFinish = useAnimationsFinished(ref, {\n    waitForNextTick: isOpen,\n  });\n  useEffect(() => {\n    runOnceAnimationsFinish(() => {\n      setIsBodyOpen(isOpen);\n    });\n  }, [isOpen, runOnceAnimationsFinish]);\n  const iconClassName = cls(\n    \"collapsible-panel-caret\",\n    isOpen && cls(\"collapsible-panel-caret-open\")\n  );\n  const expandIconRender =\n    typeof expandIcon === \"function\"\n      ? expandIcon({\n          open: isOpen,\n          className: iconClassName,\n        })\n      : expandIcon;\n  const collapseIconRender =\n    typeof collapseIcon === \"function\"\n      ? collapseIcon({\n          open: isOpen,\n          className: iconClassName,\n        })\n      : collapseIcon || expandIconRender;\n  return (\n    <Collapsible.Root\n      className={clsx(cls(\"collapsible-panel\"), className)}\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      ref={ref}\n    >\n      <div className={clsx(cls(\"collapsible-panel-header\"), headerClassName)}>\n        <div\n          className={clsx(\n            cls(\"collapsible-panel-header-inner\"),\n            headerInnerClassName\n          )}\n        >\n          <div\n            className={cls(\"collapsible-panel-header-text\")}\n            onClick={\n              useTitleAsTrigger ? () => setIsOpen((open) => !open) : undefined\n            }\n            style={\n              useTitleAsTrigger\n                ? {\n                    cursor: \"pointer\",\n                  }\n                : {}\n            }\n          >\n            {typeof title == \"string\" ? <Truncate>{title}</Truncate> : title}\n          </div>\n          <div className={cls(\"collapsible-panel-header-actions\")}>\n            {isOpen && actions}\n            <Collapsible.Trigger\n              className={cls(\"collapsible-panel-trigger\")}\n              render={\n                isOpen ? (\n                  <IconButton>\n                    {collapseIconRender ? (\n                      collapseIconRender\n                    ) : (\n                      <MinusCircleIcon\n                        weight=\"regular\"\n                        className={iconClassName}\n                      />\n                    )}\n                  </IconButton>\n                ) : (\n                  <IconButton>\n                    {expandIconRender ? (\n                      expandIconRender\n                    ) : (\n                      <PlusCircleIcon\n                        weight=\"regular\"\n                        className={iconClassName}\n                      />\n                    )}\n                  </IconButton>\n                )\n              }\n            ></Collapsible.Trigger>\n          </div>\n        </div>\n        {isOpen && afterTitle && (\n          <div className={cls(\"collapsible-panel-header-after\")}>\n            {afterTitle}\n          </div>\n        )}\n      </div>\n      <Collapsible.Panel\n        className={cls(\"collapsible-panel-content\")}\n        style={\n          (typeof contentPadding != \"undefined\"\n            ? {\n                \"--ds-content-padding\":\n                  contentPadding === false || contentPadding === 0\n                    ? \"0\"\n                    : typeof contentPadding == \"number\"\n                    ? `${contentPadding}px`\n                    : contentPadding,\n              }\n            : {}) as React.CSSProperties\n        }\n        keepMounted={keepMounted}\n      >\n        <Transition\n          show={isBodyOpen}\n          className={clsx(cls(\"collapsible-panel-body\"), bodyClassName)}\n          keepMounted\n        >\n          <div>{children}</div>\n        </Transition>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  );\n};\n"],"names":["VerticalCollapsiblePanel","children","title","defaultOpen","controlledOpen","onOpenChange","className","headerClassName","headerInnerClassName","bodyClassName","contentPadding","afterTitle","actions","useTitleAsTrigger","keepMounted","expandIcon","collapseIcon","cls","useCls","isOpen","setIsOpen","useControlledState","isBodyOpen","setIsBodyOpen","useState","ref","useRef","runOnceAnimationsFinish","useAnimationsFinished","useEffect","iconClassName","expandIconRender","collapseIconRender","jsxs","Collapsible","clsx","jsx","open","Truncate","IconButton","MinusCircleIcon","PlusCircleIcon","Transition"],"mappings":"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"}

package/dist/components/vertical-collapsible-panel/style.css

@@ -1 +1 @@
-@layer components{.ds-collapsible-panel{overflow:hidden;flex-basis:fit-content;flex-grow:0;flex-shrink:0;display:flex;max-height:100%;flex-direction:column}.ds-collapsible-panel[data-closed]{transition:all .2s ease-out}.ds-collapsible-panel[data-open]{transition:all .2s ease-in;flex-grow:1}.ds-collapsible-panel-trigger{background:none;border:none;padding:0;cursor:pointer;text-align:left}.ds-collapsible-panel-header{display:flex;flex-direction:column;flex-grow:0;transition:all .2s ease-in-out;border-bottom:1px solid transparent}.ds-collapsible-panel-header-inner{display:flex;align-items:center;transition:width .2s ease;padding:.75rem 1rem;gap:.5rem}.ds-collapsible-panel-header-after{display:flex;align-items:center;padding:0 1rem .75rem;gap:.5rem}.ds-collapsible-panel[data-open] .ds-collapsible-panel-header{border-bottom:1px solid var(--ds-color-split)}.ds-collapsible-panel[data-open] .ds-collapsible-panel-header-inner{justify-content:flex-start;flex-grow:1}.ds-collapsible-panel-trigger:hover .ds-collapsible-panel-header{background-color:var(--ds-color-bg-hover)}.ds-collapsible-panel-header-actions{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:.5rem;flex-grow:0}.ds-collapsible-panel-header-text{flex-grow:1;display:inline-block;font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height);color:var(--ds-color-text)}.ds-collapsible-panel[data-closed] .ds-collapsible-panel-header-inner{transform:rotate(180deg);writing-mode:vertical-rl}.ds-collapsible-panel-content{display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;overflow-y:auto}.ds-collapsible-panel-content[data-closed]{display:none}.ds-collapsible-panel-body{padding:var(--ds-content-padding);flex-grow:1;transition:opacity .2s ease-in-out}.ds-collapsible-panel-body[data-starting],.ds-collapsible-panel-body[data-ending]{opacity:0}}
+@layer components{.ds-collapsible-panel{overflow:hidden;flex-basis:fit-content;flex-grow:0;flex-shrink:0;display:flex;max-height:100%;flex-direction:column}.ds-collapsible-panel[data-closed]{transition:all .2s ease-out}.ds-collapsible-panel[data-closed] .ds-collapsible-panel-trigger>*{transform:rotate(-180deg)}.ds-collapsible-panel[data-open]{transition:all .2s ease-in;flex-grow:1}.ds-collapsible-panel-trigger{background:none;border:none;padding:0;cursor:pointer;text-align:left}.ds-collapsible-panel-header{display:flex;flex-direction:column;flex-grow:0;transition:all .2s ease-in-out;border-bottom:1px solid transparent}.ds-collapsible-panel-header-inner{display:flex;align-items:center;transition:width .2s ease;padding:.75rem 1rem;gap:.5rem}.ds-collapsible-panel-header-after{display:flex;align-items:center;padding:0 1rem .75rem;gap:.5rem}.ds-collapsible-panel[data-open] .ds-collapsible-panel-header{border-bottom:1px solid var(--ds-color-split)}.ds-collapsible-panel[data-open] .ds-collapsible-panel-header-inner{justify-content:flex-start;flex-grow:1}.ds-collapsible-panel-trigger:hover .ds-collapsible-panel-header{background-color:var(--ds-color-bg-hover)}.ds-collapsible-panel-header-actions{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:.5rem;flex-grow:0}.ds-collapsible-panel-header-text{flex-grow:1;display:inline-block;font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height);color:var(--ds-color-text)}.ds-collapsible-panel[data-closed] .ds-collapsible-panel-header-inner{transform:rotate(180deg);writing-mode:vertical-rl}.ds-collapsible-panel-content{display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;overflow-y:auto}.ds-collapsible-panel-content[data-closed]{display:none}.ds-collapsible-panel-body{padding:var(--ds-content-padding);flex-grow:1;transition:opacity .2s ease-in-out}.ds-collapsible-panel-body[data-starting],.ds-collapsible-panel-body[data-ending]{opacity:0}}