@szum-tech/design-system 2.5.1 → 2.7.0

package/dist/chunk-DFD2WUOU.js

@@ -0,0 +1,27 @@
+import * as React3 from 'react';
+
+// src/hooks/use-validation-log.tsx
+function useValidationLog({ check, scope, message }) {
+  React3.useEffect(() => {
+    if (!check) {
+      console.error(
+        `%c[Szum Tech-Design System]%c
+ ${scope}%c
+ ${message}`,
+        "color: #ef4444; font-weight: bold;",
+        "color: #3b82f6; font-weight: bold;",
+        "color: #f59e0b;"
+      );
+    }
+  }, [check, scope, message]);
+}
+function useLazyRef(fn) {
+  const ref = React3.useRef(null);
+  if (ref.current === null) {
+    ref.current = fn();
+  }
+  return ref;
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React3.useEffect : React3.useLayoutEffect;
+
+export { useIsomorphicLayoutEffect, useLazyRef, useValidationLog };

package/dist/{chunk-Q2IKZZ3U.cjs → chunk-EIXSMEDP.cjs}

@@ -8,6 +8,7 @@ function Separator({ className, orientation = "horizontal", decorative = false,
   return /* @__PURE__ */ jsxRuntime.jsx(
     radixUi.Separator.Root,
     {
+      "data-slot": "separator",
       decorative,
       orientation,
       "aria-orientation": orientation,

package/dist/chunk-EW6TE3N5.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/contexts/directon.tsx
+var Direction = {
+  LTR: "ltr",
+  RTL: "rtl"
+};
+var DirectionContext = React__namespace.createContext(void 0);
+function useDirection(dirProp) {
+  const contextDir = React__namespace.useContext(DirectionContext);
+  return dirProp ?? contextDir ?? Direction.LTR;
+}
+
+exports.Direction = Direction;
+exports.DirectionContext = DirectionContext;
+exports.useDirection = useDirection;

package/dist/{chunk-3DSBDIFJ.cjs → chunk-FPFRA5Q6.cjs}

@@ -1,11 +1,11 @@
 'use strict';
 
 var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
 
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("bg-app-foreground h-full rounded border border-gray-800", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH2BWO3SI_cjs.cn("bg-app-foreground h-full rounded border border-gray-800", className), ...props });
 }
 function CardHeader({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH2BWO3SI_cjs.cn("flex flex-col p-6", className), ...props });

package/dist/{chunk-BJ553XYM.cjs → chunk-G6VXQ7DJ.cjs}

@@ -8,16 +8,16 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var selectCva = classVarianceAuthority.cva(
   [
-    "bg-app-foreground font-poppins text-body-2 inline-flex h-10 w-full items-center justify-between gap-2 border pl-3 pr-1.5 py-2 outline-0 transition-colors duration-300 ease-in-out [&>span]:line-clamp-1",
+    "bg-app-foreground font-poppins text-body-2 inline-flex h-10 w-full items-center justify-between gap-2 border py-2 pl-3 pr-1.5 outline-0 transition-colors duration-300 ease-in-out [&>span]:line-clamp-1",
     "data-[placeholder]:select-none data-[placeholder]:text-gray-400",
     "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
-    "disabled:border-gray-800 disabled:text-gray-300 disabled:[&>svg]:text-gray-300 disabled:placeholder:text-gray-600 disabled:cursor-not-allowed"
+    "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600 disabled:[&>svg]:text-gray-300"
   ],
   {
     variants: {
       invalid: {
         true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["border-gray-600 hover:border-primary-600 text-gray-100"]
+        false: ["hover:border-primary-600 border-gray-600 text-gray-100"]
       }
     },
     defaultVariants: {

package/dist/{chunk-RXYZURP4.js → chunk-GEACYHTU.js}

@@ -6,6 +6,7 @@ function Separator({ className, orientation = "horizontal", decorative = false,
   return /* @__PURE__ */ jsx(
     Separator$1.Root,
     {
+      "data-slot": "separator",
       decorative,
       orientation,
       "aria-orientation": orientation,

package/dist/chunk-H5O5L6XT.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+// src/contexts/directon.tsx
+var Direction = {
+  LTR: "ltr",
+  RTL: "rtl"
+};
+var DirectionContext = React.createContext(void 0);
+function useDirection(dirProp) {
+  const contextDir = React.useContext(DirectionContext);
+  return dirProp ?? contextDir ?? Direction.LTR;
+}
+
+export { Direction, DirectionContext, useDirection };

package/dist/chunk-I5P2HH5Z.js

@@ -0,0 +1,136 @@
+import { Separator } from './chunk-GEACYHTU.js';
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var itemCva = cva(
+  [
+    "group/item flex items-center border border-transparent text-sm rounded-md transition-colors duration-100 flex-wrap outline-none",
+    "[a]:hover:bg-gray-900 [a]:transition-colors",
+    "focus-visible:ring-primary-500/50 focus-visible:ring-[3px]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outlined: "border-gray-800"
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({ className, variant = "default", size = "default", asChild = false, ...props }) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemCva({ variant, size }), className),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva(
+  [
+    "flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none",
+    "group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-gray-800 size-8 rounded border border-gray-600 [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({ className, variant = "default", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { role: "list", "data-slot": "item-group", className: cn("group/item-group flex flex-col", className), ...props });
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "item-actions", className: cn("flex items-center gap-2", className), ...props });
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "line-clamp-2 text-sm leading-normal font-normal text-balance text-gray-400",
+        "[&>a:hover]:text-primary-500 [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn("flex basis-full items-center justify-between gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn("flex basis-full items-center justify-between gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium text-gray-100", className),
+      ...props
+    }
+  );
+}
+function ItemSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn("my-0", className), ...props });
+}
+
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/{chunk-3PV6NLP5.js → chunk-IAI7BIAG.js}

@@ -4,18 +4,18 @@ import { jsx } from 'react/jsx-runtime';
 // src/components/textarea/textarea.styles.tsx
 var textareaCva = cva(
   [
-    "bg-app-foreground font-poppins h-28 min-h-10 w-full appearance-none border py-2 px-3 outline-0 transition-colors duration-300 ease-in-out",
+    "bg-app-foreground font-poppins h-28 min-h-10 w-full appearance-none border px-3 py-2 outline-0 transition-colors duration-300 ease-in-out",
     "placeholder:select-none placeholder:text-gray-400",
     "invalid:border-error-500",
     "focus:border-primary-500",
     "active:border-primary-500",
-    "disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600 disabled:cursor-not-allowed"
+    "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600"
   ],
   {
     variants: {
       invalid: {
         true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["border-gray-600 hover:border-primary-600 text-gray-100"]
+        false: ["hover:border-primary-600 border-gray-600 text-gray-100"]
       }
     },
     defaultVariants: {

package/dist/{chunk-XKXP3W3H.cjs → chunk-K4TRAPRN.cjs}

@@ -62,7 +62,7 @@ var buttonCva = classVarianceAuthority.cva(
         color: "neutral",
         class: [
           "text-gray-100",
-          "hover:border-gray-500 hover:bg-gray-500 hover:text-app-foreground",
+          "hover:text-app-foreground hover:border-gray-500 hover:bg-gray-500",
           "active:border-gray-600 active:bg-gray-600"
         ]
       },
@@ -106,7 +106,7 @@ var buttonCva = classVarianceAuthority.cva(
       {
         variant: "outlined",
         color: "neutral",
-        class: ["border-gray-500 text-gray-100", "hover:bg-gray-500 hover:text-app-foreground", "active:bg-gray-600"]
+        class: ["border-gray-500 text-gray-100", "hover:text-app-foreground hover:bg-gray-500", "active:bg-gray-600"]
       },
       {
         variant: "outlined",
@@ -150,7 +150,7 @@ var buttonCva = classVarianceAuthority.cva(
         color: "neutral",
         class: [
           "border-gray-500 bg-gray-500 text-gray-100",
-          "hover:border-gray-400 hover:bg-gray-400 hover:text-app-foreground",
+          "hover:text-app-foreground hover:border-gray-400 hover:bg-gray-400",
           "active:border-gray-600 active:bg-gray-600"
         ]
       },

package/dist/{chunk-4C7M4HBP.js → chunk-MI3CQBHC.js}

@@ -6,16 +6,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var selectCva = cva(
   [
-    "bg-app-foreground font-poppins text-body-2 inline-flex h-10 w-full items-center justify-between gap-2 border pl-3 pr-1.5 py-2 outline-0 transition-colors duration-300 ease-in-out [&>span]:line-clamp-1",
+    "bg-app-foreground font-poppins text-body-2 inline-flex h-10 w-full items-center justify-between gap-2 border py-2 pl-3 pr-1.5 outline-0 transition-colors duration-300 ease-in-out [&>span]:line-clamp-1",
     "data-[placeholder]:select-none data-[placeholder]:text-gray-400",
     "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
-    "disabled:border-gray-800 disabled:text-gray-300 disabled:[&>svg]:text-gray-300 disabled:placeholder:text-gray-600 disabled:cursor-not-allowed"
+    "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600 disabled:[&>svg]:text-gray-300"
   ],
   {
     variants: {
       invalid: {
         true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["border-gray-600 hover:border-primary-600 text-gray-100"]
+        false: ["hover:border-primary-600 border-gray-600 text-gray-100"]
       }
     },
     defaultVariants: {

package/dist/{chunk-KXTNZ4UO.cjs → chunk-NHFHKMX2.cjs}

@@ -7,9 +7,9 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var badgeCva = classVarianceAuthority.cva(
   [
-    "text-xs inline-flex w-fit shrink-0 items-center justify-center gap-x-1 overflow-hidden whitespace-nowrap rounded border px-2 py-0.5 transition-[color,box-shadow]",
-    "[&>svg]:size-3 [&>svg]:pointer-events-none",
-    "focus-visible:border-ring focus-visible:ring-primary-500/50 focus-visible:ring-[3px]",
+    "inline-flex w-fit shrink-0 items-center justify-center gap-x-1 overflow-hidden whitespace-nowrap rounded border px-2 py-0.5 text-xs transition-[color,box-shadow]",
+    "[&>svg]:pointer-events-none [&>svg]:size-3",
+    "focus-visible:border-ring focus-visible:ring-primary-500/50 focus-visible:ring",
     "aria-invalid:ring-error-500/20 aria-invalid:border-ring-error-500"
   ],
   {

package/dist/{chunk-6L3QPLRR.cjs → chunk-OIWEXHFE.cjs}

@@ -6,18 +6,18 @@ var jsxRuntime = require('react/jsx-runtime');
 // src/components/textarea/textarea.styles.tsx
 var textareaCva = classVarianceAuthority.cva(
   [
-    "bg-app-foreground font-poppins h-28 min-h-10 w-full appearance-none border py-2 px-3 outline-0 transition-colors duration-300 ease-in-out",
+    "bg-app-foreground font-poppins h-28 min-h-10 w-full appearance-none border px-3 py-2 outline-0 transition-colors duration-300 ease-in-out",
     "placeholder:select-none placeholder:text-gray-400",
     "invalid:border-error-500",
     "focus:border-primary-500",
     "active:border-primary-500",
-    "disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600 disabled:cursor-not-allowed"
+    "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600"
   ],
   {
     variants: {
       invalid: {
         true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["border-gray-600 hover:border-primary-600 text-gray-100"]
+        false: ["hover:border-primary-600 border-gray-600 text-gray-100"]
       }
     },
     defaultVariants: {

package/dist/chunk-P5IUC7HJ.js

@@ -0,0 +1,9 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { LoaderCircle } from 'lucide-react';
+import { jsx } from 'react/jsx-runtime';
+
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx(LoaderCircle, { role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props });
+}
+
+export { Spinner };

package/dist/chunk-S5BN23O7.cjs

@@ -0,0 +1,147 @@
+'use strict';
+
+var chunkEIXSMEDP_cjs = require('./chunk-EIXSMEDP.cjs');
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var itemCva = classVarianceAuthority.cva(
+  [
+    "group/item flex items-center border border-transparent text-sm rounded-md transition-colors duration-100 flex-wrap outline-none",
+    "[a]:hover:bg-gray-900 [a]:transition-colors",
+    "focus-visible:ring-primary-500/50 focus-visible:ring-[3px]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outlined: "border-gray-800"
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({ className, variant = "default", size = "default", asChild = false, ...props }) {
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: chunkH2BWO3SI_cjs.cn(itemCva({ variant, size }), className),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = classVarianceAuthority.cva(
+  [
+    "flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none",
+    "group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-gray-800 size-8 rounded border border-gray-600 [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({ className, variant = "default", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: chunkH2BWO3SI_cjs.cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "list", "data-slot": "item-group", className: chunkH2BWO3SI_cjs.cn("group/item-group flex flex-col", className), ...props });
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "item-actions", className: chunkH2BWO3SI_cjs.cn("flex items-center gap-2", className), ...props });
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: chunkH2BWO3SI_cjs.cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: chunkH2BWO3SI_cjs.cn(
+        "line-clamp-2 text-sm leading-normal font-normal text-balance text-gray-400",
+        "[&>a:hover]:text-primary-500 [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: chunkH2BWO3SI_cjs.cn("flex basis-full items-center justify-between gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: chunkH2BWO3SI_cjs.cn("flex basis-full items-center justify-between gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: chunkH2BWO3SI_cjs.cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium text-gray-100", className),
+      ...props
+    }
+  );
+}
+function ItemSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkEIXSMEDP_cjs.Separator, { "data-slot": "item-separator", orientation: "horizontal", className: chunkH2BWO3SI_cjs.cn("my-0", className), ...props });
+}
+
+exports.Item = Item;
+exports.ItemActions = ItemActions;
+exports.ItemContent = ItemContent;
+exports.ItemDescription = ItemDescription;
+exports.ItemFooter = ItemFooter;
+exports.ItemGroup = ItemGroup;
+exports.ItemHeader = ItemHeader;
+exports.ItemMedia = ItemMedia;
+exports.ItemSeparator = ItemSeparator;
+exports.ItemTitle = ItemTitle;