@rovula/ui 0.0.17 → 0.0.19

package/dist/esm/types/components/Calendar/index.d.ts

@@ -0,0 +1 @@
+export { default as Calendar } from "./Calendar";

package/dist/esm/types/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from "react";
+import { Modifiers } from "react-day-picker";
+type DatePickerProps = {
+    date: Date | undefined;
+    onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;
+};
+declare const DatePicker: FC<DatePickerProps>;
+export default DatePicker;

package/dist/esm/types/components/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.FC<{
+        date: Date | undefined;
+        onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
+    }>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        date: Date | undefined;
+        onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/components/Popover/Popover.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/esm/types/components/Popover/Popover.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.FC<import("@radix-ui/react-popover").PopoverProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        children?: React.ReactNode;
+        open?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
+        onOpenChange?: ((open: boolean) => void) | undefined;
+        modal?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/components/TextInput/TextInput.stories.d.ts

@@ -349,3 +349,10 @@ export declare const CustomLabel: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FuctionInput: {
+    args: {
+        label: string;
+        disabled: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/components/TextInput/TextInput.styles.d.ts

@@ -6,6 +6,7 @@ export declare const inputVariant: (props?: ({
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
     hasClearIcon?: boolean | null | undefined;
+    rightSectionIcon?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const labelVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -23,3 +24,7 @@ export declare const iconWrapperVariant: (props?: ({
 export declare const iconVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const sectionIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "none" | "normal" | "full" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/esm/types/index.d.ts

@@ -11,6 +11,9 @@ export { Navbar } from "./components/Navbar";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
+export { Calendar } from "./components/Calendar";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { Popover, PopoverTrigger, PopoverContent, } from "./components/Popover/Popover";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";

package/dist/index.d.ts

@@ -5,6 +5,8 @@ import * as class_variance_authority_dist_types from 'class-variance-authority/d
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DayPicker, Modifiers } from 'react-day-picker';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -247,6 +249,22 @@ interface CollapsibleProps {
 }
 declare const Collapsible: CollapsibleComponent;
 
+type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+
+type DatePickerProps = {
+    date: Date | undefined;
+    onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React__default.MouseEvent | React__default.KeyboardEvent) => void | undefined;
+};
+declare const DatePicker: FC<DatePickerProps>;
+
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
 declare const Table: React.ForwardRefExoticComponent<{
     rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
 } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
@@ -313,4 +331,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Checkbox, Collapsible, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Input, type InputProps, Label, Navbar, type NavbarProps, type Options, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Input, type InputProps, Label, Navbar, type NavbarProps, type Options, Popover, PopoverContent, PopoverTrigger, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };

package/dist/index.js

@@ -13,6 +13,9 @@ export { Navbar } from "./components/Navbar";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
+export { Calendar } from "./components/Calendar";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { Popover, PopoverTrigger, PopoverContent, } from "./components/Popover/Popover";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";

package/dist/src/theme/global.css

@@ -692,6 +692,9 @@ video {
   --text-grey-medium: 117 121 128;
   --text-grey-light: 164 169 178;
   --text-white: 255 255 255;
+  /* Other */
+  --other-bg: var(--white);
+  --other-bg-2: var(--white);
   /* Other/Popup */
   --popup-background: 249 251 255;
   /* Other/Popup Curtain */
@@ -706,16 +709,16 @@ video {
   --navbar-gap: 16px;
   /* TODO for shadcn, wait for refactor */
   /* --background: 0 0% 100%; */
-  --background: 220 100% 99%;
-  --foreground: 222.2 47.4% 11.2%;
+  --background: var(--brand-background);
+  --foreground: var(--text-white:);
   --muted: 210 40% 96.1%;
   --muted-foreground: 215.4 16.3% 46.9%;
   --popover: 0 0% 100%;
   --popover-foreground: 222.2 47.4% 11.2%;
   --border: 214.3 31.8% 91.4%;
   --input: 214.3 31.8% 91.4%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 47.4% 11.2%;
+  --card: var(--white);
+  --card-foreground: var(--primary);
   --primary: var(--primary-default);
   --secondary: var(--secondary-default);
   --accent: 210 40% 96.1%;
@@ -731,8 +734,10 @@ video {
 }
 
 body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--background) / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(var(--foreground) / var(--tw-text-opacity));
 }
 
 *, ::before, ::after {
@@ -1032,6 +1037,11 @@ body {
   aspect-ratio: 1 / 1;
 }
 
+.size-14 {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+
 .size-2 {
   width: 0.5rem;
   height: 0.5rem;
@@ -1067,11 +1077,26 @@ body {
   height: 1.75rem;
 }
 
+.size-9 {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
 .size-\[14px\] {
   width: 14px;
   height: 14px;
 }
 
+.size-\[30px\] {
+  width: 30px;
+  height: 30px;
+}
+
+.size-\[38px\] {
+  width: 38px;
+  height: 38px;
+}
+
 .size-full {
   width: 100%;
   height: 100%;
@@ -1230,6 +1255,10 @@ body {
   width: 100%;
 }
 
+.min-w-72 {
+  min-width: 18rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -1473,6 +1502,21 @@ body {
   border-radius: 0.75rem;
 }
 
+.rounded-r-full {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+
+.rounded-r-none {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.rounded-r-xl {
+  border-top-right-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1493,6 +1537,10 @@ body {
   border-bottom-width: 3px;
 }
 
+.border-l {
+  border-left-width: 1px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1501,6 +1549,14 @@ body {
   border-style: solid;
 }
 
+.border-none {
+  border-style: none;
+}
+
+.border-\[rgb\(var\(--card\)\)\] {
+  border-color: rgb(var(--card));
+}
+
 .border-error {
   --tw-border-opacity: 1;
   border-color: rgb(var(--error-100) / var(--tw-border-opacity));
@@ -1586,12 +1642,26 @@ body {
   border-bottom-color: rgb(var(--navbar-border-color));
 }
 
+.border-l-input-stroke {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(var(--input-default-stroke-color) / var(--tw-border-opacity));
+}
+
+.bg-\[rgb\(var\(--card\)\)\] {
+  background-color: rgb(var(--card));
+}
+
 .bg-\[rgb\(var\(--navbar-bg-color\)\)\] {
   background-color: rgb(var(--navbar-bg-color));
 }
 
+.bg-\[rgb\(var\(--other-bg-2\)\)\] {
+  background-color: rgb(var(--other-bg-2));
+}
+
 .bg-background {
-  background-color: hsl(var(--background));
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--background) / var(--tw-bg-opacity));
 }
 
 .bg-black {
@@ -1726,6 +1796,10 @@ body {
   fill: rgb(var(--input-disabled-text-color) / 1);
 }
 
+.fill-primary {
+  fill: rgb(var(--primary-default) / 1);
+}
+
 .fill-red-500 {
   fill: #ef4444;
 }
@@ -1746,6 +1820,10 @@ body {
   fill: rgb(var(--text-default-medium) / 1);
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1758,6 +1836,10 @@ body {
   padding: 5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1852,14 +1934,26 @@ body {
   padding-inline-end: 30px;
 }
 
+.pe-\[38px\] {
+  padding-inline-end: 38px;
+}
+
 .pe-\[40px\] {
   padding-inline-end: 40px;
 }
 
+.pe-\[46px\] {
+  padding-inline-end: 46px;
+}
+
 .pe-\[48px\] {
   padding-inline-end: 48px;
 }
 
+.pe-\[72px\] {
+  padding-inline-end: 72px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2045,6 +2139,10 @@ body {
   letter-spacing: -0.025em;
 }
 
+.text-\[rgb\(var\(--card-foreground\)\)\] {
+  color: rgb(var(--card-foreground));
+}
+
 .text-\[rgb\(var\(--navbar-text-color\)\)\] {
   color: rgb(var(--navbar-text-color));
 }
@@ -2073,6 +2171,11 @@ body {
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .text-grey2-500\/\[\.32\] {
   color: rgb(var(--grey2-500) / .32);
 }
@@ -2204,6 +2307,10 @@ body {
   text-underline-offset: 4px;
 }
 
+.caret-primary {
+  caret-color: rgb(var(--primary-default) / 1);
+}
+
 .opacity-70 {
   opacity: 0.7;
 }
@@ -2261,7 +2368,7 @@ body {
 }
 
 .ring-offset-background {
-  --tw-ring-offset-color: hsl(var(--background));
+  --tw-ring-offset-color: rgb(var(--background) / 1);
 }
 
 .blur {
@@ -2757,6 +2864,10 @@ body {
   font-weight: 400;
 }
 
+.peer:hover ~ .peer-hover\:fill-input-text-active {
+  fill: rgb(var(--input-active-text-color) / 1);
+}
+
 .peer:focus ~ .peer-focus\:-top-1 {
   top: -0.25rem;
 }
@@ -2769,6 +2880,11 @@ body {
   display: flex;
 }
 
+.peer:focus ~ .peer-focus\:border-l-input-stroke-active {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(var(--input-active-stroke-color) / var(--tw-border-opacity));
+}
+
 .peer:focus ~ .peer-focus\:bg-input-label-background {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
@@ -2779,6 +2895,10 @@ body {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
+.peer:focus ~ .peer-focus\:fill-input-text-active {
+  fill: rgb(var(--input-active-text-color) / 1);
+}
+
 .peer:focus ~ .peer-focus\:text-input-text-active {
   --tw-text-opacity: 1;
   color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));
@@ -2800,6 +2920,11 @@ body {
   cursor: not-allowed;
 }
 
+.peer:disabled ~ .peer-disabled\:border-l-input-stroke-disabled {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(var(--input-disabled-stroke-color) / var(--tw-border-opacity));
+}
+
 .peer:disabled ~ .peer-disabled\:opacity-70 {
   opacity: 0.7;
 }
@@ -2880,6 +3005,19 @@ body {
   border-bottom-width: 0px;
 }
 
+.\[\&_button\]\:\!border button {
+  border-width: 1px !important;
+}
+
+.\[\&_button\]\:\!border-solid button {
+  border-style: solid !important;
+}
+
+.\[\&_button\]\:\!border-primary button {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(var(--primary-default) / var(--tw-border-opacity)) !important;
+}
+
 .\[\&_tr\:last-child\]\:border-0 tr:last-child {
   border-width: 0px;
 }

package/dist/theme/global.css

@@ -176,6 +176,10 @@
     --text-grey-light: 164 169 178;
     --text-white: 255 255 255;
 
+    /* Other */
+    --other-bg: var(--white);
+    --other-bg-2: var(--white);
+
     /* Other/Popup */
     --popup-background: 249 251 255;
     /* Other/Popup Curtain */
@@ -192,8 +196,8 @@
   
     /* TODO for shadcn, wait for refactor */
     /* --background: 0 0% 100%; */
-    --background: 220 100% 99%;
-    --foreground: 222.2 47.4% 11.2%;
+    --background: var(--brand-background);
+    --foreground: var(--text-white:);
  
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
@@ -204,8 +208,8 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
  
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+    --card: var(--white);
+    --card-foreground: var(--primary);
  
     --primary: var(--primary-default);
  

package/dist/theme/presets/colors.js

@@ -7,8 +7,8 @@ module.exports = {
       colors: {
         border: "hsl(var(--border))",
         ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        background: "rgb(var(--background) / <alpha-value>)",
+        foreground: "rgb(var(--foreground) / <alpha-value>)",
         // Palette colors
         themes: {
           50: "rgb(var(--themes-50) / <alpha-value>)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -73,15 +73,18 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-table": "^8.17.3",
     "@tanstack/react-virtual": "^3.5.0",
     "@types/react": "^18.3.2",
     "axios": "^1.6.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "react": "^17.0.0 || ^18.0.0",
+    "react-day-picker": "^9.0.7",
     "react-dom": "^17.0.0 || ^18.0.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

package/src/components/Calendar/Calendar.stories.tsx

@@ -0,0 +1,49 @@
+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";
+
+const meta = {
+  title: "Components/Calendar",
+  component: Calendar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    const [date, setDate] = React.useState<Date | undefined>(new Date());
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <ThemeToggle />
+        <Button>Text</Button>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="rounded-md border"
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+
+import "react-day-picker/dist/style.css";
+import { cn } from "@/utils/cn";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      captionLayout="dropdown-years"
+      {...props}
+      className={cn(
+        "bg-[rgb(var(--card))] text-[rgb(var(--card-foreground))] border-[rgb(var(--card))]",
+        className
+      )}
+      classNames={{
+        ...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,
+      }}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export default Calendar;

package/src/components/Calendar/index.ts

@@ -0,0 +1 @@
+export { default as Calendar } from "./Calendar";