@rovula/ui 0.0.19 → 0.0.21

package/dist/components/Button/Button.styles.js

@@ -1,84 +1,244 @@
 import { cva } from "class-variance-authority";
 export var buttonVariants = cva([
-    // "inline-flex items-center justify-center align-middle no-underline transition-colors ease-in-out duration-300",
-    // "font-sans appearance-none select-none rounded-sm border font-medium tracking-[.02857em]",
-    // "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
-    "gap-2 font-bold text-white hover:bg-opacity-90 active:scale-[98%]",
+    "gap-2 font-bold inline-flex items-center outline-none transition ease-in-out duration-45",
 ], {
     variants: {
         color: {
-            primary: "bg-primary border-primary text-primary hover:bg-primary-80",
-            secondary: "border-secondary bg-secondary-100 text-secondary-foreground hover:bg-secondary-120",
-            tertiary: "border-tertiary-120 bg-tertiary-120 text-tertiary-120 hover:bg-tertiary-100",
-            success: "border-success bg-success text-success  hover:bg-success-120",
-            info: "border-info bg-info text-info hover:bg-info-100",
-            warning: "border-warning bg-warning text-warning hover:bg-warning-100 hover:border-warning-100",
-            error: "border-error bg-error text-error hover:bg-error-120 hover:border-error-120",
+            primary: [
+                "bg-button-primary-solid-default border-button-primary-solid-default text-button-primary-solid-default fill-button-primary-solid-default",
+                "hover:bg-button-primary-solid-hover hover:border-button-primary-solid-hover hover:text-button-primary-solid-hover hover:fill-button-primary-solid-hover",
+                "active:bg-button-primary-solid-active active:border-button-primary-solid-active active:text-button-primary-solid-active active:fill-button-primary-solid-active",
+                "data-[loading=true]:bg-button-primary-solid-active data-[loading=true]:border-button-primary-solid-active data-[loading=true]:text-button-primary-solid-active data-[loading=true]:fill-button-primary-solid-active",
+                "disabled:bg-button-primary-solid-disabled disabled:border-button-primary-solid-disabled disabled:text-button-primary-solid-disabled disabled:fill-button-primary-solid-disabled",
+            ],
+            secondary: [
+                "bg-button-secondary-solid-default border-button-secondary-solid-default text-button-secondary-solid-default fill-button-secondary-solid-default",
+                "hover:bg-button-secondary-solid-hover hover:border-button-secondary-solid-hover hover:text-button-secondary-solid-hover hover:fill-button-secondary-solid-hover",
+                "active:bg-button-secondary-solid-active active:border-button-secondary-solid-active active:text-button-secondary-solid-active active:fill-button-secondary-solid-active",
+                "data-[loading=true]:bg-button-secondary-solid-active data-[loading=true]:border-button-secondary-solid-active data-[loading=true]:text-button-secondary-solid-active data-[loading=true]:fill-button-secondary-solid-active",
+                "disabled:bg-button-secondary-solid-disabled disabled:border-button-secondary-solid-disabled disabled:text-button-secondary-solid-disabled disabled:fill-button-secondary-solid-disabled",
+            ],
+            tertiary: [
+                "bg-button-tertiary-solid-default border-button-tertiary-solid-default text-button-tertiary-solid-default fill-button-tertiary-solid-default",
+                "hover:bg-button-tertiary-solid-hover hover:border-button-tertiary-solid-hover hover:text-button-tertiary-solid-hover hover:fill-button-tertiary-solid-hover",
+                "active:bg-button-tertiary-solid-active active:border-button-tertiary-solid-active active:text-button-tertiary-solid-active active:fill-button-tertiary-solid-active",
+                "data-[loading=true]:bg-button-tertiary-solid-active data-[loading=true]:border-button-tertiary-solid-active data-[loading=true]:text-button-tertiary-solid-active data-[loading=true]:fill-button-tertiary-solid-active",
+                "disabled:bg-button-tertiary-solid-disabled disabled:border-button-tertiary-solid-disabled disabled:text-button-tertiary-solid-disabled disabled:fill-button-tertiary-solid-disabled",
+            ],
+            success: [
+                "bg-button-success-solid-default border-button-success-solid-default text-button-success-solid-default fill-button-success-solid-default",
+                "hover:bg-button-success-solid-hover hover:border-button-success-solid-hover hover:text-button-success-solid-hover hover:fill-button-success-solid-hover",
+                "active:bg-button-success-solid-active active:border-button-success-solid-active active:text-button-success-solid-active active:fill-button-success-solid-active",
+                "data-[loading=true]:bg-button-success-solid-active data-[loading=true]:border-button-success-solid-active data-[loading=true]:text-button-success-solid-active data-[loading=true]:fill-button-success-solid-active",
+                "disabled:bg-button-success-solid-disabled disabled:border-button-success-solid-disabled disabled:text-button-success-solid-disabled disabled:fill-button-success-solid-disabled",
+            ],
+            info: [
+                "bg-button-info-solid-default border-button-info-solid-default text-button-info-solid-default fill-button-info-solid-default",
+                "hover:bg-button-info-solid-hover hover:border-button-info-solid-hover hover:text-button-info-solid-hover hover:fill-button-info-solid-hover",
+                "active:bg-button-info-solid-active active:border-button-info-solid-active active:text-button-info-solid-active active:fill-button-info-solid-active",
+                "data-[loading=true]:bg-button-info-solid-active data-[loading=true]:border-button-info-solid-active data-[loading=true]:text-button-info-solid-active data-[loading=true]:fill-button-info-solid-active",
+                "disabled:bg-button-info-solid-disabled disabled:border-button-info-solid-disabled disabled:text-button-info-solid-disabled disabled:fill-button-info-solid-disabled",
+            ],
+            warning: [
+                "bg-button-warning-solid-default border-button-warning-solid-default text-button-warning-solid-default fill-button-warning-solid-default",
+                "hover:bg-button-warning-solid-hover hover:border-button-warning-solid-hover hover:text-button-warning-solid-hover hover:fill-button-warning-solid-hover",
+                "active:bg-button-warning-solid-active active:border-button-warning-solid-active active:text-button-warning-solid-active active:fill-button-warning-solid-active",
+                "data-[loading=true]:bg-button-warning-solid-active data-[loading=true]:border-button-warning-solid-active data-[loading=true]:text-button-warning-solid-active data-[loading=true]:fill-button-warning-solid-active",
+                "disabled:bg-button-warning-solid-disabled disabled:border-button-warning-solid-disabled disabled:text-button-warning-solid-disabled disabled:fill-button-warning-solid-disabled",
+            ],
+            error: [
+                "bg-button-error-solid-default border-button-error-solid-default text-button-error-solid-default fill-button-error-solid-default",
+                "hover:bg-button-error-solid-hover hover:border-button-error-solid-hover hover:text-button-error-solid-hover hover:fill-button-error-solid-hover",
+                "active:bg-button-error-solid-active active:border-button-error-solid-active active:text-button-error-solid-active active:fill-button-error-solid-active",
+                "data-[loading=true]:bg-button-error-solid-active data-[loading=true]:border-button-error-solid-active data-[loading=true]:text-button-error-solid-active data-[loading=true]:fill-button-error-solid-active",
+                "disabled:bg-button-error-solid-disabled disabled:border-button-error-solid-disabled disabled:text-button-error-solid-disabled disabled:fill-button-error-solid-disabled",
+            ],
         },
         size: {
-            sm: "px-3 py-1 text-sm rounded-[--btn-rounded-sm]",
-            md: "px-4 py-2 text-sm rounded-[--btn-rounded-md]",
-            lg: "px-6 py-4 text-base rounded-[--btn-rounded-lg]",
+            sm: "px-md py-1 [&_svg]:size-[18px] typography-buttonMS rounded-sm gap-1",
+            md: "px-lg py-2 [&_svg]:size-5 typography-buttonL rounded-md",
+            lg: "px-xl py-4 [&_svg]:size-6 typography-buttonL rounded-md",
         },
         variant: {
             solid: "border",
-            outline: "border bg-transparent hover:bg-opacity-20",
-            flat: "bg-transparent hover:bg-opacity-20",
-            link: "bg-transparent underline underline-offset-4 hover:bg-transparent hover:text-opacity-80",
+            outline: "border bg-transparent",
+            flat: "bg-transparent",
+            link: "bg-transparent underline underline-offset-4",
         },
         disabled: {
-            true: "pointer-events-none border-transparent bg-secondary-110 text-secondary-130",
+            true: "pointer-events-none border-transparent bg-disable-solid text-disable-outline fill-disable-outline",
         },
         fullwidth: {
             true: "w-full",
         },
+        icon: {
+            sm: "h-4 w-4",
+            md: "h-5 w-5",
+            lg: "h-6 w-6",
+        },
     },
     compoundVariants: [
         {
-            variant: ["flat", "link"],
-            disabled: true,
-            class: "border-transparent bg-transparent",
+            variant: "outline",
+            color: "primary",
+            className: [
+                "bg-button-primary-outline-default border-button-primary-outline-default text-button-primary-outline-default fill-button-primary-outline-default",
+                "hover:bg-button-primary-outline-hover hover:border-button-primary-outline-hover hover:text-button-primary-outline-hover hover:fill-button-primary-outline-hover",
+                "active:bg-button-primary-outline-active active:border-button-primary-outline-active active:text-button-primary-outline-active active:fill-button-primary-outline-active",
+                "data-[loading=true]:bg-button-primary-outline-active data-[loading=true]:border-button-primary-outline-active data-[loading=true]:text-button-primary-outline-active data-[loading=true]:fill-button-primary-outline-active",
+                "disabled:bg-button-primary-outline-disabled disabled:border-button-primary-outline-disabled disabled:text-button-primary-outline-disabled disabled:fill-button-primary-outline-disabled",
+            ],
         },
         {
-            variant: "solid",
+            variant: ["flat", "link"],
             color: "primary",
-            class: "text-primary-foreground",
+            className: [
+                "bg-button-primary-flat-default border-button-primary-flat-default text-button-primary-flat-default fill-button-primary-flat-default",
+                "hover:bg-button-primary-flat-hover hover:border-button-primary-flat-hover hover:text-button-primary-flat-hover hover:fill-button-primary-flat-hover",
+                "active:bg-button-primary-flat-active active:border-button-primary-flat-active active:text-button-primary-flat-active active:fill-button-primary-flat-active",
+                "data-[loading=true]:bg-button-primary-flat-active data-[loading=true]:border-button-primary-flat-active data-[loading=true]:text-button-primary-flat-active data-[loading=true]:fill-button-primary-flat-active",
+                "disabled:bg-button-primary-flat-disabled disabled:border-button-primary-flat-disabled disabled:text-button-primary-flat-disabled disabled:fill-button-primary-flat-disabled",
+            ],
         },
         {
-            variant: "solid",
+            variant: "outline",
+            color: "secondary",
+            className: [
+                "bg-button-secondary-outline-default border-button-secondary-outline-default text-button-secondary-outline-default fill-button-secondary-outline-default",
+                "hover:bg-button-secondary-outline-hover hover:border-button-secondary-outline-hover hover:text-button-secondary-outline-hover hover:fill-button-secondary-outline-hover",
+                "active:bg-button-secondary-outline-active active:border-button-secondary-outline-active active:text-button-secondary-outline-active active:fill-button-secondary-outline-active",
+                "data-[loading=true]:bg-button-secondary-outline-active data-[loading=true]:border-button-secondary-outline-active data-[loading=true]:text-button-secondary-outline-active data-[loading=true]:fill-button-secondary-outline-active",
+                "disabled:bg-button-secondary-outline-disabled disabled:border-button-secondary-outline-disabled disabled:text-button-secondary-outline-disabled disabled:fill-button-secondary-outline-disabled",
+            ],
+        },
+        {
+            variant: ["flat", "link"],
             color: "secondary",
-            class: "text-secondary-foreground",
-        },
-        // {
-        //   variant: "solid",
-        //   disabled: true,
-        //   color: "secondary",
-        //   class: "text-white",
-        // },
+            className: [
+                "bg-button-secondary-flat-default border-button-secondary-flat-default text-button-secondary-flat-default fill-button-secondary-flat-default",
+                "hover:bg-button-secondary-flat-hover hover:border-button-secondary-flat-hover hover:text-button-secondary-flat-hover hover:fill-button-secondary-flat-hover",
+                "active:bg-button-secondary-flat-active active:border-button-secondary-flat-active active:text-button-secondary-flat-active active:fill-button-secondary-flat-active",
+                "data-[loading=true]:bg-button-secondary-flat-active data-[loading=true]:border-button-secondary-flat-active data-[loading=true]:text-button-secondary-flat-active data-[loading=true]:fill-button-secondary-flat-active",
+                "disabled:bg-button-secondary-flat-disabled disabled:border-button-secondary-flat-disabled disabled:text-button-secondary-flat-disabled disabled:fill-button-secondary-flat-disabled",
+            ],
+        },
         {
-            variant: "solid",
+            variant: "outline",
             color: "tertiary",
-            class: "text-tertiary-foreground",
+            className: [
+                "bg-button-tertiary-outline-default border-button-tertiary-outline-default text-button-tertiary-outline-default fill-button-tertiary-outline-default",
+                "hover:bg-button-tertiary-outline-hover hover:border-button-tertiary-outline-hover hover:text-button-tertiary-outline-hover hover:fill-button-tertiary-outline-hover",
+                "active:bg-button-tertiary-outline-active active:border-button-tertiary-outline-active active:text-button-tertiary-outline-active active:fill-button-tertiary-outline-active",
+                "data-[loading=true]:bg-button-tertiary-outline-active data-[loading=true]:border-button-tertiary-outline-active data-[loading=true]:text-button-tertiary-outline-active data-[loading=true]:fill-button-tertiary-outline-active",
+                "disabled:bg-button-tertiary-outline-disabled disabled:border-button-tertiary-outline-disabled disabled:text-button-tertiary-outline-disabled disabled:fill-button-tertiary-outline-disabled",
+            ],
         },
         {
-            variant: "solid",
-            color: "success",
-            class: "text-success-foreground",
+            variant: ["flat", "link"],
+            color: "tertiary",
+            className: [
+                "bg-button-tertiary-flat-default border-button-tertiary-flat-default text-button-tertiary-flat-default fill-button-tertiary-flat-default",
+                "hover:bg-button-tertiary-flat-hover hover:border-button-tertiary-flat-hover hover:text-button-tertiary-flat-hover hover:fill-button-tertiary-flat-hover",
+                "active:bg-button-tertiary-flat-active active:border-button-tertiary-flat-active active:text-button-tertiary-flat-active active:fill-button-tertiary-flat-active",
+                "data-[loading=true]:bg-button-tertiary-flat-active data-[loading=true]:border-button-tertiary-flat-active data-[loading=true]:text-button-tertiary-flat-active data-[loading=true]:fill-button-tertiary-flat-active",
+                "disabled:bg-button-tertiary-flat-disabled disabled:border-button-tertiary-flat-disabled disabled:text-button-tertiary-flat-disabled disabled:fill-button-tertiary-flat-disabled",
+            ],
         },
         {
-            variant: "solid",
+            variant: "outline",
             color: "info",
-            class: "text-info-foreground",
+            className: [
+                "bg-button-info-outline-default border-button-info-outline-default text-button-info-outline-default fill-button-info-outline-default",
+                "hover:bg-button-info-outline-hover hover:border-button-info-outline-hover hover:text-button-info-outline-hover hover:fill-button-info-outline-hover",
+                "active:bg-button-info-outline-active active:border-button-info-outline-active active:text-button-info-outline-active active:fill-button-info-outline-active",
+                "data-[loading=true]:bg-button-info-outline-active data-[loading=true]:border-button-info-outline-active data-[loading=true]:text-button-info-outline-active data-[loading=true]:fill-button-info-outline-active",
+                "disabled:bg-button-info-outline-disabled disabled:border-button-info-outline-disabled disabled:text-button-info-outline-disabled disabled:fill-button-info-outline-disabled",
+            ],
         },
         {
-            variant: "solid",
+            variant: ["flat", "link"],
+            color: "info",
+            className: [
+                "bg-button-info-flat-default border-button-info-flat-default text-button-info-flat-default fill-button-info-flat-default",
+                "hover:bg-button-info-flat-hover hover:border-button-info-flat-hover hover:text-button-info-flat-hover hover:fill-button-info-flat-hover",
+                "active:bg-button-info-flat-active active:border-button-info-flat-active active:text-button-info-flat-active active:fill-button-info-flat-active",
+                "data-[loading=true]:bg-button-info-flat-active data-[loading=true]:border-button-info-flat-active data-[loading=true]:text-button-info-flat-active data-[loading=true]:fill-button-info-flat-active",
+                "disabled:bg-button-info-flat-disabled disabled:border-button-info-flat-disabled disabled:text-button-info-flat-disabled disabled:fill-button-info-flat-disabled",
+            ],
+        },
+        {
+            variant: "outline",
+            color: "success",
+            className: [
+                "bg-button-success-outline-default border-button-success-outline-default text-button-success-outline-default fill-button-success-outline-default",
+                "hover:bg-button-success-outline-hover hover:border-button-success-outline-hover hover:text-button-success-outline-hover hover:fill-button-success-outline-hover",
+                "active:bg-button-success-outline-active active:border-button-success-outline-active active:text-button-success-outline-active active:fill-button-success-outline-active",
+                "data-[loading=true]:bg-button-success-outline-active data-[loading=true]:border-button-success-outline-active data-[loading=true]:text-button-success-outline-active data-[loading=true]:fill-button-success-outline-active",
+                "disabled:bg-button-success-outline-disabled disabled:border-button-success-outline-disabled disabled:text-button-success-outline-disabled disabled:fill-button-success-outline-disabled",
+            ],
+        },
+        {
+            variant: ["flat", "link"],
+            color: "success",
+            className: [
+                "bg-button-success-flat-default border-button-success-flat-default text-button-success-flat-default fill-button-success-flat-default",
+                "hover:bg-button-success-flat-hover hover:border-button-success-flat-hover hover:text-button-success-flat-hover hover:fill-button-success-flat-hover",
+                "active:bg-button-success-flat-active active:border-button-success-flat-active active:text-button-success-flat-active active:fill-button-success-flat-active",
+                "data-[loading=true]:bg-button-success-flat-active data-[loading=true]:border-button-success-flat-active data-[loading=true]:text-button-success-flat-active data-[loading=true]:fill-button-success-flat-active",
+                "disabled:bg-button-success-flat-disabled disabled:border-button-success-flat-disabled disabled:text-button-success-flat-disabled disabled:fill-button-success-flat-disabled",
+            ],
+        },
+        {
+            variant: "outline",
             color: "warning",
-            class: "text-warning-foreground",
+            className: [
+                "bg-button-warning-outline-default border-button-warning-outline-default text-button-warning-outline-default fill-button-warning-outline-default",
+                "hover:bg-button-warning-outline-hover hover:border-button-warning-outline-hover hover:text-button-warning-outline-hover hover:fill-button-warning-outline-hover",
+                "active:bg-button-warning-outline-active active:border-button-warning-outline-active active:text-button-warning-outline-active active:fill-button-warning-outline-active",
+                "data-[loading=true]:bg-button-warning-outline-active data-[loading=true]:border-button-warning-outline-active data-[loading=true]:text-button-warning-outline-active data-[loading=true]:fill-button-warning-outline-active",
+                "disabled:bg-button-warning-outline-disabled disabled:border-button-warning-outline-disabled disabled:text-button-warning-outline-disabled disabled:fill-button-warning-outline-disabled",
+            ],
         },
         {
-            variant: "solid",
+            variant: ["flat", "link"],
+            color: "warning",
+            className: [
+                "bg-button-warning-flat-default border-button-warning-flat-default text-button-warning-flat-default fill-button-warning-flat-default",
+                "hover:bg-button-warning-flat-hover hover:border-button-warning-flat-hover hover:text-button-warning-flat-hover hover:fill-button-warning-flat-hover",
+                "active:bg-button-warning-flat-active active:border-button-warning-flat-active active:text-button-warning-flat-active active:fill-button-warning-flat-active",
+                "data-[loading=true]:bg-button-warning-flat-active data-[loading=true]:border-button-warning-flat-active data-[loading=true]:text-button-warning-flat-active data-[loading=true]:fill-button-warning-flat-active",
+                "disabled:bg-button-warning-flat-disabled disabled:border-button-warning-flat-disabled disabled:text-button-warning-flat-disabled disabled:fill-button-warning-flat-disabled",
+            ],
+        },
+        {
+            variant: "outline",
+            color: "error",
+            className: [
+                "bg-button-error-outline-default border-button-error-outline-default text-button-error-outline-default fill-button-error-outline-default",
+                "hover:bg-button-error-outline-hover hover:border-button-error-outline-hover hover:text-button-error-outline-hover hover:fill-button-error-outline-hover",
+                "active:bg-button-error-outline-active active:border-button-error-outline-active active:text-button-error-outline-active active:fill-button-error-outline-active",
+                "data-[loading=true]:bg-button-error-outline-active data-[loading=true]:border-button-error-outline-active data-[loading=true]:text-button-error-outline-active data-[loading=true]:fill-button-error-outline-active",
+                "disabled:bg-button-error-outline-disabled disabled:border-button-error-outline-disabled disabled:text-button-error-outline-disabled disabled:fill-button-error-outline-disabled",
+            ],
+        },
+        {
+            variant: ["flat", "link"],
             color: "error",
-            class: "text-error-foreground",
+            className: [
+                "bg-button-error-flat-default border-button-error-flat-default text-button-error-flat-default fill-button-error-flat-default",
+                "hover:bg-button-error-flat-hover hover:border-button-error-flat-hover hover:text-button-error-flat-hover hover:fill-button-error-flat-hover",
+                "active:bg-button-error-flat-active active:border-button-error-flat-active active:text-button-error-flat-active active:fill-button-error-flat-active",
+                "data-[loading=true]:bg-button-error-flat-active data-[loading=true]:border-button-error-flat-active data-[loading=true]:text-button-error-flat-active data-[loading=true]:fill-button-error-flat-active",
+                "disabled:bg-button-error-flat-disabled disabled:border-button-error-flat-disabled disabled:text-button-error-flat-disabled disabled:fill-button-error-flat-disabled",
+            ],
+        },
+        // --- Disabled --
+        {
+            variant: ["outline", "flat", "link"],
+            disabled: true,
+            className: [
+                "bg-transparent border-disabled-outline text-disable-outline fill-disable-outline",
+            ],
         },
     ],
     defaultVariants: {

package/dist/components/Button/Buttons.stories.js

@@ -28,16 +28,20 @@ export default meta;
 export var Solid = {
     args: {
         title: "Button",
+        disabled: false,
+        isLoading: false,
     },
     render: function (args) {
         var props = __assign(__assign({}, args), { className: "capitalize" });
-        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
+        return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
     },
 };
 export var Outline = {
     args: {
         title: "Button",
         variant: "outline",
+        disabled: false,
+        isLoading: false,
     },
     render: function (args) {
         var props = __assign(__assign({}, args), { className: "capitalize" });
@@ -48,6 +52,8 @@ export var Flat = {
     args: {
         title: "Button",
         variant: "flat",
+        disabled: false,
+        isLoading: false,
     },
     render: function (args) {
         var props = __assign(__assign({}, args), { className: "capitalize" });
@@ -58,6 +64,8 @@ export var Link = {
     args: {
         title: "Button",
         variant: "link",
+        disabled: false,
+        isLoading: false,
     },
     render: function (args) {
         var props = __assign(__assign({}, args), { className: "capitalize" });

package/dist/components/Calendar/Calendar.js

@@ -23,12 +23,49 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
-import "react-day-picker/dist/style.css";
+// import "react-day-picker/dist/style.css";
 import { cn } from "@/utils/cn";
 function Calendar(_a) {
     var className = _a.className, classNames = _a.classNames, _b = _a.showOutsideDays, showOutsideDays = _b === void 0 ? true : _b, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
     var defaultClassNames = getDefaultClassNames();
-    return (_jsx(DayPicker, __assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-[rgb(var(--card))] text-[rgb(var(--card-foreground))] border-[rgb(var(--card))]", className), classNames: __assign(__assign(__assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9 "), day: "typography-subtitile1 ", today: "text-bold rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary text-primary-foreground rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4 "), caption_label: cn(defaultClassNames.caption_label, "gap-2") }), classNames) })));
+    return (_jsx(DayPicker, __assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-surface text-surface-foreground border-surface", className), classNames: __assign(__assign(__assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9 "), day: "typography-subtitile1 ", today: "text-bold text-surface-foreground [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary !text-primary-foreground rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6 absolute flex right-0"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4"), caption_label: cn(defaultClassNames.caption_label, "gap-2 flex items-center"), months: "flex flex-col relative" }), classNames), styles: {
+            caption_label: {
+                zIndex: 1,
+                position: "relative",
+                display: "inline-flex",
+                alignItems: "center",
+                whiteSpace: "nowrap",
+                border: 0,
+            },
+            dropdown: {
+                zIndex: 2,
+                opacity: 0,
+                WebkitAppearance: "none",
+                MozAppearance: "none",
+                appearance: "none",
+                position: "absolute",
+                insetBlockStart: 0,
+                insetBlockEnd: 0,
+                insetInlineStart: 0,
+                width: "100%",
+                margin: 0,
+                padding: 0,
+                cursor: "inherit",
+                border: "none",
+                lineHeight: "inherit",
+            },
+            dropdowns: {
+                position: "relative",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+            },
+            dropdown_root: {
+                position: "relative",
+                display: "inline-flex",
+                alignItems: "center",
+            },
+        } })));
 }
 Calendar.displayName = "Calendar";
 export default Calendar;

