@clasing/ui 2.5.0 → 2.7.0

package/dist/components/phone-input.es.js

@@ -1,207 +1,300 @@
-import { j as e, c as u } from "../index-BCEGphus.js";
-import { C as y, d as v, f as N, b as S, c as w, e as I } from "../command-CGrOI2Z9.js";
-import { I as P } from "../input-BvfRiqqw.js";
-import { P as R, c as O, b as E } from "../popover-1_WpciTS.js";
-import { S as T } from "../scroll-area-CxpVQq0v.js";
-import { CaretDownIcon as V, CheckIcon as k } from "@phosphor-icons/react";
-import * as p from "react";
-import * as h from "react-phone-number-input";
-import A from "react-phone-number-input/flags";
-import F from "react-phone-number-input/locale/en";
-import _ from "react-phone-number-input/locale/es";
-import $ from "react-phone-number-input/locale/fr";
-const q = p.forwardRef(
+import { j as e, c as p } from "../index-CwFDnnd3.js";
+import { C as k, d as A, f as F, b as L, c as D, e as N } from "../command-Vk11GgqU.js";
+import { I as M } from "../input-kOA9xJIa.js";
+import { P as q, c as H, b as G } from "../popover-eQq2Is-I.js";
+import { S as W } from "../scroll-area-CJy_EOqT.js";
+import { CaretDownIcon as $, CheckIcon as B } from "@phosphor-icons/react";
+import * as t from "react";
+import * as I from "react-phone-number-input";
+import J from "react-phone-number-input/flags";
+import K from "react-phone-number-input/locale/en";
+import Q from "react-phone-number-input/locale/es";
+import U from "react-phone-number-input/locale/fr";
+function X(r, n) {
+  const [o, s] = t.useState(r);
+  return t.useEffect(() => {
+    const a = setTimeout(() => {
+      s(r);
+    }, n);
+    return () => {
+      clearTimeout(a);
+    };
+  }, [r, n]), o;
+}
+const Y = t.forwardRef(
   ({
-    className: o,
-    onChange: r,
-    value: t,
+    className: r,
+    onChange: n,
+    value: o,
     size: s = "md",
-    rounded: n = "default",
-    locale: a = "en",
-    ...i
-  }, m) => /* @__PURE__ */ e.jsx(
-    h.default,
+    rounded: a = "default",
+    locale: d = "en",
+    ...u
+  }, c) => /* @__PURE__ */ e.jsx(
+    I.default,
     {
-      ref: m,
-      className: u("flex", o),
-      flagComponent: f,
-      countrySelectComponent: D,
-      inputComponent: b,
+      ref: c,
+      className: p("flex", r),
+      flagComponent: Z,
+      countrySelectComponent: E,
+      inputComponent: P,
       smartCaret: !1,
-      labels: a === "es" ? _ : a === "fr" ? $ : F,
-      value: t || void 0,
-      onChange: (d) => r?.(d || ""),
+      labels: d === "es" ? Q : d === "fr" ? U : K,
+      value: o || void 0,
+      onChange: (h) => n?.(h || ""),
       countrySelectProps: {
         size: s,
-        rounded: n
+        rounded: a,
+        ...u
       },
       numberInputProps: {
         size: s,
-        rounded: n
+        rounded: a,
+        ...u
       },
-      ...i
+      ...u
     }
   )
 );
