@bioturing/components 0.28.1 → 0.29.2

package/dist/components/dropdown-menu/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useMemo } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport type { DropdownMenuItemType } from \"./component\";\nimport { Command } from \"../cmdk\";\nimport { Menu } from \"@base-ui-components/react/menu\";\n\nimport \"./item.css\";\nimport { Checkbox } from \"antd\";\n\nexport interface DropdownMenuItemProps {\n  /** The menu item data */\n  item: DropdownMenuItemType & { type: \"item\" };\n  /** Custom render function for the item */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /** Additional props to pass to the item */\n  itemProps?: React.HTMLAttributes<HTMLElement>;\n  /** Class names from parent DropdownMenu */\n  classNames?: {\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n  };\n  onSelect?: () => void;\n  /**\n   * Whether the menu item is in a combobox\n   */\n  inCombobox?: boolean;\n  /**\n   * Whether the menu item is in a menu\n   */\n  renderAsNativeElement?: boolean;\n  /**\n   * Whether the menu item is selected (for combobox)\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * Whether to show checkbox (only for decoration purpose)\n   */\n  showCheckbox?: boolean;\n  /**\n   * Whether the menu item checkbox is indeterminate (for combobox)\n   * @default false\n   */\n  indeterminate?: boolean;\n}\n\nexport const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({\n  item,\n  inCombobox = false,\n  selected = false,\n  itemRender,\n  itemProps = {},\n  classNames,\n  onSelect,\n  showCheckbox,\n  indeterminate,\n  renderAsNativeElement,\n}) => {\n  const cls = useCls();\n\n  const MenuItem = useMemo(\n    () => (inCombobox ? Command.Item : Menu.Item),\n    [inCombobox]\n  );\n\n  const props = useMemo(() => {\n    return {\n      className: clsx(\n        cls(\"dropdown-menu-item\", inCombobox && \"dropdown-menu-item-combobox\"),\n        classNames?.item,\n        item.className\n      ),\n      disabled: item.disabled,\n      \"data-danger\": item.danger,\n      \"data-actual-selected\": selected,\n      ref: item.ref as Ref<HTMLDivElement>,\n      onClick: item.onClick,\n      onMouseEnter: item.onMouseEnter,\n      onMouseLeave: item.onMouseLeave,\n      onMouseOver: item.onMouseOver,\n      onMouseOut: item.onMouseOut,\n      \"data-value\":\n        typeof item.label === \"string\" ? item.label : String(item.key),\n      render: itemRender\n        ? (itemProps: React.HTMLAttributes<HTMLElement>) =>\n            itemRender(item, itemProps)\n        : undefined,\n      children: inCombobox ? (\n        <>\n          {showCheckbox && (\n            <Checkbox\n              checked={selected}\n              tabIndex={-1}\n              indeterminate={indeterminate}\n            />\n          )}\n          {item.icon && (\n            <span\n              className={clsx(\n                cls(\"dropdown-menu-item-icon\"),\n                classNames?.itemIcon\n              )}\n            >\n              {item.icon}\n            </span>\n          )}\n          <span\n            className={clsx(\n              cls(\"dropdown-menu-item-text\"),\n              classNames?.itemText\n            )}\n          >\n            {item.label}\n          </span>\n        </>\n      ) : (\n        <>\n          {showCheckbox && (\n            <Checkbox\n              checked={selected}\n              tabIndex={-1}\n              indeterminate={indeterminate}\n            />\n          )}\n          {item.icon && (\n            <span\n              className={clsx(\n                cls(\"dropdown-menu-item-icon\"),\n                classNames?.itemIcon\n              )}\n            >\n              {item.icon}\n            </span>\n          )}\n          <span\n            className={clsx(\n              cls(\"dropdown-menu-item-text\"),\n              classNames?.itemText\n            )}\n          >\n            {item.label}\n          </span>\n        </>\n      ),\n    };\n  }, [\n    classNames?.item,\n    classNames?.itemIcon,\n    classNames?.itemText,\n    cls,\n    inCombobox,\n    indeterminate,\n    item,\n    itemRender,\n    selected,\n    showCheckbox,\n  ]);\n  // If custom render function is provided, use it\n  if (itemRender) {\n    return itemRender(item, {\n      ...props,\n      ...itemProps,\n    });\n  }\n  const { render, ...restProps } = props;\n  // Default rendering\n  return renderAsNativeElement ? (\n    render ? (\n      render(props)\n    ) : (\n      <div onClick={onSelect} {...restProps} />\n    )\n  ) : (\n    <MenuItem\n      value={String(item.key)}\n      onSelect={onSelect}\n      {...props}\n    ></MenuItem>\n  );\n};\n"],"names":["DropdownMenuItem","item","inCombobox","selected","itemRender","itemProps","classNames","onSelect","showCheckbox","indeterminate","renderAsNativeElement","cls","useCls","MenuItem","useMemo","Command","Menu","props","clsx","jsxs","Fragment","jsx","Checkbox","render","restProps"],"mappings":"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"}
+{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useMemo } from \"react\";\nimport { clsx, reactNodeToString, useCls } from \"../utils\";\nimport type { DropdownMenuItemType } from \"./component\";\nimport { Command } from \"../cmdk\";\nimport { Menu } from \"@base-ui-components/react/menu\";\n\nimport \"./item.css\";\nimport { Checkbox } from \"antd\";\n\nexport interface DropdownMenuItemProps {\n  /** The menu item data */\n  item: DropdownMenuItemType & { type: \"item\" };\n  /** Custom render function for the item */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /** Additional props to pass to the item */\n  itemProps?: React.HTMLAttributes<HTMLElement>;\n  /** Class names from parent DropdownMenu */\n  classNames?: {\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n  };\n  onSelect?: () => void;\n  /**\n   * Whether the menu item is in a combobox\n   */\n  inCombobox?: boolean;\n  /**\n   * Whether the menu item is in a menu\n   */\n  renderAsNativeElement?: boolean;\n  /**\n   * Whether the menu item is selected (for combobox)\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * Whether to show checkbox (only for decoration purpose)\n   */\n  showCheckbox?: boolean;\n  /**\n   * Whether the menu item checkbox is indeterminate (for combobox)\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Function to extract keywords from the item for search filtering\n   * @default (item) => [String(item.key), reactNodeToString(item.label)]\n   */\n  getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({\n  item,\n  inCombobox = false,\n  selected = false,\n  itemRender,\n  itemProps = {},\n  classNames,\n  onSelect,\n  showCheckbox,\n  indeterminate,\n  renderAsNativeElement,\n  getItemKeywords,\n}) => {\n  const cls = useCls();\n\n  const MenuItem = useMemo(\n    () => (inCombobox ? Command.Item : Menu.Item),\n    [inCombobox]\n  );\n\n  const props = useMemo(() => {\n    return {\n      className: clsx(\n        cls(\"dropdown-menu-item\", inCombobox && \"dropdown-menu-item-combobox\"),\n        classNames?.item,\n        item.className\n      ),\n      disabled: item.disabled,\n      \"data-danger\": item.danger,\n      \"data-actual-selected\": selected,\n      ref: item.ref as Ref<HTMLDivElement>,\n      onClick: item.onClick,\n      onMouseEnter: item.onMouseEnter,\n      onMouseLeave: item.onMouseLeave,\n      onMouseOver: item.onMouseOver,\n      onMouseOut: item.onMouseOut,\n      \"data-value\":\n        typeof item.label === \"string\" ? item.label : String(item.key),\n      render: itemRender\n        ? (itemProps: React.HTMLAttributes<HTMLElement>) =>\n            itemRender(item, itemProps)\n        : undefined,\n      children: inCombobox ? (\n        <>\n          {showCheckbox && (\n            <Checkbox\n              checked={selected}\n              tabIndex={-1}\n              indeterminate={indeterminate}\n            />\n          )}\n          {item.icon && (\n            <span\n              className={clsx(\n                cls(\"dropdown-menu-item-icon\"),\n                classNames?.itemIcon\n              )}\n            >\n              {item.icon}\n            </span>\n          )}\n          <span\n            className={clsx(\n              cls(\"dropdown-menu-item-text\"),\n              classNames?.itemText\n            )}\n          >\n            {item.label}\n          </span>\n        </>\n      ) : (\n        <>\n          {showCheckbox && (\n            <Checkbox\n              checked={selected}\n              tabIndex={-1}\n              indeterminate={indeterminate}\n            />\n          )}\n          {item.icon && (\n            <span\n              className={clsx(\n                cls(\"dropdown-menu-item-icon\"),\n                classNames?.itemIcon\n              )}\n            >\n              {item.icon}\n            </span>\n          )}\n          <span\n            className={clsx(\n              cls(\"dropdown-menu-item-text\"),\n              classNames?.itemText\n            )}\n          >\n            {item.label}\n          </span>\n        </>\n      ),\n    };\n  }, [\n    classNames?.item,\n    classNames?.itemIcon,\n    classNames?.itemText,\n    cls,\n    inCombobox,\n    indeterminate,\n    item,\n    itemRender,\n    selected,\n    showCheckbox,\n  ]);\n  // If custom render function is provided, use it\n  if (itemRender) {\n    return itemRender(item, {\n      ...props,\n      ...itemProps,\n    });\n  }\n  const { render, ...restProps } = props;\n  // Default rendering\n  return renderAsNativeElement ? (\n    render ? (\n      render(props)\n    ) : (\n      <div onClick={onSelect} {...restProps} />\n    )\n  ) : (\n    <MenuItem\n      value={String(item.key)}\n      keywords={getItemKeywords ? getItemKeywords(item) : [String(item.key), reactNodeToString(item.label)]}\n      onSelect={onSelect}\n      {...props}\n    ></MenuItem>\n  );\n};\n"],"names":["DropdownMenuItem","item","inCombobox","selected","itemRender","itemProps","classNames","onSelect","showCheckbox","indeterminate","renderAsNativeElement","getItemKeywords","cls","useCls","MenuItem","useMemo","Command","Menu","props","clsx","jsxs","Fragment","jsx","Checkbox","render","restProps","reactNodeToString"],"mappings":"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"}

