@szum-tech/design-system 3.1.2 → 3.3.0

package/dist/components/toaster/index.d.cts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToasterProps as ToasterProps$1 } from 'sonner';
+export { toast } from 'sonner';
+
+type ToasterProps = ToasterProps$1;
+declare const Toaster: ({ theme, ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+
+export { Toaster, type ToasterProps };

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

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToasterProps as ToasterProps$1 } from 'sonner';
+export { toast } from 'sonner';
+
+type ToasterProps = ToasterProps$1;
+declare const Toaster: ({ theme, ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+
+export { Toaster, type ToasterProps };

package/dist/components/toaster/index.js

@@ -0,0 +1,22 @@
+export { Toaster, toast } from '../../chunk-5FG5NOMF.js';
+import '../../chunk-HJJPEVIH.js';
+import '../../chunk-U4AWAABZ.js';
+import '../../chunk-DTSFPOLX.js';
+import '../../chunk-P5IUC7HJ.js';
+import '../../chunk-OQCNPNPS.js';
+import '../../chunk-6BSR3O2J.js';
+import '../../chunk-5F2Y65JH.js';
+import '../../chunk-AGVEKVWD.js';
+import '../../chunk-6U4URFAI.js';
+import '../../chunk-I3RSTJP6.js';
+import '../../chunk-UW6GOD7J.js';
+import '../../chunk-UGSNASZM.js';
+import '../../chunk-XV3AQ6NS.js';
+import '../../chunk-XJIUGEPN.js';
+import '../../chunk-H5O5L6XT.js';
+import '../../chunk-DFD2WUOU.js';
+import '../../chunk-5MJPZUTO.js';
+import '../../chunk-NGVFYKAT.js';
+import '../../chunk-PAHTQUQC.js';
+import '../../chunk-ZD2QRAOX.js';
+import '../../chunk-BYXBJQAS.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@szum-tech/design-system",
-  "version": "3.1.2",
+  "version": "3.3.0",
   "description": "Szum-Tech design system with tailwindcss support",
   "keywords": [
     "szum-tech",
@@ -119,21 +119,29 @@
     "test:watch": "vitest --watch",
     "type-check": "tsc --noEmit"
   },
+  "overrides": {
+    "@storybook-community/storybook-dark-mode": {
+      "storybook": "^10.0.6",
+      "@storybook/addon-docs": "^10.0.6"
+    }
+  },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.548.0",
+    "lucide-react": "^0.553.0",
     "radix-ui": "^1.4.2",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@hookform/resolvers": "^5.2.1",
     "@storybook-community/storybook-dark-mode": "^6.0.0",
-    "@storybook/addon-docs": "^9.0.18",
-    "@storybook/addon-links": "^9.0.18",
-    "@storybook/addon-vitest": "^9.0.18",
-    "@storybook/react-vite": "^9.0.18",
+    "@storybook/addon-docs": "^10.0.6",
+    "@storybook/addon-links": "^10.0.6",
+    "@storybook/addon-vitest": "^10.0.6",
+    "@storybook/builder-vite": "^10.0.6",
+    "@storybook/react-vite": "^10.0.6",
     "@szum-tech/eslint-config": "^2.1.7",
     "@szum-tech/prettier-config": "^1.6.2",
     "@szum-tech/semantic-release-config": "^2.3.1",
@@ -159,10 +167,10 @@
     "react-docgen": "^8.0.0",
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^19.1.0",
-    "semantic-release": "^25.0.1",
+    "semantic-release": "^24.2.9",
     "serve": "^14.2.4",
-    "storybook": "^9.0.18",
-    "storybook-addon-tag-badges": "^2.0.1",
+    "storybook": "^10.0.6",
+    "storybook-addon-tag-badges": "^3.0.2",
     "tailwindcss": "^4.1.11",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",

package/tailwind/global.css

@@ -14,7 +14,7 @@
   }
 
   body {
-    @apply bg-background font-poppins text-foreground antialiased;
+    @apply bg-background font-poppins text-foreground text-body-default antialiased;
   }
 }
 

package/tailwind/typography.css

@@ -1,50 +1,192 @@
 @import "tailwindcss";
 
+/* ========================================
+   THEME CONFIGURATION - Tailwind v4
+   ======================================== */
 @theme {
   --font-poppins: "Poppins", sans-serif;
   --font-code: "JetBrains Mono", monospace;
+
+  /* Font Sizes - Display Variants */
+  --font-size-display-xl: 4.5rem; /* 72px */
+  --font-size-display-lg: 3.75rem; /* 60px */
+  --font-size-display-md: 3rem; /* 48px */
+  --font-size-display-sm: 2.25rem; /* 36px */
+
+  /* Font Sizes - Headings */
+  --font-size-heading-h1: 2rem; /* 32px */
+  --font-size-heading-h2: 1.5rem; /* 24px */
+  --font-size-heading-h3: 1.25rem; /* 20px */
+  --font-size-heading-h4: 1.125rem; /* 18px */
+
+  /* Font Sizes - Body */
+  --font-size-body-xl: 1.25rem; /* 20px */
+  --font-size-body-lg: 1.125rem; /* 18px */
+  --font-size-body-default: 1rem; /* 16px */
+  --font-size-body-sm: 0.875rem; /* 14px */
+  --font-size-body-xs: 0.75rem; /* 12px */
+
+  /* Line Heights */
+  --line-height-tight: 1.1;
+  --line-height-snug: 1.2;
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.6;
+  --line-height-loose: 1.7;
+
+  /* Letter Spacing */
+  --letter-spacing-tighter: -0.02em;
+  --letter-spacing-tight: -0.01em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.05em;
+}
+
+/* ========================================
+   UTILITY CLASSES - Tailwind v4 Style
+   ======================================== */
+/* Display Variants */
+@utility text-display-xl {
+  @apply text-(length:--font-size-display-md) leading-(--line-height-tight) font-extrabold tracking-(--letter-spacing-tighter) md:text-(length:--font-size-display-xl);
+  /*font-size: var(--font-size-display-xl);*/
+  /*line-height: var(--line-height-tight);*/
+  /*font-weight: 800;*/
+  /*letter-spacing: var(--letter-spacing-tighter);*/
+}
+
+@utility text-display-lg {
+  @apply text-[2.5rem] leading-(--line-height-tight) font-extrabold tracking-(--letter-spacing-tighter) md:text-(length:--font-size-display-lg);
+  /*font-size: var(--font-size-display-lg);*/
+  /*line-height: var(--line-height-tight);*/
+  /*font-weight: 800;*/
+  /*letter-spacing: var(--letter-spacing-tighter);*/
+}
+
+@utility text-display-md {
+  @apply text-[2rem] leading-[1.15] font-bold tracking-(--letter-spacing-tighter) md:text-(length:--font-size-display-md);
+  /*font-size: var(--font-size-display-md);*/
+  /*line-height: 1.15;*/
+  /*font-weight: 700;*/
+  /*letter-spacing: var(--letter-spacing-tighter);*/
+}
+
+@utility text-display-sm {
+  @apply text-[1.75rem] leading-(--line-height-snug) font-bold tracking-(--letter-spacing-tight) md:text-(length:--font-size-display-sm);
+  /*font-size: var(--font-size-display-sm);*/
+  /*line-height: var(--line-height-snug);*/
+  /*font-weight: 700;*/
+  /*letter-spacing: var(--letter-spacing-tight);*/
+}
+
+/* Heading Variants */
+@utility text-heading-h1 {
+  @apply text-[1.75rem] leading-[1.25] font-bold tracking-(--letter-spacing-tight) md:text-(length:--font-size-heading-h1);
+  /*font-size: var(--font-size-heading-h1);*/
+  /*line-height: 1.25;*/
+  /*font-weight: 700;*/
+  /*letter-spacing: var(--letter-spacing-tight);*/
+}
+
+@utility text-heading-h2 {
+  @apply text-[1.375rem] leading-[1.3] font-semibold tracking-(--letter-spacing-tight) md:text-(length:--font-size-heading-h2);
+  /*font-size: var(--font-size-heading-h2);*/
+  /*line-height: 1.3;*/
+  /*font-weight: 600;*/
+  /*letter-spacing: var(--letter-spacing-tight);*/
+}
+
+.text-heading-h3 {
+  @apply text-[1.125rem] leading-(--line-height-normal) font-semibold tracking-[-0.005em] md:text-(length:--font-size-heading-h3);
+  /*font-size: var(--font-size-heading-h3);*/
+  /*line-height: var(--line-height-normal);*/
+  /*font-weight: 600;*/
+  /*letter-spacing: -0.005em;*/
 }
 
-@utility typography-heading-1 {
-  @apply scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance;
+@utility text-heading-h4 {
+  @apply text-[1rem] leading-(--line-height-normal) font-semibold tracking-(--letter-spacing-normal) md:text-(length:--font-size-heading-h4);
+  /*font-size: var(--font-size-heading-h4);*/
+  /*line-height: var(--line-height-normal);*/
+  /*font-weight: 600;*/
+  /*letter-spacing: var(--letter-spacing-normal);*/
 }
 
-@utility typography-heading-2 {
-  @apply border-border scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
+/* Body Variants */
+@utility text-body-xl {
+  @apply text-(length:--font-size-body-xl) leading-(--line-height-relaxed) font-normal;
+  /*font-size: var(--font-size-body-xl);*/
+  /*line-height: var(--line-height-relaxed);*/
+  /*font-weight: 400;*/
 }
 
-@utility typography-heading-3 {
-  @apply scroll-m-20 text-2xl font-semibold tracking-tight;
+@utility text-body-lg {
+  @apply text-(length:--font-size-body-lg) leading-(--line-height-relaxed) font-normal;
+  /*font-size: var(--font-size-body-lg);*/
+  /*line-height: var(--line-height-relaxed);*/
+  /*font-weight: 400;*/
 }
 
-@utility typography-heading-4 {
-  @apply scroll-m-20 text-xl font-semibold tracking-tight;
+@utility text-body-default {
+  @apply text-(length:--font-size-body-default) leading-(--line-height-relaxed) font-normal;
+  /*font-size: var(--font-size-body-default);*/
+  /*line-height: var(--line-height-relaxed);*/
+  /*font-weight: 400;*/
 }
 
-@utility typography-paragraph {
-  @apply leading-7 [&:not(:first-child)]:mt-6;
+@utility text-body-sm {
+  @apply text-(length:--font-size-body-sm) leading-[1.5] font-normal;
+  /*font-size: var(--font-size-body-sm);*/
+  /*line-height: 1.5;*/
+  /*font-weight: 400;*/
 }
 
-@utility typography-blockquote {
-  @apply border-border mt-6 border-l-2 pl-6 italic;
+@utility text-body-xs {
+  @apply text-(length:--font-size-body-xs) leading-[1.5] font-normal;
+  /*font-size: var(--font-size-body-xs);*/
+  /*line-height: 1.5;*/
+  /*font-weight: 400;*/
 }
 
-@utility typography-inline-code {
-  @apply bg-muted font-code relative rounded px-[0.3rem] py-[0.2rem] text-sm font-semibold;
+/* Special Text Types */
+@utility text-lead {
+  @apply text-muted-foreground text-(length:--font-size-body-xl) leading-(--line-height-loose) font-normal;
+  /*font-size: var(--font-size-body-xl);*/
+  /*line-height: var(--line-height-loose);*/
+  /*font-weight: 400;*/
+  /*color: var(--muted-foreground);*/
 }
 
-@utility typography-lead {
-  @apply text-muted-foreground text-xl;
+@utility text-mute {
+  @apply text-muted-foreground text-(length:--font-size-body-sm) leading-[1.5] font-normal;
+  /*font-size: var(--font-size-body-sm);*/
+  /*line-height: 1.5;*/
+  /*font-weight: 400;*/
+  /*color: var(--muted-foreground);*/
 }
 
-@utility typography-large {
-  @apply text-lg font-semibold;
+@utility text-small {
+  @apply text-muted-foreground text-(length:--font-size-body-xs) leading-[1.4] font-normal;
+  /*font-size: var(--font-size-body-xs);*/
+  /*line-height: 1.4;*/
+  /*font-weight: 400;*/
+  /*color: var(--muted-foreground);*/
 }
 
-@utility typography-small {
-  @apply text-sm leading-none font-medium;
+@utility text-code {
+  @apply font-code bg-muted text-foreground rounded px-1.5 py-0.5 text-[0.875em] leading-[1.5] font-medium;
+  /*font-family: var(--font-code), serif;*/
+  /*font-size: 0.875em;*/
+  /*padding: 0.125rem 0.375rem;*/
+  /*background: var(--muted);*/
+  /*border-radius: var(--radius);*/
+  /*color: var(--foreground);*/
+  /*font-weight: 500;*/
 }
 
-@utility typography-muted {
-  @apply text-muted-foreground text-sm;
+@utility text-blockquote {
+  @apply text-muted-foreground border-border border-l-2 pl-4 text-[1rem] leading-(--line-height-relaxed);
+  /*font-size: 1rem;*/
+  /*line-height: var(--line-height-relaxed);*/
+  /*font-style: italic;*/
+  /*border-left: 2px solid var(--border);*/
+  /*padding-left: 1rem;*/
+  /*color: var(--muted-foreground);*/
 }

package/dist/chunk-7V34QHYR.js

@@ -1,111 +0,0 @@
-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 badgeCva = cva(
-  [
-    "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"
-  ],
-  {
-    variants: {
-      color: {
-        neutral: "",
-        primary: "",
-        success: "",
-        warning: "",
-        error: ""
-      },
-      variant: {
-        contained: "",
-        outlined: "bg-transparent"
-      }
-    },
-    compoundVariants: [
-      // ---------- contained ---------- //
-      {
-        variant: "contained",
-        color: "neutral",
-        class: ["border-gray-500 bg-gray-500 text-white"]
-      },
-      {
-        variant: "contained",
-        color: "primary",
-        class: ["border-primary-500 bg-primary-500 text-white"]
-      },
-      {
-        variant: "contained",
-        color: "success",
-        class: ["border-success-500 bg-success-500 text-white"]
-      },
-      {
-        variant: "contained",
-        color: "warning",
-        class: ["border-warning-500 bg-warning-500 text-white"]
-      },
-      {
-        variant: "contained",
-        color: "error",
-        class: ["border-error-500 bg-error-500 text-white"]
-      },
-      // ---------- OUTLINED ---------- //
-      {
-        variant: "outlined",
-        color: "neutral",
-        class: ["border-gray-500 text-gray-100"]
-      },
-      {
-        variant: "outlined",
-        color: "primary",
-        class: ["border-primary-500 text-primary-500"]
-      },
-      {
-        variant: "outlined",
-        color: "success",
-        class: ["border-success-500 text-success-500"]
-      },
-      {
-        variant: "outlined",
-        color: "warning",
-        class: ["border-warning-500 text-warning-500"]
-      },
-      {
-        variant: "outlined",
-        color: "error",
-        class: ["border-error-500 text-error-500"]
-      }
-    ],
-    defaultVariants: {
-      color: "primary",
-      variant: "contained"
-    }
-  }
-);
-function Badge({
-  asChild = false,
-  color = "primary",
-  variant = "contained",
-  className,
-  children,
-  ...props
-}) {
-  const badgeStyles = badgeCva({ color, variant });
-  const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "badge",
-      "data-variant": variant,
-      "data-color": color,
-      role: !asChild ? "status" : void 0,
-      className: cn(badgeStyles, className),
-      ...props,
-      children
-    }
-  );
-}
-
-export { Badge };

package/dist/chunk-NHFHKMX2.cjs

@@ -1,113 +0,0 @@
-'use strict';
-
-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 badgeCva = classVarianceAuthority.cva(
-  [
-    "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"
-  ],
-  {
-    variants: {
-      color: {
-        neutral: "",
-        primary: "",
-        success: "",
-        warning: "",
-        error: ""
-      },
-      variant: {
-        contained: "",
-        outlined: "bg-transparent"
-      }
-    },
-    compoundVariants: [
-      // ---------- contained ---------- //
-      {
-        variant: "contained",
-        color: "neutral",
-        class: ["border-gray-500 bg-gray-500 text-white"]
-      },
-      {
-        variant: "contained",
-        color: "primary",
-        class: ["border-primary-500 bg-primary-500 text-white"]
-      },
-      {
-        variant: "contained",
-        color: "success",
-        class: ["border-success-500 bg-success-500 text-white"]
-      },
-      {
-        variant: "contained",
-        color: "warning",
-        class: ["border-warning-500 bg-warning-500 text-white"]
-      },
-      {
-        variant: "contained",
-        color: "error",
-        class: ["border-error-500 bg-error-500 text-white"]
-      },
-      // ---------- OUTLINED ---------- //
-      {
-        variant: "outlined",
-        color: "neutral",
-        class: ["border-gray-500 text-gray-100"]
-      },
-      {
-        variant: "outlined",
-        color: "primary",
-        class: ["border-primary-500 text-primary-500"]
-      },
-      {
-        variant: "outlined",
-        color: "success",
-        class: ["border-success-500 text-success-500"]
-      },
-      {
-        variant: "outlined",
-        color: "warning",
-        class: ["border-warning-500 text-warning-500"]
-      },
-      {
-        variant: "outlined",
-        color: "error",
-        class: ["border-error-500 text-error-500"]
-      }
-    ],
-    defaultVariants: {
-      color: "primary",
-      variant: "contained"
-    }
-  }
-);
-function Badge({
-  asChild = false,
-  color = "primary",
-  variant = "contained",
-  className,
-  children,
-  ...props
-}) {
-  const badgeStyles = badgeCva({ color, variant });
-  const Comp = asChild ? reactSlot.Slot : "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      "data-slot": "badge",
-      "data-variant": variant,
-      "data-color": color,
-      role: !asChild ? "status" : void 0,
-      className: chunkH2BWO3SI_cjs.cn(badgeStyles, className),
-      ...props,
-      children
-    }
-  );
-}
-
-exports.Badge = Badge;