@mbao01/common 0.1.3 → 0.2.0

package/README.md

@@ -17,13 +17,5 @@ npm install @mbao01/common
 3. Configure tailwind
 
 ```typescript
-export default {
-  content: [
-    "node_modules/@mbao01/common/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
-    ...
-  ],
-  "plugins": [
-    ...require("@mbao01/common/plugin"), // -> import the library plugin
-  ]
-}
+import "@mbao01/common/styles";
 ```

package/dist/types/components/AlertDialog/AlertDialog.d.ts

@@ -24,15 +24,19 @@ declare const AlertDialog: {
         variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         outline?: boolean | undefined;
+        rounded?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
         isLoading?: boolean | undefined;
+        disabled?: boolean | undefined;
     } & React.RefAttributes<HTMLButtonElement>>;
     Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
         variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         outline?: boolean | undefined;
+        rounded?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
         isLoading?: boolean | undefined;
+        disabled?: boolean | undefined;
     } & React.RefAttributes<HTMLButtonElement>>;
 };
 export { AlertDialog };

package/dist/types/components/Button/Button.d.ts

@@ -3,8 +3,10 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
     variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     outline?: boolean | undefined;
+    rounded?: "xs" | "sm" | "md" | "lg" | undefined;
     wide?: boolean | undefined;
     isLoading?: boolean | undefined;
