@bioturing/components 0.39.1 → 0.41.0

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,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"}
+{"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,2BAA2B,CAAC;AACtD,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,5 +1,5 @@
 import { forwardRef as s } from "react";
-import { useRender as m } from "@base-ui-components/react/use-render";
+import { useRender as m } from "@base-ui/react/use-render";
 const p = (e, r) => {
   const { render: t, as: n = "div", state: o, ...d } = e;
   return m({

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

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef, JSX } from \"react\";\nimport { useRender } from \"@base-ui/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/utils/index.d.ts

@@ -3,4 +3,5 @@ export * from './client';
 export * from './types';
 export * from './constants';
 export * from './placement';
+export * from './renderProp';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/components/utils/renderProp.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+/**
+ * Utility function to handle render prop patterns with proper TypeScript typing.
+ * Supports both function render props and ReactElement children.
+ *
+ * @param children - Either a render function or a ReactElement
+ * @param props - Props to pass to the render function or merge with the ReactElement
+ * @param state - Optional state to pass to the render function
+ * @returns The rendered element
+ *
+ * @example
+ * // With function children
+ * <Component>
+ *   {(props, state) => <button {...props}>Click me</button>}
+ * </Component>
+ *
+ * @example
+ * // With ReactElement children
+ * <Component>
+ *   <button>Click me</button>
+ * </Component>
+ */
+export declare function createRenderProp<TProps extends object = object, TState = unknown>(children: ((props: TProps, state: TState) => React.ReactElement) | React.ReactElement, props: TProps, state?: TState): React.ReactElement;
+//# sourceMappingURL=renderProp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderProp.d.ts","sourceRoot":"","sources":["../../../src/components/utils/renderProp.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,SAAS,MAAM,GAAG,MAAM,EAC9B,MAAM,GAAG,OAAO,EAEhB,QAAQ,EACJ,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC,GACtD,KAAK,CAAC,YAAY,EACtB,KAAK,EAAE,MAAM,EACb,KAAK,CAAC,EAAE,MAAM,GACb,KAAK,CAAC,YAAY,CA0BpB"}

package/dist/components/utils/renderProp.js

@@ -0,0 +1,19 @@
+"use client";
+import n from "react";
+import { clsx as r } from "./cn.js";
+function f(s, e, t) {
+  if (typeof s == "function")
+    return s(e, t);
+  {
+    const a = s, l = "className" in e ? e.className : void 0, o = r(l, a.props.className), { className: N, ...c } = e, { className: i, ...m } = a.props;
+    return n.cloneElement(a, {
+      ...c,
+      ...m,
+      className: o
+    });
+  }
+}
+export {
+  f as createRenderProp
+};
+//# sourceMappingURL=renderProp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderProp.js","sources":["../../../src/components/utils/renderProp.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { clsx } from \"./cn\";\nimport type { ClassValue } from \"./types\";\n\n/**\n * Utility function to handle render prop patterns with proper TypeScript typing.\n * Supports both function render props and ReactElement children.\n *\n * @param children - Either a render function or a ReactElement\n * @param props - Props to pass to the render function or merge with the ReactElement\n * @param state - Optional state to pass to the render function\n * @returns The rendered element\n *\n * @example\n * // With function children\n * <Component>\n *   {(props, state) => <button {...props}>Click me</button>}\n * </Component>\n *\n * @example\n * // With ReactElement children\n * <Component>\n *   <button>Click me</button>\n * </Component>\n */\nexport function createRenderProp<\n  TProps extends object = object,\n  TState = unknown\n>(\n  children:\n    | ((props: TProps, state: TState) => React.ReactElement)\n    | React.ReactElement,\n  props: TProps,\n  state?: TState\n): React.ReactElement {\n  if (typeof children === \"function\") {\n    return children(props, state as TState);\n  } else {\n    const childElement = children as React.ReactElement<{\n      className?: ClassValue;\n    }>;\n    const propsClassName =\n      \"className\" in props ? (props.className as ClassValue) : undefined;\n    const mergedClassName = clsx(propsClassName, childElement.props.className);\n\n    // Remove className from both props and child props to handle it separately\n    const { className: _propsClassName, ...propsWithoutClassName } =\n      props as any;\n    const { className: _childClassName, ...childPropsWithoutClassName } =\n      childElement.props;\n\n    // Spread trigger props first, then child props on top to preserve child's explicit props\n    // This ensures that props like 'type', 'size', etc. from the child element are preserved\n    const clonedElement = React.cloneElement(childElement, {\n      ...propsWithoutClassName,\n      ...childPropsWithoutClassName,\n      className: mergedClassName,\n    });\n    return clonedElement;\n  }\n}\n"],"names":["createRenderProp","children","props","state","childElement","propsClassName","mergedClassName","clsx","_propsClassName","propsWithoutClassName","_childClassName","childPropsWithoutClassName","React"],"mappings":";;;AA0BO,SAASA,EAIdC,GAGAC,GACAC,GACoB;AACpB,MAAI,OAAOF,KAAa;AACtB,WAAOA,EAASC,GAAOC,CAAe;AACjC;AACL,UAAMC,IAAeH,GAGfI,IACJ,eAAeH,IAASA,EAAM,YAA2B,QACrDI,IAAkBC,EAAKF,GAAgBD,EAAa,MAAM,SAAS,GAGnE,EAAE,WAAWI,GAAiB,GAAGC,MACrCP,GACI,EAAE,WAAWQ,GAAiB,GAAGC,EAAA,IACrCP,EAAa;AASf,WALsBQ,EAAM,aAAaR,GAAc;AAAA,MACrD,GAAGK;AAAA,MACH,GAAGE;AAAA,MACH,WAAWL;AAAA,IAAA,CACZ;AAAA,EAEH;AACF;"}

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

@@ -1,7 +1,7 @@
 "use client";
 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 { Collapsible as m } from "@base-ui/react";
 import { MinusCircleIcon as T, PlusCircleIcon as V } from "@bioturing/assets";
 import { useControlledState as $ } from "../hooks/useControlledState.js";
 import './style.css';/* empty css          */

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 {\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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"}
+{"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/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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"}