@szum-tech/design-system 2.0.3 → 2.0.4

package/dist/icons.d.cts

@@ -1,6 +1,6 @@
-export * from '@radix-ui/react-icons';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+export * from '@radix-ui/react-icons';
 
 declare function GoogleLogoIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 

package/dist/icons.d.ts

@@ -1,6 +1,6 @@
-export * from '@radix-ui/react-icons';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+export * from '@radix-ui/react-icons';
 
 declare function GoogleLogoIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 

package/dist/icons.js

@@ -1 +1 @@
-export { AccessibilityIcon, ActivityLogIcon, AlignBaselineIcon, AlignBottomIcon, AlignCenterHorizontallyIcon, AlignCenterVerticallyIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, AllSidesIcon, AngleIcon, ArchiveIcon, ArrowBottomLeftIcon, ArrowBottomRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowUpIcon, AspectRatioIcon, Auth0LogoIcon, AvatarIcon, BackpackIcon, BadgeIcon, BarChartIcon, BellIcon, BlendingModeIcon, BookmarkFilledIcon, BookmarkIcon, BorderAllIcon, BorderBottomIcon, BorderDashedIcon, BorderDottedIcon, BorderLeftIcon, BorderNoneIcon, BorderRightIcon, BorderSolidIcon, BorderSplitIcon, BorderStyleIcon, BorderTopIcon, BorderWidthIcon, BoxIcon, BoxModelIcon, ButtonIcon, CalendarIcon, CameraIcon, CardStackIcon, CardStackMinusIcon, CardStackPlusIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretSortIcon, CaretUpIcon, ChatBubbleIcon, CheckCircledIcon, CheckIcon, CheckboxIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleBackslashIcon, CircleIcon, ClipboardCopyIcon, ClipboardIcon, ClockIcon, CodeIcon, CodeSandboxLogoIcon, ColorWheelIcon, ColumnSpacingIcon, ColumnsIcon, CommitIcon, Component1Icon, Component2Icon, ComponentBooleanIcon, ComponentInstanceIcon, ComponentNoneIcon, ComponentPlaceholderIcon, ContainerIcon, CookieIcon, CopyIcon, CornerBottomLeftIcon, CornerBottomRightIcon, CornerTopLeftIcon, CornerTopRightIcon, CornersIcon, CountdownTimerIcon, CounterClockwiseClockIcon, CropIcon, Cross1Icon, Cross2Icon, CrossCircledIcon, Crosshair1Icon, Crosshair2Icon, CrumpledPaperIcon, CubeIcon, CursorArrowIcon, CursorTextIcon, DashIcon, DashboardIcon, DesktopIcon, DimensionsIcon, DiscIcon, DiscordLogoIcon, DividerHorizontalIcon, DividerVerticalIcon, DotFilledIcon, DotIcon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowDownIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, DoubleArrowUpIcon, DownloadIcon, DragHandleDots1Icon, DragHandleDots2Icon, DragHandleHorizontalIcon, DragHandleVerticalIcon, DrawingPinFilledIcon, DrawingPinIcon, DropdownMenuIcon, EnterFullScreenIcon, EnterIcon, EnvelopeClosedIcon, EnvelopeOpenIcon, EraserIcon, ExclamationTriangleIcon, ExitFullScreenIcon, ExitIcon, ExternalLinkIcon, EyeClosedIcon, EyeNoneIcon, EyeOpenIcon, FaceIcon, FigmaLogoIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FontBoldIcon, FontFamilyIcon, FontItalicIcon, FontRomanIcon, FontSizeIcon, FontStyleIcon, FrameIcon, FramerLogoIcon, GearIcon, GitHubLogoIcon, GlobeIcon, GoogleLogoIcon, GridIcon, GroupIcon, Half1Icon, Half2Icon, HamburgerMenuIcon, HandIcon, HeadingIcon, HeartFilledIcon, HeartIcon, HeightIcon, HobbyKnifeIcon, HomeIcon, IconJarLogoIcon, IdCardIcon, ImageIcon, InfoCircledIcon, InputIcon, InstagramLogoIcon, KeyboardIcon, LapTimerIcon, LaptopIcon, LayersIcon, LayoutIcon, LetterCaseCapitalizeIcon, LetterCaseLowercaseIcon, LetterCaseToggleIcon, LetterCaseUppercaseIcon, LetterSpacingIcon, LightningBoltIcon, LineHeightIcon, Link1Icon, Link2Icon, LinkBreak1Icon, LinkBreak2Icon, LinkNone1Icon, LinkNone2Icon, LinkedInLogoIcon, ListBulletIcon, LoadingIcon, LockClosedIcon, LockOpen1Icon, LockOpen2Icon, LoopIcon, MagicWandIcon, MagnifyingGlassIcon, MarginIcon, MaskOffIcon, MaskOnIcon, MinusCircledIcon, MinusIcon, MixIcon, MixerHorizontalIcon, MixerVerticalIcon, MobileIcon, ModulzLogoIcon, MoonIcon, MoveIcon, NotionLogoIcon, OpacityIcon, OpenInNewWindowIcon, OverlineIcon, PaddingIcon, PaperPlaneIcon, PauseIcon, Pencil1Icon, Pencil2Icon, PersonIcon, PieChartIcon, PilcrowIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, PinTopIcon, PlayIcon, PlusCircledIcon, PlusIcon, QuestionMarkCircledIcon, QuestionMarkIcon, QuoteIcon, RadiobuttonIcon, ReaderIcon, ReloadIcon, ResetIcon, ResumeIcon, RocketIcon, RotateCounterClockwiseIcon, RowSpacingIcon, RowsIcon, RulerHorizontalIcon, RulerSquareIcon, ScissorsIcon, SectionIcon, SewingPinFilledIcon, SewingPinIcon, ShadowIcon, ShadowInnerIcon, ShadowNoneIcon, ShadowOuterIcon, Share1Icon, Share2Icon, ShuffleIcon, SizeIcon, SketchLogoIcon, SlashIcon, SliderIcon, SpaceBetweenHorizontallyIcon, SpaceBetweenVerticallyIcon, SpaceEvenlyHorizontallyIcon, SpaceEvenlyVerticallyIcon, SpeakerLoudIcon, SpeakerModerateIcon, SpeakerOffIcon, SpeakerQuietIcon, SquareIcon, StackIcon, StarFilledIcon, StarIcon, StitchesLogoIcon, StopIcon, StopwatchIcon, StretchHorizontallyIcon, StretchVerticallyIcon, StrikethroughIcon, SunIcon, SwitchIcon, SymbolIcon, TableIcon, TargetIcon, TextAlignBottomIcon, TextAlignCenterIcon, TextAlignJustifyIcon, TextAlignLeftIcon, TextAlignMiddleIcon, TextAlignRightIcon, TextAlignTopIcon, TextIcon, TextNoneIcon, ThickArrowDownIcon, ThickArrowLeftIcon, ThickArrowRightIcon, ThickArrowUpIcon, TimerIcon, TokensIcon, TrackNextIcon, TrackPreviousIcon, TransformIcon, TransparencyGridIcon, TrashIcon, TriangleDownIcon, TriangleLeftIcon, TriangleRightIcon, TriangleUpIcon, TwitterLogoIcon, UnderlineIcon, UpdateIcon, UploadIcon, ValueIcon, ValueNoneIcon, VercelLogoIcon, VideoIcon, ViewGridIcon, ViewHorizontalIcon, ViewNoneIcon, ViewVerticalIcon, WidthIcon, XLogoIcon, ZoomInIcon, ZoomOutIcon } from './chunk-EKHM64CK.js';
+export { Auth0LogoIcon, GoogleLogoIcon, LoadingIcon, XLogoIcon } from './chunk-INJBKPIE.js';

