@forgedevstack/bear 1.3.0 → 1.3.1

package/dist/components/Rating/Rating.js

@@ -1,141 +1,103 @@
-import { jsx as n, jsxs as L, Fragment as K } from "react/jsx-runtime";
-import { forwardRef as Q, useState as U, useCallback as v, useMemo as w } from "react";
-import { cn as d } from "../../utils/cn.js";
-import { RATING_DEFAULT_LABELS as O, RATING_DEFAULT_MAX as y, RATING_STAR_READONLY_CLASSES as H, RATING_STAR_DISABLED_CLASSES as b, RATING_STAR_BASE_CLASSES as tt, RATING_SIZE_CLASSES as et, RATING_DEFAULT_COLOR as rt, RATING_DEFAULT_EMPTY_COLOR as st, RATING_BASE_CLASSES as nt } from "./Rating.const.js";
-const at = ({ size: a, filled: S, half: h, color: u, emptyColor: s }) => /* @__PURE__ */ n(
-  "svg",
-  {
-    width: a,
-    height: a,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: h ? /* @__PURE__ */ L(K, { children: [
-      /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ L("linearGradient", { id: `half-${a}`, children: [
-        /* @__PURE__ */ n("stop", { offset: "50%", stopColor: u }),
-        /* @__PURE__ */ n("stop", { offset: "50%", stopColor: s })
-      ] }) }),
-      /* @__PURE__ */ n(
-        "path",
-        {
-          d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
-          fill: `url(#half-${a})`,
-          stroke: u,
-          strokeWidth: "1"
-        }
-      )
-    ] }) : /* @__PURE__ */ n(
-      "path",
+import { jsx as y, jsxs as p } from "react/jsx-runtime";
+import { useState as L } from "react";
+import { cn as g } from "../../utils/cn.js";
+import { ZERO as E, FIVE as K, ONE as c, HALF as S } from "../../constants/numbers.const.js";
+import { SIZE_MD as Q, BOOLEAN_FALSE as i, BOOLEAN_TRUE as W } from "../../constants/generals.const.js";
+import { useBearTheme as $ } from "../../context/BearProvider.js";
+import { RATING_DEFAULT_LABELS as tt, RATING_THEME_FILLED_SHADE as et, RATING_THEME_EMPTY_SHADE as ot, RATING_SIZE_ICON as rt, RATING_SIZE_TEXT as at } from "./Rating.const.js";
+import { formatRatingLabel as lt, isLeftHalfClick as V, resolveRatingIcon as nt, getStarState as st } from "./Rating.utils.js";
+import { StarIcon as ct } from "./components/StarIcon/StarIcon.js";
+const It = (v) => {
+  const {
+    value: _,
+    defaultValue: B = E,
+    max: C = K,
+    size: I = Q,
+    onChange: m,
+    allowHalf: r = i,
+    allowClear: M = W,
+    disabled: a = i,
+    readOnly: l = i,
+    filledIcon: H,
+    emptyIcon: O,
+    halfIcon: b,
+    color: w,
+    emptyColor: F,
+    showValue: k = i,
+    labelFormatter: D,
+    labels: h = tt,
+    testId: G,
+    className: x,
+    ...Z
+  } = v, R = $(), z = w ?? R.colors.warning[et], P = F ?? R.colors.neutral[ot], [X, j] = L(B), [T, u] = L(null), f = _ !== void 0 ? _ : X, d = T !== null ? T : f, U = rt[I], A = lt(d, h, D), Y = (o, t) => {
+    if (a || l)
+      return;
+    const e = t && r ? o + S : o + c, n = M && e === f ? E : e;
+    j(n), m == null || m(n);
+  }, q = (o, t) => {
+    if (a || l)
+      return;
+    const e = t.currentTarget.getBoundingClientRect();
+    if (r && V(t.clientX, e.left, e.width)) {
+      u(o + S);
+      return;
+    }
+    u(o + c);
+  }, J = Array.from({ length: C }).map((o, t) => {
+    const e = st(d, t, r), n = nt(e, { filled: H, half: b, empty: O });
+    return /* @__PURE__ */ y(
+      "span",
       {
-        d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
-        fill: S ? u : s,
-        stroke: S ? u : s,
-        strokeWidth: "1"
-      }
-    )
-  }
-), it = Q(
-  ({
-    value: a,
-    defaultValue: S = 0,
-    max: h = y,
-    size: u = "md",
-    onChange: s,
-    allowHalf: i = !1,
-    allowClear: M = !0,
-    disabled: c = !1,
-    readOnly: o = !1,
-    filledIcon: T,
-    emptyIcon: g,
-    halfIcon: m,
-    color: k = rt,
-    emptyColor: G = st,
-    showValue: x = !1,
-    labelFormatter: p,
-    labels: _ = O,
-    testId: X,
-    className: j,
-    ...W
-  }, Y) => {
-    const [$, z] = U(S), [I, E] = U(null), A = a !== void 0 ? a : $, l = I !== null ? I : A, N = et[u], B = v(
-      (t, e = !1) => {
-        if (c || o) return;
-        const r = e && i ? t + 0.5 : t + 1, f = M && r === A ? 0 : r;
-        z(f), s == null || s(f);
-      },
-      [c, o, i, M, A, s]
-    ), C = v(
-      (t, e) => {
-        if (c || o) return;
-        const r = e.currentTarget.getBoundingClientRect(), f = e.clientX - r.left < r.width / 2;
-        E(i && f ? t + 0.5 : t + 1);
-      },
-      [c, o, i]
-    ), D = v(() => {
-      E(null);
-    }, []), P = (t) => l >= t + 1 ? "filled" : l >= t + 0.5 && i ? "half" : "empty", V = w(() => {
-      if (p) return p(l);
-      const t = Math.ceil(l) - 1;
-      return _[t] || "";
-    }, [l, p, _]), Z = w(() => Array.from({ length: h }).map((t, e) => {
-      const r = P(e), f = d(
-        tt,
-        c && b,
-        o && H,
-        !c && !o && "hover:scale-110"
-      ), q = () => r === "filled" && T ? T : r === "half" && m ? m : r === "empty" && g ? g : /* @__PURE__ */ n(
-        at,
-        {
-          size: N.icon,
-          filled: r === "filled",
-          half: r === "half",
-          color: k,
-          emptyColor: G
-        }
-      );
-      return /* @__PURE__ */ n(
-        "span",
-        {
-          className: f,
-          onClick: (R) => {
-            const F = R.currentTarget.getBoundingClientRect(), J = R.clientX - F.left < F.width / 2;
-            B(e, J);
-          },
-          onMouseMove: (R) => C(e, R),
-          onMouseLeave: D,
-          role: "radio",
-          "aria-checked": A >= e + 1,
-          "aria-label": _[e],
-          children: q()
+        className: g(
+          "Bear-Rating__star cursor-pointer transition-all duration-150",
+          a && "cursor-not-allowed opacity-50",
+          l && "cursor-default",
+          !a && !l && "hover:scale-110"
+        ),
+        onClick: (s) => {
+          const N = s.currentTarget.getBoundingClientRect();
+          Y(t, V(s.clientX, N.left, N.width));
         },
-        e
-      );
-    }), [h, l, c, o, T, g, m, N, k, G, B, C, D, A, _, i]);
-    return /* @__PURE__ */ L(
-      "div",
-      {
-        ref: Y,
-        className: d(nt, j),
-        role: "radiogroup",
-        "aria-label": "Rating",
-        "data-testid": X,
-        ...W,
-        children: [
-          Z,
-          x && /* @__PURE__ */ L("span", { className: d("Bear-Rating__value ml-2 text-gray-600 dark:text-gray-400", N.text), children: [
-            l.toFixed(i ? 1 : 0),
-            V && /* @__PURE__ */ L("span", { className: "ml-1 text-gray-400 dark:text-gray-500", children: [
-              "(",
-              V,
-              ")"
-            ] })
-          ] })
-        ]
-      }
+        onMouseMove: (s) => q(t, s),
+        onMouseLeave: () => u(null),
+        role: "radio",
+        "aria-checked": f >= t + c,
+        "aria-label": h[t],
+        children: n ?? /* @__PURE__ */ y(
+          ct,
+          {
+            size: U,
+            state: e,
+            color: z,
+            emptyColor: P
+          }
+        )
+      },
+      t
     );
-  }
-);
-it.displayName = "Rating";
+  });
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: g("Bear-Rating inline-flex items-center gap-1", x),
+      role: "radiogroup",
+      "aria-label": "Rating",
+      "data-testid": G,
+      ...Z,
+      children: [
+        J,
+        k && /* @__PURE__ */ p("span", { className: g("Bear-Rating__value ml-2 text-gray-600 dark:text-gray-400", at[I]), children: [
+          d.toFixed(r ? c : E),
+          A && /* @__PURE__ */ p("span", { className: "ml-1 text-gray-400 dark:text-gray-500", children: [
+            "(",
+            A,
+            ")"
+          ] })
+        ] })
+      ]
+    }
+  );
+};
 export {
-  it as Rating
+  It as Rating
 };

