@trsys-tech/matrix-library 1.1.1-canary.0 → 1.1.3

package/dist/rating.es.js

@@ -1,9 +1,9 @@
-import { jsxs as p, jsx as m } from "react/jsx-runtime";
-import u from "react";
+import { jsxs as g, jsx as m } from "react/jsx-runtime";
+import f from "react";
 import { cn as a } from "./utils.es.js";
-import { tv as $ } from "tailwind-variants";
-import { Star as C } from "@trsys-tech/matrix-icons";
-const E = $({
+import { tv as R } from "tailwind-variants";
+import { Star as z } from "@trsys-tech/matrix-icons";
+const E = R({
   base: "mtx-flex mtx-items-center mtx-gap-0",
   variants: {
     variant: {
@@ -25,77 +25,74 @@ const E = $({
     variant: "default",
     size: "md"
   }
-}), P = u.forwardRef((s, t) => {
+}), D = f.forwardRef((o, t) => {
   const {
-    precision: l = "full",
+    precision: s = "full",
     variant: r,
     size: n,
     readOnly: x = !1,
-    onValueChange: o,
-    value: e = 0,
+    onValueChange: l,
+    value: e,
+    defaultValue: p = 0,
     className: _,
-    children: k,
-    max: i = 5,
-    Icon: y = C,
-    disabled: b,
-    ...d
-  } = s, [v, h] = u.useState(e), [w, N] = u.useState(null), f = w ?? v;
-  u.useEffect(() => {
-    h(e);
-  }, [e]);
-  const M = (c) => {
-    x || (h(c), o?.(c));
-  }, S = (c) => {
-    x || N(c);
+    children: d,
+    max: u = 5,
+    Icon: k = z,
+    disabled: y,
+    ...b
+  } = o, w = e !== void 0, [N, V] = f.useState(p), v = e !== void 0 ? e : N, [M, S] = f.useState(null), i = M ?? v, C = (c) => {
+    x || (w || V(c), l?.(c));
+  }, $ = (c) => {
+    x || S(c);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ g(
     "div",
     {
       className: a(E({ variant: r, size: n, className: _ })),
       role: "slider",
       "data-value": v,
-      "aria-valuenow": f,
+      "aria-valuenow": i,
       "aria-valuemin": 0,
-      "aria-valuemax": i,
-      "aria-valuetext": `${f} out of ${i}`,
-      ...d,
+      "aria-valuemax": u,
+      "aria-valuetext": `${i} out of ${u}`,
+      ...b,
       ref: t,
       children: [
-        Array.from({ length: i }).map((c, g) => /* @__PURE__ */ m(
-          R,
+        Array.from({ length: u }).map((c, h) => /* @__PURE__ */ m(
+          L,
           {
-            Icon: y,
-            index: g,
-            displayedValue: f,
-            onHover: S,
-            onValueChange: M,
-            precision: l,
+            Icon: k,
+            index: h,
+            displayedValue: i,
+            onHover: $,
+            onValueChange: C,
+            precision: s,
             readOnly: x,
-            disabled: b
+            disabled: y
           },
-          g
+          h
         )),
-        k
+        d
       ]
     }
   );
-}), R = ({ Icon: s, index: t, displayedValue: l, onHover: r, onValueChange: n, precision: x, readOnly: o, disabled: e }) => x === "half" ? /* @__PURE__ */ p(
+}), L = ({ Icon: o, index: t, displayedValue: s, onHover: r, onValueChange: n, precision: x, readOnly: l, disabled: e }) => x === "half" ? /* @__PURE__ */ g(
   "div",
   {
     className: a(
       "mtx-relative hover:mtx-scale-125 mtx-transition-transform mtx-px-0.5",
-      o && "hover:mtx-scale-100",
+      l && "hover:mtx-scale-100",
       e && "hover:mtx-scale-100 mtx-opacity-70"
     ),
     children: [
-      /* @__PURE__ */ m(s, { className: a("mtx-stroke-gray-500") }),
+      /* @__PURE__ */ m(o, { className: a("mtx-stroke-gray-500") }),
       /* @__PURE__ */ m(
         "button",
         {
           type: "button",
           className: a(
             "mtx-absolute mtx-top-0 mtx-w-[calc(50%+2px)] mtx-left-0 mtx-overflow-hidden mtx-h-full",
-            o && "mtx-cursor-default",
+            l && "mtx-cursor-default",
             e && "mtx-cursor-default hover:mtx-scale-100 mtx-opacity-70"
           ),
           onClick: () => n(t + 0.5),
@@ -104,11 +101,11 @@ const E = $({
           disabled: e,
           "aria-label": `Set rating to ${t + 0.5}`,
           children: /* @__PURE__ */ m(
-            s,
+            o,
             {
               className: a(
                 "mtx-stroke-none mtx-absolute mtx-left-0.5 mtx-top-0 mtx-[mask-image:linear-gradient(to_right,_black_50%,_transparent_50%)]",
-                l >= t + 0.5 && "mtx-stroke-current mtx-fill-current"
+                s >= t + 0.5 && "mtx-stroke-current mtx-fill-current"
               )
             }
           )
@@ -120,7 +117,7 @@ const E = $({
           type: "button",
           className: a(
             "mtx-absolute mtx-top-0 mtx-w-[calc(50%+2px)] mtx-right-0 mtx-overflow-hidden mtx-h-full",
-            o && "mtx-cursor-default",
+            l && "mtx-cursor-default",
             e && "mtx-cursor-default hover:mtx-scale-100 mtx-opacity-70"
           ),
           onClick: () => n(t + 1),
@@ -129,11 +126,11 @@ const E = $({
           disabled: e,
           "aria-label": `Set rating to ${t + 1}`,
           children: /* @__PURE__ */ m(
-            s,
+            o,
             {
               className: a(
                 "mtx-stroke-none mtx-absolute mtx-right-0.5 mtx-top-0 mtx-[mask-image:linear-gradient(to_left,_black_50%,_transparent_50%)]",
-                l >= t + 1 && "mtx-stroke-current mtx-fill-current"
+                s >= t + 1 && "mtx-stroke-current mtx-fill-current"
               )
             }
           )
@@ -150,15 +147,15 @@ const E = $({
     onMouseLeave: () => r(null),
     className: a(
       "hover:mtx-scale-125 mtx-px-0.5 mtx-transition-transform",
-      o && "mtx-cursor-default hover:mtx-scale-100",
+      l && "mtx-cursor-default hover:mtx-scale-100",
       e && "mtx-cursor-default hover:mtx-scale-100 mtx-opacity-70"
     ),
     disabled: e,
     "aria-label": `Set rating to ${t + 1}`,
-    children: /* @__PURE__ */ m(s, { className: a("mtx-stroke-gray-500", l >= t + 1 && "mtx-stroke-current mtx-fill-current") })
+    children: /* @__PURE__ */ m(o, { className: a("mtx-stroke-gray-500", s >= t + 1 && "mtx-stroke-current mtx-fill-current") })
   }
 );
 export {
-  P as Rating
+  D as Rating
 };
 //# sourceMappingURL=rating.es.js.map

package/dist/rating.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.es.js","sources":["../src/components/rating/Rating.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\nimport { Star } from \"@trsys-tech/matrix-icons\";\r\n\r\nconst ratingVariants = tv({\r\n  base: \"mtx-flex mtx-items-center mtx-gap-0\",\r\n  variants: {\r\n    variant: {\r\n      default: \"mtx-text-yellow-400\",\r\n      primary: \"mtx-text-primary\",\r\n      secondary: \"mtx-text-secondary\",\r\n      success: \"mtx-text-success\",\r\n      danger: \"mtx-text-danger\",\r\n      warning: \"mtx-text-warning\",\r\n      info: \"mtx-text-info\",\r\n    },\r\n    size: {\r\n      sm: \"[&_*_svg]:mtx-h-5 [&_*_svg]:mtx-w-5\",\r\n      md: \"[&_*_svg]:mtx-h-6 [&_*_svg]:mtx-w-6\",\r\n      lg: \"[&_*_svg]:mtx-h-8 [&_*_svg]:mtx-w-8\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface RatingProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  precision?: \"half\" | \"full\";\r\n  variant?: VariantProps<typeof ratingVariants>[\"variant\"];\r\n  size?: VariantProps<typeof ratingVariants>[\"size\"];\r\n  readOnly?: boolean;\r\n  value?: number;\r\n  onValueChange?: (value: number) => void;\r\n  children?: React.ReactNode;\r\n  disabled?: boolean;\r\n  max?: number;\r\n  Icon?: React.JSXElementConstructor<React.SVGProps<SVGSVGElement>>;\r\n}\r\n\r\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>((props, ref) => {\r\n  const {\r\n    precision = \"full\",\r\n    variant,\r\n    size,\r\n    readOnly = false,\r\n    onValueChange,\r\n    value: _value = 0,\r\n    className,\r\n    children,\r\n    max = 5,\r\n    Icon = Star,\r\n    disabled,\r\n    ...restProps\r\n  } = props;\r\n\r\n  const [value, setValue] = React.useState(_value);\r\n  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);\r\n\r\n  const displayedValue = hoveredValue ?? value;\r\n\r\n  React.useEffect(() => {\r\n    setValue(_value);\r\n  }, [_value]);\r\n\r\n  const handleValueChange = (newValue: number) => {\r\n    if (readOnly) return;\r\n    setValue(newValue);\r\n    onValueChange?.(newValue);\r\n  };\r\n\r\n  const handleHover = (newValue: number | null) => {\r\n    if (readOnly) return;\r\n    setHoveredValue(newValue);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={cn(ratingVariants({ variant, size, className }))}\r\n      role=\"slider\"\r\n      data-value={value}\r\n      aria-valuenow={displayedValue}\r\n      aria-valuemin={0}\r\n      aria-valuemax={max}\r\n      aria-valuetext={`${displayedValue} out of ${max}`}\r\n      {...restProps}\r\n      ref={ref}\r\n    >\r\n      {Array.from({ length: max }).map((_, index) => (\r\n        <RatingItem\r\n          Icon={Icon}\r\n          index={index}\r\n          key={index}\r\n          displayedValue={displayedValue}\r\n          onHover={handleHover}\r\n          onValueChange={handleValueChange}\r\n          precision={precision}\r\n          readOnly={readOnly}\r\n          disabled={disabled}\r\n        />\r\n      ))}\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\ntype RatingItemProps = {\r\n  Icon: React.JSXElementConstructor<React.SVGProps<SVGSVGElement>>;\r\n  index: number;\r\n  onHover: (value: number | null) => void;\r\n  onValueChange: (value: number) => void;\r\n  displayedValue: number;\r\n  precision: \"half\" | \"full\";\r\n  readOnly: boolean;\r\n  disabled?: boolean;\r\n};\r\n\r\nconst RatingItem = ({ Icon, index, displayedValue, onHover, onValueChange, precision, readOnly, disabled }: RatingItemProps) => {\r\n  if (precision === \"half\") {\r\n    return (\r\n      <div\r\n        className={cn(\r\n          \"mtx-relative hover:mtx-scale-125 mtx-transition-transform mtx-px-0.5\",\r\n          readOnly && \"hover:mtx-scale-100\",\r\n          disabled && \"hover:mtx-scale-100 mtx-opacity-70\",\r\n        )}\r\n      >\r\n        <Icon className={cn(\"mtx-stroke-gray-500\")} />\r\n        <button\r\n          type=\"button\"\r\n          className={cn(\r\n            \"mtx-absolute mtx-top-0 mtx-w-[calc(50%+2px)] mtx-left-0 mtx-overflow-hidden mtx-h-full\",\r\n            readOnly && \"mtx-cursor-default\",\r\n            disabled && \"mtx-cursor-default hover:mtx-scale-100 mtx-opacity-70\",\r\n          )}\r\n          onClick={() => onValueChange(index + 0.5)}\r\n          onMouseEnter={() => onHover(index + 0.5)}\r\n          onMouseLeave={() => onHover(null)}\r\n          disabled={disabled}\r\n          aria-label={`Set rating to ${index + 0.5}`}\r\n        >\r\n          <Icon\r\n            className={cn(\r\n              \"mtx-stroke-none mtx-absolute mtx-left-0.5 mtx-top-0 mtx-[mask-image:linear-gradient(to_right,_black_50%,_transparent_50%)]\",\r\n              displayedValue >= index + 0.5 && \"mtx-stroke-current mtx-fill-current\",\r\n            )}\r\n          />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          className={cn(\r\n            \"mtx-absolute mtx-top-0 mtx-w-[calc(50%+2px)] mtx-right-0 mtx-overflow-hidden mtx-h-full\",\r\n            readOnly && \"mtx-cursor-default\",\r\n            disabled && \"mtx-cursor-default hover:mtx-scale-100 mtx-opacity-70\",\r\n          )}\r\n          onClick={() => onValueChange(index + 1)}\r\n          onMouseEnter={() => onHover(index + 1)}\r\n          onMouseLeave={() => onHover(null)}\r\n          disabled={disabled}\r\n          aria-label={`Set rating to ${index + 1}`}\r\n        >\r\n          <Icon\r\n            className={cn(\r\n              \"mtx-stroke-none mtx-absolute mtx-right-0.5 mtx-top-0 mtx-[mask-image:linear-gradient(to_left,_black_50%,_transparent_50%)]\",\r\n              displayedValue >= index + 1 && \"mtx-stroke-current mtx-fill-current\",\r\n            )}\r\n          />\r\n        </button>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={() => onValueChange(index + 1)}\r\n      onMouseEnter={() => onHover(index + 1)}\r\n      onMouseLeave={() => onHover(null)}\r\n      className={cn(\r\n        \"hover:mtx-scale-125 mtx-px-0.5 mtx-transition-transform\",\r\n        readOnly && \"mtx-cursor-default hover:mtx-scale-100\",\r\n        disabled && \"mtx-cursor-default hover:mtx-scale-100 mtx-opacity-70\",\r\n      )}\r\n      disabled={disabled}\r\n      aria-label={`Set rating to ${index + 1}`}\r\n    >\r\n      <Icon className={cn(\"mtx-stroke-gray-500\", displayedValue >= index + 1 && \"mtx-stroke-current mtx-fill-current\")} />\r\n    </button>\r\n  );\r\n};\r\n\r\nexport { Rating, type RatingProps };\r\n"],"names":["ratingVariants","tv","Rating","React","props","ref","precision","variant","size","readOnly","onValueChange","_value","className","children","max","Icon","Star","disabled","restProps","value","setValue","hoveredValue","setHoveredValue","displayedValue","handleValueChange","newValue","handleHover","jsxs","cn","_","index","jsx","RatingItem","onHover"],"mappings":"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"}
+{"version":3,"file":"rating.es.js","sources":["../src/components/rating/Rating.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\nimport { Star } from \"@trsys-tech/matrix-icons\";\r\n\r\nconst ratingVariants = tv({\r\n  base: \"mtx-flex mtx-items-center mtx-gap-0\",\r\n  variants: {\r\n    variant: {\r\n      default: \"mtx-text-yellow-400\",\r\n      primary: \"mtx-text-primary\",\r\n      secondary: \"mtx-text-secondary\",\r\n      success: \"mtx-text-success\",\r\n      danger: \"mtx-text-danger\",\r\n      warning: \"mtx-text-warning\",\r\n      info: \"mtx-text-info\",\r\n    },\r\n    size: {\r\n      sm: \"[&_*_svg]:mtx-h-5 [&_*_svg]:mtx-w-5\",\r\n      md: \"[&_*_svg]:mtx-h-6 [&_*_svg]:mtx-w-6\",\r\n      lg: \"[&_*_svg]:mtx-h-8 [&_*_svg]:mtx-w-8\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface RatingProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  precision?: \"half\" | \"full\";\r\n  variant?: VariantProps<typeof ratingVariants>[\"variant\"];\r\n  size?: VariantProps<typeof ratingVariants>[\"size\"];\r\n  readOnly?: boolean;\r\n  value?: number;\r\n  defaultValue?: number;\r\n  onValueChange?: (value: number) => void;\r\n  children?: React.ReactNode;\r\n  disabled?: boolean;\r\n  max?: number;\r\n  Icon?: React.JSXElementConstructor<React.SVGProps<SVGSVGElement>>;\r\n}\r\n\r\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>((props, ref) => {\r\n  const {\r\n    precision = \"full\",\r\n    variant,\r\n    size,\r\n    readOnly = false,\r\n    onValueChange,\r\n    value: controlledValue,\r\n    defaultValue = 0,\r\n    className,\r\n    children,\r\n    max = 5,\r\n    Icon = Star,\r\n    disabled,\r\n    ...restProps\r\n  } = props;\r\n\r\n  const isControlled = controlledValue !== undefined;\r\n  const [internalValue, setInternalValue] = React.useState(defaultValue);\r\n  const value = controlledValue !== undefined ? controlledValue : internalValue;\r\n  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);\r\n\r\n  const displayedValue = hoveredValue ?? value;\r\n\r\n  const handleValueChange = (newValue: number) => {\r\n    if (readOnly) return;\r\n    if (!isControlled) {\r\n      setInternalValue(newValue);\r\n    }\r\n    onValueChange?.(newValue);\r\n  };\r\n\r\n  const handleHover = (newValue: number | null) => {\r\n    if (readOnly) return;\r\n    setHoveredValue(newValue);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={cn(ratingVariants({ variant, size, className }))}\r\n      role=\"slider\"\r\n      data-value={value}\r\n      aria-valuenow={displayedValue}\r\n      aria-valuemin={0}\r\n      aria-valuemax={max}\r\n      aria-valuetext={`${displayedValue} out of ${max}`}\r\n      {...restProps}\r\n      ref={ref}\r\n    >\r\n      {Array.from({ length: max }).map((_, index) => (\r\n        <RatingItem\r\n          Icon={Icon}\r\n          index={index}\r\n          key={index}\r\n          displayedValue={displayedValue}\r\n          onHover={handleHover}\r\n          onValueChange={handleValueChange}\r\n          precision={precision}\r\n          readOnly={readOnly}\r\n          disabled={disabled}\r\n        />\r\n      ))}\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\ntype RatingItemProps = {\r\n  Icon: React.JSXElementConstructor<React.SVGProps<SVGSVGElement>>;\r\n  index: number;\r\n  onHover: (value: number | null) => void;\r\n  onValueChange: (value: number) => void;\r\n  displayedValue: number;\r\n  precision: \"half\" | \"full\";\r\n  readOnly: boolean;\r\n  disabled?: boolean;\r\n};\r\n\r\nconst RatingItem = ({ Icon, index, displayedValue, onHover, onValueChange, precision, readOnly, disabled }: RatingItemProps) => {\r\n  if (precision === \"half\") {\r\n    return (\r\n      <div\r\n        className={cn(\r\n          \"mtx-relative hover:mtx-scale-125 mtx-transition-transform mtx-px-0.5\",\r\n          readOnly && \"hover:mtx-scale-100\",\r\n          disabled && \"hover:mtx-scale-100 mtx-opacity-70\",\r\n        )}\r\n      >\r\n        <Icon className={cn(\"mtx-stroke-gray-500\")} />\r\n        <button\r\n          type=\"button\"\r\n          className={cn(\r\n            \"mtx-absolute mtx-top-0 mtx-w-[calc(50%+2px)] mtx-left-0 mtx-overflow-hidden mtx-h-full\",\r\n            readOnly && \"mtx-cursor-default\",\r\n            disabled && \"mtx-cursor-default hover:mtx-scale-100 mtx-opacity-70\",\r\n          )}\r\n          onClick={() => onValueChange(index + 0.5)}\r\n          onMouseEnter={() => onHover(index + 0.5)}\r\n          onMouseLeave={() => onHover(null)}\r\n          disabled={disabled}\r\n          aria-label={`Set rating to ${index + 0.5}`}\r\n        >\r\n          <Icon\r\n            className={cn(\r\n              \"mtx-stroke-none mtx-absolute mtx-left-0.5 mtx-top-0 mtx-[mask-image:linear-gradient(to_right,_black_50%,_transparent_50%)]\",\r\n              displayedValue >= index + 0.5 && \"mtx-stroke-current mtx-fill-current\",\r\n            )}\r\n          />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          className={cn(\r\n            \"mtx-absolute mtx-top-0 mtx-w-[calc(50%+2px)] mtx-right-0 mtx-overflow-hidden mtx-h-full\",\r\n            readOnly && \"mtx-cursor-default\",\r\n            disabled && \"mtx-cursor-default hover:mtx-scale-100 mtx-opacity-70\",\r\n          )}\r\n          onClick={() => onValueChange(index + 1)}\r\n          onMouseEnter={() => onHover(index + 1)}\r\n          onMouseLeave={() => onHover(null)}\r\n          disabled={disabled}\r\n          aria-label={`Set rating to ${index + 1}`}\r\n        >\r\n          <Icon\r\n            className={cn(\r\n              \"mtx-stroke-none mtx-absolute mtx-right-0.5 mtx-top-0 mtx-[mask-image:linear-gradient(to_left,_black_50%,_transparent_50%)]\",\r\n              displayedValue >= index + 1 && \"mtx-stroke-current mtx-fill-current\",\r\n            )}\r\n          />\r\n        </button>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={() => onValueChange(index + 1)}\r\n      onMouseEnter={() => onHover(index + 1)}\r\n      onMouseLeave={() => onHover(null)}\r\n      className={cn(\r\n        \"hover:mtx-scale-125 mtx-px-0.5 mtx-transition-transform\",\r\n        readOnly && \"mtx-cursor-default hover:mtx-scale-100\",\r\n        disabled && \"mtx-cursor-default hover:mtx-scale-100 mtx-opacity-70\",\r\n      )}\r\n      disabled={disabled}\r\n      aria-label={`Set rating to ${index + 1}`}\r\n    >\r\n      <Icon className={cn(\"mtx-stroke-gray-500\", displayedValue >= index + 1 && \"mtx-stroke-current mtx-fill-current\")} />\r\n    </button>\r\n  );\r\n};\r\n\r\nexport { Rating, type RatingProps };\r\n"],"names":["ratingVariants","tv","Rating","React","props","ref","precision","variant","size","readOnly","onValueChange","controlledValue","defaultValue","className","children","max","Icon","Star","disabled","restProps","isControlled","internalValue","setInternalValue","value","hoveredValue","setHoveredValue","displayedValue","handleValueChange","newValue","handleHover","jsxs","cn","_","index","jsx","RatingItem","onHover"],"mappings":"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"}

package/dist/sidebar.es.js

@@ -9,50 +9,50 @@ import { Separator as E } from "./separator.es.js";
 import { useIsMobile as B } from "./use-mobile.es.js";
 import { Tooltip as T, TooltipTrigger as A, TooltipContent as D, TooltipProvider as O } from "./tooltip.es.js";
 import { Sheet as G, SheetContent as H, SheetHeader as j, SheetTitle as K, SheetDescription as L } from "./sheet.es.js";
-const V = "sidebar:state", $ = 3600 * 24 * 7, y = "16rem", _ = "18rem", N = "4rem", P = "b", M = i.createContext(null);
+const V = "sidebar:state", P = 3600 * 24 * 7, y = "16rem", _ = "18rem", N = "4rem", W = "b", k = i.createContext(null);
 function R() {
-  const t = i.useContext(M);
+  const t = i.useContext(k);
   if (!t)
     throw new Error("useSidebar must be used within a SidebarProvider.");
   return t;
 }
-const W = i.forwardRef(({ defaultOpen: t = !0, open: e, onOpenChange: a, className: m, style: o, children: s, ...n }, x) => {
-  const p = B(), [f, g] = i.useState(t), l = e ?? f, b = i.useCallback(
+const $ = i.forwardRef(({ defaultOpen: t = !0, open: e, onOpenChange: a, className: m, style: o, children: s, ...n }, p) => {
+  const x = B(), [f, g] = i.useState(t), l = e ?? f, b = i.useCallback(
     (c) => {
       const u = typeof c == "function" ? c(l) : c;
-      a ? a(u) : g(u), document.cookie = `${V}=${u}; path=/; max-age=${$}`;
+      a ? a(u) : g(u), document.cookie = `${V}=${u}; path=/; max-age=${P}`;
     },
     [a, l]
   ), h = i.useCallback(() => b((c) => !c), [b]);
   i.useEffect(() => {
     const c = (u) => {
-      u.key === P && (u.metaKey || u.ctrlKey) && (u.preventDefault(), h());
+      u.key === W && (u.metaKey || u.ctrlKey) && (u.preventDefault(), h());
     };
     return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
   }, [h]);
-  const S = l ? "expanded" : "collapsed", k = i.useMemo(
+  const S = l ? "expanded" : "collapsed", M = i.useMemo(
     () => ({
       state: S,
       open: l,
       setOpen: b,
-      isMobile: p,
+      isMobile: x,
       toggleSidebar: h
     }),
-    [S, l, b, p, h]
+    [S, l, b, x, h]
   );
-  return /* @__PURE__ */ r(M.Provider, { value: k, children: /* @__PURE__ */ r(O, { delayDuration: 0, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(k.Provider, { value: M, children: /* @__PURE__ */ r(O, { delayDuration: 0, children: /* @__PURE__ */ r(
     "div",
     {
       style: { ...o },
       className: d("mtx-group/sidebar-wrapper mtx-flex mtx-h-full mtx-w-full has-[[data-variant=inset]]:mtx-bg-gray-50", m),
-      ref: x,
+      ref: p,
       ...n,
       children: s
     }
   ) }) });
 });
-W.displayName = "SidebarProvider";
-const q = i.forwardRef(({ side: t = "left", variant: e = "sidebar", collapsible: a = "offcanvas", className: m, children: o, width: s, widthIcon: n, widthMobile: x, style: p, ...f }, g) => {
+$.displayName = "SidebarProvider";
+const q = i.forwardRef(({ side: t = "left", variant: e = "sidebar", collapsible: a = "offcanvas", className: m, children: o, width: s, widthIcon: n, widthMobile: p, style: x, ...f }, g) => {
   const { isMobile: l, state: b, open: h, setOpen: S } = R();
   return a === "none" ? /* @__PURE__ */ r(
     "div",
@@ -66,7 +66,7 @@ const q = i.forwardRef(({ side: t = "left", variant: e = "sidebar", collapsible:
           "--sidebar-right-width": s ?? y,
           "--sidebar-right-width-icon": n ?? N
         },
-        ...p
+        ...x
       },
       className: d(
         "mtx-flex mtx-h-full data-[side=left]:mtx-w-[--sidebar-left-width] data-[side=right]:mtx-w-[--sidebar-right-width] mtx-flex-col mtx-bg-gray-50",
@@ -76,7 +76,7 @@ const q = i.forwardRef(({ side: t = "left", variant: e = "sidebar", collapsible:
       ...f,
       children: o
     }
-  ) : l ? /* @__PURE__ */ r(G, { open: h, onOpenChange: S, ...f, children: /* @__PURE__ */ v(
+  ) : l || e === "sheet" ? /* @__PURE__ */ r(G, { open: h, onOpenChange: S, ...f, children: /* @__PURE__ */ v(
     H,
     {
       "data-sidebar": "sidebar",
@@ -85,9 +85,9 @@ const q = i.forwardRef(({ side: t = "left", variant: e = "sidebar", collapsible:
       className: "data-[side=left]:mtx-w-[--sidebar-left-width] data-[side=right]:mtx-w-[--sidebar-right-width] mtx-bg-gray-50 mtx-p-0 [&>button]:mtx-hidden",
       style: {
         ...t === "left" ? {
-          "--sidebar-left-width": x ?? _
+          "--sidebar-left-width": p ?? _
         } : {
-          "--sidebar-right-width": x ?? _
+          "--sidebar-right-width": p ?? _
         }
       },
       side: t,
@@ -116,7 +116,7 @@ const q = i.forwardRef(({ side: t = "left", variant: e = "sidebar", collapsible:
           "--sidebar-right-width": s ?? y,
           "--sidebar-right-width-icon": n ?? N
         },
-        ...p
+        ...x
       },
       children: [
         /* @__PURE__ */ r(
@@ -158,11 +158,12 @@ const q = i.forwardRef(({ side: t = "left", variant: e = "sidebar", collapsible:
 q.displayName = "Sidebar";
 const F = i.forwardRef(
   ({ className: t, onClick: e, asChild: a, ...m }, o) => {
-    const { toggleSidebar: s } = R();
+    const { toggleSidebar: s, state: n } = R();
     return /* @__PURE__ */ r(
       a ? w : "button",
       {
         ref: o,
+        "data-state": n,
         "data-sidebar": "trigger",
         className: d("mtx-h-7 mtx-w-7", t),
         onClick: (x) => {
@@ -298,11 +299,11 @@ const mt = z({
     variant: "default",
     size: "default"
   }
-}), ot = i.forwardRef(({ asChild: t = !1, isActive: e = !1, variant: a = "default", size: m = "default", tooltip: o, className: s, ...n }, x) => {
-  const p = t ? w : "button", { isMobile: f, state: g } = R(), l = /* @__PURE__ */ r(
-    p,
+}), ot = i.forwardRef(({ asChild: t = !1, isActive: e = !1, variant: a = "default", size: m = "default", tooltip: o, className: s, ...n }, p) => {
+  const x = t ? w : "button", { isMobile: f, state: g } = R(), l = /* @__PURE__ */ r(
+    x,
     {
-      ref: x,
+      ref: p,
       "data-sidebar": "menu-button",
       "data-size": m,
       "data-active": e,
@@ -355,31 +356,28 @@ const nt = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r(
   }
 ));
 nt.displayName = "SidebarMenuBadge";
-const lt = i.forwardRef(({ className: t, showIcon: e = !1, ...a }, m) => {
-  const o = i.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
-  return /* @__PURE__ */ v(
-    "div",
-    {
-      ref: m,
-      "data-sidebar": "menu-skeleton",
-      className: d("mtx-rounded-md mtx-h-8 mtx-flex mtx-gap-2 mtx-px-2 mtx-items-center", t),
-      ...a,
-      children: [
-        e && /* @__PURE__ */ r(C, { className: "mtx-size-4 mtx-rounded-md", "data-sidebar": "menu-skeleton-icon" }),
-        /* @__PURE__ */ r(
-          C,
-          {
-            className: "mtx-h-4 mtx-flex-1 mtx-max-w-[--skeleton-width]",
-            "data-sidebar": "menu-skeleton-text",
-            style: {
-              "--skeleton-width": o
-            }
+const lt = i.forwardRef(({ className: t, showIcon: e = !1, ...a }, m) => /* @__PURE__ */ v(
+  "div",
+  {
+    ref: m,
+    "data-sidebar": "menu-skeleton",
+    className: d("mtx-rounded-md mtx-h-8 mtx-flex mtx-gap-2 mtx-px-2 mtx-items-center", t),
+    ...a,
+    children: [
+      e && /* @__PURE__ */ r(C, { className: "mtx-size-4 mtx-rounded-md", "data-sidebar": "menu-skeleton-icon" }),
+      /* @__PURE__ */ r(
+        C,
+        {
+          className: "mtx-h-4 mtx-flex-1 mtx-max-w-[--skeleton-width]",
+          "data-sidebar": "menu-skeleton-text",
+          style: {
+            "--skeleton-width": "70%"
           }
-        )
-      ]
-    }
-  );
-});
+        }
+      )
+    ]
+  }
+));
 lt.displayName = "SidebarMenuSkeleton";
 const xt = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ r(
   "ul",
@@ -431,7 +429,7 @@ export {
   xt as SidebarMenuSub,
   ut as SidebarMenuSubButton,
   ct as SidebarMenuSubItem,
-  W as SidebarProvider,
+  $ as SidebarProvider,
   U as SidebarRail,
   Q as SidebarSeparator,
   F as SidebarTrigger,