package/dist/index.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
 var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
-var chunkG4TX2R77_cjs = require('./chunk-G4TX2R77.cjs');
+var chunkTSN5DAKH_cjs = require('./chunk-TSN5DAKH.cjs');
 var radixUi = require('radix-ui');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactSlot = require('@radix-ui/react-slot');
+var reactIcons = require('@radix-ui/react-icons');
 var tailwindMerge = require('tailwind-merge');
 var reactHookForm = require('react-hook-form');
 
@@ -305,6 +306,7 @@ function Button({
   color = "primary",
   disabled = false,
   fullWidth = false,
+  loadingPosition = "start",
   ref,
   ...props
 }) {
@@ -313,11 +315,10 @@ function Button({
     type = "button",
     loading = false,
     size = "md",
-    loadingPosition = "start",
     endIcon,
     startIcon,
     ...rest
-  } = props;
+  } = { ...props, loadingPosition };
   const Comp = asChild ? reactSlot.Slot : "button";
   const buttonStyles = buttonCva({ fullWidth, size, variant, color });
   const isDisabled = disabled || loading;
@@ -347,11 +348,11 @@ function ButtonContent({
   ...props
 }) {
   const isStartLoading = loading && loadingPosition === "start";
-  const StartIcon = isStartLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkG4TX2R77_cjs.LoadingIcon, { "aria-label": "Loading" }) : startIcon || null;
+  const StartIcon = isStartLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkTSN5DAKH_cjs.LoadingIcon, { "aria-label": "Loading" }) : startIcon || null;
   const startIconStyles = iconCva({ size, loading: isStartLoading });
   const startIconContainerStyles = iconContainerCva({ size, site: "left" });
   const isEndLoading = loading && loadingPosition === "end";