package/dist/components/dropdown-menu/style.css

@@ -1 +1 @@
-@layer components{.ds-dropdown-menu-root{z-index:2000}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);max-width:min(var(--size-width),var(--available-width));max-height:var(--available-height);display:flex;flex-direction:column}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu .ds-dropdown-menu-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu .ds-dropdown-menu-search{flex-shrink:0}.ds-dropdown-menu .ds-dropdown-menu-list{flex-shrink:1;min-height:0;display:flex;flex-direction:column}:is(.ds-dropdown-menu .ds-dropdown-menu-list) [cmdk-list-sizer]{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu-search{margin-bottom:.25rem}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}.ds-dropdown-menu-match-trigger-width{width:min(var(--anchor-width),var(--available-width))}}
+@layer components{.ds-dropdown-menu-root{z-index:2000}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);max-width:min(var(--size-width),var(--available-width));max-height:var(--available-height);display:flex;flex-direction:column}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu .ds-dropdown-menu-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu .ds-dropdown-menu-search{flex-shrink:0}.ds-dropdown-menu .ds-dropdown-menu-list,.ds-dropdown-menu .ds-dropdown-menu-list [cmdk-list-sizer]{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu-search{margin-bottom:.25rem}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}.ds-dropdown-menu-match-trigger-width{width:min(var(--anchor-width),var(--available-width))}}

package/dist/components/ds-root/component.js

@@ -1,22 +1,27 @@
 "use client";
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { ThemeProvider as l } from "../theme-provider/component.js";
-import { Modal as n } from "../modal/index.js";
-import c from "antd/es/app/App";
-import { DSRootContextProvider as s } from "./context.js";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { ThemeProvider as c } from "../theme-provider/component.js";
+import { Modal as d } from "../modal/index.js";
+import n from "antd/es/app/App";
+import { DSRootContextProvider as f } from "./context.js";
 import './style.css';/* empty css          */
