@rovula/ui 0.0.19 → 0.0.21

package/src/components/Button/Button.styles.ts

@@ -2,90 +2,246 @@ import { cva } from "class-variance-authority";
 
 export const 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/src/components/Button/Button.tsx

@@ -3,6 +3,8 @@ import { buttonVariants } from "./Button.styles";
 import { cn } from "@/utils/cn";
 import { title } from "process";
 import { ref } from "yup";
+import Loading from "../Loading/Loading";
+import { EyeIcon } from "@heroicons/react/16/solid";
 
 export type ButtonProps = {
   title?: string;
@@ -50,6 +52,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
         ref={ref}
         aria-disabled={isDisabled || undefined}
+        data-loading={isLoading || undefined}
         tabIndex={isDisabled ? -1 : 0}
         className={cn(
           buttonVariants({ size, color, variant, disabled, fullwidth }),
@@ -59,6 +62,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {
           <>
+            {isLoading && <Loading />}
             {startIcon}
             {children || title}
             {endIcon}

package/src/components/Button/Buttons.stories.tsx

@@ -27,6 +27,8 @@ type Story = StoryObj<typeof Button>;
 export const Solid = {
   args: {
     title: "Button",
+    disabled: false,
+    isLoading: false,
   },
   render: (args) => {
     const props: typeof args = {
@@ -34,7 +36,7 @@ export const Solid = {
       className: "capitalize",
     };
     return (
-      <div className="flex gap-2">
+      <div className="flex items-start gap-2">
         <Button color="primary" {...props} title="primary" />
         <Button color="secondary" {...props} title="secondary" />
         <Button color="tertiary" {...props} title="tertiary" />
@@ -51,6 +53,8 @@ export const Outline = {
   args: {
     title: "Button",
     variant: "outline",
+    disabled: false,
+    isLoading: false,
   },
   render: (args) => {
     const props: typeof args = {
@@ -75,6 +79,8 @@ export const Flat = {
   args: {
     title: "Button",
     variant: "flat",
+    disabled: false,
+    isLoading: false,
   },
   render: (args) => {
     const props: typeof args = {
@@ -99,6 +105,8 @@ export const Link = {
   args: {
     title: "Button",
     variant: "link",
+    disabled: false,
+    isLoading: false,
   },
   render: (args) => {
     const props: typeof args = {

package/src/components/Calendar/Calendar.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 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";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
@@ -22,7 +22,7 @@ function Calendar({
       captionLayout="dropdown-years"
       {...props}
       className={cn(
-        "bg-[rgb(var(--card))] text-[rgb(var(--card-foreground))] border-[rgb(var(--card))]",
+        "bg-surface text-surface-foreground border-surface",
         className
       )}
       classNames={{
@@ -30,17 +30,59 @@ function Calendar({
         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 ",
+          "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"),
+        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"),
+        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",
+        },
+      }}
     />
   );
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -14,7 +14,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     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",
+      "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,

package/src/components/Collapsible/Collapsible.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const 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",
   ],
   {
@@ -41,7 +41,10 @@ export const collapseIconVariants = cva(
 );
 
 export const collapsePanelVariants = cva(
-  ["flex flex-1 border-t", "transition ease-in-out delay-150 duration-300"],
+  [
+    "flex flex-1 border-t border-t-secondary",
+    "transition ease-in-out delay-150 duration-300",
+  ],
   {
     variants: {
       size: {
@@ -58,5 +61,5 @@ export const collapsePanelVariants = cva(
 );
 
 export const collapseContainerVariants = cva([
-  "flex flex-col border rounded overflow-hidden",
+  "flex flex-col border border-secondary rounded overflow-hidden",
 ]);

package/src/components/DatePicker/DatePicker.tsx

@@ -6,7 +6,7 @@ import { CalendarIcon } from "@heroicons/react/16/solid";
 import { Calendar } from "../Calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
 import { Modifiers } from "react-day-picker";
-import { TextInput } from "../TextInput/TextInput";
+import { InputProps, TextInput } from "../TextInput/TextInput";
 import { format } from "date-fns/format";
 
 type DatePickerProps = {
@@ -17,9 +17,14 @@ type DatePickerProps = {
     modifiers: Modifiers,
     e: React.MouseEvent | React.KeyboardEvent
   ) => void | undefined;
+  textInputProps?: Partial<InputProps>;
 };
 
-const DatePicker: FC<DatePickerProps> = ({ date, onSelect }) => {
+const DatePicker: FC<DatePickerProps> = ({
+  date,
+  onSelect,
+  textInputProps,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -36,6 +41,7 @@ const DatePicker: FC<DatePickerProps> = ({ date, onSelect }) => {
               value={date ? format(date, "dd MMM yyyy") : isOpen ? " " : ""}
               hasClearIcon={false}
               endIcon={<CalendarIcon fill="inherit" />}
+              {...textInputProps}
             />
           </div>
         </PopoverTrigger>

package/src/components/Dialog/Dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     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",
+      "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}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       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)]",
+        "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}
-      <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">
+      <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">
         <XMarkIcon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -73,7 +73,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ",
       className
     )}
     {...props}
@@ -87,7 +87,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("typography-h5 tracking-tight", className)}
+    className={cn("typography-h5 tracking-tight ", className)}
     {...props}
   />
 ));

package/src/components/Dropdown/Dropdown.styles.ts

@@ -26,7 +26,7 @@ export const 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",