package/dist/components/Rating/Rating.types.d.ts

@@ -1,41 +1,35 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export type RatingSize = 'sm' | 'md' | 'lg';
+export type RatingStarState = 'filled' | 'half' | 'empty';
+export interface RatingStarIconProps {
+    size: number;
+    state: RatingStarState;
+    color: string;
+    emptyColor: string;
+}
 export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     id?: string;
-    /** Current value (0-max) */
     value?: number;
-    /** Default value (uncontrolled) */
     defaultValue?: number;
-    /** Maximum rating value */
     max?: number;
-    /** Size of rating icons */
     size?: RatingSize;
-    /** Called when value changes */
     onChange?: (value: number) => void;
-    /** Allow half values */
     allowHalf?: boolean;
-    /** Allow clearing the rating */
     allowClear?: boolean;
-    /** Disabled state */
     disabled?: boolean;
-    /** Read-only state */
     readOnly?: boolean;
-    /** Custom filled icon */
     filledIcon?: ReactNode;
-    /** Custom empty icon */
     emptyIcon?: ReactNode;
-    /** Custom half-filled icon */
     halfIcon?: ReactNode;
-    /** Color of filled stars */
     color?: string;
-    /** Color of empty stars */
     emptyColor?: string;
-    /** Show value text */
     showValue?: boolean;