-import { Toast as i } from "../toast/component.js";
-const j = ({
-  className: t,
-  appendClassesTo: e = "html",
-  children: m,
-  theme: o,
-  ...d
-}) => /* @__PURE__ */ r(s, { value: { theme: o }, children: /* @__PURE__ */ r(l, { theme: o, ...d, appendClassesTo: e, children: /* @__PURE__ */ r(c, { className: t, children: /* @__PURE__ */ r(i.Provider, { children: /* @__PURE__ */ p(n.Provider, { children: [
-  /* @__PURE__ */ r(i.List, {}),
-  m
-] }) }) }) }) });
+import { Toast as t } from "../toast/component.js";
+import { useCls as a } from "../utils/antdUtils.js";
+import { clsx as h } from "../utils/cn.js";
+const T = ({
+  className: i,
+  appendClassesTo: m = "html",
+  children: e,
+  theme: r,
+  ...s
+}) => {
+  const l = a();
+  return /* @__PURE__ */ o(f, { value: { theme: r }, children: /* @__PURE__ */ o(c, { theme: r, ...s, appendClassesTo: m, children: /* @__PURE__ */ o(t.Provider, { children: /* @__PURE__ */ p(d.Provider, { children: [
+    /* @__PURE__ */ o(t.List, {}),
+    /* @__PURE__ */ o(n, { className: h(l("root"), i), children: e })
+  ] }) }) }) });
+};
 export {
-  j as DSRoot
+  T as DSRoot
 };
 //# sourceMappingURL=component.js.map

package/dist/components/ds-root/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/ds-root/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  ThemeProvider,\n  type ThemeProviderProps,\n} from \"../theme-provider/component\";\nimport { Toast } from \"../toast\";\nimport { Modal } from \"../modal\";\nimport App from \"antd/es/app/App\";\nimport { DSRootContextProvider } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface DSRootProps extends ThemeProviderProps {\n  /**\n   * Classname passed to App component\n   */\n  className?: string;\n\n  /**\n   * Element to which the theme classes are appended\n   * @default \"html\"\n   */\n  appendClassesTo?: string | HTMLElement;\n}\n\nexport const DSRoot = ({\n  className,\n  appendClassesTo = \"html\",\n  children,\n  theme,\n  ...props\n}: DSRootProps) => {\n  return (\n    <DSRootContextProvider value={{ theme: theme }}>\n      <ThemeProvider theme={theme} {...props} appendClassesTo={appendClassesTo}>\n        <App className={className}>\n          <Toast.Provider>\n            <Modal.Provider>\n              <Toast.List />\n              {children}\n            </Modal.Provider>\n          </Toast.Provider>\n        </App>\n      </ThemeProvider>\n    </DSRootContextProvider>\n  );\n};\n"],"names":["DSRoot","className","appendClassesTo","children","theme","props","jsx","DSRootContextProvider","ThemeProvider","App","Toast","jsxs","Modal"],"mappings":";;;;;;;;AA0BO,MAAMA,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAACC,KAAsB,OAAO,EAAE,OAAAH,EAC9B,GAAA,UAAA,gBAAAE,EAACE,GAAc,EAAA,OAAAJ,GAAe,GAAGC,GAAO,iBAAAH,GACtC,UAAC,gBAAAI,EAAAG,GAAA,EAAI,WAAAR,GACH,UAAC,gBAAAK,EAAAI,EAAM,UAAN,EACC,UAAA,gBAAAC,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,EAAC,gBAAAN,EAAAI,EAAM,MAAN,EAAW;AAAA,EACXP;AACH,EAAA,CAAA,EACF,CAAA,GACF,EAAA,CACF,EACF,CAAA;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/ds-root/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  ThemeProvider,\n  type ThemeProviderProps,\n} from \"../theme-provider/component\";\nimport { Toast } from \"../toast\";\nimport { Modal } from \"../modal\";\nimport App from \"antd/es/app/App\";\nimport { DSRootContextProvider } from \"./context\";\nimport { useCls, clsx } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface DSRootProps extends ThemeProviderProps {\n  /**\n   * Classname passed to App component\n   */\n  className?: string;\n\n  /**\n   * Element to which the theme classes are appended\n   * @default \"html\"\n   */\n  appendClassesTo?: string | HTMLElement;\n}\n\nexport const DSRoot = ({\n  className,\n  appendClassesTo = \"html\",\n  children,\n  theme,\n  ...props\n}: DSRootProps) => {\n  const cls = useCls();\n  return (\n    <DSRootContextProvider value={{ theme: theme }}>\n      <ThemeProvider theme={theme} {...props} appendClassesTo={appendClassesTo}>\n        <Toast.Provider>\n          <Modal.Provider>\n            <Toast.List />\n            <App className={clsx(cls(\"root\"), className)}>{children}</App>\n          </Modal.Provider>\n        </Toast.Provider>\n      </ThemeProvider>\n    </DSRootContextProvider>\n  );\n};\n"],"names":["DSRoot","className","appendClassesTo","children","theme","props","cls","useCls","DSRootContextProvider","ThemeProvider","Toast","jsxs","Modal","jsx","App","clsx"],"mappings":";;;;;;;;;;AA2BO,MAAMA,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAAmB;AACjB,QAAMC,IAAMC,EAAO;AACnB,2BACGC,GAAsB,EAAA,OAAO,EAAE,OAAAJ,KAC9B,4BAACK,GAAc,EAAA,OAAAL,GAAe,GAAGC,GAAO,iBAAAH,GACtC,4BAACQ,EAAM,UAAN,EACC,UAAC,gBAAAC,EAAAC,EAAM,UAAN,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAH,EAAM,MAAN,EAAW;AAAA,IACZ,gBAAAG,EAACC,KAAI,WAAWC,EAAKT,EAAI,MAAM,GAAGL,CAAS,GAAI,UAAAE,EAAS,CAAA;AAAA,EAAA,GAC1D,EAAA,CACF,EACF,CAAA,GACF;AAEJ;"}

package/dist/components/ds-root/style.css

