@bioturing/components 0.33.1 → 0.34.0

package/dist/components/code-block/component.d.ts

@@ -1,3 +1,3 @@
 import { CodeBlockProps } from './types';
-export declare const CodeBlock: ({ code, children, lang: defaultLang, className, options, activeOption: controlledActiveOption, defaultActiveOption, onActiveOptionChange, copyText, copySuccessText, classNames, maxHeight, onCopy, ...rest }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: ({ code, children, lang: defaultLang, className, options, activeOption: controlledActiveOption, defaultActiveOption, onActiveOptionChange, copyText, copySuccessText, classNames, maxHeight, onCopy, theme, themeProviderProps, scrollAreaProps, ...rest }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=component.d.ts.map

package/dist/components/code-block/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/component.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,OAAO,aAAa,CAAC;AAGrB,eAAO,MAAM,SAAS,GAAI,+MAgBvB,cAAc,4CA4HhB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/component.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,OAAO,aAAa,CAAC;AAQrB,eAAO,MAAM,SAAS,GAAI,2PAmBvB,cAAc,4CAqIhB,CAAC"}

package/dist/components/code-block/component.js

@@ -1,127 +1,136 @@
 "use client";
-import { jsx as e, jsxs as q } from "react/jsx-runtime";
-import { CheckIcon as z, CopyIcon as G } from "@bioturing/assets";
-import { Highlight as J, themes as K } from "prism-react-renderer";
-import { useState as a, useEffect as Q, useCallback as S } from "react";
-import { ThemeProvider as R } from "../theme-provider/component.js";
+import { jsxs as R, jsx as e } from "react/jsx-runtime";
+import { CheckIcon as U, CopyIcon as V } from "@bioturing/assets";
+import { Highlight as W, themes as T } from "prism-react-renderer";
+import { useState as i, useEffect as X, useCallback as I } from "react";
+import { ThemeProvider as Y } from "../theme-provider/component.js";
 import './style.css';/* empty css          */
-import { Segmented as U } from "../segmented/component.js";
-import { useControlledState as V } from "../hooks/useControlledState.js";
-import { reactNodeToString as W } from "../utils/reactToString.js";
-import { useCls as X } from "../utils/antdUtils.js";
-import { clsx as Y } from "../utils/cn.js";
-import { IconButton as Z } from "../icon-button/component.js";
-import { ScrollArea as H } from "../scroll-area/component.js";
-const he = ({
-  code: f,
-  children: i,
+import { Segmented as Z } from "../segmented/component.js";
+import { useControlledState as ee } from "../hooks/useControlledState.js";
+import { reactNodeToString as oe } from "../utils/reactToString.js";
+import { useCls as te } from "../utils/antdUtils.js";
+import { useTheme as re } from "../theme-provider/context/themeStore.js";
+import { clsx as ne } from "../utils/cn.js";
+import { IconButton as ce } from "../icon-button/component.js";
+import { ScrollArea as se } from "../scroll-area/component.js";
+const M = {
+  dark: T.vsDark,
+  light: T.vsLight
+}, ye = ({
+  code: v,
+  children: m,
   // initial,
-  lang: m = "tsx",
-  className: N,
+  lang: d = "tsx",
+  className: w,
   options: t,
-  activeOption: w,
-  defaultActiveOption: v = 0,
-  onActiveOptionChange: I,
-  copyText: d = "Copy",
+  activeOption: x,
+  defaultActiveOption: g = 0,
+  onActiveOptionChange: E,
+  copyText: p = "Copy",
   copySuccessText: b = "Copied",
-  classNames: p,
+  classNames: h,
   maxHeight: c,
-  onCopy: h,
-  ...O
+  onCopy: u,
+  theme: s = "auto",
+  themeProviderProps: L,
+  scrollAreaProps: O,
+  ...j
 }) => {
-  const [l, g] = V(
-    w,
-    I,
-    v
-  ), [n, j] = a(f || ""), [x, B] = a(m), C = t && t.length > 0;
-  Q(() => {
+  const [l, k] = ee(
+    x,
+    E,
+    g
+  ), [n, A] = i(v || ""), [B, F] = i(d), C = t && t.length > 0;
+  X(() => {
     if (C) {
-      const o = t[l]?.code || "", r = t[l]?.lang || m;
-      j(o), B(r);
+      const o = t[l]?.code || "", r = t[l]?.lang || d;
+      A(o), F(r);
     }
   }, [
-    f,
-    l,
     v,
+    l,
+    g,
     t,
-    m,
+    d,
     C,
-    g
+    k
   ]);
-  const [L, u] = a(d), [M, k] = a(!1), T = S(() => {
-    const o = n || W(i);
+  const [P, f] = i(p), [_, y] = i(!1), D = I(() => {
+    const o = n || oe(m);
     try {
       navigator.clipboard.writeText(o).then(() => {
-        u(b), k(!0), h && h(o);
+        f(b), y(!0), u && u(o);
       });
     } catch {
-      u("Failed to copy");
+      f("Failed to copy");
     }
-  }, [n, i, b, h]), A = S(() => {
-    u(d), k(!1);
-  }, [d]), s = X();
-  return /* @__PURE__ */ e(R, { theme: "dark", appendClassesToChildren: !0, children: /* @__PURE__ */ q(
+  }, [n, m, b, u]), $ = I(() => {
+    f(p), y(!1);
+  }, [p]), a = te(), { theme: q } = re(), S = () => /* @__PURE__ */ R(
     "div",
     {
-      className: Y(s("code-block"), N, p?.root),
-      ...O,
+      className: ne(a("code-block"), w, h?.root),
+      ...j,
       children: [
-        C && /* @__PURE__ */ e("div", { className: s("code-block-header", p?.header), children: /* @__PURE__ */ e(
-          U,
+        C && /* @__PURE__ */ e("div", { className: a("code-block-header", h?.header), children: /* @__PURE__ */ e(
+          Z,
           {
             value: l,
-            onChange: g,
+            onChange: k,
             options: t.map((o, r) => ({
               label: o.label,
               value: r
             }))
           }
         ) }),
-        /* @__PURE__ */ e("div", { className: s("code-block-copy"), children: /* @__PURE__ */ e(
-          Z,
+        /* @__PURE__ */ e("div", { className: a("code-block-copy"), children: /* @__PURE__ */ e(
+          ce,
           {
-            onClick: T,
-            label: L,
-            onMouseLeave: A,
-            children: M ? /* @__PURE__ */ e(z, {}) : /* @__PURE__ */ e(G, {})
+            onClick: D,
+            label: P,
+            onMouseLeave: $,
+            children: _ ? /* @__PURE__ */ e(U, {}) : /* @__PURE__ */ e(V, {})
           }
         ) }),
         /* @__PURE__ */ e(
           "div",
           {
-            className: s("code-block-content", p?.content),
+            className: a("code-block-content", h?.content),
             style: {
               maxHeight: c && (typeof c == "number" ? `${c}px` : c)
             },
-            children: /* @__PURE__ */ e(H, { children: n ? /* @__PURE__ */ e(
-              J,
+            children: /* @__PURE__ */ e(se, { orientation: "both", ...O, children: n ? /* @__PURE__ */ e(
+              W,
               {
-                language: x,
+                language: B,
                 code: n,
-                theme: K.vsDark,
-                children: ({
-                  className: o,
-                  style: r,
-                  tokens: D,
-                  getLineProps: E,
-                  getTokenProps: F
-                }) => /* @__PURE__ */ e(
+                theme: s == "auto" ? M[q] : M[s],
+                children: ({ className: o, style: r, tokens: z, getLineProps: G, getTokenProps: H }) => /* @__PURE__ */ e(
                   "pre",
                   {
                     style: { ...r, backgroundColor: "transparent" },
                     className: o,
-                    children: D.map((y, P) => /* @__PURE__ */ e("div", { ...E({ line: y }), children: y.map((_, $) => /* @__PURE__ */ e("span", { ...F({ token: _ }) }, $)) }, P))
+                    children: z.map((N, J) => /* @__PURE__ */ e("div", { ...G({ line: N }), children: N.map((K, Q) => /* @__PURE__ */ e("span", { ...H({ token: K }) }, Q)) }, J))
                   }
                 )
               }
-            ) : i })
+            ) : m })
           }
         )
       ]
     }
-  ) });
+  );
+  return s == "auto" ? S() : /* @__PURE__ */ e(
+    Y,
+    {
+      theme: s,
+      appendClassesToChildren: !0,
+      ...L,
+      children: S()
+    }
+  );
 };
 export {
-  he as CodeBlock
+  ye as CodeBlock
 };
 //# sourceMappingURL=component.js.map

package/dist/components/code-block/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/code-block/component.tsx"],"sourcesContent":["\"use client\";\nimport { CheckIcon, CopyIcon } from \"@bioturing/assets\";\nimport { Highlight, themes } from \"prism-react-renderer\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useControlledState } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { Segmented } from \"../segmented\";\nimport { ThemeProvider } from \"../theme-provider/component\";\nimport { clsx, reactNodeToString, useCls } from \"../utils\";\nimport type { CodeBlockProps } from \"./types\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useTheme } from \"../theme-provider\";\n\nexport const CodeBlock = ({\n  code,\n  children,\n  // initial,\n  lang: defaultLang = \"tsx\",\n  className,\n  options,\n  activeOption: controlledActiveOption,\n  defaultActiveOption = 0,\n  onActiveOptionChange,\n  copyText = \"Copy\",\n  copySuccessText = \"Copied\",\n  classNames,\n  maxHeight,\n  onCopy,\n  ...rest\n}: CodeBlockProps) => {\n  const [activeOption, setActiveOption] = useControlledState(\n    controlledActiveOption,\n    onActiveOptionChange,\n    defaultActiveOption\n  );\n\n  const [currentCode, setCurrentCode] = useState(code || \"\");\n\n  const [lang, setLang] = useState(defaultLang);\n\n  const hasOptions = options && options.length > 0;\n\n  useEffect(() => {\n    if (hasOptions) {\n      const newCode = options[activeOption]?.code || \"\";\n      const newLang = options[activeOption]?.lang || defaultLang;\n      setCurrentCode(newCode);\n      setLang(newLang);\n    }\n  }, [\n    code,\n    activeOption,\n    defaultActiveOption,\n    options,\n    defaultLang,\n    hasOptions,\n    setActiveOption,\n  ]);\n\n  const [tooltipContent, setTooltipContent] = useState(copyText);\n  const [copySuccess, setCopySuccess] = useState(false);\n\n  const handleCopy = useCallback(() => {\n    const codeContent = currentCode ? currentCode : reactNodeToString(children);\n    try {\n      navigator.clipboard.writeText(codeContent).then(() => {\n        setTooltipContent(copySuccessText);\n        setCopySuccess(true);\n        if (onCopy) onCopy(codeContent);\n      });\n    } catch (_) {\n      setTooltipContent(\"Failed to copy\");\n    }\n  }, [currentCode, children, copySuccessText, onCopy]);\n\n  const handleMouseLeave = useCallback(() => {\n    setTooltipContent(copyText);\n    setCopySuccess(false);\n  }, [copyText]);\n\n  const cls = useCls();\n\n  return (\n    <ThemeProvider theme={\"dark\"} appendClassesToChildren>\n      <div\n        className={clsx(cls(\"code-block\"), className, classNames?.root)}\n        {...rest}\n      >\n        {hasOptions && (\n          <div className={cls(\"code-block-header\", classNames?.header)}>\n            <Segmented\n              value={activeOption}\n              onChange={setActiveOption}\n              options={options.map((opt, index) => ({\n                label: opt.label,\n                value: index,\n              }))}\n            />\n          </div>\n        )}\n        <div className={cls(\"code-block-copy\")}>\n          <IconButton\n            onClick={handleCopy}\n            label={tooltipContent}\n            onMouseLeave={handleMouseLeave}\n          >\n            {copySuccess ? <CheckIcon /> : <CopyIcon />}\n          </IconButton>\n        </div>\n        <div\n          className={cls(\"code-block-content\", classNames?.content)}\n          style={{\n            maxHeight:\n              maxHeight &&\n              (typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight),\n          }}\n        >\n          <ScrollArea>\n            {currentCode ? (\n              <Highlight\n                language={lang}\n                code={currentCode}\n                theme={themes.vsDark}\n              >\n                {({\n                  className,\n                  style,\n                  tokens,\n                  getLineProps,\n                  getTokenProps,\n                }) => (\n                  <pre\n                    style={{ ...style, backgroundColor: \"transparent\" }}\n                    className={className}\n                  >\n                    {tokens.map((line, i) => (\n                      <div key={i} {...getLineProps({ line })}>\n                        {line.map((token, key) => (\n                          <span key={key} {...getTokenProps({ token })} />\n                        ))}\n                      </div>\n                    ))}\n                  </pre>\n                )}\n              </Highlight>\n            ) : (\n              children\n            )}\n          </ScrollArea>\n        </div>\n      </div>\n    </ThemeProvider>\n  );\n};\n"],"names":["CodeBlock","code","children","defaultLang","className","options","controlledActiveOption","defaultActiveOption","onActiveOptionChange","copyText","copySuccessText","classNames","maxHeight","onCopy","rest","activeOption","setActiveOption","useControlledState","currentCode","setCurrentCode","useState","lang","setLang","hasOptions","useEffect","newCode","newLang","tooltipContent","setTooltipContent","copySuccess","setCopySuccess","handleCopy","useCallback","codeContent","reactNodeToString","handleMouseLeave","cls","useCls","jsx","ThemeProvider","jsxs","clsx","Segmented","opt","index","IconButton","CheckIcon","CopyIcon","ScrollArea","Highlight","themes","style","tokens","getLineProps","getTokenProps","line","i","token","key"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/code-block/component.tsx"],"sourcesContent":["\"use client\";\nimport { CheckIcon, CopyIcon } from \"@bioturing/assets\";\nimport { Highlight, themes } from \"prism-react-renderer\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useControlledState } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { Segmented } from \"../segmented\";\nimport { ThemeProvider } from \"../theme-provider/component\";\nimport { clsx, reactNodeToString, useCls } from \"../utils\";\nimport type { CodeBlockProps } from \"./types\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useTheme } from \"../theme-provider\";\n\nconst THEME_MAP = {\n  dark: themes.vsDark,\n  light: themes.vsLight,\n};\n\nexport const CodeBlock = ({\n  code,\n  children,\n  // initial,\n  lang: defaultLang = \"tsx\",\n  className,\n  options,\n  activeOption: controlledActiveOption,\n  defaultActiveOption = 0,\n  onActiveOptionChange,\n  copyText = \"Copy\",\n  copySuccessText = \"Copied\",\n  classNames,\n  maxHeight,\n  onCopy,\n  theme = \"auto\",\n  themeProviderProps,\n  scrollAreaProps,\n  ...rest\n}: CodeBlockProps) => {\n  const [activeOption, setActiveOption] = useControlledState(\n    controlledActiveOption,\n    onActiveOptionChange,\n    defaultActiveOption\n  );\n\n  const [currentCode, setCurrentCode] = useState(code || \"\");\n\n  const [lang, setLang] = useState(defaultLang);\n\n  const hasOptions = options && options.length > 0;\n\n  useEffect(() => {\n    if (hasOptions) {\n      const newCode = options[activeOption]?.code || \"\";\n      const newLang = options[activeOption]?.lang || defaultLang;\n      setCurrentCode(newCode);\n      setLang(newLang);\n    }\n  }, [\n    code,\n    activeOption,\n    defaultActiveOption,\n    options,\n    defaultLang,\n    hasOptions,\n    setActiveOption,\n  ]);\n\n  const [tooltipContent, setTooltipContent] = useState(copyText);\n  const [copySuccess, setCopySuccess] = useState(false);\n\n  const handleCopy = useCallback(() => {\n    const codeContent = currentCode ? currentCode : reactNodeToString(children);\n    try {\n      navigator.clipboard.writeText(codeContent).then(() => {\n        setTooltipContent(copySuccessText);\n        setCopySuccess(true);\n        if (onCopy) onCopy(codeContent);\n      });\n    } catch (_) {\n      setTooltipContent(\"Failed to copy\");\n    }\n  }, [currentCode, children, copySuccessText, onCopy]);\n\n  const handleMouseLeave = useCallback(() => {\n    setTooltipContent(copyText);\n    setCopySuccess(false);\n  }, [copyText]);\n\n  const cls = useCls();\n  const { theme: currentThemeFromContext } = useTheme();\n\n  const renderInner = () => (\n    <div\n      className={clsx(cls(\"code-block\"), className, classNames?.root)}\n      {...rest}\n    >\n      {hasOptions && (\n        <div className={cls(\"code-block-header\", classNames?.header)}>\n          <Segmented\n            value={activeOption}\n            onChange={setActiveOption}\n            options={options.map((opt, index) => ({\n              label: opt.label,\n              value: index,\n            }))}\n          />\n        </div>\n      )}\n      <div className={cls(\"code-block-copy\")}>\n        <IconButton\n          onClick={handleCopy}\n          label={tooltipContent}\n          onMouseLeave={handleMouseLeave}\n        >\n          {copySuccess ? <CheckIcon /> : <CopyIcon />}\n        </IconButton>\n      </div>\n      <div\n        className={cls(\"code-block-content\", classNames?.content)}\n        style={{\n          maxHeight:\n            maxHeight &&\n            (typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight),\n        }}\n      >\n        <ScrollArea orientation=\"both\" {...scrollAreaProps}>\n          {currentCode ? (\n            <Highlight\n              language={lang}\n              code={currentCode}\n              theme={\n                theme == \"auto\"\n                  ? THEME_MAP[currentThemeFromContext]\n                  : THEME_MAP[theme]\n              }\n            >\n              {({ className, style, tokens, getLineProps, getTokenProps }) => (\n                <pre\n                  style={{ ...style, backgroundColor: \"transparent\" }}\n                  className={className}\n                >\n                  {tokens.map((line, i) => (\n                    <div key={i} {...getLineProps({ line })}>\n                      {line.map((token, key) => (\n                        <span key={key} {...getTokenProps({ token })} />\n                      ))}\n                    </div>\n                  ))}\n                </pre>\n              )}\n            </Highlight>\n          ) : (\n            children\n          )}\n        </ScrollArea>\n      </div>\n    </div>\n  );\n\n  return theme == \"auto\" ? (\n    renderInner()\n  ) : (\n    <ThemeProvider\n      theme={theme}\n      appendClassesToChildren\n      {...themeProviderProps}\n    >\n      {renderInner()}\n    </ThemeProvider>\n  );\n};\n"],"names":["THEME_MAP","themes","CodeBlock","code","children","defaultLang","className","options","controlledActiveOption","defaultActiveOption","onActiveOptionChange","copyText","copySuccessText","classNames","maxHeight","onCopy","theme","themeProviderProps","scrollAreaProps","rest","activeOption","setActiveOption","useControlledState","currentCode","setCurrentCode","useState","lang","setLang","hasOptions","useEffect","newCode","newLang","tooltipContent","setTooltipContent","copySuccess","setCopySuccess","handleCopy","useCallback","codeContent","reactNodeToString","handleMouseLeave","cls","useCls","currentThemeFromContext","useTheme","renderInner","jsxs","clsx","jsx","Segmented","opt","index","IconButton","CheckIcon","CopyIcon","ScrollArea","Highlight","style","tokens","getLineProps","getTokenProps","line","i","token","key","ThemeProvider"],"mappings":"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"}

package/dist/components/code-block/types.d.ts

@@ -1,4 +1,7 @@
 import { HighlightProps } from 'prism-react-renderer';
+import { Theme } from '../../tokens';
+import { ThemeProviderProps } from '../theme-provider';
+import { ScrollAreaProps } from '../scroll-area';
 export interface CodeOption {
     label: string;
     code: string;
@@ -60,5 +63,19 @@ export interface CodeBlockProps extends Omit<React.ComponentPropsWithRef<"div">,
      * Copy callback function
      */
     onCopy?: (code?: string) => void;
+    /**
+     * Theme of the code block
+     * @default "dark"
+     */
+    theme?: Theme | "auto";
+    /**
+     * Props to pass to the ThemeProvider
+     * Only works when theme is not "auto"
+     */
+    themeProviderProps?: ThemeProviderProps;
+    /**
+     * Props to pass to the ScrollArea
+     */
+    scrollAreaProps?: ScrollAreaProps;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/code-block/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC;IAC1D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC;IAC1D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC"}

package/dist/components/scroll-area/component.d.ts

@@ -52,7 +52,7 @@ export interface ScrollAreaProps extends Omit<BaseScrollArea.Root.Props, "onScro
      * Orientation of the scrollbar
      * @default "vertical"
      */
-    orientation?: "vertical" | "horizontal";
+    orientation?: "vertical" | "horizontal" | "both";
     /**
      * Enable fade-out effect at scrollable edges
      * @default false

package/dist/components/scroll-area/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAIzE,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,GAAI,wFASxB,eAAe,4CAoIjB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAIzE,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACjD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,GAAI,wFASxB,eAAe,4CAmJjB,CAAC"}

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

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

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, 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  extends Omit<BaseScrollArea.Root.Props, \"onScroll\"> {\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 content element\n     */\n    content?: 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   * Custom styles for each part of the scroll area\n   */\n  styles?: {\n    /**\n     * Styles for the viewport element\n     */\n    viewport?: React.CSSProperties;\n    /**\n     * Styles for the content element\n     */\n    content?: React.CSSProperties;\n    /**\n     * Styles for the scrollbar element\n     */\n    scrollbar?: React.CSSProperties;\n    /**\n     * Styles for the thumb element\n     */\n    thumb?: React.CSSProperties;\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  styles = {},\n  ...rest\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\n      className={clsx(cls(\"scroll-area\"), className)}\n      {...rest}\n    >\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        style={styles?.viewport}\n      >\n        {orientation == \"horizontal\" ? (\n          <BaseScrollArea.Content\n            className={clsx(cls(\"scroll-area-content\"), classNames?.content)}\n            style={styles?.content}\n          >\n            {children}\n          </BaseScrollArea.Content>\n        ) : (\n          children\n        )}\n      </BaseScrollArea.Viewport>\n      <BaseScrollArea.Scrollbar\n        className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n        orientation={orientation}\n        data-orientation={orientation}\n        style={styles?.scrollbar}\n      >\n        <BaseScrollArea.Thumb\n          className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n          style={styles?.thumb}\n        />\n      </BaseScrollArea.Scrollbar>\n    </BaseScrollArea.Root>\n  );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","fadeEdges","onScroll","styles","rest","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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"}
+{"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  extends Omit<BaseScrollArea.Root.Props, \"onScroll\"> {\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 content element\n     */\n    content?: 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   * Custom styles for each part of the scroll area\n   */\n  styles?: {\n    /**\n     * Styles for the viewport element\n     */\n    viewport?: React.CSSProperties;\n    /**\n     * Styles for the content element\n     */\n    content?: React.CSSProperties;\n    /**\n     * Styles for the scrollbar element\n     */\n    scrollbar?: React.CSSProperties;\n    /**\n     * Styles for the thumb element\n     */\n    thumb?: React.CSSProperties;\n  };\n  /**\n   * Orientation of the scrollbar\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\" | \"both\";\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  styles = {},\n  ...rest\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\n      className={clsx(cls(\"scroll-area\"), className)}\n      {...rest}\n    >\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        style={styles?.viewport}\n      >\n        {orientation == \"horizontal\" ? (\n          <BaseScrollArea.Content\n            className={clsx(cls(\"scroll-area-content\"), classNames?.content)}\n            style={styles?.content}\n          >\n            {children}\n          </BaseScrollArea.Content>\n        ) : (\n          children\n        )}\n      </BaseScrollArea.Viewport>\n      {(orientation == \"horizontal\" || orientation == \"both\") && (\n        <BaseScrollArea.Scrollbar\n          className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n          orientation={\"horizontal\"}\n          data-orientation={\"horizontal\"}\n          style={styles?.scrollbar}\n        >\n          <BaseScrollArea.Thumb\n            className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n            style={styles?.thumb}\n          />\n        </BaseScrollArea.Scrollbar>\n      )}\n      {(orientation == \"vertical\" || orientation == \"both\") && (\n        <BaseScrollArea.Scrollbar\n          className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n          orientation={\"vertical\"}\n          data-orientation={\"vertical\"}\n          style={styles?.scrollbar}\n        >\n          <BaseScrollArea.Thumb\n            className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n            style={styles?.thumb}\n          />\n        </BaseScrollArea.Scrollbar>\n      )}\n    </BaseScrollArea.Root>\n  );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","fadeEdges","onScroll","styles","rest","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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"}