-    /** Custom label formatter */
     labelFormatter?: (value: number) => string;
-    /** Test ID */
     testId?: string;
-    /** Accessibility labels for each rating */
     labels?: string[];
 }
+export interface RatingCustomIcons {
+    filled?: ReactNode;
+    half?: ReactNode;
+    empty?: ReactNode;
+}

package/dist/components/Rating/Rating.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../constants/numbers.const.cjs"),n=require("../../constants/generals.const.cjs"),a=(e,t,r)=>e>=t+o.ONE?n.RATING_STAR_STATE_FILLED:r&&e>=t+o.HALF?n.RATING_STAR_STATE_HALF:n.RATING_STAR_STATE_EMPTY,c=(e,t,r)=>{if(r)return r(e);const T=Math.ceil(e)-o.ONE;return T<o.ZERO?n.EMPTY_STRING:t[T]??n.EMPTY_STRING},i=(e,t)=>({filled:t.filled,half:t.half,empty:t.empty})[e],S=(e,t,r)=>e-t<r*o.HALF;exports.formatRatingLabel=c;exports.getStarState=a;exports.isLeftHalfClick=S;exports.resolveRatingIcon=i;

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { RatingCustomIcons, RatingStarState } from './Rating.types';
+export declare const getStarState: (displayValue: number, index: number, allowHalf: boolean) => RatingStarState;
+export declare const formatRatingLabel: (displayValue: number, labels: string[], labelFormatter?: (value: number) => string) => string;
+export declare const resolveRatingIcon: (state: RatingStarState, icons: RatingCustomIcons) => ReactNode;
+export declare const isLeftHalfClick: (clientX: number, left: number, width: number) => boolean;

package/dist/components/Rating/Rating.utils.js