@@ -1 +1 @@
-@layer base{body{margin:0;padding:0}a[href],button:not(:disabled){cursor:pointer}svg{vertical-align:baseline}}@layer components{.ds-root{display:contents}@supports (scrollbar-width: auto){*{scrollbar-color:var(--ds-scrollbar-color-thumb) var(--ds-scrollbar-color-track);scrollbar-width:var(--ds-scrollbar-width)}}@supports selector(::-webkit-scrollbar){*::-webkit-scrollbar-thumb{background:var(--ds-scrollbar-color-thumb)}*::-webkit-scrollbar-track{background:var(--ds-scrollbar-color-track)}*::-webkit-scrollbar{max-width:var(--ds-scrollbar-width-legacy);max-height:var(--ds-scrollbar-width-legacy)}}}
+@layer base{body{margin:0;padding:0}html{overflow:hidden}a[href],button:not(:disabled){cursor:pointer}svg{vertical-align:baseline}}@layer components{.ds-root{isolation:isolate}@supports (scrollbar-width: auto){*{scrollbar-color:var(--ds-scrollbar-color-thumb) var(--ds-scrollbar-color-track);scrollbar-width:var(--ds-scrollbar-width)}}@supports selector(::-webkit-scrollbar){*::-webkit-scrollbar-thumb{background:var(--ds-scrollbar-color-thumb)}*::-webkit-scrollbar-track{background:var(--ds-scrollbar-color-track)}*::-webkit-scrollbar{max-width:var(--ds-scrollbar-width-legacy);max-height:var(--ds-scrollbar-width-legacy)}}}

package/dist/components/form/style.css

@@ -1 +1 @@
-@layer components{.ds-form-item-label-inner{display:inline-flex;align-items:center;gap:.25rem}.ds-form-item-label-optional-mark{color:var(--ds-color-text-tertiary)}:is(.ds-form-item-label>label.ds-form-item-required):after{display:none}:is(.ds-form-item-label>label.ds-form-item-required):before{display:none}.ds-form-item-label-required-mark{display:inline-block;font-size:var(--ds-font-size);font-family:Inter,sans-serif;line-height:1;content:"*"}.ds-form-item-label-required-mark.ds-form-item-label-required-mark-asterisk{color:var(--ds-form-label-required-mark-color)}.ds-form-item .ds-form-item-label>label:after{display:none}.ds-form-horizontal .ds-form-item .ds-form-item-label .ds-form-item-label-inner:after{content:":";position:relative;margin-block:0;margin-inline-start:var(--ds-form-label-colon-margin-inline-start);margin-inline-end:var(--ds-form-label-colon-margin-inline-end)}.ds-form-item-explain{margin-top:.25rem}.ds-form-item-margin-offset{margin:0!important}.ds-form-item-label{overflow:visible}.ds-form-item-row .ds-form-item-label label{width:100%}}
+@layer components{.ds-form-item-label-inner{display:inline-flex;align-items:center;gap:.25rem}.ds-form-item-label-optional-mark{color:var(--ds-color-text-tertiary)}.ds-form-item-label>label.ds-form-item-required:after{display:none}.ds-form-item-label>label.ds-form-item-required:before{display:none}.ds-form-item-label-required-mark{display:inline-block;font-size:var(--ds-font-size);font-family:Inter,sans-serif;line-height:1;content:"*"}.ds-form-item-label-required-mark.ds-form-item-label-required-mark-asterisk{color:var(--ds-form-label-required-mark-color)}.ds-form-item .ds-form-item-label>label:after{display:none}.ds-form-horizontal .ds-form-item .ds-form-item-label .ds-form-item-label-inner:after{content:":";position:relative;margin-block:0;margin-inline-start:var(--ds-form-label-colon-margin-inline-start);margin-inline-end:var(--ds-form-label-colon-margin-inline-end)}.ds-form-item-explain{margin-top:.25rem}.ds-form-item-margin-offset{margin:0!important}.ds-form-item-label{overflow:visible}.ds-form-item-row .ds-form-item-label label{width:100%}}

package/dist/components/modal/style.css