-  const EndIcon = isEndLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkG4TX2R77_cjs.LoadingIcon, { "aria-label": "Loading" }) : endIcon || null;
+  const EndIcon = isEndLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkTSN5DAKH_cjs.LoadingIcon, { "aria-label": "Loading" }) : endIcon || null;
   const endIconStyles = iconCva({ size, loading: isEndLoading });
   const endIconContainerStyles = iconContainerCva({ size, site: "right" });
   const LeadingIcon = StartIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: startIconContainerStyles, role: isStartLoading ? "progressbar" : void 0, children: React__namespace.cloneElement(StartIcon, { className: startIconStyles }) }) : null;
@@ -515,7 +516,7 @@ function Select({ children, placeholder, invalid = false, ref, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Select.Root, { ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Select.Trigger, { className: selectStyles, ref, children: [
       /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Value, { placeholder }),
-      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Icon, { className: "-mr-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(chunkG4TX2R77_cjs.CaretSortIcon, { className: "size-5 text-gray-200" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Icon, { className: "-mr-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CaretSortIcon, { className: "size-5 text-gray-200" }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       radixUi.Select.Content,
@@ -535,7 +536,7 @@ function SelectItem({ children, ...props }) {
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemText, { className: "flex-1", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkG4TX2R77_cjs.CheckIcon, { className: "size-4" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, { className: "size-4" }) })
       ]
     }
   );
@@ -589,7 +590,7 @@ function SheetContent({ side = "right", className, children, ...props }) {
     /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Content, { className: tailwindMerge.twMerge(sheetContentStyles({ side }), className), ...props, children: [
       children,
       /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-foreground data-[state=open]:bg-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkG4TX2R77_cjs.Cross1Icon, { className: "size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross1Icon, { className: "size-4" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
       ] })
     ] })