@@ -0,0 +1,18 @@
+import { ZERO as A, HALF as f, ONE as o } from "../../constants/numbers.const.js";
+import { EMPTY_STRING as T, RATING_STAR_STATE_FILLED as S, RATING_STAR_STATE_HALF as i, RATING_STAR_STATE_EMPTY as R } from "../../constants/generals.const.js";
+const E = (r, t, e) => r >= t + o ? S : e && r >= t + f ? i : R, a = (r, t, e) => {
+  if (e)
+    return e(r);
+  const n = Math.ceil(r) - o;
+  return n < A ? T : t[n] ?? T;
+}, l = (r, t) => ({
+  filled: t.filled,
+  half: t.half,
+  empty: t.empty
+})[r], I = (r, t, e) => r - t < e * f;
+export {
+  a as formatRatingLabel,
+  E as getStarState,
+  I as isLeftHalfClick,
+  l as resolveRatingIcon
+};

package/dist/components/Rating/components/StarIcon/StarIcon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../../constants/generals.const.cjs"),o=require("../../../Icon/index.cjs"),S={filled:o.StarIcon,half:o.StarHalfIcon,empty:o.StarBorderIcon},T=n=>{const{size:r,state:t,color:c,emptyColor:s}=n,a=S[t],i=t===l.RATING_STAR_STATE_EMPTY?s:c;return e.jsx("div",{className:"Bear-Rating__star-icon",children:e.jsx(a,{size:r,color:i})})};exports.StarIcon=T;

package/dist/components/Rating/components/StarIcon/StarIcon.d.ts