@@ -1 +1 @@
-@layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}:is(.ds-modal-wrap .ds-modal) .ds-modal-content{display:flex;flex-direction:column;padding:0;box-shadow:var(--ds-box-shadow-secondary);background:var(--ds-modal-bg, var(--ds-modal-content-bg))}:is(.ds-modal-wrap .ds-modal) .ds-modal-body{padding:var(--ds-modal-content-padding);flex-grow:1;flex-shrink:1;min-height:0;overflow:auto}:is(.ds-modal-wrap .ds-modal) .ds-modal-header{padding:calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);margin-bottom:0;background:transparent}:is(.ds-modal-wrap .ds-modal) .ds-modal-footer{padding:0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);margin-top:0;background:transparent}:is(.ds-modal-wrap .ds-modal) .ds-modal-close{top:calc(var(--ds-modal-padding) * 2 / 3 - 4px)}.ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner{margin-top:4rem}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2);margin:var(--ds-modal-edge-padding)}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal>div[tabindex="0"]{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2)}.ds-modal-no-body-scroll .ds-modal{max-height:100%}:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body{overflow:hidden;display:grid}:is(:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body)>*{min-height:0}.ds-modal-fullscreen .ds-modal>div[tabindex="0"]{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-inner{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-content{border-radius:0;height:100%;width:100%}:is(.ds-modal-fixed .ds-modal) .ds-modal-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}:is(.ds-modal-fixed .ds-modal) .ds-modal-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}:is(.ds-modal-fixed .ds-modal) .ds-modal-close{top:8px}:is(.ds-modal-content-overflow .ds-modal) .ds-modal-inner{margin-top:0}}
+@layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}.ds-modal-wrap .ds-modal .ds-modal-content{display:flex;flex-direction:column;padding:0;box-shadow:var(--ds-box-shadow-secondary);background:var(--ds-modal-bg, var(--ds-modal-content-bg))}.ds-modal-wrap .ds-modal .ds-modal-body{padding:var(--ds-modal-content-padding);flex-grow:1;flex-shrink:1;min-height:0;overflow:auto}.ds-modal-wrap .ds-modal .ds-modal-header{padding:calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);margin-bottom:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-footer{padding:0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);margin-top:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-close{top:calc(var(--ds-modal-padding) * 2 / 3 - 4px)}.ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner{margin-top:4rem}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2);margin:var(--ds-modal-edge-padding)}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal>div[tabindex="0"]{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2)}.ds-modal-no-body-scroll .ds-modal{max-height:100%}.ds-modal-no-body-scroll .ds-modal .ds-modal-body{overflow:hidden;display:grid}.ds-modal-no-body-scroll .ds-modal .ds-modal-body>*{min-height:0}.ds-modal-fullscreen .ds-modal>div[tabindex="0"]{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-inner{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-content{border-radius:0;height:100%;width:100%}.ds-modal-fixed .ds-modal .ds-modal-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-close{top:8px}.ds-modal-content-overflow .ds-modal .ds-modal-inner{margin-top:0}}

package/dist/components/nav/style.css

@@ -1 +1 @@
-@layer components{.ds-nav-group{display:flex;flex-direction:column;gap:.25rem}.ds-nav-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:1.25rem;color:var(--ds-color-icon);background:transparent;border-radius:var(--ds-border-radius);transition:background-color var(--ds-motion-duration-mid),color var(--ds-motion-duration-mid)}.ds-nav-item:hover{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item[data-active=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text)}.ds-nav-item:disabled{background:transparent;color:var(--ds-color-text-disabled);cursor:not-allowed}.ds-nav-item .ds-nav-item-icon{font-size:1.25rem;line-height:1;transition:all .1s}.ds-nav-item .ds-nav-item-content{flex:1;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:.875rem;line-height:1rem;transition:max-width .15s,opacity .15s}.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small{padding:.25rem .5rem}:is(.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small) .ds-nav-item-icon{font-size:1rem}.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large{padding:.5rem 1rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-icon{font-size:1.5rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-content{font-size:1rem;line-height:1.5rem}.ds-nav-heading{width:100%;height:.875rem;position:relative;color:var(--ds-color-text-tertiary);text-transform:uppercase;font-weight:500;letter-spacing:.002em;font-size:.75rem;line-height:1rem;margin-bottom:.5rem}.ds-nav-small .ds-nav-heading{font-size:.625rem;line-height:1.4}.ds-nav-heading-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;position:absolute;transition:all .1s;white-space:nowrap}}
+@layer components{.ds-nav-group{display:flex;flex-direction:column;gap:.25rem}.ds-nav-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:1.25rem;color:var(--ds-color-icon);background:transparent;border-radius:var(--ds-border-radius);transition:background-color var(--ds-motion-duration-mid),color var(--ds-motion-duration-mid)}.ds-nav-item:hover{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item[data-active=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text)}.ds-nav-item:disabled{background:transparent;color:var(--ds-color-text-disabled);cursor:not-allowed}.ds-nav-item .ds-nav-item-icon{font-size:1.25rem;line-height:1;transition:all .1s}.ds-nav-item .ds-nav-item-content{flex:1;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:.875rem;line-height:1rem;transition:max-width .15s,opacity .15s}.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small{padding:.25rem .5rem}.ds-nav-small .ds-nav-item .ds-nav-item-icon,.ds-nav-item.ds-nav-item-small .ds-nav-item-icon{font-size:1rem}.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large{padding:.5rem 1rem}.ds-nav-large .ds-nav-item .ds-nav-item-icon,.ds-nav-item.ds-nav-item-large .ds-nav-item-icon{font-size:1.5rem}.ds-nav-large .ds-nav-item .ds-nav-item-content,.ds-nav-item.ds-nav-item-large .ds-nav-item-content{font-size:1rem;line-height:1.5rem}.ds-nav-heading{width:100%;height:.875rem;position:relative;color:var(--ds-color-text-tertiary);text-transform:uppercase;font-weight:500;letter-spacing:.002em;font-size:.75rem;line-height:1rem;margin-bottom:.5rem}.ds-nav-small .ds-nav-heading{font-size:.625rem;line-height:1.4}.ds-nav-heading-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;position:absolute;transition:all .1s;white-space:nowrap}}

package/dist/components/resizable/component.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
-import T, { useState as R, useCallback as U, useEffect as W, isValidElement as X } from "react";
-import { useResizable as Y } from "react-use-resizable";
-import Z from "merge-refs";
-import { mergeProps as K } from "@base-ui-components/react";
+import U, { useState as R, useCallback as X, useEffect as W, isValidElement as Y } from "react";
+import { useResizable as Z } from "react-use-resizable";
+import K from "merge-refs";
+import { mergeProps as A } from "@base-ui-components/react";
 import './style.css';/* empty css          */
 import { getReactElementProp as x } from "../utils/reactElement.js";