@@ -607,13 +608,14 @@ function SheetTitle({ className, ...props }) {
 function SheetDescription({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Description, { className: tailwindMerge.twMerge("typography-body-2 text-gray-200", className), ...props });
 }
-function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+function Separator({ className, orientation = "horizontal", decorative = false, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     radixUi.Separator.Root,
     {
       decorative,
       orientation,
-      className: tailwindMerge.twMerge(
+      "aria-orientation": orientation,
+      className: chunkH2BWO3SI_cjs.cn(
         "shrink-0 bg-gray-400",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
@@ -675,7 +677,7 @@ function DialogContent({ className, children, width = "md", ...props }) {
     /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Content, { className: tailwindMerge.twMerge(dialogContentStyles({ width }), className), ...props, children: [
       children,
       /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-foreground data-[state=open]:bg-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkG4TX2R77_cjs.Cross1Icon, { className: "size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross1Icon, { className: "size-4" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
       ] })
     ] })

package/dist/index.d.cts

@@ -75,7 +75,7 @@ type Props = {
     asChild?: boolean;
 };
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement> & Props;
-declare function Button({ asChild, variant, color, disabled, fullWidth, ref, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ asChild, variant, color, disabled, fullWidth, loadingPosition, ref, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonCva: (props?: ({
     fullWidth?: boolean | null | undefined;

package/dist/index.d.ts

@@ -75,7 +75,7 @@ type Props = {
     asChild?: boolean;
 };
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement> & Props;
-declare function Button({ asChild, variant, color, disabled, fullWidth, ref, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ asChild, variant, color, disabled, fullWidth, loadingPosition, ref, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonCva: (props?: ({
     fullWidth?: boolean | null | undefined;

package/dist/index.js

@@ -1,11 +1,12 @@
 import { cn } from './chunk-ZD2QRAOX.js';
 export { cn } from './chunk-ZD2QRAOX.js';
-import { CaretSortIcon, CheckIcon, Cross1Icon, LoadingIcon } from './chunk-EKHM64CK.js';
+import { LoadingIcon } from './chunk-INJBKPIE.js';
 import { Dialog as Dialog$1, AlertDialog as AlertDialog$1, Label as Label$1, Avatar as Avatar$1, Tooltip as Tooltip$1, Select as Select$1, Separator as Separator$1 } from 'radix-ui';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
+import { CaretSortIcon, CheckIcon, Cross1Icon } from '@radix-ui/react-icons';
 import { twMerge } from 'tailwind-merge';
 import { useFormContext, FormProvider, Controller } from 'react-hook-form';
 
@@ -284,6 +285,7 @@ function Button({
   color = "primary",
   disabled = false,
   fullWidth = false,
+  loadingPosition = "start",
   ref,
   ...props
 }) {
@@ -292,11 +294,10 @@ function Button({
     type = "button",
     loading = false,
     size = "md",
-    loadingPosition = "start",
     endIcon,
     startIcon,
     ...rest
-  } = props;
+  } = { ...props, loadingPosition };
   const Comp = asChild ? Slot : "button";
   const buttonStyles = buttonCva({ fullWidth, size, variant, color });
   const isDisabled = disabled || loading;
@@ -586,13 +587,14 @@ function SheetTitle({ className, ...props }) {
 function SheetDescription({ className, ...props }) {
   return /* @__PURE__ */ jsx(Dialog$1.Description, { className: twMerge("typography-body-2 text-gray-200", className), ...props });
 }
-function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+function Separator({ className, orientation = "horizontal", decorative = false, ...props }) {
   return /* @__PURE__ */ jsx(
     Separator$1.Root,
     {
       decorative,
       orientation,
-      className: twMerge(
+      "aria-orientation": orientation,
+      className: cn(
         "shrink-0 bg-gray-400",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@szum-tech/design-system",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Szum-Tech design system with tailwindcss support",
   "keywords": [
     "szum-tech",
@@ -82,11 +82,14 @@
     "test": "vitest",
     "test:ci": "CI=true vitest",
     "test:coverage": "vitest --coverage",
+    "test:storybook": "vitest --project=storybook --coverage",
     "test:ui": "vitest --ui",
+    "test:unit": "vitest --project=unit --coverage",
     "test:watch": "vitest --watch",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "radix-ui": "^1.1.3",
@@ -94,34 +97,33 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@hookform/resolvers": "^4.1.2",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@storybook/addon-a11y": "^8.6.3",
-    "@storybook/addon-docs": "^8.6.3",
-    "@storybook/addon-essentials": "^8.6.3",
-    "@storybook/addon-interactions": "^8.6.3",
-    "@storybook/react": "^8.6.3",
-    "@storybook/react-vite": "^8.6.3",
-    "@storybook/theming": "^8.6.3",
-    "@szum-tech/eslint-config": "^2.1.5",
-    "@szum-tech/prettier-config": "^1.5.0",
-    "@szum-tech/semantic-release-config": "^2.2.2",
-    "@tailwindcss/postcss": "^4.0.9",
+    "@hookform/resolvers": "^4.1.3",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/experimental-addon-test": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/theming": "^8.6.4",
+    "@szum-tech/eslint-config": "^2.1.6",
+    "@szum-tech/prettier-config": "^1.6.1",
+    "@szum-tech/semantic-release-config": "^2.3.0",
+    "@tailwindcss/postcss": "^4.0.14",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.13.8",
+    "@types/node": "^22.13.10",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.7",
-    "@vitest/ui": "^3.0.7",
+    "@vitest/browser": "^3.0.8",
+    "@vitest/coverage-v8": "^3.0.8",
+    "@vitest/ui": "^3.0.8",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.21.0",
-    "happy-dom": "^17.1.8",
+    "eslint": "^9.22.0",
+    "playwright": "^1.51.0",
     "postcss": "^8.5.3",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "react": "^19.0.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^19.0.0",
@@ -130,12 +132,12 @@
     "serve": "^14.2.4",
     "storybook": "^8.5.3",
     "storybook-dark-mode": "^4.0.2",
-    "tailwindcss": "^4.0.5",
+    "tailwindcss": "^4.0.14",
     "tsup": "^8.4.0",
-    "typescript": "^5.7.3",
-    "vite": "^6.2.0",
+    "typescript": "^5.8.2",
+    "vite": "^5.4.14",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.5",
+    "vitest": "^3.0.8",
     "zod": "^3.24.2"
   },
   "peerDependencies": {