@@ -0,0 +1,2 @@
+import { RatingStarIconProps } from '../../Rating.types';
+export declare const StarIcon: (props: RatingStarIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Rating/components/StarIcon/StarIcon.js

@@ -0,0 +1,14 @@
+import { jsx as r } from "react/jsx-runtime";
+import { RATING_STAR_STATE_EMPTY as s } from "../../../../constants/generals.const.js";
+import { StarBorderIcon as i, StarHalfIcon as l, StarIcon as m } from "../../../Icon/index.js";
+const S = {
+  filled: m,
+  half: l,
+  empty: i
+}, f = (t) => {
+  const { size: n, state: o, color: c, emptyColor: a } = t, e = S[o];
+  return /* @__PURE__ */ r("div", { className: "Bear-Rating__star-icon", children: /* @__PURE__ */ r(e, { size: n, color: o === s ? a : c }) });
+};
+export {
+  f as StarIcon
+};

package/dist/components/Rating/components/StarIcon/index.d.ts

@@ -0,0 +1 @@
+export { StarIcon } from './StarIcon';

package/dist/components/Rating/index.d.ts

@@ -1,2 +1,2 @@
 export { Rating } from './Rating';
-export type { RatingProps, RatingSize } from './Rating.types';
+export type { RatingProps, RatingSize, RatingStarState } from './Rating.types';

package/dist/components/ResizablePanel/ResizablePanel.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),e=require("./ResizablePanel.const.cjs"),v=require("./ResizablePanel.utils.cjs"),_=require("../../utils/cn.cjs"),L=P=>{const{first:I,second:N,direction:c=e.DEFAULT_DIRECTION,defaultSize:R=e.DEFAULT_FIRST_SIZE,minSize:d=e.MIN_SIZE,maxSize:b=e.MAX_SIZE,onResize:s,className:z,testId:T}=P,[n,g]=l.useState(R),u=l.useRef(null),h=l.useCallback(r=>v.clampSize(r,d,b),[d,b]),S=l.useCallback(r=>{var m;r.preventDefault();const t=r.target;(m=t.setPointerCapture)==null||m.call(t,r.pointerId);const E=i=>{if(!u.current)return;const y=u.current.getBoundingClientRect(),D=v.getResizePercentage(y,c,i.clientX,i.clientY),f=h(D);g(f),s==null||s(f)},w=()=>{var i;(i=t.releasePointerCapture)==null||i.call(t,r.pointerId),window.removeEventListener(e.EVENT_POINTER_MOVE,E),window.removeEventListener(e.EVENT_POINTER_UP,w)};window.addEventListener(e.EVENT_POINTER_MOVE,E),window.addEventListener(e.EVENT_POINTER_UP,w)},[c,h,s]),a=c==="horizontal",p=a?{width:`${n}%`,minWidth:0}:{height:`${n}%`,minHeight:0},x=a?{width:`${100-n}%`,minWidth:0}:{height:`${100-n}%`,minHeight:0};return o.jsxs("div",{ref:u,"data-testid":T,className:_.cn("Bear-ResizablePanel bear-flex bear-w-full bear-h-full bear-overflow-hidden",a?"bear-flex-row":"bear-flex-col",z),children:[o.jsx("div",{className:"bear-overflow-auto bear-shrink-0",style:p,children:I}),o.jsx("div",{role:"separator","aria-valuenow":n,"aria-valuemin":d,"aria-valuemax":b,tabIndex:0,onPointerDown:S,className:_.cn("Bear-ResizablePanel__handle bear-shrink-0 bear-bg-gray-200 dark:bear-bg-gray-700 hover:bear-bg-primary-500/30 bear-transition-colors bear-cursor-col-resize",a?"bear-w-1.5":"bear-h-1.5 bear-w-full bear-cursor-row-resize"),style:a?{width:e.HANDLE_WIDTH}:{height:e.HANDLE_WIDTH}}),o.jsx("div",{className:"bear-overflow-auto bear-shrink-0 bear-flex-1",style:x,children:N})]})};exports.ResizablePanel=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("../../utils/cn.cjs");require("react");const e=require("../../constants/numbers.const.cjs"),S=require("../../constants/generals.const.cjs"),g=require("./ResizablePanel.const.cjs"),l=require("./ResizablePanel.utils.cjs"),w=require("./useResizablePanel.cjs"),I=u=>{const{first:d,second:f,direction:n=g.DEFAULT_DIRECTION,defaultSize:z=e.FIFTY,minSize:t=e.TEN,maxSize:i=e.NINETY,onResize:R,className:y,testId:N}=u,{size:s,containerRef:h,onPointerDown:m}=w.useResizablePanel({direction:n,defaultSize:z,minSize:t,maxSize:i,onResize:R}),a=n===S.DIRECTION_HORIZONTAL,P=l.getPaneStyle(a,s),v=l.getPaneStyle(a,e.PERCENT_ONE_HUNDRED-s),x=l.getHandleStyle(a,e.SIX);let o="bear-flex-col",c="bear-h-1.5 bear-w-full bear-cursor-row-resize";return a&&(o="bear-flex-row",c="bear-w-1.5 bear-cursor-col-resize"),r.jsxs("div",{ref:h,"data-testid":N,className:b.cn("Bear-ResizablePanel bear-flex bear-w-full bear-h-full bear-overflow-hidden",o,y),children:[r.jsx("div",{className:"bear-overflow-auto bear-shrink-0",style:P,children:d}),r.jsx("div",{role:"separator","aria-valuenow":s,"aria-valuemin":t,"aria-valuemax":i,tabIndex:0,onPointerDown:m,className:b.cn("Bear-ResizablePanel__handle bear-shrink-0 bear-bg-gray-200 dark:bear-bg-gray-700 hover:bear-bg-primary-500/30 bear-transition-colors",c),style:x}),r.jsx("div",{className:"bear-overflow-auto bear-shrink-0 bear-flex-1",style:v,children:f})]})};exports.ResizablePanel=I;

package/dist/components/ResizablePanel/ResizablePanel.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=50,_=10,T=90,I=6,o="horizontal",t="pointermove",N="pointerup",n=100;exports.DEFAULT_DIRECTION=o;exports.DEFAULT_FIRST_SIZE=E;exports.EVENT_POINTER_MOVE=t;exports.EVENT_POINTER_UP=N;exports.HANDLE_WIDTH=I;exports.MAX_SIZE=T;exports.MIN_SIZE=_;exports.PERCENTAGE_SCALE=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../constants/generals.const.cjs"),t=e.DIRECTION_HORIZONTAL;exports.DEFAULT_DIRECTION=t;

package/dist/components/ResizablePanel/ResizablePanel.const.d.ts