-q.displayName = "PhoneInput";
-const b = p.forwardRef(({ className: o, rounded: r = "default", error: t, touched: s, size: n, ...a }, i) => {
-  const { "data-country": m, ...d } = a;
+Y.displayName = "PhoneInput";
+const P = t.forwardRef(({ className: r, rounded: n = "default", size: o, ...s }, a) => {
+  const { "data-country": d, ...u } = s;
   return /* @__PURE__ */ e.jsx(
-    P,
+    M,
     {
-      size: n,
-      className: u(
+      size: o,
+      className: p(
         "w-full",
         {
-          "border-destructive": t && s,
-          "border-blue-800": s && !t,
-          "rounded-s-none rounded-e-lg": r !== "full",
-          "rounded-s-none rounded-e-full": r === "full",
-          "rounded-e-sm": n === "sm",
-          "rounded-e-md": n === "md",
-          "rounded-e-lg": n === "lg"
+          "rounded-s-none rounded-e-lg": n !== "full",
+          "rounded-s-none rounded-e-full": n === "full",
+          "rounded-e-sm": o === "sm",
+          "rounded-e-md": o === "md",
+          "rounded-e-lg": o === "lg"
         },
-        o
+        r
       ),
-      ...d,
-      ref: i
+      ...u,
+      ref: a
     }
   );
 });
-b.displayName = "InputComponent";
-const D = ({
-  disabled: o,
-  value: r,
-  options: t,
-  onChange: s,
-  size: n = "md",
-  rounded: a = "default",
-  error: i,
-  touched: m
-}) => {
-  const d = p.useRef(null), [j, x] = p.useState(""), [C, g] = p.useState(!1);
-  return /* @__PURE__ */ e.jsxs(
-    R,
-    {
-      open: C,
-      modal: !0,
-      onOpenChange: (l) => {
-        g(l), l && x("");
-      },
-      children: [
-        /* @__PURE__ */ e.jsx(O, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            type: "button",
-            className: u(
-              "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 file:paragraph-sm md:paragraph-sm paragraph-md flex w-fit min-w-0 items-center justify-center border border-r-0 bg-transparent transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-semibold focus-visible:z-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-              a === "default" ? "rounded-e-none" : "rounded-s-full rounded-e-none",
-              {
-                "outline-destructive": i && m,
-                "outline-blue-800": m && !i,
-                "label-md h-8 rounded-s-sm px-2 py-1": n === "sm",
-                "label-lg h-12 rounded-s-md px-3 py-1": n === "md",
-                "label-xl h-16 rounded-s-lg px-4 py-2": n === "lg"
-              }
-            ),
-            disabled: o,
-            children: [
-              /* @__PURE__ */ e.jsx(
-                f,
+P.displayName = "InputComponent";
+const E = t.memo(
+  ({
+    disabled: r,
+    value: n,
+    options: o,
+    onChange: s,
+    size: a = "md",
+    rounded: d = "default",
+    ...u
+  }) => {
+    const c = t.useRef(null), [h, j] = t.useState(""), [b, v] = t.useState(!1), [y, w] = t.useState(20), f = X(h, 100), m = t.useMemo(() => f ? o.filter(
+      ({ label: l, value: i }) => i && (l.toLowerCase().includes(f.toLowerCase()) || i.toLowerCase().includes(f.toLowerCase()))
+    ) : o, [o, f]), g = t.useMemo(
+      () => m.slice(0, y),
+      [m, y]
+    );
+    return t.useEffect(() => {
+      w(20);
+    }, [f]), t.useEffect(() => {
+      if (!b) return;
+      const l = setTimeout(() => {
+        if (!c.current) return;
+        const x = c.current.querySelector(
+          "[data-radix-scroll-area-viewport]"
+        );
+        if (!x) return;
+        const S = () => {
+          const { scrollTop: V, scrollHeight: R, clientHeight: _ } = x;
+          V + _ >= R - 100 && w(
+            (O) => Math.min(O + 20, m.length)
+          );
+        };
+        x.addEventListener("scroll", S, {
+          passive: !0
+        }), window.__scrollCleanup = () => {
+          x.removeEventListener("scroll", S);
+        };
+      }, 100);
+      return () => {
+        clearTimeout(l);
+        const i = window.__scrollCleanup;
+        i && i();
+      };
+    }, [b, m.length]), /* @__PURE__ */ e.jsxs(
+      q,
+      {
+        open: b,
+        modal: !0,
+        onOpenChange: (l) => {
+          v(l), l && j("");
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(H, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-invalid": u["aria-invalid"],
+              className: p(
+                `
+                flex w-fit min-w-0 items-center justify-center border border-r-0
+                border-input bg-transparent paragraph-md
+                transition-[color,box-shadow] outline-none
+                selection:bg-primary selection:text-primary-foreground
+                file:inline-flex file:border-0 file:bg-transparent
+                file:paragraph-sm file:font-semibold file:text-foreground
+                placeholder:text-muted-foreground
+                focus-visible:z-1 focus-visible:border-ring
+                focus-visible:ring-[3px] focus-visible:ring-ring/50
+                disabled:pointer-events-none disabled:cursor-not-allowed
+                disabled:opacity-50
+                aria-invalid:border-destructive-foreground
+                aria-invalid:ring-destructive-foreground/20
+                md:paragraph-sm
+                dark:bg-input/30
+                dark:aria-invalid:ring-destructive-foreground/40
+              `,
+                d === "default" ? "rounded-e-none" : "rounded-s-full rounded-e-none",
                 {
-                  country: r,
-                  countryName: r,
-                  disabled: o
+                  "h-8 rounded-s-sm px-2 py-1 label-md": a === "sm",
+                  "h-12 rounded-s-md px-3 py-1 label-lg": a === "md",
+                  "h-16 rounded-s-lg px-4 py-2 label-xl": a === "lg"
                 }
               ),
-              /* @__PURE__ */ e.jsx(
-                V,
-                {
-                  className: u(
-                    "-mr-2 size-4 opacity-50",
-                    o ? "hidden" : "opacity-100"
-                  )
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ e.jsx(E, { className: "w-[300px] p-0", children: /* @__PURE__ */ e.jsxs(y, { children: [
-          /* @__PURE__ */ e.jsx(
-            v,
-            {
-              value: j,
-              onValueChange: (l) => {
-                x(l), setTimeout(() => {
-                  if (d.current) {
-                    const c = d.current.querySelector(
-                      "[data-radix-scroll-area-viewport]"
-                    );
-                    c && (c.scrollTop = 0);
+              disabled: r,
+              ...u,
+              children: [
+                /* @__PURE__ */ e.jsx(
+                  C,
+                  {
+                    country: n,
+                    countryName: n,
+                    disabled: r
                   }
-                }, 0);
-              },
-              placeholder: "Search country..."
+                ),
+                /* @__PURE__ */ e.jsx(
+                  $,
+                  {
+                    className: p(
+                      "-mr-2 size-4 opacity-50",
+                      r ? "hidden" : "opacity-100"
+                    )
+                  }
+                )
+              ]
             }
-          ),
-          /* @__PURE__ */ e.jsx(N, { children: /* @__PURE__ */ e.jsxs(T, { ref: d, className: "h-72", children: [
-            /* @__PURE__ */ e.jsx(S, { children: "No country found." }),
-            /* @__PURE__ */ e.jsx(w, { children: t.map(
-              ({ value: l, label: c }) => l ? /* @__PURE__ */ e.jsx(
-                G,
-                {
-                  country: l,
-                  countryName: c,
-                  selectedCountry: r,
-                  onChange: s,
-                  onSelectComplete: () => g(!1)
+          ) }),
+          /* @__PURE__ */ e.jsx(G, { className: "w-[300px] p-0", children: /* @__PURE__ */ e.jsxs(k, { children: [
+            /* @__PURE__ */ e.jsx(
+              A,
+              {
+                value: h,
+                onValueChange: (l) => {
+                  j(l), setTimeout(() => {
+                    if (c.current) {
+                      const i = c.current.querySelector(
+                        "[data-radix-scroll-area-viewport]"
+                      );
+                      i && (i.scrollTop = 0);
+                    }
+                  }, 0);
                 },
-                l
-              ) : null
-            ) })
+                placeholder: "Search country..."
+              }
+            ),
+            /* @__PURE__ */ e.jsx(F, { children: /* @__PURE__ */ e.jsxs(W, { ref: c, className: "h-72", children: [
+              /* @__PURE__ */ e.jsx(L, { children: g.length === 0 && o.length > 20 ? "Too many results. Please refine your search." : "No country found." }),
+              /* @__PURE__ */ e.jsxs(D, { children: [
+                g.map(
+                  ({ value: l, label: i }) => l ? /* @__PURE__ */ e.jsx(
+                    T,
+                    {
+                      country: l,
+                      countryName: i,
+                      selectedCountry: n,
+                      onChange: s,
+                      onSelectComplete: () => v(!1)
+                    },
+                    l
+                  ) : null
+                ),
+                g.length < m.length && /* @__PURE__ */ e.jsxs(
+                  N,
+                  {
+                    disabled: !0,
+                    className: "paragraph-xs text-muted-foreground",
+                    children: [
+                      "Showing ",
+                      g.length,
+                      " of",
+                      " ",
+                      m.length,
+                      " countries"
+                    ]
+                  }
+                )
+              ] })
+            ] }) })
           ] }) })
-        ] }) })
-      ]
-    }
-  );
-}, G = ({
-  country: o,
-  countryName: r,
-  selectedCountry: t,
-  onChange: s,
-  onSelectComplete: n
-}) => {
-  const a = () => {
-    s(o), n();
-  };
-  return /* @__PURE__ */ e.jsxs(I, { className: "gap-2", onSelect: a, children: [
-    /* @__PURE__ */ e.jsx(f, { country: o, countryName: r }),
-    /* @__PURE__ */ e.jsx("span", { className: "paragraph-sm flex-1", children: r }),
-    /* @__PURE__ */ e.jsx("span", { className: "text-foreground/50 paragraph-sm", children: `+${h.getCountryCallingCode(o)}` }),
-    /* @__PURE__ */ e.jsx(
-      k,
+        ]
+      }
+    );
+  }
+);
+E.displayName = "CountrySelect";
+const T = t.memo(
+  ({
+    country: r,
+    countryName: n,
+    selectedCountry: o,
+    onChange: s,
+    onSelectComplete: a
+  }) => {
+    const d = t.useCallback(() => {
+      s(r), a();
+    }, [r, s, a]);
+    return /* @__PURE__ */ e.jsxs(N, { className: "gap-2", onSelect: d, children: [
+      /* @__PURE__ */ e.jsx(C, { country: r, countryName: n }),
+      /* @__PURE__ */ e.jsx("span", { className: "flex-1 paragraph-sm", children: n }),
+      /* @__PURE__ */ e.jsx("span", { className: "paragraph-sm text-foreground/50", children: `+${I.getCountryCallingCode(r)}` }),
+      /* @__PURE__ */ e.jsx(
+        B,
+        {
+          className: p(
+            "ml-auto size-4",
+            r === o ? "opacity-100" : "opacity-0"
+          )
+        }
+      )
+    ] });
+  }
+);
+T.displayName = "CountrySelectOption";
+const C = t.memo(
+  ({
+    country: r,
+    countryName: n,
+    disabled: o
+  }) => {
+    const s = J[r];
+    return /* @__PURE__ */ e.jsx(
+      "span",
       {
-        className: `ml-auto size-4 ${o === t ? "opacity-100" : "opacity-0"}`
+        className: p(
+          `
+            flex h-4 w-6 overflow-hidden rounded-[4px] bg-foreground/20
+            [&_svg:not([class*='size-'])]:size-full
+          `,
+          { "opacity-50": o }
+        ),
+        children: s ? /* @__PURE__ */ e.jsx(s, { title: n }) : null
       }
-    )
-  ] });
-}, f = ({
-  country: o,
-  countryName: r,
-  disabled: t
-}) => {
-  const s = A[o];
-  return /* @__PURE__ */ e.jsx(
-    "span",
-    {
-      className: u(
-        "bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-[4px] [&_svg:not([class*='size-'])]:size-full",
-        { "opacity-50": t }
-      ),
-      children: s && /* @__PURE__ */ e.jsx(s, { title: r })
-    }
-  );
-};
+    );
+  }
+), Z = (r) => /* @__PURE__ */ e.jsx(C, { ...r });
+C.displayName = "FlagComponent";
 export {
-  q as PhoneInput
+  Y as PhoneInput
 };

package/dist/components/popover.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../popover-CeOAAwBQ.cjs");exports.Popover=o.Popover;exports.PopoverAnchor=o.PopoverAnchor;exports.PopoverContent=o.PopoverContent;exports.PopoverTrigger=o.PopoverTrigger;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../popover-A1-x5q-F.cjs");exports.Popover=o.Popover;exports.PopoverAnchor=o.PopoverAnchor;exports.PopoverContent=o.PopoverContent;exports.PopoverTrigger=o.PopoverTrigger;

package/dist/components/popover.es.js

@@ -1,4 +1,4 @@
-import { P as e, a, b as p, c as P } from "../popover-1_WpciTS.js";
+import { P as e, a, b as p, c as P } from "../popover-eQq2Is-I.js";
 export {
   e as Popover,
   a as PopoverAnchor,

package/dist/components/progress.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../index-9HRzXEQf.cjs"),i=require("@radix-ui/react-progress");function l(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const n=l(i);function a({className:e,value:t,...r}){return o.jsxRuntimeExports.jsx(n.Root,{"data-slot":"progress",className:o.cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",e),...r,children:o.jsxRuntimeExports.jsx(n.Indicator,{"data-slot":"progress-indicator",className:"bg-primary h-full w-full flex-1 transition-all",style:{transform:`translateX(-${100-(t||0)}%)`}})})}exports.Progress=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../index-Bfismeyo.cjs"),i=require("@radix-ui/react-progress");function l(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const n=l(i);function a({className:e,value:t,...r}){return o.jsxRuntimeExports.jsx(n.Root,{"data-slot":"progress",className:o.cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20",e),...r,children:o.jsxRuntimeExports.jsx(n.Indicator,{"data-slot":"progress-indicator",className:"h-full w-full flex-1 bg-primary transition-all",style:{transform:`translateX(-${100-(t||0)}%)`}})})}exports.Progress=a;

package/dist/components/progress.es.js

@@ -1,4 +1,4 @@
-import { j as r, c as l } from "../index-BCEGphus.js";
+import { j as r, c as l } from "../index-CwFDnnd3.js";
 import * as s from "@radix-ui/react-progress";
 function i({
   className: o,
@@ -10,7 +10,7 @@ function i({
     {
       "data-slot": "progress",
       className: l(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
         o
       ),
       ...a,
@@ -18,7 +18,7 @@ function i({
         s.Indicator,
         {
           "data-slot": "progress-indicator",
-          className: "bg-primary h-full w-full flex-1 transition-all",
+          className: "h-full w-full flex-1 bg-primary transition-all",
           style: { transform: `translateX(-${100 - (t || 0)}%)` }
         }
       )

package/dist/components/resizable.cjs.js

@@ -1 +1,22 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../index-9HRzXEQf.cjs"),n=require("react-resizable-panels"),s=require("@phosphor-icons/react");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const i=o(n);function c({className:e,...t}){return a.jsxRuntimeExports.jsx(i.PanelGroup,{"data-slot":"resizable-panel-group",className:a.cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col",e),...t})}function u({...e}){return a.jsxRuntimeExports.jsx(i.Panel,{"data-slot":"resizable-panel",...e})}function d({withHandle:e,className:t,...r}){return a.jsxRuntimeExports.jsx(i.PanelResizeHandle,{"data-slot":"resizable-handle",className:a.cn("bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",t),...r,children:e&&a.jsxRuntimeExports.jsx("div",{className:"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border",children:a.jsxRuntimeExports.jsx(s.DotsSixVerticalIcon,{className:"size-2.5"})})})}exports.ResizableHandle=d;exports.ResizablePanel=u;exports.ResizablePanelGroup=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../index-Bfismeyo.cjs"),l=require("react-resizable-panels"),s=require("@phosphor-icons/react");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const i=o(l);function c({className:e,...t}){return r.jsxRuntimeExports.jsx(i.PanelGroup,{"data-slot":"resizable-panel-group",className:r.cn(`
+          flex h-full w-full
+          data-[panel-group-direction=vertical]:flex-col
+        `,e),...t})}function u({className:e,...t}){return r.jsxRuntimeExports.jsx(i.Panel,{"data-slot":"resizable-panel",className:r.cn("text-foreground",e),...t})}function d({withHandle:e,className:t,...a}){return r.jsxRuntimeExports.jsx(i.PanelResizeHandle,{"data-slot":"resizable-handle",className:r.cn(`
+          relative flex w-px items-center justify-center bg-border
+          text-foreground
+          after:absolute after:inset-y-0 after:left-1/2 after:w-1
+          after:-translate-x-1/2
+          focus-visible:ring-1 focus-visible:ring-ring
+          focus-visible:ring-offset-1 focus-visible:outline-hidden
+          data-[panel-group-direction=vertical]:h-px
+          data-[panel-group-direction=vertical]:w-full
+          data-[panel-group-direction=vertical]:after:left-0
+          data-[panel-group-direction=vertical]:after:h-1
+          data-[panel-group-direction=vertical]:after:w-full
+          data-[panel-group-direction=vertical]:after:translate-x-0
+          data-[panel-group-direction=vertical]:after:-translate-y-1/2
+          [&[data-panel-group-direction=vertical]>div]:rotate-90
+        `,t),...a,children:e&&r.jsxRuntimeExports.jsx("div",{className:`\r
+            z-10 flex h-4 w-3 items-center justify-center rounded-xs border\r
+            bg-border\r
+          `,children:r.jsxRuntimeExports.jsx(s.DotsSixVerticalIcon,{className:"size-2.5"})})})}exports.ResizableHandle=d;exports.ResizablePanel=u;exports.ResizablePanelGroup=c;

package/dist/components/resizable.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ResizablePrimitive from 'react-resizable-panels';
 declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): import("react/jsx-runtime").JSX.Element;
-declare function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
+declare function ResizablePanel({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
 declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
     withHandle?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/resizable.es.js

@@ -1,42 +1,77 @@
-import { j as a, c as i } from "../index-BCEGphus.js";
-import * as t from "react-resizable-panels";
+import { j as r, c as t } from "../index-CwFDnnd3.js";
+import * as i from "react-resizable-panels";
 import { DotsSixVerticalIcon as n } from "@phosphor-icons/react";
 function c({
   className: e,
-  ...r
+  ...a
 }) {
-  return /* @__PURE__ */ a.jsx(
-    t.PanelGroup,
+  return /* @__PURE__ */ r.jsx(
+    i.PanelGroup,
     {
       "data-slot": "resizable-panel-group",
-      className: i(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className: t(
+        `
+          flex h-full w-full
+          data-[panel-group-direction=vertical]:flex-col
+        `,
         e
       ),
-      ...r
+      ...a
     }
   );
 }
 function d({
-  ...e
+  className: e,
+  ...a
 }) {
-  return /* @__PURE__ */ a.jsx(t.Panel, { "data-slot": "resizable-panel", ...e });
+  return /* @__PURE__ */ r.jsx(
+    i.Panel,
+    {
+      "data-slot": "resizable-panel",
+      className: t("text-foreground", e),
+      ...a
+    }
+  );
 }
 function f({
   withHandle: e,
-  className: r,
+  className: a,
   ...l
 }) {
-  return /* @__PURE__ */ a.jsx(
-    t.PanelResizeHandle,
+  return /* @__PURE__ */ r.jsx(
+    i.PanelResizeHandle,
     {
       "data-slot": "resizable-handle",
-      className: i(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        r
+      className: t(
+        `
+          relative flex w-px items-center justify-center bg-border
+          text-foreground
+          after:absolute after:inset-y-0 after:left-1/2 after:w-1
+          after:-translate-x-1/2
+          focus-visible:ring-1 focus-visible:ring-ring
+          focus-visible:ring-offset-1 focus-visible:outline-hidden
+          data-[panel-group-direction=vertical]:h-px
+          data-[panel-group-direction=vertical]:w-full
+          data-[panel-group-direction=vertical]:after:left-0
+          data-[panel-group-direction=vertical]:after:h-1
+          data-[panel-group-direction=vertical]:after:w-full
+          data-[panel-group-direction=vertical]:after:translate-x-0
+          data-[panel-group-direction=vertical]:after:-translate-y-1/2
+          [&[data-panel-group-direction=vertical]>div]:rotate-90
+        `,
+        a
       ),
       ...l,
-      children: e && /* @__PURE__ */ a.jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", children: /* @__PURE__ */ a.jsx(n, { className: "size-2.5" }) })
+      children: e && /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: `\r
+            z-10 flex h-4 w-3 items-center justify-center rounded-xs border\r
+            bg-border\r
+          `,
+          children: /* @__PURE__ */ r.jsx(n, { className: "size-2.5" })
+        }
+      )
     }
   );
 }