@rovula/ui 0.0.18 → 0.0.20

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.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import Calendar from "./Calendar";
+import ThemeToggle from "../ThemeToggle";
+import Button from "../Button/Button";
 
 // import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
 
@@ -33,6 +35,8 @@ export const Default = {
 
     return (
       <div className="flex flex-row gap-4 w-full">
+        <ThemeToggle />
+        <Button>Text</Button>
         <Calendar
           mode="single"
           selected={date}

package/src/components/Calendar/Calendar.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import * as React from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid";
-import { DayPicker } from "react-day-picker";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
 
+// import "react-day-picker/dist/style.css";
 import { cn } from "@/utils/cn";
-import { buttonVariants } from "../Button/Button.styles";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
@@ -15,49 +14,75 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames();
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      captionLayout="dropdown-years"
+      {...props}
+      className={cn(
+        "bg-surface text-surface-foreground border-surface",
+        className
+      )}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "flex items-center justify-center size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ...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"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          buttonVariants({ variant: "flat" }),
-          "size-7 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        months: "flex flex-col relative",
         ...classNames,
       }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+      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",
+        },
       }}
-      {...props}
     />
   );
 }

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

@@ -4,21 +4,27 @@ import React, { FC, useState } from "react";
 import { CalendarIcon } from "@heroicons/react/16/solid";
 
 import { Calendar } from "../Calendar";
-import Button from "../Button/Button";
-import { cn } from "@/utils/cn";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
-import { SelectSingleEventHandler } from "react-day-picker";
-import { TextInput } from "../TextInput/TextInput";
+import { Modifiers } from "react-day-picker";
+import { InputProps, TextInput } from "../TextInput/TextInput";
 import { format } from "date-fns/format";
 
 type DatePickerProps = {
   date: Date | undefined;
-  onSelect: SelectSingleEventHandler;
+  onSelect: (
+    selected: Date | undefined,
+    triggerDate: Date,
+    modifiers: Modifiers,
+    e: React.MouseEvent | React.KeyboardEvent
+  ) => void | undefined;
+  textInputProps?: Partial<InputProps>;
 };
 
-CalendarIcon;
-
-const DatePicker: FC<DatePickerProps> = ({ date, onSelect }) => {
+const DatePicker: FC<DatePickerProps> = ({
+  date,
+  onSelect,
+  textInputProps,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -35,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>
@@ -46,7 +53,6 @@ const DatePicker: FC<DatePickerProps> = ({ date, onSelect }) => {
               onSelect?.(...value);
               setIsOpen(false);
             }}
-            initialFocus
           />
         </PopoverContent>
       </Popover>