-import { useCls as A } from "../utils/antdUtils.js";
-import { clsx as h, cn as s } from "../utils/cn.js";
-import { WithRenderProp as a } from "../utils/WithRenderProp.js";
+import { useCls as s } from "../utils/antdUtils.js";
+import { clsx as h, cn as a } from "../utils/cn.js";
+import { WithRenderProp as N } from "../utils/WithRenderProp.js";
 const ue = ({
   children: p,
   resizable: c = !1,
@@ -24,11 +24,11 @@ const ue = ({
   minHeight: q,
   onResize: F,
   maintainAspectRatio: r = !1,
-  ...N
+  ...G
 }) => {
-  const l = A(), [u, G] = R(null), [b, v] = R(), [H, y] = R(), [P, D] = R(!1), J = U(
+  const l = s(), [u, J] = R(null), [b, v] = R(), [H, y] = R(), [P, D] = R(!1), L = X(
     (e) => {
-      if (G(e), e && !b && !H) {
+      if (J(e), e && !b && !H) {
         const i = e.getBoundingClientRect();
         i.width > 0 && i.height > 0 && r && (v(i.width), y(i.height));
       }
@@ -42,7 +42,7 @@ const ue = ({
       e.width > 0 && e.height > 0 && (r ? (v(e.width), y(e.height)) : (v(void 0), y(void 0)));
     }
   }, [B, u, r]);
-  const w = Y({
+  const w = Z({
     initialWidth: r ? b : void 0,
     initialHeight: r ? H : void 0,
     maxWidth: _,
@@ -58,11 +58,11 @@ const ue = ({
       }
     },
     onDragEnd: () => D(!1)
-  }), S = X(p);
+  }), S = Y(p);
   W(() => {
     P ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
   }, [P]);
-  const { ref: L, ...M } = w.getRootProps(), d = w.getHandleProps, g = w.rootRef, C = (e, i) => {
+  const { ref: M, ...O } = w.getRootProps(), d = w.getHandleProps, g = w.rootRef, C = (e, i) => {
     if (!e.current || !V) return;
     const { widthDiff: E } = i;
     e.current.style.left = `${parseInt(e.current.style.left || "0") - E}px`;
@@ -70,7 +70,7 @@ const ue = ({
     if (!e.current || !V) return;
     const { heightDiff: E } = i;
     e.current.style.top = `${parseInt(e.current.style.top || "0") - E}px`;
-  }, O = c ? [
+  }, Q = c ? [
     o.top && !r && /* @__PURE__ */ n(
       "div",
       {
@@ -198,16 +198,16 @@ const ue = ({
     style: x(f, "style"),
     children: x(f, "children"),
     ref: f.ref
-  }, Q = {
-    className: s(
+  }, T = {
+    className: a(
       c && l("resizable"),
       t == null ? void 0 : t.root,
       z.className,
       m
     ),
-    ref: Z(
-      c ? L : void 0,
-      J,
+    ref: K(
+      c ? M : void 0,
+      L,
       // Always need this for dimension measurement
       f == null ? void 0 : f.ref
     ),
@@ -216,20 +216,21 @@ const ue = ({
     ...c ? { "data-resizable": !0 } : {},
     children: S ? [
       ...Array.isArray(z.children) ? z.children : [z.children],
-      ...O.filter(Boolean)
+      ...Q.filter(Boolean)
     ] : p
   };
   return /* @__PURE__ */ n(
-    a,
+    N,
     {
       render: (e) => {
-        const i = K(
+        const i = A(
           e,
-          Q,
-          c ? M : {}
+          T,
+          c ? O : {}
         );
-        return S ? T.cloneElement(f, i) : /* @__PURE__ */ n("div", { ...i, children: p });
-      }
+        return S ? U.cloneElement(f, i) : /* @__PURE__ */ n("div", { ...i, children: p });
+      },
+      ...G
     }
   );
 };

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

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

package/dist/components/scroll-area/component.js

@@ -1,34 +1,80 @@
 "use client";
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { ScrollArea as t } from "@base-ui-components/react";
+import { jsxs as x, jsx as f } from "react/jsx-runtime";
+import { useRef as y, useState as R, useEffect as T } from "react";
+import { ScrollArea as S } from "@base-ui-components/react";
 import './style.css';/* empty css          */
-import { useCls as b } from "../utils/antdUtils.js";
-import { clsx as l } from "../utils/cn.js";
-const S = ({
-  children: c,
-  className: n,
-  classNames: r = {},
-  orientation: i = "vertical"
+import { useCls as E } from "../utils/antdUtils.js";
+import { clsx as b } from "../utils/cn.js";
+const I = ({
+  children: m,
+  className: w,
+  classNames: o = {},
+  orientation: t = "vertical",
+  fadeEdges: e = !1,
+  onScroll: h
 }) => {
-  const o = b();
-  return /* @__PURE__ */ p(t.Root, { className: l(o("scroll-area"), n), children: [
-    /* @__PURE__ */ e(
-      t.Viewport,
+  const l = E(), u = y(null), [r, v] = R({
+    isAtStart: !0,
+    isAtEnd: !1,
+    isScrollable: !1
+  });
+  return T(() => {
+    if (!u.current) return;
+    const c = u.current, i = (d) => {
+      if (d && h && h(d), e)
+        if (t === "vertical") {
+          const { scrollTop: s, scrollHeight: a, clientHeight: n } = c, A = a > n;
+          v({
+            isAtStart: s <= 1,
+            isAtEnd: s >= a - n - 1,
+            isScrollable: A
+          });
+        } else {
+          const { scrollLeft: s, scrollWidth: a, clientWidth: n } = c, A = a > n + 2;
+          v({
+            isAtStart: s <= 1,
+            isAtEnd: s >= a - n - 1,
+            isScrollable: A
+          });
+        }
+    };
+    i();
+    const z = setTimeout(i, 0);
+    c.addEventListener("scroll", i);
+    const p = new ResizeObserver(() => {
+      i();
+    });
+    return p.observe(c), () => {
+      clearTimeout(z), c.removeEventListener("scroll", i), p.disconnect();
+    };
+  }, [e, t, h]), /* @__PURE__ */ x(S.Root, { className: b(l("scroll-area"), w), children: [
+    /* @__PURE__ */ f(
+      S.Viewport,
       {
-        className: l(o("scroll-area-viewport"), r == null ? void 0 : r.viewport),
-        children: /* @__PURE__ */ e(t.Content, { className: l(o("scroll-area-content")), children: c })
+        ref: u,
+        className: b(
+          l("scroll-area-viewport"),
+          e && r.isScrollable && t === "vertical" && r.isAtStart && l("scroll-area-fade-bottom-only"),
+          e && r.isScrollable && t === "vertical" && r.isAtEnd && l("scroll-area-fade-top-only"),
+          e && r.isScrollable && t === "vertical" && !r.isAtStart && !r.isAtEnd && l("scroll-area-fade-both-vertical"),
+          e && r.isScrollable && t === "horizontal" && r.isAtStart && l("scroll-area-fade-right-only"),
+          e && r.isScrollable && t === "horizontal" && r.isAtEnd && l("scroll-area-fade-left-only"),
+          e && r.isScrollable && t === "horizontal" && !r.isAtStart && !r.isAtEnd && l("scroll-area-fade-both-horizontal"),
+          o == null ? void 0 : o.viewport
+        ),
+        children: /* @__PURE__ */ f(S.Content, { className: b(l("scroll-area-content")), children: m })
       }
     ),
-    /* @__PURE__ */ e(
-      t.Scrollbar,
+    /* @__PURE__ */ f(
+      S.Scrollbar,
       {
-        className: l(o("scroll-area-scrollbar"), r == null ? void 0 : r.scrollbar),
-        orientation: i,
-        "data-orientation": i,
-        children: /* @__PURE__ */ e(
-          t.Thumb,
+        className: b(l("scroll-area-scrollbar"), o == null ? void 0 : o.scrollbar),
+        orientation: t,
+        "data-orientation": t,
+        children: /* @__PURE__ */ f(
+          S.Thumb,
           {
-            className: l(o("scroll-area-thumb"), r == null ? void 0 : r.thumb)
+            className: b(l("scroll-area-thumb"), o == null ? void 0 : o.thumb)
           }
         )
       }
@@ -36,6 +82,6 @@ const S = ({
   ] });
 };
 export {
-  S as ScrollArea
+  I as ScrollArea
 };
 //# sourceMappingURL=component.js.map

package/dist/components/scroll-area/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/scroll-area/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode } from \"react\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui-components/react\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ScrollAreaProps {\n  children: ReactNode;\n  /**\n   * Additional class name for the root component\n   */\n  className?: string;\n  /**\n   * Custom class names for each part of the scroll area\n   */\n  classNames?: {\n    /**\n     * Class name for the viewport element\n     */\n    viewport?: string;\n    /**\n     * Class name for the scrollbar element\n     */\n    scrollbar?: string;\n    /**\n     * Class name for the thumb element\n     */\n    thumb?: string;\n  };\n  /**\n   * Orientation of the scrollbar\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n}\n\nexport const ScrollArea = ({\n  children,\n  className,\n  classNames = {},\n  orientation = \"vertical\",\n}: ScrollAreaProps) => {\n  const cls = useCls();\n  return (\n    <BaseScrollArea.Root className={clsx(cls(\"scroll-area\"), className)}>\n      <BaseScrollArea.Viewport\n        className={clsx(cls(\"scroll-area-viewport\"), classNames?.viewport)}\n      >\n        <BaseScrollArea.Content className={clsx(cls(\"scroll-area-content\"))}>\n          {children}\n        </BaseScrollArea.Content>\n      </BaseScrollArea.Viewport>\n      <BaseScrollArea.Scrollbar\n        className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n        orientation={orientation}\n        data-orientation={orientation}\n      >\n        <BaseScrollArea.Thumb\n          className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n        />\n      </BaseScrollArea.Scrollbar>\n    </BaseScrollArea.Root>\n  );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","cls","useCls","jsxs","BaseScrollArea","clsx","jsx"],"mappings":";;;;;;AAsCO,MAAMA,IAAa,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa,CAAC;AAAA,EACd,aAAAC,IAAc;AAChB,MAAuB;AACrB,QAAMC,IAAMC,EAAO;AAEjB,SAAA,gBAAAC,EAACC,EAAe,MAAf,EAAoB,WAAWC,EAAKJ,EAAI,aAAa,GAAGH,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAACF,EAAe;AAAA,MAAf;AAAA,QACC,WAAWC,EAAKJ,EAAI,sBAAsB,GAAGF,KAAA,gBAAAA,EAAY,QAAQ;AAAA,QAEjE,UAAA,gBAAAO,EAACF,EAAe,SAAf,EAAuB,WAAWC,EAAKJ,EAAI,qBAAqB,CAAC,GAC/D,UAAAJ,EACH,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAS;AAAA,MAACF,EAAe;AAAA,MAAf;AAAA,QACC,WAAWC,EAAKJ,EAAI,uBAAuB,GAAGF,KAAA,gBAAAA,EAAY,SAAS;AAAA,QACnE,aAAAC;AAAA,QACA,oBAAkBA;AAAA,QAElB,UAAA,gBAAAM;AAAA,UAACF,EAAe;AAAA,UAAf;AAAA,YACC,WAAWC,EAAKJ,EAAI,mBAAmB,GAAGF,KAAA,gBAAAA,EAAY,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/scroll-area/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui-components/react\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ScrollAreaProps {\n  children: ReactNode;\n  /**\n   * Additional class name for the root component\n   */\n  className?: string;\n  /**\n   * Custom class names for each part of the scroll area\n   */\n  classNames?: {\n    /**\n     * Class name for the viewport element\n     */\n    viewport?: string;\n    /**\n     * Class name for the scrollbar element\n     */\n    scrollbar?: string;\n    /**\n     * Class name for the thumb element\n     */\n    thumb?: string;\n  };\n  /**\n   * Orientation of the scrollbar\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Enable fade-out effect at scrollable edges\n   * @default false\n   */\n  fadeEdges?: boolean;\n  /**\n   * Callback fired when the scroll position changes\n   */\n  onScroll?: (event: Event) => void;\n}\n\nexport const ScrollArea = ({\n  children,\n  className,\n  classNames = {},\n  orientation = \"vertical\",\n  fadeEdges = false,\n  onScroll,\n}: ScrollAreaProps) => {\n  const cls = useCls();\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const [scrollState, setScrollState] = useState({\n    isAtStart: true,\n    isAtEnd: false,\n    isScrollable: false,\n  });\n\n  useEffect(() => {\n    if (!viewportRef.current) return;\n\n    const viewport = viewportRef.current;\n\n    const handleScroll = (event?: Event) => {\n      // Call the onScroll callback if provided and event exists\n      if (event && onScroll) {\n        onScroll(event);\n      }\n\n      // Handle fade edges state update if enabled\n      if (fadeEdges) {\n        if (orientation === \"vertical\") {\n          const { scrollTop, scrollHeight, clientHeight } = viewport;\n          const isScrollable = scrollHeight > clientHeight;\n          setScrollState({\n            isAtStart: scrollTop <= 1,\n            isAtEnd: scrollTop >= scrollHeight - clientHeight - 1,\n            isScrollable,\n          });\n        } else {\n          const { scrollLeft, scrollWidth, clientWidth } = viewport;\n          // Add a small buffer (2px) to account for rounding errors\n          const isScrollable = scrollWidth > clientWidth + 2;\n          setScrollState({\n            isAtStart: scrollLeft <= 1,\n            isAtEnd: scrollLeft >= scrollWidth - clientWidth - 1,\n            isScrollable,\n          });\n        }\n      }\n    };\n\n    // Initial check (without event)\n    handleScroll();\n\n    // Use a timeout to check again after content might have rendered\n    const timeoutId = setTimeout(handleScroll, 0);\n\n    viewport.addEventListener(\"scroll\", handleScroll);\n\n    // Add resize observer to detect content size changes\n    const resizeObserver = new ResizeObserver(() => {\n      handleScroll();\n    });\n    resizeObserver.observe(viewport);\n\n    return () => {\n      clearTimeout(timeoutId);\n      viewport.removeEventListener(\"scroll\", handleScroll);\n      resizeObserver.disconnect();\n    };\n  }, [fadeEdges, orientation, onScroll]);\n  return (\n    <BaseScrollArea.Root className={clsx(cls(\"scroll-area\"), className)}>\n      <BaseScrollArea.Viewport\n        ref={viewportRef}\n        className={clsx(\n          cls(\"scroll-area-viewport\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"vertical\" &&\n            scrollState.isAtStart &&\n            cls(\"scroll-area-fade-bottom-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"vertical\" &&\n            scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-top-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"vertical\" &&\n            !scrollState.isAtStart &&\n            !scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-both-vertical\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"horizontal\" &&\n            scrollState.isAtStart &&\n            cls(\"scroll-area-fade-right-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"horizontal\" &&\n            scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-left-only\"),\n          fadeEdges &&\n            scrollState.isScrollable &&\n            orientation === \"horizontal\" &&\n            !scrollState.isAtStart &&\n            !scrollState.isAtEnd &&\n            cls(\"scroll-area-fade-both-horizontal\"),\n          classNames?.viewport\n        )}\n      >\n        <BaseScrollArea.Content className={clsx(cls(\"scroll-area-content\"))}>\n          {children}\n        </BaseScrollArea.Content>\n      </BaseScrollArea.Viewport>\n      <BaseScrollArea.Scrollbar\n        className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n        orientation={orientation}\n        data-orientation={orientation}\n      >\n        <BaseScrollArea.Thumb\n          className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n        />\n      </BaseScrollArea.Scrollbar>\n    </BaseScrollArea.Root>\n  );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","fadeEdges","onScroll","cls","useCls","viewportRef","useRef","scrollState","setScrollState","useState","useEffect","viewport","handleScroll","event","scrollTop","scrollHeight","clientHeight","isScrollable","scrollLeft","scrollWidth","clientWidth","timeoutId","resizeObserver","jsxs","BaseScrollArea","clsx","jsx"],"mappings":"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"}

package/dist/components/scroll-area/style.css

@@ -1 +1 @@
-@layer components{.ds-scroll-area{display:flex;flex-direction:column;height:100%;min-height:0;flex:1}.ds-scroll-area .ds-scroll-area-viewport{flex-shrink:1;height:100%;max-height:100%;overflow:hidden;overscroll-behavior:contain}:is(.ds-scroll-area .ds-scroll-area-viewport):focus-visible{outline-width:2px;outline-offset:4px;outline-color:var(--ds-color-primary)}.ds-scroll-area .ds-scroll-area-scrollbar{padding:.125rem;display:flex;justify-content:center;background-color:transparent;opacity:0;transition-property:opacity;transition-delay:.1s}:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{border-radius:9999px;background-color:var(--ds-color-bg-fill-tertiary);border:1px solid var(--ds-color-border)}[data-orientation=vertical]:is(.ds-scroll-area .ds-scroll-area-scrollbar){width:.625rem}[data-orientation=vertical]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{width:100%}[data-orientation=horizontal]:is(.ds-scroll-area .ds-scroll-area-scrollbar){width:100%;height:.625rem;flex-direction:column}[data-orientation=horizontal]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb{height:100%}[data-hovering]:is(.ds-scroll-area .ds-scroll-area-scrollbar){opacity:1;transition-delay:0ms;transition-duration:.2s}[data-scrolling]:is(.ds-scroll-area .ds-scroll-area-scrollbar){opacity:1;transition-delay:0ms;transition-duration:.2s}}
+@layer components{.ds-scroll-area{--ds-scroll-area-fade-distance: 20px;display:flex;flex-direction:column;height:100%;min-height:0;flex:1}.ds-scroll-area .ds-scroll-area-viewport{flex-shrink:1;height:100%;max-height:100%;overflow:hidden;overscroll-behavior:contain}.ds-scroll-area .ds-scroll-area-viewport:focus-visible{outline-width:2px;outline-offset:4px;outline-color:var(--ds-color-primary)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-bottom-only{mask-image:linear-gradient(to bottom,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-top-only{mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-both-vertical{mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-right-only{mask-image:linear-gradient(to right,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to right,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-left-only{mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-both-horizontal{mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-scrollbar{padding:.125rem;display:flex;justify-content:center;background-color:transparent;opacity:0;transition-property:opacity;transition-delay:.1s}.ds-scroll-area .ds-scroll-area-scrollbar .ds-scroll-area-thumb{border-radius:9999px;background-color:var(--ds-color-bg-fill-tertiary);border:1px solid var(--ds-color-border)}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=vertical]{width:.625rem}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=vertical] .ds-scroll-area-thumb{width:100%}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=horizontal]{width:100%;height:.625rem;flex-direction:column}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=horizontal] .ds-scroll-area-thumb{height:100%}.ds-scroll-area .ds-scroll-area-scrollbar[data-hovering],.ds-scroll-area .ds-scroll-area-scrollbar[data-scrolling]{opacity:1;transition-delay:0ms;transition-duration:.2s}}