@@ -1,11 +1 @@
-export declare const DEFAULT_FIRST_SIZE = 50;
-export declare const MIN_SIZE = 10;
-export declare const MAX_SIZE = 90;
-export declare const HANDLE_WIDTH = 6;
-/** Default layout direction */
-export declare const DEFAULT_DIRECTION = "horizontal";
-/** DOM event names for resize listeners */
-export declare const EVENT_POINTER_MOVE = "pointermove";
-export declare const EVENT_POINTER_UP = "pointerup";
-/** Percentage scale for size calculation */
-export declare const PERCENTAGE_SCALE = 100;
+export declare const DEFAULT_DIRECTION: "horizontal";

package/dist/components/ResizablePanel/ResizablePanel.const.js

@@ -1,11 +1,5 @@
-const E = 50, o = 10, t = 90, n = 6, _ = "horizontal", I = "pointermove", T = "pointerup", c = 100;
+import { DIRECTION_HORIZONTAL as I } from "../../constants/generals.const.js";
+const O = I;
 export {
-  _ as DEFAULT_DIRECTION,
-  E as DEFAULT_FIRST_SIZE,
-  I as EVENT_POINTER_MOVE,
-  T as EVENT_POINTER_UP,
-  n as HANDLE_WIDTH,
-  t as MAX_SIZE,
-  o as MIN_SIZE,
-  c as PERCENTAGE_SCALE
+  O as DEFAULT_DIRECTION
 };

package/dist/components/ResizablePanel/ResizablePanel.d.ts

@@ -1,17 +1,2 @@
-import { FC } from 'react';
 import { ResizablePanelProps } from './ResizablePanel.types';