+    disabled?: boolean | undefined;
 } & {
     asChild?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Button/constants.d.ts

@@ -1,7 +1,9 @@
 export declare const getButtonClasses: (props?: ({
     variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
     outline?: boolean | null | undefined;
+    rounded?: "xs" | "sm" | "md" | "lg" | null | undefined;
     wide?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     isLoading?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import { CardActionsProps, CardBodyProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardImageProps, CardProps, CardTitleProps } from './types';
 declare const Card: {
-    ({ compact, bordered, horizontal, overlay, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, border, horizontal, overlay, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
     Actions: ({ className, ...props }: CardActionsProps) => import("react/jsx-runtime").JSX.Element;
     Body: ({ className, ...props }: CardBodyProps) => import("react/jsx-runtime").JSX.Element;
     Header: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Card/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const getCardClasses: (props?: ({
-    bordered?: boolean | null | undefined;
-    compact?: boolean | null | undefined;
+    border?: "solid" | "dash" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     horizontal?: boolean | null | undefined;
     overlay?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/Carousel/Carousel.d.ts

@@ -8,8 +8,10 @@ declare const Carousel: {
         variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         outline?: boolean | undefined;
+        rounded?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
         isLoading?: boolean | undefined;
+        disabled?: boolean | undefined;
     } & {
         asChild?: boolean;
     } & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
@@ -17,8 +19,10 @@ declare const Carousel: {
         variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         outline?: boolean | undefined;
+        rounded?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
         isLoading?: boolean | undefined;
+        disabled?: boolean | undefined;
     } & {
         asChild?: boolean;
     } & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Form/DatetimeInput/DatetimeInput.d.ts

@@ -23,6 +23,7 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
         role?: "application" | "dialog" | undefined | undefined;
         "aria-label"?: string | undefined;
         footer?: import('react').ReactNode;
+        animate?: boolean | undefined;
         month?: Date | undefined;
         classNames?: (Partial<import('react-day-picker').ClassNames> & Partial<import('react-day-picker').DeprecatedUI<string>>) | undefined;
         showOutsideDays?: boolean | undefined;

package/dist/types/components/Form/Select/Select.d.ts

@@ -8,7 +8,6 @@ declare const Select: {
         variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         outline?: boolean | undefined;
-        wide?: boolean | undefined;
     } & React.RefAttributes<HTMLButtonElement>>;
     Content: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
         position?: "popper" | "item-aligned" | undefined;
@@ -18,8 +17,10 @@ declare const Select: {
         variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         outline?: boolean | undefined;
-        wide?: boolean | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
+    Icon: React.ForwardRefExoticComponent<SelectPrimitive.SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+    ItemText: React.ForwardRefExoticComponent<SelectPrimitive.SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+    ItemIndicator: React.ForwardRefExoticComponent<SelectPrimitive.SelectItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
     Separator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     ScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     ScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Form/Select/constants.d.ts

@@ -1,7 +1,6 @@
 export declare const getSelectTriggerClasses: (props?: ({
     variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     outline?: boolean | null | undefined;
-    wide?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getSelectItemClasses: (props?: ({

package/dist/types/components/Form/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,7 @@
+import { As, FieldsetLabelProps, FieldsetLegendProps, FieldsetProps } from './types';
+declare const Fieldset: {
+    ({ children, className, ...props }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
+    Label: <T extends As>({ as, children, className, ...props }: FieldsetLabelProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Legend: ({ children, className, ...props }: FieldsetLegendProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Fieldset };

package/dist/types/components/Form/components/Fieldset/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const getFieldsetClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getFieldsetLabelClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getFieldsetLegendClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/types/components/Form/components/Fieldset/index.d.ts

@@ -0,0 +1 @@
+export { Fieldset } from './Fieldset';

package/dist/types/components/Form/components/Fieldset/types.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from '../../../../libs';
+import { getFieldsetClasses, getFieldsetLabelClasses, getFieldsetLegendClasses } from './constants';
+export type FieldsetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement> & VariantProps<typeof getFieldsetClasses>;
+export type As = "div" | "span" | "label" | "p";
+type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
+export type FieldsetLabelProps<T extends As> = (T extends "label" ? React.LabelHTMLAttributes<HTMLLabelElement> : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) & VariantProps<typeof getFieldsetLabelClasses> & {
+    as?: T;
+};
+export type FieldsetLegendProps = React.HTMLAttributes<HTMLLegendElement> & VariantProps<typeof getFieldsetLegendClasses>;
+export {};

package/dist/types/components/Form/components/Label/Label.d.ts

@@ -1,7 +1,5 @@
-import { LabelProps, LabelTextProps } from './types';
-declare const Label: {
+import { LabelProps } from './types';
+export declare const Label: {
     ({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string | undefined;
-    Text: ({ className, children, ...props }: LabelTextProps) => import("react/jsx-runtime").JSX.Element;
 };
-export { Label };

package/dist/types/components/Form/index.d.ts

@@ -13,4 +13,4 @@ export { TagsInput } from './TagsInput';
 export { Textarea } from './Textarea';
 export { TextField } from './TextField';
 export { Label } from './components/Label';
-export { FormControl } from './components/FormControl';
+export { Fieldset } from './components/Fieldset';

package/dist/types/components/Loading/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const getLoadingClasses: (props?: ({
     variant?: "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity" | null | undefined;
-    intent?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    intent?: "accent" | "default" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/Sidebar/Sidebar.d.ts

@@ -30,8 +30,10 @@ declare const Sidebar: {
         variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         outline?: boolean | undefined;
+        rounded?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
         isLoading?: boolean | undefined;
+        disabled?: boolean | undefined;
     } & {
         asChild?: boolean;
     } & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Toggle/Toggle.d.ts

@@ -4,9 +4,12 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.Toggl
     variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     outline?: boolean | undefined;
+    rounded?: "xs" | "sm" | "md" | "lg" | undefined;
     wide?: boolean | undefined;
     isLoading?: boolean | undefined;
+    disabled?: boolean | undefined;
 }, "variant" | "isLoading"> & {
     variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+    outline?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { Toggle };

package/dist/types/components/Toggle/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const getToggleClasses: (props?: ({
     variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    outline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/ToggleGroup/ToggleGroup.d.ts

@@ -6,10 +6,13 @@ declare const ToggleGroup: {
         variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         outline?: boolean | undefined;
+        rounded?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
         isLoading?: boolean | undefined;
+        disabled?: boolean | undefined;
     }, "variant" | "isLoading"> & {
         variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+        outline?: boolean | undefined;
     } & import('react').RefAttributes<HTMLButtonElement>>;
 };
 export { ToggleGroup };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.2.0",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -21,7 +21,6 @@
       }
     },
     "./libs": "./src/libs/index.ts",
-    "./plugin": "./plugin.js",
     "./utilities": "./src/utilities/index.ts",
     "./vitest/setup": "./vitest-setup.ts",
     "./vitest/config": "./vitest.config.ts",
@@ -32,8 +31,6 @@
   "files": [
     "src",
     "dist/types",
-    "plugin.js",
-    "plugin.d.ts",
     "tsconfig.node.json",
     "tsconfig.shared.json",
     "vitest-setup.ts",
@@ -72,103 +69,102 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.5",
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-context-menu": "^2.2.5",
-    "@radix-ui/react-dialog": "^1.1.5",
-    "@radix-ui/react-dropdown-menu": "^2.1.5",
-    "@radix-ui/react-hover-card": "^1.1.5",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-menubar": "^1.1.5",
-    "@radix-ui/react-navigation-menu": "^1.2.4",
-    "@radix-ui/react-popover": "^1.1.5",
-    "@radix-ui/react-progress": "^1.1.1",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.5",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toggle": "^1.1.1",
-    "@radix-ui/react-toggle-group": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.7",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-context-menu": "^2.2.6",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@tailwindcss/typography": "^0.5.16",
-    "chrono-node": "^2.7.8",
+    "chrono-node": "^2.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
-    "daisyui": "^4.12.23",
+    "cmdk": "^1.1.1",
+    "daisyui": "^5.0.9",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.5.2",
-    "lucide-react": "^0.474.0",
-    "react-day-picker": "^9.5.1",
-    "react-dropzone": "^14.3.5",
+    "lucide-react": "^0.486.0",
+    "react-day-picker": "^9.6.4",
+    "react-dropzone": "^14.3.8",
     "react-international-phone": "^4.5.0",
     "react-otp-input": "^3.1.1",
-    "sonner": "^1.7.4",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.1.0",
     "timescape": "^0.7.1",
-    "universal-cookie": "^7.2.2",
+    "universal-cookie": "^8.0.1",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.19.0",
+    "@eslint/js": "^9.23.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
-    "@storybook/addon-a11y": "^8.5.3",
+    "@storybook/addon-a11y": "^8.6.11",
     "@storybook/addon-coverage": "^1.0.5",
-    "@storybook/addon-essentials": "^8.5.3",
-    "@storybook/addon-interactions": "^8.5.3",
-    "@storybook/addon-links": "^8.5.3",
-    "@storybook/addon-onboarding": "^8.5.3",
-    "@storybook/addon-storysource": "^8.5.3",
-    "@storybook/addon-themes": "^8.5.3",
-    "@storybook/addon-viewport": "^8.5.3",
-    "@storybook/blocks": "^8.5.3",
-    "@storybook/react": "^8.5.3",
-    "@storybook/react-vite": "^8.5.3",
-    "@storybook/test": "^8.5.3",
-    "@storybook/test-runner": "^0.21.0",
+    "@storybook/addon-essentials": "^8.6.11",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/addon-links": "^8.6.11",
+    "@storybook/addon-onboarding": "^8.6.11",
+    "@storybook/addon-storysource": "^8.6.11",
+    "@storybook/addon-themes": "^8.6.11",
+    "@storybook/addon-viewport": "^8.6.11",
+    "@storybook/blocks": "^8.6.11",
+    "@storybook/react": "^8.6.11",
+    "@storybook/react-vite": "^8.6.11",
+    "@storybook/test": "^8.6.11",
+    "@storybook/test-runner": "^0.22.0",
+    "@tailwindcss/postcss": "^4.0.17",
+    "@tailwindcss/vite": "^4.0.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/eslint__js": "^8.42.3",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^22.13.0",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.22.0",
-    "@typescript-eslint/parser": "^8.22.0",
+    "@types/node": "^22.13.16",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.5",
-    "@vitest/ui": "^3.0.5",
-    "autoprefixer": "^10.4.20",
-    "axe-playwright": "^2.0.3",
-    "eslint": "^9.19.0",
+    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/ui": "^3.1.1",
+    "axe-playwright": "^2.1.0",
+    "eslint": "^9.23.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.18",
-    "eslint-plugin-storybook": "^0.11.2",
-    "globals": "^15.14.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^16.0.0",
     "jest-image-snapshot": "^6.4.0",
     "jsdom": "^26.0.0",
     "path": "^0.12.7",
-    "postcss": "^8.5.1",
-    "prettier": "^3.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.5",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.4.1",
     "recharts": "^2.15.1",
-    "storybook": "^8.5.3",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.22.0",
-    "vite": "^6.0.11",
-    "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.0.5"
+    "storybook": "^8.6.11",
+    "tailwindcss": "^4.0.17",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.29.0",
+    "vite": "^6.2.4",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.1.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -176,5 +172,5 @@
     "recharts": "^2.15.0",
     "typescript": "^5.7.2"
   },
-  "gitHead": "3ab1ef5b1ca2fb4ec2ad2ea0bd9889988f30d142"
+  "gitHead": "b5d9e92c1cf998fdf02f3fd15881bd6d4a58f57d"
 }

package/src/components/AlertDialog/constants.ts

@@ -1,5 +1,5 @@
 import { cva } from "../../libs";
 
 export const getDialogCloseClasses = cva(
-  "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+  "absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 );

package/src/components/Avatar/constants.ts

@@ -13,8 +13,8 @@ export const getAvatarClasses = cva("avatar", {
       64: "w-64 h-64",
     },
     status: {
-      online: "online",
-      offline: "offline",
+      online: "avatar-online",
+      offline: "avatar-offline",
     },
   },
 });
@@ -34,14 +34,14 @@ const classesConfig = {
       warning: "bg-warning text-warning-content ring-warning",
     },
     shape: {
-      round: "rounded",
+      round: "rounded-sm",
       circle: "rounded-full",
       hexagon: "mask mask-hexagon",
       triangle: "mask mask-triangle",
       television: "mask mask-squircle",
     },
     ring: {
-      true: "ring ring-offset-base-100 ring-offset-2",
+      true: "ring-3 ring-offset-base-100 ring-offset-2",
     },
   },
 };

package/src/components/Button/Button.tsx

@@ -6,13 +6,32 @@ import { getButtonClasses } from "./constants";
 import { type ButtonProps } from "./types";
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ asChild, className, outline, children, isLoading, variant, size, wide, ...props }, ref) => {
+  (
+    {
+      asChild,
+      className,
+      outline,
+      children,
+      isLoading,
+      variant,
+      size,
+      wide,
+      rounded,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
     const Comp = asChild ? Slot : "button";
 
     return (
       <Comp
         ref={ref}
-        className={cn(getButtonClasses({ size, wide, outline, variant, isLoading }), className)}
+        disabled={disabled}
+        className={cn(
+          getButtonClasses({ size, wide, outline, variant, rounded, disabled, isLoading }),
+          className
+        )}
         {...props}
       >
         <Slottable>{children}</Slottable>
@@ -21,7 +40,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
             data-testid="loading"
           >
-            <Loading />
+            <Loading
+              intent={!variant || variant === "link" || variant === "ghost" ? "default" : variant}
+            />
           </span>
         ) : null}
       </Comp>

package/src/components/Button/constants.ts

@@ -1,6 +1,6 @@
 import { cva } from "../../libs";
 
-export const getButtonClasses = cva("btn [&:disabled]:text-opacity-50", {
+export const getButtonClasses = cva("btn", {
   variants: {
     variant: {
       accent: "btn-accent",
@@ -18,6 +18,12 @@ export const getButtonClasses = cva("btn [&:disabled]:text-opacity-50", {
     outline: {
       true: "btn-outline",
     },
+    rounded: {
+      xs: "rounded-xs",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+    },
     wide: {
       true: "btn-wide",
     },
@@ -30,12 +36,24 @@ export const getButtonClasses = cva("btn [&:disabled]:text-opacity-50", {
     isLoading: {
       true: "relative overflow-hidden",
     },
+    disabled: {
+      true: "",
+    },
   },
   compoundVariants: [
     {
       size: undefined,
       className: "min-h-fit h-10",
     },
+    {
+      rounded: undefined,
+      className: "rounded-md",
+    },
+    {
+      disabled: true,
+      isLoading: true,
+      className: "text-transparent",
+    },
     {
       variant: undefined,
       outline: true,