@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Rate/Rate.js

@@ -1,4 +1,4 @@
-import { jsx as l, jsxs as y, Fragment as V } from "react/jsx-runtime";
+import { jsx as t, jsxs as y, Fragment as V } from "react/jsx-runtime";
 import Q, { useState as x, useRef as W } from "react";
 import { StarHalf as X, Star as Y } from "lucide-react";
 import { cn as D } from "../../packages/ui/src/lib/utils.js";
@@ -11,20 +11,20 @@ const Z = Q.forwardRef(
     allowClear: k = !0,
     size: i = "middle",
     color: b = "warning",
-    character: f,
+    character: d,
     className: A,
     style: E,
-    disabled: s = !1,
+    disabled: l = !1,
     autoFocus: F = !1,
     keyboard: L = !0,
-    tooltips: m,
-    onChange: v,
+    tooltips: f,
+    onChange: m,
     onHoverChange: M,
     onFocus: $,
     onBlur: j,
     onKeyDown: B
   }, u) => {
-    const [K, p] = x(_), [o, R] = x(null), C = W(null), n = N !== void 0 ? N : K, S = {
+    const [K, v] = x(_), [o, R] = x(null), C = W(null), n = N !== void 0 ? N : K, S = {
       small: 20,
       middle: 24,
       large: 32
@@ -37,73 +37,73 @@ const Z = Q.forwardRef(
       success: "text-success [&_svg]:fill-success",
       error: "text-error [&_svg]:fill-error",
       warning: "text-yellow-400 [&_svg]:fill-yellow-400"
-    }, d = (e, r) => {
-      if (s) return;
-      const t = r ? e + 0.5 : e + 1;
-      k && t === n ? (p(0), v?.(0)) : (p(t), v?.(t));
-    }, h = (e, r) => {
-      if (s) return;
-      const t = r ? e + 0.5 : e + 1;
-      R(t), M?.(t);
+    }, p = (e, s) => {
+      if (l) return;
+      const r = s ? e + 0.5 : e + 1;
+      k && r === n ? (v(0), m?.(0)) : (v(r), m?.(r));
+    }, h = (e, s) => {
+      if (l) return;
+      const r = s ? e + 0.5 : e + 1;
+      R(r), M?.(r);
     }, P = () => {
       R(null), M?.(0);
     }, T = (e) => {
-      if (!L || s) return;
+      if (!L || l) return;
       B?.(e);
-      const r = a ? 0.5 : 1;
-      let t = n;
+      const s = a ? 0.5 : 1;
+      let r = n;
       switch (e.key) {
         case "ArrowRight":
         case "ArrowUp":
-          e.preventDefault(), t = Math.min(n + r, c);
+          e.preventDefault(), r = Math.min(n + s, c);
           break;
         case "ArrowLeft":
         case "ArrowDown":
-          e.preventDefault(), t = Math.max(n - r, 0);
+          e.preventDefault(), r = Math.max(n - s, 0);
           break;
         case "Home":
-          e.preventDefault(), t = a ? 0.5 : 1;
+          e.preventDefault(), r = a ? 0.5 : 1;
           break;
         case "End":
-          e.preventDefault(), t = c;
+          e.preventDefault(), r = c;
           break;
         default:
           return;
       }
-      p(t), v?.(t);
+      v(r), m?.(r);
     }, U = () => {
       $?.();
     }, q = () => {
       j?.();
     }, z = (e) => {
-      const r = o !== null ? o : n;
-      return r >= e + 1 ? 100 : r > e && r < e + 1 ? (r - e) * 100 : 0;
+      const s = o !== null ? o : n;
+      return s >= e + 1 ? 100 : s > e && s < e + 1 ? (s - e) * 100 : 0;
     }, G = (e) => {
       if (!a) return !1;
-      const t = (o !== null ? o : n) - e;
-      return t > 0 && t <= 0.5;
-    }, g = (e = !1) => typeof f == "function" ? f({
+      const r = (o !== null ? o : n) - e;
+      return r > 0 && r <= 0.5;
+    }, g = (e = !1) => typeof d == "function" ? d({
       count: c,
       value: n,
       defaultValue: _,
       allowHalf: a,
       allowClear: k,
       size: i,
-      disabled: s
-    }) : e ? /* @__PURE__ */ l(X, { className: "w-full h-full" }) : f || /* @__PURE__ */ l(Y, { className: "w-full h-full" }), J = (e) => {
-      if (!(!m || !m[e]))
-        return m[e];
+      disabled: l
+    }) : e ? /* @__PURE__ */ t(X, { className: "ds:w-full ds:h-full" }) : d || /* @__PURE__ */ t(Y, { className: "ds:w-full ds:h-full" }), J = (e) => {
+      if (!(!f || !f[e]))
+        return f[e];
     };
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ t(
       "div",
       {
         ref: (e) => {
           C.current = e, typeof u == "function" ? u(e) : u && (u.current = e);
         },
         className: D(
-          "inline-flex items-center gap-1",
-          s && "opacity-50 cursor-not-allowed",
-          !s && "cursor-pointer",
+          "ds:inline-flex ds:items-center ds:gap-1",
+          l && "ds:opacity-50 ds:cursor-not-allowed",
+          !l && "ds:cursor-pointer",
           A
         ),
         style: E,
@@ -111,74 +111,74 @@ const Z = Q.forwardRef(
         onKeyDown: T,
         onFocus: U,
         onBlur: q,
-        tabIndex: s ? -1 : 0,
+        tabIndex: l ? -1 : 0,
         role: "slider",
         "aria-label": "Rate",
         "aria-valuemin": 0,
         "aria-valuemax": c,
         "aria-valuenow": n,
-        "aria-disabled": s,
+        "aria-disabled": l,
         autoFocus: F,
-        children: Array.from({ length: c }, (e, r) => {
-          const t = z(r), w = J(r), O = G(r);
-          return /* @__PURE__ */ y("div", { className: "relative group", title: w, children: [
+        children: Array.from({ length: c }, (e, s) => {
+          const r = z(s), w = J(s), O = G(s);
+          return /* @__PURE__ */ y("div", { className: "ds:relative ds:group", title: w, children: [
             /* @__PURE__ */ y(
               "div",
               {
-                className: "relative inline-flex",
+                className: "ds:relative ds:inline-flex",
                 style: {
                   width: `${S[i]}px`,
                   height: `${S[i]}px`
                 },
                 children: [
-                  /* @__PURE__ */ l("div", { className: "text-muted-foreground/30 pointer-events-none", children: g(!1) }),
-                  t > 0 && /* @__PURE__ */ l(
+                  /* @__PURE__ */ t("div", { className: "ds:text-muted-foreground/30 ds:pointer-events-none", children: g(!1) }),
+                  r > 0 && /* @__PURE__ */ t(
                     "div",
                     {
                       className: D(
-                        "absolute inset-0 pointer-events-none",
+                        "ds:absolute ds:inset-0 ds:pointer-events-none",
                         H[b]
                       ),
-                      children: O ? g(!0) : /* @__PURE__ */ l(
+                      children: O ? g(!0) : /* @__PURE__ */ t(
                         "div",
                         {
-                          className: "overflow-hidden",
-                          style: { width: `${t}%` },
+                          className: "ds:overflow-hidden",
+                          style: { width: `${r}%` },
                           children: g(!1)
                         }
                       )
                     }
                   ),
-                  !s && /* @__PURE__ */ l(V, { children: a ? /* @__PURE__ */ y(V, { children: [
-                    /* @__PURE__ */ l(
+                  !l && /* @__PURE__ */ t(V, { children: a ? /* @__PURE__ */ y(V, { children: [
+                    /* @__PURE__ */ t(
                       "div",
                       {
-                        className: "absolute inset-0 w-1/2 cursor-pointer",
-                        onClick: () => d(r, !0),
-                        onMouseEnter: () => h(r, !0)
+                        className: "ds:absolute ds:inset-0 ds:w-1/2 ds:cursor-pointer",
+                        onClick: () => p(s, !0),
+                        onMouseEnter: () => h(s, !0)
                       }
                     ),
-                    /* @__PURE__ */ l(
+                    /* @__PURE__ */ t(
                       "div",
                       {
-                        className: "absolute inset-0 left-1/2 w-1/2 cursor-pointer",
-                        onClick: () => d(r, !1),
-                        onMouseEnter: () => h(r, !1)
+                        className: "ds:absolute ds:inset-0 ds:left-1/2 ds:w-1/2 ds:cursor-pointer",
+                        onClick: () => p(s, !1),
+                        onMouseEnter: () => h(s, !1)
                       }
                     )
-                  ] }) : /* @__PURE__ */ l(
+                  ] }) : /* @__PURE__ */ t(
                     "div",
                     {
-                      className: "absolute inset-0 cursor-pointer",
-                      onClick: () => d(r, !1),
-                      onMouseEnter: () => h(r, !1)
+                      className: "ds:absolute ds:inset-0 ds:cursor-pointer",
+                      onClick: () => p(s, !1),
+                      onMouseEnter: () => h(s, !1)
                     }
                   ) })
                 ]
               }
             ),
-            w && (o === r + 1 || a && o === r + 0.5) && /* @__PURE__ */ l("div", { className: "absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs bg-foreground text-background rounded whitespace-nowrap z-10", children: w })
-          ] }, r);
+            w && (o === s + 1 || a && o === s + 0.5) && /* @__PURE__ */ t("div", { className: "ds:absolute ds:top-full ds:left-1/2 ds:-translate-x-1/2 ds:mt-1 ds:px-2 ds:py-1 ds:text-xs ds:bg-foreground ds:text-background ds:rounded ds:whitespace-nowrap ds:z-10", children: w })
+          ] }, s);
         })
       }
     );

package/dist/esm/components/Rate/Rate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rate.js","sources":["../../../../src/components/Rate/Rate.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport { Star, StarHalf } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport interface RateProps {\n  // Display\n  count?: number;\n  value?: number;\n  defaultValue?: number;\n  allowHalf?: boolean;\n  allowClear?: boolean;\n\n  // Appearance\n  size?: \"small\" | \"middle\" | \"large\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  character?: React.ReactNode | ((rateProps: RateProps) => React.ReactNode);\n  className?: string;\n  style?: React.CSSProperties;\n\n  // Interaction\n  disabled?: boolean;\n  autoFocus?: boolean;\n  keyboard?: boolean;\n\n  // Tooltips\n  tooltips?: string[];\n\n  // Callbacks\n  onChange?: (value: number) => void;\n  onHoverChange?: (value: number) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n}\n\nconst Rate = React.forwardRef<HTMLDivElement, RateProps>(\n  (\n    {\n      count = 5,\n      value: controlledValue,\n      defaultValue = 0,\n      allowHalf = false,\n      allowClear = true,\n      size = \"middle\",\n      color = \"warning\",\n      character,\n      className,\n      style,\n      disabled = false,\n      autoFocus = false,\n      keyboard = true,\n      tooltips,\n      onChange,\n      onHoverChange,\n      onFocus,\n      onBlur,\n      onKeyDown,\n    },\n    ref\n  ) => {\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // Use controlled or uncontrolled value\n    const value =\n      controlledValue !== undefined ? controlledValue : internalValue;\n\n    // Size in pixels\n    const sizeMap = {\n      small: 20,\n      middle: 24,\n      large: 32,\n    };\n\n    // Color mapping for filled stars\n    const colorMap = {\n      primary: \"text-primary [&_svg]:fill-primary\",\n      secondary: \"text-secondary [&_svg]:fill-secondary\",\n      accent: \"text-accent [&_svg]:fill-accent\",\n      destructive: \"text-destructive [&_svg]:fill-destructive\",\n      muted: \"text-muted-foreground [&_svg]:fill-muted-foreground\",\n      success: \"text-success [&_svg]:fill-success\",\n      error: \"text-error [&_svg]:fill-error\",\n      warning: \"text-yellow-400 [&_svg]:fill-yellow-400\",\n    };\n\n    // Handle star click\n    const handleStarClick = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n\n      // If clicking the same value and allowClear is true, clear the rating\n      if (allowClear && newValue === value) {\n        setInternalValue(0);\n        onChange?.(0);\n      } else {\n        setInternalValue(newValue);\n        onChange?.(newValue);\n      }\n    };\n\n    // Handle star hover\n    const handleStarHover = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newHoverValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n      setHoverValue(newHoverValue);\n      onHoverChange?.(newHoverValue);\n    };\n\n    // Handle mouse leave\n    const handleMouseLeave = () => {\n      setHoverValue(null);\n      onHoverChange?.(0);\n    };\n\n    // Handle keyboard navigation\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!keyboard || disabled) return;\n\n      onKeyDown?.(event);\n\n      const step = allowHalf ? 0.5 : 1;\n      let newValue = value;\n\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          event.preventDefault();\n          newValue = Math.min(value + step, count);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          newValue = Math.max(value - step, 0);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          newValue = allowHalf ? 0.5 : 1;\n          break;\n        case \"End\":\n          event.preventDefault();\n          newValue = count;\n          break;\n        default:\n          return;\n      }\n\n      setInternalValue(newValue);\n      onChange?.(newValue);\n    };\n\n    // Handle focus\n    const handleFocus = () => {\n      onFocus?.();\n    };\n\n    // Handle blur\n    const handleBlur = () => {\n      onBlur?.();\n    };\n\n    // Get star fill percentage\n    const getStarFill = (starIndex: number) => {\n      const currentValue = hoverValue !== null ? hoverValue : value;\n\n      if (currentValue >= starIndex + 1) {\n        return 100; // Full star\n      } else if (currentValue > starIndex && currentValue < starIndex + 1) {\n        return (currentValue - starIndex) * 100; // Partial star\n      }\n      return 0; // Empty star\n    };\n\n    // Check if star should show as half\n    const isHalfStar = (starIndex: number) => {\n      if (!allowHalf) return false;\n      const currentValue = hoverValue !== null ? hoverValue : value;\n      const fill = currentValue - starIndex;\n      return fill > 0 && fill <= 0.5;\n    };\n\n    // Render character\n    const renderCharacter = (isHalf: boolean = false) => {\n      if (typeof character === \"function\") {\n        return character({\n          count,\n          value,\n          defaultValue,\n          allowHalf,\n          allowClear,\n          size,\n          disabled,\n        });\n      }\n      if (isHalf) {\n        return <StarHalf className=\"w-full h-full\" />;\n      }\n      return character || <Star className=\"w-full h-full\" />;\n    };\n\n    // Get tooltip for star\n    const getTooltip = (starIndex: number) => {\n      if (!tooltips || !tooltips[starIndex]) return undefined;\n      return tooltips[starIndex];\n    };\n\n    return (\n      <div\n        ref={(node) => {\n          containerRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        className={cn(\n          \"inline-flex items-center gap-1\",\n          disabled && \"opacity-50 cursor-not-allowed\",\n          !disabled && \"cursor-pointer\",\n          className\n        )}\n        style={style}\n        onMouseLeave={handleMouseLeave}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        tabIndex={disabled ? -1 : 0}\n        role=\"slider\"\n        aria-label=\"Rate\"\n        aria-valuemin={0}\n        aria-valuemax={count}\n        aria-valuenow={value}\n        aria-disabled={disabled}\n        autoFocus={autoFocus}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fillPercentage = getStarFill(index);\n          const tooltip = getTooltip(index);\n          const showHalfStar = isHalfStar(index);\n\n          return (\n            <div key={index} className=\"relative group\" title={tooltip}>\n              {/* Container for half stars */}\n              <div\n                className=\"relative inline-flex\"\n                style={{\n                  width: `${sizeMap[size]}px`,\n                  height: `${sizeMap[size]}px`,\n                }}\n              >\n                {/* Empty star background */}\n                <div className=\"text-muted-foreground/30 pointer-events-none\">\n                  {renderCharacter(false)}\n                </div>\n\n                {/* Filled star overlay */}\n                {fillPercentage > 0 && (\n                  <div\n                    className={cn(\n                      \"absolute inset-0 pointer-events-none\",\n                      colorMap[color]\n                    )}\n                  >\n                    {showHalfStar ? (\n                      renderCharacter(true)\n                    ) : (\n                      <div\n                        className=\"overflow-hidden\"\n                        style={{ width: `${fillPercentage}%` }}\n                      >\n                        {renderCharacter(false)}\n                      </div>\n                    )}\n                  </div>\n                )}\n\n                {/* Interactive overlay for clicking and hovering */}\n                {!disabled && (\n                  <>\n                    {allowHalf ? (\n                      <>\n                        {/* Left half */}\n                        <div\n                          className=\"absolute inset-0 w-1/2 cursor-pointer\"\n                          onClick={() => handleStarClick(index, true)}\n                          onMouseEnter={() => handleStarHover(index, true)}\n                        />\n                        {/* Right half */}\n                        <div\n                          className=\"absolute inset-0 left-1/2 w-1/2 cursor-pointer\"\n                          onClick={() => handleStarClick(index, false)}\n                          onMouseEnter={() => handleStarHover(index, false)}\n                        />\n                      </>\n                    ) : (\n                      <div\n                        className=\"absolute inset-0 cursor-pointer\"\n                        onClick={() => handleStarClick(index, false)}\n                        onMouseEnter={() => handleStarHover(index, false)}\n                      />\n                    )}\n                  </>\n                )}\n              </div>\n\n              {/* Show tooltip text below star on hover */}\n              {tooltip &&\n                (hoverValue === index + 1 ||\n                  (allowHalf && hoverValue === index + 0.5)) && (\n                  <div className=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs bg-foreground text-background rounded whitespace-nowrap z-10\">\n                    {tooltip}\n                  </div>\n                )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nRate.displayName = \"Rate\";\n\nexport default Rate;\n"],"names":["Rate","React","count","controlledValue","defaultValue","allowHalf","allowClear","size","color","character","className","style","disabled","autoFocus","keyboard","tooltips","onChange","onHoverChange","onFocus","onBlur","onKeyDown","ref","internalValue","setInternalValue","useState","hoverValue","setHoverValue","containerRef","useRef","value","sizeMap","colorMap","handleStarClick","starIndex","isHalf","newValue","handleStarHover","newHoverValue","handleMouseLeave","handleKeyDown","event","step","handleFocus","handleBlur","getStarFill","currentValue","isHalfStar","fill","renderCharacter","jsx","StarHalf","Star","getTooltip","node","cn","_","index","fillPercentage","tooltip","showHalfStar","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"Rate.js","sources":["../../../../src/components/Rate/Rate.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport { Star, StarHalf } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport interface RateProps {\n  // Display\n  count?: number;\n  value?: number;\n  defaultValue?: number;\n  allowHalf?: boolean;\n  allowClear?: boolean;\n\n  // Appearance\n  size?: \"small\" | \"middle\" | \"large\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  character?: React.ReactNode | ((rateProps: RateProps) => React.ReactNode);\n  className?: string;\n  style?: React.CSSProperties;\n\n  // Interaction\n  disabled?: boolean;\n  autoFocus?: boolean;\n  keyboard?: boolean;\n\n  // Tooltips\n  tooltips?: string[];\n\n  // Callbacks\n  onChange?: (value: number) => void;\n  onHoverChange?: (value: number) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n}\n\nconst Rate = React.forwardRef<HTMLDivElement, RateProps>(\n  (\n    {\n      count = 5,\n      value: controlledValue,\n      defaultValue = 0,\n      allowHalf = false,\n      allowClear = true,\n      size = \"middle\",\n      color = \"warning\",\n      character,\n      className,\n      style,\n      disabled = false,\n      autoFocus = false,\n      keyboard = true,\n      tooltips,\n      onChange,\n      onHoverChange,\n      onFocus,\n      onBlur,\n      onKeyDown,\n    },\n    ref\n  ) => {\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // Use controlled or uncontrolled value\n    const value =\n      controlledValue !== undefined ? controlledValue : internalValue;\n\n    // Size in pixels\n    const sizeMap = {\n      small: 20,\n      middle: 24,\n      large: 32,\n    };\n\n    // Color mapping for filled stars\n    const colorMap = {\n      primary: \"text-primary [&_svg]:fill-primary\",\n      secondary: \"text-secondary [&_svg]:fill-secondary\",\n      accent: \"text-accent [&_svg]:fill-accent\",\n      destructive: \"text-destructive [&_svg]:fill-destructive\",\n      muted: \"text-muted-foreground [&_svg]:fill-muted-foreground\",\n      success: \"text-success [&_svg]:fill-success\",\n      error: \"text-error [&_svg]:fill-error\",\n      warning: \"text-yellow-400 [&_svg]:fill-yellow-400\",\n    };\n\n    // Handle star click\n    const handleStarClick = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n\n      // If clicking the same value and allowClear is true, clear the rating\n      if (allowClear && newValue === value) {\n        setInternalValue(0);\n        onChange?.(0);\n      } else {\n        setInternalValue(newValue);\n        onChange?.(newValue);\n      }\n    };\n\n    // Handle star hover\n    const handleStarHover = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newHoverValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n      setHoverValue(newHoverValue);\n      onHoverChange?.(newHoverValue);\n    };\n\n    // Handle mouse leave\n    const handleMouseLeave = () => {\n      setHoverValue(null);\n      onHoverChange?.(0);\n    };\n\n    // Handle keyboard navigation\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!keyboard || disabled) return;\n\n      onKeyDown?.(event);\n\n      const step = allowHalf ? 0.5 : 1;\n      let newValue = value;\n\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          event.preventDefault();\n          newValue = Math.min(value + step, count);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          newValue = Math.max(value - step, 0);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          newValue = allowHalf ? 0.5 : 1;\n          break;\n        case \"End\":\n          event.preventDefault();\n          newValue = count;\n          break;\n        default:\n          return;\n      }\n\n      setInternalValue(newValue);\n      onChange?.(newValue);\n    };\n\n    // Handle focus\n    const handleFocus = () => {\n      onFocus?.();\n    };\n\n    // Handle blur\n    const handleBlur = () => {\n      onBlur?.();\n    };\n\n    // Get star fill percentage\n    const getStarFill = (starIndex: number) => {\n      const currentValue = hoverValue !== null ? hoverValue : value;\n\n      if (currentValue >= starIndex + 1) {\n        return 100; // Full star\n      } else if (currentValue > starIndex && currentValue < starIndex + 1) {\n        return (currentValue - starIndex) * 100; // Partial star\n      }\n      return 0; // Empty star\n    };\n\n    // Check if star should show as half\n    const isHalfStar = (starIndex: number) => {\n      if (!allowHalf) return false;\n      const currentValue = hoverValue !== null ? hoverValue : value;\n      const fill = currentValue - starIndex;\n      return fill > 0 && fill <= 0.5;\n    };\n\n    // Render character\n    const renderCharacter = (isHalf: boolean = false) => {\n      if (typeof character === \"function\") {\n        return character({\n          count,\n          value,\n          defaultValue,\n          allowHalf,\n          allowClear,\n          size,\n          disabled,\n        });\n      }\n      if (isHalf) {\n        return <StarHalf className=\"ds:w-full ds:h-full\" />;\n      }\n      return character || <Star className=\"ds:w-full ds:h-full\" />;\n    };\n\n    // Get tooltip for star\n    const getTooltip = (starIndex: number) => {\n      if (!tooltips || !tooltips[starIndex]) return undefined;\n      return tooltips[starIndex];\n    };\n\n    return (\n      <div\n        ref={(node) => {\n          containerRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        className={cn(\n          \"ds:inline-flex ds:items-center ds:gap-1\",\n          disabled && \"ds:opacity-50 ds:cursor-not-allowed\",\n          !disabled && \"ds:cursor-pointer\",\n          className\n        )}\n        style={style}\n        onMouseLeave={handleMouseLeave}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        tabIndex={disabled ? -1 : 0}\n        role=\"slider\"\n        aria-label=\"Rate\"\n        aria-valuemin={0}\n        aria-valuemax={count}\n        aria-valuenow={value}\n        aria-disabled={disabled}\n        autoFocus={autoFocus}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fillPercentage = getStarFill(index);\n          const tooltip = getTooltip(index);\n          const showHalfStar = isHalfStar(index);\n\n          return (\n            <div key={index} className=\"ds:relative ds:group\" title={tooltip}>\n              {/* Container for half stars */}\n              <div\n                className=\"ds:relative ds:inline-flex\"\n                style={{\n                  width: `${sizeMap[size]}px`,\n                  height: `${sizeMap[size]}px`,\n                }}\n              >\n                {/* Empty star background */}\n                <div className=\"ds:text-muted-foreground/30 ds:pointer-events-none\">\n                  {renderCharacter(false)}\n                </div>\n\n                {/* Filled star overlay */}\n                {fillPercentage > 0 && (\n                  <div\n                    className={cn(\n                      \"ds:absolute ds:inset-0 ds:pointer-events-none\",\n                      colorMap[color]\n                    )}\n                  >\n                    {showHalfStar ? (\n                      renderCharacter(true)\n                    ) : (\n                      <div\n                        className=\"ds:overflow-hidden\"\n                        style={{ width: `${fillPercentage}%` }}\n                      >\n                        {renderCharacter(false)}\n                      </div>\n                    )}\n                  </div>\n                )}\n\n                {/* Interactive overlay for clicking and hovering */}\n                {!disabled && (\n                  <>\n                    {allowHalf ? (\n                      <>\n                        {/* Left half */}\n                        <div\n                          className=\"ds:absolute ds:inset-0 ds:w-1/2 ds:cursor-pointer\"\n                          onClick={() => handleStarClick(index, true)}\n                          onMouseEnter={() => handleStarHover(index, true)}\n                        />\n                        {/* Right half */}\n                        <div\n                          className=\"ds:absolute ds:inset-0 ds:left-1/2 ds:w-1/2 ds:cursor-pointer\"\n                          onClick={() => handleStarClick(index, false)}\n                          onMouseEnter={() => handleStarHover(index, false)}\n                        />\n                      </>\n                    ) : (\n                      <div\n                        className=\"ds:absolute ds:inset-0 ds:cursor-pointer\"\n                        onClick={() => handleStarClick(index, false)}\n                        onMouseEnter={() => handleStarHover(index, false)}\n                      />\n                    )}\n                  </>\n                )}\n              </div>\n\n              {/* Show tooltip text below star on hover */}\n              {tooltip &&\n                (hoverValue === index + 1 ||\n                  (allowHalf && hoverValue === index + 0.5)) && (\n                  <div className=\"ds:absolute ds:top-full ds:left-1/2 ds:-translate-x-1/2 ds:mt-1 ds:px-2 ds:py-1 ds:text-xs ds:bg-foreground ds:text-background ds:rounded ds:whitespace-nowrap ds:z-10\">\n                    {tooltip}\n                  </div>\n                )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nRate.displayName = \"Rate\";\n\nexport default Rate;\n"],"names":["Rate","React","count","controlledValue","defaultValue","allowHalf","allowClear","size","color","character","className","style","disabled","autoFocus","keyboard","tooltips","onChange","onHoverChange","onFocus","onBlur","onKeyDown","ref","internalValue","setInternalValue","useState","hoverValue","setHoverValue","containerRef","useRef","value","sizeMap","colorMap","handleStarClick","starIndex","isHalf","newValue","handleStarHover","newHoverValue","handleMouseLeave","handleKeyDown","event","step","handleFocus","handleBlur","getStarFill","currentValue","isHalfStar","fill","renderCharacter","jsx","StarHalf","Star","getTooltip","node","cn","_","index","fillPercentage","tooltip","showHalfStar","jsxs","Fragment"],"mappings":"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"}

package/dist/esm/components/Resizable/Resizable.js

@@ -11,23 +11,23 @@ const h = (b) => {
     handleIcon: N,
     autoSaveId: n,
     onLayout: r,
-    className: t,
+    className: d,
     panelClassName: S,
     handleClassName: x,
-    children: d,
+    children: t,
     keyboardResizeBy: c,
     storage: m
   } = b;
-  return d && !a ? /* @__PURE__ */ l(
+  return t && !a ? /* @__PURE__ */ l(
     i,
     {
       direction: o,
       autoSaveId: n,
       onLayout: r,
-      className: s("h-full w-full", t),
+      className: s("ds:h-full ds:w-full", d),
       keyboardResizeBy: c,
       storage: m,
-      children: d
+      children: t
     }
   ) : !a || a.length === 0 ? null : /* @__PURE__ */ l(
     i,
@@ -35,7 +35,7 @@ const h = (b) => {
       direction: o,
       autoSaveId: n,
       onLayout: r,
-      className: s("h-full w-full", t),
+      className: s("ds:h-full ds:w-full", d),
       keyboardResizeBy: c,
       storage: m,
       children: a.map((e, z) => /* @__PURE__ */ g(y.Fragment, { children: [

package/dist/esm/components/Resizable/Resizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Resizable.js","sources":["../../../../src/components/Resizable/Resizable.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  resizableHandleVariants,\n} from \"@dsui/ui/components/resizable\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { VariantProps } from \"class-variance-authority\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ResizableDirection = \"horizontal\" | \"vertical\";\n\nexport type ResizableHandleVariant = VariantProps<\n  typeof resizableHandleVariants\n>[\"variant\"];\n\nexport interface ResizablePanelConfig {\n  id?: string;\n  defaultSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  collapsible?: boolean;\n  collapsedSize?: number;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  onResize?: (size: number) => void;\n  className?: string;\n  children?: React.ReactNode;\n  order?: number;\n}\n\ntype PanelGroupOnLayout = (sizes: number[]) => void;\n\nexport interface ResizableProps {\n  /** Direction of the resizable panels */\n  direction?: ResizableDirection;\n  /** Configuration for panels when using wrapper mode */\n  panels?: ResizablePanelConfig[];\n  /** Show handle with grip icon */\n  withHandle?: boolean;\n  /** Handle variant: 'default' shows icon, 'line' highlights on hover */\n  handleVariant?: ResizableHandleVariant;\n  /** Custom icon for the handle (only works with default variant) */\n  handleIcon?: React.ReactNode;\n  /** Auto save layout to localStorage with this id */\n  autoSaveId?: string;\n  /** Callback when layout changes */\n  onLayout?: PanelGroupOnLayout;\n  /** Additional class for the panel group */\n  className?: string;\n  /** Additional class for each panel */\n  panelClassName?: string;\n  /** Additional class for handles */\n  handleClassName?: string;\n  /** Children for primitive usage */\n  children?: React.ReactNode;\n  /** Keyboard resize by delta percentage (default: 10) */\n  keyboardResizeBy?: number;\n  /** Storage object for saving layout (default: localStorage) */\n  storage?: {\n    getItem: (name: string) => string | null;\n    setItem: (name: string, value: string) => void;\n  };\n}\n\n// ============================================================================\n// Wrapper Component\n// ============================================================================\n\nconst ResizableWrapper = (props: ResizableProps) => {\n  const {\n    direction = \"horizontal\",\n    panels,\n    withHandle = true,\n    handleVariant,\n    handleIcon,\n    autoSaveId,\n    onLayout,\n    className,\n    panelClassName,\n    handleClassName,\n    children,\n    keyboardResizeBy,\n    storage,\n  } = props;\n\n  // If children are provided, use primitive mode\n  if (children && !panels) {\n    return (\n      <ResizablePanelGroup\n        direction={direction}\n        autoSaveId={autoSaveId}\n        onLayout={onLayout}\n        className={cn(\"h-full w-full\", className)}\n        keyboardResizeBy={keyboardResizeBy}\n        storage={storage}\n      >\n        {children}\n      </ResizablePanelGroup>\n    );\n  }\n\n  // Wrapper mode with panels config\n  if (!panels || panels.length === 0) {\n    return null;\n  }\n\n  return (\n    <ResizablePanelGroup\n      direction={direction}\n      autoSaveId={autoSaveId}\n      onLayout={onLayout}\n      className={cn(\"h-full w-full\", className)}\n      keyboardResizeBy={keyboardResizeBy}\n      storage={storage}\n    >\n      {panels.map((panel, index) => (\n        <React.Fragment key={panel.id || `panel-${index}`}>\n          <ResizablePanel\n            id={panel.id}\n            defaultSize={panel.defaultSize}\n            minSize={panel.minSize}\n            maxSize={panel.maxSize}\n            collapsible={panel.collapsible}\n            collapsedSize={panel.collapsedSize}\n            onCollapse={panel.onCollapse}\n            onExpand={panel.onExpand}\n            onResize={panel.onResize}\n            order={panel.order}\n            className={cn(panelClassName, panel.className)}\n          >\n            {panel.children}\n          </ResizablePanel>\n          {index < panels.length - 1 && (\n            <ResizableHandle\n              withHandle={withHandle}\n              variant={handleVariant}\n              icon={handleIcon}\n              className={handleClassName}\n            />\n          )}\n        </React.Fragment>\n      ))}\n    </ResizablePanelGroup>\n  );\n};\n\nResizableWrapper.displayName = \"Resizable\";\n\n// ============================================================================\n// Sub-components for primitive usage\n// ============================================================================\n\nexport type ResizablePanelProps = React.ComponentProps<typeof ResizablePanel>;\nexport type ResizableHandleProps = React.ComponentProps<typeof ResizableHandle>;\nexport type ResizablePanelGroupProps = React.ComponentProps<\n  typeof ResizablePanelGroup\n>;\n\n// Re-export Panel and Handle from shadcn for primitive usage\nconst Panel = ResizablePanel;\nconst Handle = ResizableHandle;\n\n// ============================================================================\n// Export with Object.assign pattern\n// ============================================================================\n\nconst Resizable = Object.assign(ResizableWrapper, {\n  Panel,\n  Handle,\n  PanelGroup: ResizablePanelGroup,\n});\n\nexport default Resizable;\nexport {\n  Resizable,\n  ResizableWrapper,\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  Panel,\n  Handle,\n};\n"],"names":["ResizableWrapper","props","direction","panels","withHandle","handleVariant","handleIcon","autoSaveId","onLayout","className","panelClassName","handleClassName","children","keyboardResizeBy","storage","jsx","ResizablePanelGroup","cn","panel","index","jsxs","React","ResizablePanel","ResizableHandle","Panel","Handle","Resizable"],"mappings":";;;;AAyEA,MAAMA,IAAmB,CAACC,MAA0B;AAClD,QAAM;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,IACEb;AAGJ,SAAIW,KAAY,CAACT,IAEb,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAd;AAAA,MACA,YAAAK;AAAA,MACA,UAAAC;AAAA,MACA,WAAWS,EAAG,iBAAiBR,CAAS;AAAA,MACxC,kBAAAI;AAAA,MACA,SAAAC;AAAA,MAEC,UAAAF;AAAA,IAAA;AAAA,EAAA,IAMH,CAACT,KAAUA,EAAO,WAAW,IACxB,OAIP,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAd;AAAA,MACA,YAAAK;AAAA,MACA,UAAAC;AAAA,MACA,WAAWS,EAAG,iBAAiBR,CAAS;AAAA,MACxC,kBAAAI;AAAA,MACA,SAAAC;AAAA,MAEC,UAAAX,EAAO,IAAI,CAACe,GAAOC,MAClB,gBAAAC,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAIJ,EAAM;AAAA,YACV,aAAaA,EAAM;AAAA,YACnB,SAASA,EAAM;AAAA,YACf,SAASA,EAAM;AAAA,YACf,aAAaA,EAAM;AAAA,YACnB,eAAeA,EAAM;AAAA,YACrB,YAAYA,EAAM;AAAA,YAClB,UAAUA,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,YAChB,OAAOA,EAAM;AAAA,YACb,WAAWD,EAAGP,GAAgBQ,EAAM,SAAS;AAAA,YAE5C,UAAAA,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAERC,IAAQhB,EAAO,SAAS,KACvB,gBAAAY;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,YAAAnB;AAAA,YACA,SAASC;AAAA,YACT,MAAMC;AAAA,YACN,WAAWK;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,GAtBiBO,EAAM,MAAM,SAASC,CAAK,EAwB/C,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAnB,EAAiB,cAAc;AAa/B,MAAMwB,IAAQF,GACRG,IAASF,GAMTG,IAAY,OAAO,OAAO1B,GAAkB;AAAA,EAChD,OAAAwB;AAAA,EACA,QAAAC;AAAA,EACA,YAAYT;AACd,CAAC;"}
+{"version":3,"file":"Resizable.js","sources":["../../../../src/components/Resizable/Resizable.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  resizableHandleVariants,\n} from \"@dsui/ui/components/resizable\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { VariantProps } from \"class-variance-authority\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ResizableDirection = \"horizontal\" | \"vertical\";\n\nexport type ResizableHandleVariant = VariantProps<\n  typeof resizableHandleVariants\n>[\"variant\"];\n\nexport interface ResizablePanelConfig {\n  id?: string;\n  defaultSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  collapsible?: boolean;\n  collapsedSize?: number;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  onResize?: (size: number) => void;\n  className?: string;\n  children?: React.ReactNode;\n  order?: number;\n}\n\ntype PanelGroupOnLayout = (sizes: number[]) => void;\n\nexport interface ResizableProps {\n  /** Direction of the resizable panels */\n  direction?: ResizableDirection;\n  /** Configuration for panels when using wrapper mode */\n  panels?: ResizablePanelConfig[];\n  /** Show handle with grip icon */\n  withHandle?: boolean;\n  /** Handle variant: 'default' shows icon, 'line' highlights on hover */\n  handleVariant?: ResizableHandleVariant;\n  /** Custom icon for the handle (only works with default variant) */\n  handleIcon?: React.ReactNode;\n  /** Auto save layout to localStorage with this id */\n  autoSaveId?: string;\n  /** Callback when layout changes */\n  onLayout?: PanelGroupOnLayout;\n  /** Additional class for the panel group */\n  className?: string;\n  /** Additional class for each panel */\n  panelClassName?: string;\n  /** Additional class for handles */\n  handleClassName?: string;\n  /** Children for primitive usage */\n  children?: React.ReactNode;\n  /** Keyboard resize by delta percentage (default: 10) */\n  keyboardResizeBy?: number;\n  /** Storage object for saving layout (default: localStorage) */\n  storage?: {\n    getItem: (name: string) => string | null;\n    setItem: (name: string, value: string) => void;\n  };\n}\n\n// ============================================================================\n// Wrapper Component\n// ============================================================================\n\nconst ResizableWrapper = (props: ResizableProps) => {\n  const {\n    direction = \"horizontal\",\n    panels,\n    withHandle = true,\n    handleVariant,\n    handleIcon,\n    autoSaveId,\n    onLayout,\n    className,\n    panelClassName,\n    handleClassName,\n    children,\n    keyboardResizeBy,\n    storage,\n  } = props;\n\n  // If children are provided, use primitive mode\n  if (children && !panels) {\n    return (\n      <ResizablePanelGroup\n        direction={direction}\n        autoSaveId={autoSaveId}\n        onLayout={onLayout}\n        className={cn(\"ds:h-full ds:w-full\", className)}\n        keyboardResizeBy={keyboardResizeBy}\n        storage={storage}\n      >\n        {children}\n      </ResizablePanelGroup>\n    );\n  }\n\n  // Wrapper mode with panels config\n  if (!panels || panels.length === 0) {\n    return null;\n  }\n\n  return (\n    <ResizablePanelGroup\n      direction={direction}\n      autoSaveId={autoSaveId}\n      onLayout={onLayout}\n      className={cn(\"ds:h-full ds:w-full\", className)}\n      keyboardResizeBy={keyboardResizeBy}\n      storage={storage}\n    >\n      {panels.map((panel, index) => (\n        <React.Fragment key={panel.id || `panel-${index}`}>\n          <ResizablePanel\n            id={panel.id}\n            defaultSize={panel.defaultSize}\n            minSize={panel.minSize}\n            maxSize={panel.maxSize}\n            collapsible={panel.collapsible}\n            collapsedSize={panel.collapsedSize}\n            onCollapse={panel.onCollapse}\n            onExpand={panel.onExpand}\n            onResize={panel.onResize}\n            order={panel.order}\n            className={cn(panelClassName, panel.className)}\n          >\n            {panel.children}\n          </ResizablePanel>\n          {index < panels.length - 1 && (\n            <ResizableHandle\n              withHandle={withHandle}\n              variant={handleVariant}\n              icon={handleIcon}\n              className={handleClassName}\n            />\n          )}\n        </React.Fragment>\n      ))}\n    </ResizablePanelGroup>\n  );\n};\n\nResizableWrapper.displayName = \"Resizable\";\n\n// ============================================================================\n// Sub-components for primitive usage\n// ============================================================================\n\nexport type ResizablePanelProps = React.ComponentProps<typeof ResizablePanel>;\nexport type ResizableHandleProps = React.ComponentProps<typeof ResizableHandle>;\nexport type ResizablePanelGroupProps = React.ComponentProps<\n  typeof ResizablePanelGroup\n>;\n\n// Re-export Panel and Handle from shadcn for primitive usage\nconst Panel = ResizablePanel;\nconst Handle = ResizableHandle;\n\n// ============================================================================\n// Export with Object.assign pattern\n// ============================================================================\n\nconst Resizable = Object.assign(ResizableWrapper, {\n  Panel,\n  Handle,\n  PanelGroup: ResizablePanelGroup,\n});\n\nexport default Resizable;\nexport {\n  Resizable,\n  ResizableWrapper,\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  Panel,\n  Handle,\n};\n"],"names":["ResizableWrapper","props","direction","panels","withHandle","handleVariant","handleIcon","autoSaveId","onLayout","className","panelClassName","handleClassName","children","keyboardResizeBy","storage","jsx","ResizablePanelGroup","cn","panel","index","jsxs","React","ResizablePanel","ResizableHandle","Panel","Handle","Resizable"],"mappings":";;;;AAyEA,MAAMA,IAAmB,CAACC,MAA0B;AAClD,QAAM;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,IACEb;AAGJ,SAAIW,KAAY,CAACT,IAEb,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAd;AAAA,MACA,YAAAK;AAAA,MACA,UAAAC;AAAA,MACA,WAAWS,EAAG,uBAAuBR,CAAS;AAAA,MAC9C,kBAAAI;AAAA,MACA,SAAAC;AAAA,MAEC,UAAAF;AAAA,IAAA;AAAA,EAAA,IAMH,CAACT,KAAUA,EAAO,WAAW,IACxB,OAIP,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAd;AAAA,MACA,YAAAK;AAAA,MACA,UAAAC;AAAA,MACA,WAAWS,EAAG,uBAAuBR,CAAS;AAAA,MAC9C,kBAAAI;AAAA,MACA,SAAAC;AAAA,MAEC,UAAAX,EAAO,IAAI,CAACe,GAAOC,MAClB,gBAAAC,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAIJ,EAAM;AAAA,YACV,aAAaA,EAAM;AAAA,YACnB,SAASA,EAAM;AAAA,YACf,SAASA,EAAM;AAAA,YACf,aAAaA,EAAM;AAAA,YACnB,eAAeA,EAAM;AAAA,YACrB,YAAYA,EAAM;AAAA,YAClB,UAAUA,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,YAChB,OAAOA,EAAM;AAAA,YACb,WAAWD,EAAGP,GAAgBQ,EAAM,SAAS;AAAA,YAE5C,UAAAA,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAERC,IAAQhB,EAAO,SAAS,KACvB,gBAAAY;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,YAAAnB;AAAA,YACA,SAASC;AAAA,YACT,MAAMC;AAAA,YACN,WAAWK;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,GAtBiBO,EAAM,MAAM,SAASC,CAAK,EAwB/C,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAnB,EAAiB,cAAc;AAa/B,MAAMwB,IAAQF,GACRG,IAASF,GAMTG,IAAY,OAAO,OAAO1B,GAAkB;AAAA,EAChD,OAAAwB;AAAA,EACA,QAAAC;AAAA,EACA,YAAYT;AACd,CAAC;"}

package/dist/esm/components/ScrollArea/ScrollArea.js

@@ -1,15 +1,15 @@
 import { jsx as u } from "react/jsx-runtime";
-import i, { useRef as S, useEffect as p } from "react";
-import { ScrollArea as d, ScrollBar as A } from "../../packages/ui/src/components/scroll-area.js";
+import i, { useRef as S, useEffect as d } from "react";
+import { ScrollArea as p, ScrollBar as A } from "../../packages/ui/src/components/scroll-area.js";
 import { cn as l } from "../../packages/ui/src/lib/utils.js";
 const R = i.forwardRef(
-  ({ className: c, children: s, snapType: a, viewportClassName: t, ...m }, o) => {
+  ({ className: o, children: c, snapType: a, viewportClassName: t, ...m }, s) => {
     const n = S(null), f = i.useMemo(() => {
       if (!a || a === "none") return "snap-none";
       const [r, e] = a.split(" ");
-      return l(`snap-${r}`, e && `snap-${e}`);
+      return l(`ds:snap-${r}`, e && `ds:snap-${e}`);
     }, [a]);
-    return p(() => {
+    return d(() => {
       if (n.current && (f || t)) {
         const r = n.current.querySelector(
           "[data-radix-scroll-area-viewport]"
@@ -20,21 +20,21 @@ const R = i.forwardRef(
         }
       }
     }, [f, t]), /* @__PURE__ */ u(
-      d,
+      p,
       {
         ref: (r) => {
-          n.current = r, typeof o == "function" ? o(r) : o && (o.current = r);
+          n.current = r, typeof s == "function" ? s(r) : s && (s.current = r);
         },
-        className: l(c),
+        className: l(o),
         ...m,
-        children: s
+        children: c
       }
     );
   }
 );
 R.displayName = "ScrollArea";
 const x = i.forwardRef(
-  ({ className: c, ...s }, a) => /* @__PURE__ */ u(A, { ref: a, className: l(c), ...s })
+  ({ className: o, ...c }, a) => /* @__PURE__ */ u(A, { ref: a, className: l(o), ...c })
 );
 x.displayName = "ScrollBar";
 export {

package/dist/esm/components/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport {\n  ScrollArea as SScrollArea,\n  ScrollBar as SScrollBar,\n} from \"@dsui/ui/components/scroll-area\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport interface ScrollAreaProps\n  extends React.ComponentProps<typeof SScrollArea> {\n  /**\n   * Type of scroll snap behavior\n   * @default undefined\n   */\n  snapType?:\n    | \"none\"\n    | \"x\"\n    | \"y\"\n    | \"both\"\n    | \"x mandatory\"\n    | \"y mandatory\"\n    | \"both mandatory\"\n    | \"x proximity\"\n    | \"y proximity\"\n    | \"both proximity\";\n  /**\n   * Additional className for the viewport (where scroll happens)\n   */\n  viewportClassName?: string;\n}\n\nexport type ScrollBarProps = React.ComponentProps<typeof SScrollBar>;\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ className, children, snapType, viewportClassName, ...props }, ref) => {\n    const scrollAreaRef = useRef<HTMLDivElement>(null);\n\n    const snapClass = React.useMemo(() => {\n      if (!snapType || snapType === \"none\") return \"snap-none\";\n\n      const [axis, alignment] = snapType.split(\" \");\n      return cn(`snap-${axis}`, alignment && `snap-${alignment}`);\n    }, [snapType]);\n\n    // const snapClass = snapType\n    //   ? snapType === \"none\"\n    //     ? \"snap-none\"\n    //     : snapType === \"x\"\n    //       ? \"snap-x\"\n    //       : snapType === \"y\"\n    //         ? \"snap-y\"\n    //         : snapType === \"both\"\n    //           ? \"snap-both\"\n    //           : snapType === \"x mandatory\"\n    //             ? \"snap-x snap-mandatory\"\n    //             : snapType === \"y mandatory\"\n    //               ? \"snap-y snap-mandatory\"\n    //               : snapType === \"both mandatory\"\n    //                 ? \"snap-both snap-mandatory\"\n    //                 : snapType === \"x proximity\"\n    //                   ? \"snap-x snap-proximity\"\n    //                   : snapType === \"y proximity\"\n    //                     ? \"snap-y snap-proximity\"\n    //                     : snapType === \"both proximity\"\n    //                       ? \"snap-both snap-proximity\"\n    //                       : \"\"\n    //   : \"\";\n\n    useEffect(() => {\n      if (scrollAreaRef.current && (snapClass || viewportClassName)) {\n        const viewport = scrollAreaRef.current.querySelector(\n          \"[data-radix-scroll-area-viewport]\"\n        );\n        if (viewport) {\n          const classes = cn(snapClass, viewportClassName);\n          if (classes) {\n            viewport.className = cn(viewport.className, classes);\n          }\n        }\n      }\n    }, [snapClass, viewportClassName]);\n\n    return (\n      <SScrollArea\n        ref={(node) => {\n          scrollAreaRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        className={cn(className)}\n        {...props}\n      >\n        {children}\n      </SScrollArea>\n    );\n  }\n);\nScrollArea.displayName = \"ScrollArea\";\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n  ({ className, ...props }, ref) => {\n    return <SScrollBar ref={ref} className={cn(className)} {...props} />;\n  }\n);\nScrollBar.displayName = \"ScrollBar\";\n\nexport { ScrollArea, ScrollBar };\nexport default ScrollArea;\n"],"names":["ScrollArea","React","className","children","snapType","viewportClassName","props","ref","scrollAreaRef","useRef","snapClass","axis","alignment","cn","useEffect","viewport","classes","jsx","SScrollArea","node","ScrollBar","SScrollBar"],"mappings":";;;;AAgCA,MAAMA,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,mBAAAC,GAAmB,GAAGC,EAAA,GAASC,MAAQ;AACvE,UAAMC,IAAgBC,EAAuB,IAAI,GAE3CC,IAAYT,EAAM,QAAQ,MAAM;AACpC,UAAI,CAACG,KAAYA,MAAa,OAAQ,QAAO;AAE7C,YAAM,CAACO,GAAMC,CAAS,IAAIR,EAAS,MAAM,GAAG;AAC5C,aAAOS,EAAG,QAAQF,CAAI,IAAIC,KAAa,QAAQA,CAAS,EAAE;AAAA,IAC5D,GAAG,CAACR,CAAQ,CAAC;AA0Bb,WAAAU,EAAU,MAAM;AACd,UAAIN,EAAc,YAAYE,KAAaL,IAAoB;AAC7D,cAAMU,IAAWP,EAAc,QAAQ;AAAA,UACrC;AAAA,QAAA;AAEF,YAAIO,GAAU;AACZ,gBAAMC,IAAUH,EAAGH,GAAWL,CAAiB;AAC/C,UAAIW,MACFD,EAAS,YAAYF,EAAGE,EAAS,WAAWC,CAAO;AAAA,QAEvD;AAAA,MACF;AAAA,IACF,GAAG,CAACN,GAAWL,CAAiB,CAAC,GAG/B,gBAAAY;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAK,CAACC,MAAS;AACb,UAAAX,EAAc,UAAUW,GACpB,OAAOZ,KAAQ,aACjBA,EAAIY,CAAI,IACCZ,MACTA,EAAI,UAAUY;AAAA,QAElB;AAAA,QACA,WAAWN,EAAGX,CAAS;AAAA,QACtB,GAAGI;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACAH,EAAW,cAAc;AAEzB,MAAMoB,IAAYnB,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,GAAGI,EAAA,GAASC,MACjB,gBAAAU,EAACI,KAAW,KAAAd,GAAU,WAAWM,EAAGX,CAAS,GAAI,GAAGI,GAAO;AAEtE;AACAc,EAAU,cAAc;"}
+{"version":3,"file":"ScrollArea.js","sources":["../../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport {\n  ScrollArea as SScrollArea,\n  ScrollBar as SScrollBar,\n} from \"@dsui/ui/components/scroll-area\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport interface ScrollAreaProps\n  extends React.ComponentProps<typeof SScrollArea> {\n  /**\n   * Type of scroll snap behavior\n   * @default undefined\n   */\n  snapType?:\n    | \"none\"\n    | \"x\"\n    | \"y\"\n    | \"both\"\n    | \"x mandatory\"\n    | \"y mandatory\"\n    | \"both mandatory\"\n    | \"x proximity\"\n    | \"y proximity\"\n    | \"both proximity\";\n  /**\n   * Additional className for the viewport (where scroll happens)\n   */\n  viewportClassName?: string;\n}\n\nexport type ScrollBarProps = React.ComponentProps<typeof SScrollBar>;\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ className, children, snapType, viewportClassName, ...props }, ref) => {\n    const scrollAreaRef = useRef<HTMLDivElement>(null);\n\n    const snapClass = React.useMemo(() => {\n      if (!snapType || snapType === \"none\") return \"snap-none\";\n\n      const [axis, alignment] = snapType.split(\" \");\n      return cn(`ds:snap-${axis}`, alignment && `ds:snap-${alignment}`);\n    }, [snapType]);\n\n    // const snapClass = snapType\n    //   ? snapType === \"none\"\n    //     ? \"snap-none\"\n    //     : snapType === \"x\"\n    //       ? \"snap-x\"\n    //       : snapType === \"y\"\n    //         ? \"snap-y\"\n    //         : snapType === \"both\"\n    //           ? \"snap-both\"\n    //           : snapType === \"x mandatory\"\n    //             ? \"snap-x snap-mandatory\"\n    //             : snapType === \"y mandatory\"\n    //               ? \"snap-y snap-mandatory\"\n    //               : snapType === \"both mandatory\"\n    //                 ? \"snap-both snap-mandatory\"\n    //                 : snapType === \"x proximity\"\n    //                   ? \"snap-x snap-proximity\"\n    //                   : snapType === \"y proximity\"\n    //                     ? \"snap-y snap-proximity\"\n    //                     : snapType === \"both proximity\"\n    //                       ? \"snap-both snap-proximity\"\n    //                       : \"\"\n    //   : \"\";\n\n    useEffect(() => {\n      if (scrollAreaRef.current && (snapClass || viewportClassName)) {\n        const viewport = scrollAreaRef.current.querySelector(\n          \"[data-radix-scroll-area-viewport]\"\n        );\n        if (viewport) {\n          const classes = cn(snapClass, viewportClassName);\n          if (classes) {\n            viewport.className = cn(viewport.className, classes);\n          }\n        }\n      }\n    }, [snapClass, viewportClassName]);\n\n    return (\n      <SScrollArea\n        ref={(node) => {\n          scrollAreaRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        className={cn(className)}\n        {...props}\n      >\n        {children}\n      </SScrollArea>\n    );\n  }\n);\nScrollArea.displayName = \"ScrollArea\";\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n  ({ className, ...props }, ref) => {\n    return <SScrollBar ref={ref} className={cn(className)} {...props} />;\n  }\n);\nScrollBar.displayName = \"ScrollBar\";\n\nexport { ScrollArea, ScrollBar };\nexport default ScrollArea;\n"],"names":["ScrollArea","React","className","children","snapType","viewportClassName","props","ref","scrollAreaRef","useRef","snapClass","axis","alignment","cn","useEffect","viewport","classes","jsx","SScrollArea","node","ScrollBar","SScrollBar"],"mappings":";;;;AAgCA,MAAMA,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,mBAAAC,GAAmB,GAAGC,EAAA,GAASC,MAAQ;AACvE,UAAMC,IAAgBC,EAAuB,IAAI,GAE3CC,IAAYT,EAAM,QAAQ,MAAM;AACpC,UAAI,CAACG,KAAYA,MAAa,OAAQ,QAAO;AAE7C,YAAM,CAACO,GAAMC,CAAS,IAAIR,EAAS,MAAM,GAAG;AAC5C,aAAOS,EAAG,WAAWF,CAAI,IAAIC,KAAa,WAAWA,CAAS,EAAE;AAAA,IAClE,GAAG,CAACR,CAAQ,CAAC;AA0Bb,WAAAU,EAAU,MAAM;AACd,UAAIN,EAAc,YAAYE,KAAaL,IAAoB;AAC7D,cAAMU,IAAWP,EAAc,QAAQ;AAAA,UACrC;AAAA,QAAA;AAEF,YAAIO,GAAU;AACZ,gBAAMC,IAAUH,EAAGH,GAAWL,CAAiB;AAC/C,UAAIW,MACFD,EAAS,YAAYF,EAAGE,EAAS,WAAWC,CAAO;AAAA,QAEvD;AAAA,MACF;AAAA,IACF,GAAG,CAACN,GAAWL,CAAiB,CAAC,GAG/B,gBAAAY;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAK,CAACC,MAAS;AACb,UAAAX,EAAc,UAAUW,GACpB,OAAOZ,KAAQ,aACjBA,EAAIY,CAAI,IACCZ,MACTA,EAAI,UAAUY;AAAA,QAElB;AAAA,QACA,WAAWN,EAAGX,CAAS;AAAA,QACtB,GAAGI;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACAH,EAAW,cAAc;AAEzB,MAAMoB,IAAYnB,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,GAAGI,EAAA,GAASC,MACjB,gBAAAU,EAACI,KAAW,KAAAd,GAAU,WAAWM,EAAGX,CAAS,GAAI,GAAGI,GAAO;AAEtE;AACAc,EAAU,cAAc;"}