-/**
- * Two-pane resizable layout with a draggable divider.
- * Supports horizontal and vertical directions; respects min/max size and dark/light theme.
- *
- * @example
- * ```tsx
- * <ResizablePanel
- *   first={<Sidebar />}
- *   second={<Main />}
- *   direction="horizontal"
- *   defaultSize={30}
- * />
- * ```
- */
-export declare const ResizablePanel: FC<ResizablePanelProps>;
+export declare const ResizablePanel: (props: ResizablePanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ResizablePanel/ResizablePanel.js

@@ -1,70 +1,63 @@
-import { jsxs as k, jsx as d } from "react/jsx-runtime";
-import { useState as C, useRef as H, useCallback as w } from "react";
-import { DEFAULT_DIRECTION as A, DEFAULT_FIRST_SIZE as M, MIN_SIZE as O, MAX_SIZE as U, EVENT_POINTER_MOVE as p, EVENT_POINTER_UP as v, HANDLE_WIDTH as E } from "./ResizablePanel.const.js";
-import { clampSize as $, getResizePercentage as B } from "./ResizablePanel.utils.js";
-import { cn as I } from "../../utils/cn.js";
-const X = (z) => {
+import { jsxs as w, jsx as a } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+import "react";
+import { FIFTY as x, TEN as I, NINETY as E, PERCENT_ONE_HUNDRED as S, SIX as T } from "../../constants/numbers.const.js";
+import { DIRECTION_HORIZONTAL as g } from "../../constants/generals.const.js";
+import { DEFAULT_DIRECTION as P } from "./ResizablePanel.const.js";
+import { getPaneStyle as b, getHandleStyle as D } from "./ResizablePanel.utils.js";
+import { useResizablePanel as _ } from "./useResizablePanel.js";
+const L = (c) => {
   const {
-    first: g,
-    second: N,
-    direction: o = A,
-    defaultSize: S = M,
-    minSize: s = O,
-    maxSize: l = U,
-    onResize: i,
-    className: _,
-    testId: P
-  } = z, [t, x] = C(S), c = H(null), b = w((e) => $(e, s, l), [s, l]), R = w(
-    (e) => {
-      var f;
-      e.preventDefault();
-      const r = e.target;
-      (f = r.setPointerCapture) == null || f.call(r, e.pointerId);
-      const m = (n) => {
-        if (!c.current) return;
-        const D = c.current.getBoundingClientRect(), L = B(D, o, n.clientX, n.clientY), u = b(L);
-        x(u), i == null || i(u);
-      }, h = () => {
-        var n;
-        (n = r.releasePointerCapture) == null || n.call(r, e.pointerId), window.removeEventListener(p, m), window.removeEventListener(v, h);
-      };
-      window.addEventListener(p, m), window.addEventListener(v, h);
-    },
-    [o, b, i]
-  ), a = o === "horizontal", T = a ? { width: `${t}%`, minWidth: 0 } : { height: `${t}%`, minHeight: 0 }, y = a ? { width: `${100 - t}%`, minWidth: 0 } : { height: `${100 - t}%`, minHeight: 0 };
-  return /* @__PURE__ */ k(
+    first: m,
+    second: f,
+    direction: l = P,
+    defaultSize: d = x,
+    minSize: o = I,
+    maxSize: s = E,
+    onResize: u,
+    className: N,
+    testId: h
+  } = c, { size: r, containerRef: y, onPointerDown: z } = _({
+    direction: l,
+    defaultSize: d,
+    minSize: o,
+    maxSize: s,
+    onResize: u
+  }), e = l === g, p = b(e, r), v = b(e, S - r), R = D(e, T);
+  let i = "bear-flex-col", t = "bear-h-1.5 bear-w-full bear-cursor-row-resize";
+  return e && (i = "bear-flex-row", t = "bear-w-1.5 bear-cursor-col-resize"), /* @__PURE__ */ w(
     "div",
     {
-      ref: c,
-      "data-testid": P,
-      className: I(
+      ref: y,
+      "data-testid": h,
+      className: n(
         "Bear-ResizablePanel bear-flex bear-w-full bear-h-full bear-overflow-hidden",
-        a ? "bear-flex-row" : "bear-flex-col",
-        _
+        i,
+        N
       ),
       children: [
-        /* @__PURE__ */ d("div", { className: "bear-overflow-auto bear-shrink-0", style: T, children: g }),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ a("div", { className: "bear-overflow-auto bear-shrink-0", style: p, children: m }),
+        /* @__PURE__ */ a(
           "div",
           {
             role: "separator",
-            "aria-valuenow": t,
-            "aria-valuemin": s,
-            "aria-valuemax": l,
+            "aria-valuenow": r,
+            "aria-valuemin": o,
+            "aria-valuemax": s,
             tabIndex: 0,
-            onPointerDown: R,
-            className: I(
-              "Bear-ResizablePanel__handle bear-shrink-0 bear-bg-gray-200 dark:bear-bg-gray-700 hover:bear-bg-primary-500/30 bear-transition-colors bear-cursor-col-resize",
-              a ? "bear-w-1.5" : "bear-h-1.5 bear-w-full bear-cursor-row-resize"
+            onPointerDown: z,
+            className: n(
+              "Bear-ResizablePanel__handle bear-shrink-0 bear-bg-gray-200 dark:bear-bg-gray-700 hover:bear-bg-primary-500/30 bear-transition-colors",
+              t
             ),
-            style: a ? { width: E } : { height: E }
+            style: R
           }
         ),
-        /* @__PURE__ */ d("div", { className: "bear-overflow-auto bear-shrink-0 bear-flex-1", style: y, children: N })
+        /* @__PURE__ */ a("div", { className: "bear-overflow-auto bear-shrink-0 bear-flex-1", style: v, children: f })
       ]
     }
   );
 };
 export {
-  X as ResizablePanel
+  L as ResizablePanel
 };

package/dist/components/ResizablePanel/ResizablePanel.utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./ResizablePanel.const.cjs");function r(e,t,i,a){return t==="horizontal"?(i-e.left)/e.width*n.PERCENTAGE_SCALE:(a-e.top)/e.height*n.PERCENTAGE_SCALE}function o(e,t,i){return Math.min(i,Math.max(t,e))}exports.clampSize=o;exports.getResizePercentage=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../constants/numbers.const.cjs"),i=require("../../constants/generals.const.cjs"),s=(e,t,n,g)=>t===i.DIRECTION_HORIZONTAL?(n-e.left)/e.width*r.PERCENT_ONE_HUNDRED:(g-e.top)/e.height*r.PERCENT_ONE_HUNDRED,o=(e,t)=>{const n=`${t}${i.PERCENT_UNIT}`;return e?{width:n,minWidth:r.ZERO}:{height:n,minHeight:r.ZERO}},E=(e,t)=>e?{width:t}:{height:t};exports.getHandleStyle=E;exports.getPaneStyle=o;exports.getResizePercentage=s;

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

@@ -1,10 +1,5 @@
+import { CSSProperties } from 'react';
 import { ResizablePanelProps } from './ResizablePanel.types';
-/**
- * Compute first pane size as a percentage (0–100) from pointer position and container rect.
- * Used for both horizontal and vertical layouts.
- */
-export declare function getResizePercentage(rect: DOMRect, direction: NonNullable<ResizablePanelProps['direction']>, clientX: number, clientY: number): number;
-/**
- * Clamp a value between min and max (inclusive).
- */
-export declare function clampSize(value: number, min: number, max: number): number;
+export declare const getResizePercentage: (rect: DOMRect, direction: NonNullable<ResizablePanelProps["direction"]>, clientX: number, clientY: number) => number;
+export declare const getPaneStyle: (isHorizontal: boolean, size: number) => CSSProperties;
+export declare const getHandleStyle: (isHorizontal: boolean, handleSize: number) => CSSProperties;

package/dist/components/ResizablePanel/ResizablePanel.utils.js

@@ -1,11 +1,11 @@
-import { PERCENTAGE_SCALE as n } from "./ResizablePanel.const.js";
-function a(t, e, i, o) {
-  return e === "horizontal" ? (i - t.left) / t.width * n : (o - t.top) / t.height * n;
-}
-function h(t, e, i) {
-  return Math.min(i, Math.max(e, t));
-}
+import { PERCENT_ONE_HUNDRED as n, ZERO as r } from "../../constants/numbers.const.js";
+import { DIRECTION_HORIZONTAL as o, PERCENT_UNIT as g } from "../../constants/generals.const.js";
+const R = (t, e, i, h) => e === o ? (i - t.left) / t.width * n : (h - t.top) / t.height * n, f = (t, e) => {
+  const i = `${e}${g}`;
+  return t ? { width: i, minWidth: r } : { height: i, minHeight: r };
+}, m = (t, e) => t ? { width: e } : { height: e };
 export {
-  h as clampSize,
-  a as getResizePercentage
+  m as getHandleStyle,
+  f as getPaneStyle,
+  R as getResizePercentage
 };

package/dist/components/ResizablePanel/useResizablePanel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");require("../../context/BearProvider.cjs");require("react/jsx-runtime");require("../../hooks/useBearComponent/useBearComponent.cjs");const r=require("../../constants/numbers.const.cjs"),S=require("../../hooks/usePointerDrag/usePointerDrag.cjs");require("../FormControl/FormControl.context.cjs");const R=require("../../utils/clamp.utils.cjs"),b=require("./ResizablePanel.utils.cjs"),m=u=>{const{direction:c,defaultSize:o=r.FIFTY,minSize:l=r.TEN,maxSize:a=r.NINETY,onResize:e}=u,[q,z]=s.useState(o),t=s.useRef(null),{onPointerDown:g}=S.usePointerDrag({onMove:n=>{if(!t.current)return;const P=t.current.getBoundingClientRect(),i=R.clamp(b.getResizePercentage(P,c,n.clientX,n.clientY),l,a);z(i),e==null||e(i)}});return{size:q,containerRef:t,onPointerDown:g}};exports.useResizablePanel=m;

package/dist/components/ResizablePanel/useResizablePanel.d.ts

@@ -0,0 +1,12 @@
+import { ResizablePanelProps } from './ResizablePanel.types';
+export declare const useResizablePanel: (options: {
+    direction: NonNullable<ResizablePanelProps["direction"]>;
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    onResize?: (size: number) => void;
+}) => {
+    size: number;
+    containerRef: import('react').RefObject<HTMLDivElement>;
+    onPointerDown: (event: import('react').PointerEvent) => void;
+};