package/dist/components/Checkbox/Checkbox.js

@@ -28,7 +28,7 @@ import { CheckIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 var Checkbox = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, __assign({ ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary-30 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-socondary-120 disabled:border-socondary-110", {
+    return (_jsx(CheckboxPrimitive.Root, __assign({ ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary-30 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-state-disable-solid", {
             "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground": !props.disabled,
             "bg-grey2-300": props.checked && props.disabled,
         }, className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) })));

package/dist/components/Collapsible/Collapsible.styles.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 export var collapseButtonVariants = cva([
-    "flex flex-1 bg-gray-100 hover:bg-gray-200",
+    "flex flex-1 bg-secondary-default hover:bg-secondary-hover text-secondary-foreground",
     "focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75",
 ], {
     variants: {
@@ -30,7 +30,10 @@ export var collapseIconVariants = cva(["transition-all flex content-center justi
         isExpand: false,
     },
 });
-export var collapsePanelVariants = cva(["flex flex-1 border-t", "transition ease-in-out delay-150 duration-300"], {
+export var collapsePanelVariants = cva([
+    "flex flex-1 border-t border-t-secondary",
+    "transition ease-in-out delay-150 duration-300",
+], {
     variants: {
         size: {
             sm: "py-2 px-3",
@@ -43,5 +46,5 @@ export var collapsePanelVariants = cva(["flex flex-1 border-t", "transition ease
     },
 });
 export var collapseContainerVariants = cva([
-    "flex flex-col border rounded overflow-hidden",
+    "flex flex-col border border-secondary rounded overflow-hidden",
 ]);

package/dist/components/DatePicker/DatePicker.js

@@ -1,4 +1,15 @@
 "use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { CalendarIcon } from "@heroicons/react/16/solid";
@@ -7,9 +18,9 @@ import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
 import { TextInput } from "../TextInput/TextInput";
 import { format } from "date-fns/format";
 var DatePicker = function (_a) {
-    var date = _a.date, onSelect = _a.onSelect;
+    var date = _a.date, onSelect = _a.onSelect, textInputProps = _a.textInputProps;
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    return (_jsx("div", { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, { fullwidth: true, id: "2", readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit" }) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, { mode: "single", selected: date, onSelect: function () {
+    return (_jsx("div", { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, __assign({ fullwidth: true, id: "2", readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit" }) }, textInputProps)) }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, { mode: "single", selected: date, onSelect: function () {
                             var value = [];
                             for (var _i = 0; _i < arguments.length; _i++) {
                                 value[_i] = arguments[_i];

package/dist/components/Dialog/Dialog.js

@@ -32,12 +32,12 @@ var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
 var DialogOverlay = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Overlay, __assign({ ref: ref, className: cn("fixed inset-0 z-50 bg-popup-overlay  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props)));
+    return (_jsx(DialogPrimitive.Overlay, __assign({ ref: ref, className: cn("fixed inset-0 z-50 bg-base-popup-curtain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props)));
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed text-textcolor-grey-dark left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-[var(--popup-rounded)]", className) }, props, { children: [children, _jsxs(DialogPrimitive.Close, { className: "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", children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base-popup bg-base-popup p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md", className) }, props, { children: [children, _jsxs(DialogPrimitive.Close, { className: "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-primary data-[state=open]:text-primary-foreground", children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = function (_a) {
@@ -47,12 +47,12 @@ var DialogHeader = function (_a) {
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
+    return (_jsx("div", __assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ", className) }, props)));
 };
 DialogFooter.displayName = "DialogFooter";
 var DialogTitle = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Title, __assign({ ref: ref, className: cn("typography-h5 tracking-tight", className) }, props)));
+    return (_jsx(DialogPrimitive.Title, __assign({ ref: ref, className: cn("typography-h5 tracking-tight ", className) }, props)));
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 var DialogDescription = React.forwardRef(function (_a, ref) {

package/dist/components/Dropdown/Dropdown.js

@@ -26,11 +26,11 @@ import TextInput from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./Dropdown.styles";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 var Dropdown = forwardRef(function (_a, ref) {
-    var id = _a.id, options = _a.options, value = _a.value, label = _a.label, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.rounded, rounded = _c === void 0 ? "normal" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, helperText = _a.helperText, errorMessage = _a.errorMessage, _e = _a.fullwidth, fullwidth = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.filterMode, filterMode = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? true : _j, onChangeText = _a.onChangeText, onSelect = _a.onSelect, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect"]);
+    var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, label = _a.label, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.rounded, rounded = _d === void 0 ? "normal" : _d, _e = _a.variant, variant = _e === void 0 ? "outline" : _e, helperText = _a.helperText, errorMessage = _a.errorMessage, _f = _a.fullwidth, fullwidth = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.filterMode, filterMode = _j === void 0 ? false : _j, _k = _a.required, required = _k === void 0 ? true : _k, onChangeText = _a.onChangeText, onSelect = _a.onSelect, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect"]);
     var _id = id || "".concat(label, "-select");
-    var _k = useState(false), isFocused = _k[0], setIsFocused = _k[1];
-    var _l = useState(null), selectedOption = _l[0], setSelectedOption = _l[1];
-    var _m = useState(""), textValue = _m[0], setTextValue = _m[1];
+    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
+    var _m = useState(null), selectedOption = _m[0], setSelectedOption = _m[1];
+    var _o = useState(""), textValue = _o[0], setTextValue = _o[1];
     var keyCode = useRef("");
     useEffect(function () {
         if (value && !selectedOption) {
@@ -53,7 +53,7 @@ var Dropdown = forwardRef(function (_a, ref) {
                 ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textValue === null || textValue === void 0 ? void 0 : textValue.toLowerCase()));
         });
     }, [options, filterMode, textValue]);
-    var renderOptions = function () { return (_jsxs("ul", { className: "absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-md z-10 max-h-60 overflow-y-auto", children: [optionsFiltered.map(function (option) {
+    var renderOptions = function () { return (_jsxs("ul", { className: "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", children: [optionsFiltered.map(function (option) {
                 if (option.renderLabel) {
                     return (_jsx(Fragment, { children: option.renderLabel({
                             value: option.value,
@@ -62,7 +62,9 @@ var Dropdown = forwardRef(function (_a, ref) {
                             className: "px-4 py-2 hover:bg-gray-100 cursor-pointer ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""),
                         }) }, option.value));
                 }
-                return (_jsx("li", { onMouseDown: function () { return handleOptionClick(option); }, className: "px-4 py-2 hover:bg-gray-100 cursor-pointer ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""), children: option.label }, option.value));
+                return (_jsx("li", { onMouseDown: function () { return handleOptionClick(option); }, className: "px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
+                        ? "bg-base-popup-highligh"
+                        : ""), children: option.label }, option.value));
             }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] })); };
     var handleOnFocus = useCallback(function (e) {
         var _a;
@@ -100,6 +102,6 @@ var Dropdown = forwardRef(function (_a, ref) {
         keyCode.current = e.code;
         (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
-    return (_jsxs("div", { className: "relative ".concat(fullwidth ? "w-full" : ""), children: [_jsx(TextInput, __assign({}, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, hasClearIcon: false, size: size, className: customInputVariant({ size: size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown, endIcon: _jsx("div", { className: iconWrapperVariant({ size: size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size: size, isFocus: isFocused }) }) }) })), isFocused && renderOptions()] }));
+    return (_jsxs("div", { className: "relative ".concat(fullwidth ? "w-full" : ""), children: [_jsx(TextInput, __assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size: size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size: size, isFocus: isFocused }) }) }) }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size: size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
 });
 export default Dropdown;

package/dist/components/Dropdown/Dropdown.styles.js

@@ -20,7 +20,7 @@ export var dropdownIconVariant = cva(["transition-all"], {
         },
         disabled: {
             true: "fill-input-text-disabled",
-            false: "fill-input-text",
+            false: "fill-inherit",
         },
         isFocus: {
             true: "fill-input-text-active rotate-180",

package/dist/components/Input/Input.js

@@ -26,7 +26,14 @@ import { cn } from "@/utils/cn";
 import { inputVariants } from "./Input.styles";
 var Input = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.type, type = _b === void 0 ? "text" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, _e = _a.fullwidth, fullwidth = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.hiddenPlaceholder, hiddenPlaceholder = _j === void 0 ? false : _j, props = __rest(_a, ["className", "type", "size", "variant", "fullwidth", "disabled", "error", "required", "hiddenPlaceholder"]);
-    return (_jsx("input", __assign({ type: type, className: cn(inputVariants({ size: size, variant: variant, fullwidth: fullwidth, error: error, hiddenPlaceholder: hiddenPlaceholder }), className), ref: ref, disabled: disabled }, props)));
+    return (_jsx("input", __assign({ type: type, className: cn(inputVariants({
+            size: size,
+            variant: variant,
+            fullwidth: fullwidth,
+            error: error,
+            hiddenPlaceholder: hiddenPlaceholder,
+            disabled: disabled,
+        }), className), ref: ref, disabled: disabled }, props)));
 });
 Input.displayName = "Input";
 export { Input };

package/dist/components/Input/Input.stories.js

@@ -19,13 +19,14 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full ", children: _jsx(Story, {}) })); },
     ],
 };
 export default meta;
 export var Default = {
     args: {
-    // fullwidth: true,
+    // disabled: true,
+    // value: "Aaaaa",
     },
     render: function (args) {
         console.log("args ", args);