@rovula/ui 0.0.16 → 0.0.18

package/dist/cjs/types/components/AlertDialog/Alert.stories.d.ts

@@ -9,8 +9,8 @@ declare const meta: {
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         children?: React.ReactNode;
         open?: boolean | undefined;
-        defaultOpen?: boolean | undefined;
         onOpenChange?: ((open: boolean) => void) | undefined;
+        defaultOpen?: boolean | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/cjs/types/components/Calendar/Calendar.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export default Calendar;

package/dist/cjs/types/components/Calendar/Calendar.stories.d.ts

@@ -0,0 +1,272 @@
+import React from "react";
+import Calendar from "./Calendar";
+declare const meta: {
+    title: string;
+    component: typeof Calendar;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        mode?: "default" | undefined;
+        className?: string | undefined;
+        classNames?: Partial<import("react-day-picker").StyledElement<string>> | undefined;
+        modifiersClassNames?: import("react-day-picker").ModifiersClassNames | undefined;
+        style?: React.CSSProperties | undefined;
+        styles?: Partial<Omit<import("react-day-picker").StyledElement<React.CSSProperties>, import("react-day-picker").InternalModifiersElement>> | undefined;
+        modifiersStyles?: import("react-day-picker").ModifiersStyles | undefined;
+        id?: string | undefined;
+        defaultMonth?: Date | undefined;
+        month?: Date | undefined;
+        onMonthChange?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        numberOfMonths?: number | undefined;
+        fromDate?: Date | undefined;
+        toDate?: Date | undefined;
+        fromMonth?: Date | undefined;
+        toMonth?: Date | undefined;
+        fromYear?: number | undefined;
+        toYear?: number | undefined;
+        disableNavigation?: boolean | undefined;
+        pagedNavigation?: boolean | undefined;
+        reverseMonths?: boolean | undefined;
+        captionLayout?: import("react-day-picker").CaptionLayout | undefined;
+        fixedWeeks?: boolean | undefined;
+        hideHead?: boolean | undefined;
+        showOutsideDays?: boolean | undefined;
+        showWeekNumber?: boolean | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | undefined;
+        firstWeekContainsDate?: 1 | 4 | undefined;
+        ISOWeek?: boolean | undefined;
+        components?: import("react-day-picker").CustomComponents | undefined;
+        footer?: React.ReactNode;
+        initialFocus?: boolean | undefined;
+        disabled?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+        hidden?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+        selected?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+        today?: Date | undefined;
+        modifiers?: import("react-day-picker").DayModifiers | undefined;
+        locale?: import("date-fns").Locale | undefined;
+        labels?: Partial<import("react-day-picker").Labels> | undefined;
+        formatters?: Partial<import("react-day-picker").Formatters> | undefined;
+        dir?: string | undefined;
+        nonce?: string | undefined;
+        title?: string | undefined;
+        lang?: string | undefined;
+        onNextClick?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        onPrevClick?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        onWeekNumberClick?: import("react-day-picker").WeekNumberClickEventHandler | undefined;
+        onDayClick?: import("react-day-picker").DayClickEventHandler | undefined;
+        onDayFocus?: import("react-day-picker").DayFocusEventHandler | undefined;
+        onDayBlur?: import("react-day-picker").DayFocusEventHandler | undefined;
+        onDayMouseEnter?: import("react-day-picker").DayMouseEventHandler | undefined;
+        onDayMouseLeave?: import("react-day-picker").DayMouseEventHandler | undefined;
+        onDayKeyDown?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayKeyUp?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayKeyPress?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayPointerEnter?: import("react-day-picker").DayPointerEventHandler | undefined;
+        onDayPointerLeave?: import("react-day-picker").DayPointerEventHandler | undefined;
+        onDayTouchCancel?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchEnd?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchMove?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchStart?: import("react-day-picker").DayTouchEventHandler | undefined;
+    } | {
+        mode: "single";
+        selected?: Date | undefined;
+        onSelect?: import("react-day-picker").SelectSingleEventHandler | undefined;
+        required?: boolean | undefined;
+        className?: string | undefined;
+        classNames?: Partial<import("react-day-picker").StyledElement<string>> | undefined;
+        modifiersClassNames?: import("react-day-picker").ModifiersClassNames | undefined;
+        style?: React.CSSProperties | undefined;
+        styles?: Partial<Omit<import("react-day-picker").StyledElement<React.CSSProperties>, import("react-day-picker").InternalModifiersElement>> | undefined;
+        modifiersStyles?: import("react-day-picker").ModifiersStyles | undefined;
+        id?: string | undefined;
+        defaultMonth?: Date | undefined;
+        month?: Date | undefined;
+        onMonthChange?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        numberOfMonths?: number | undefined;
+        fromDate?: Date | undefined;
+        toDate?: Date | undefined;
+        fromMonth?: Date | undefined;
+        toMonth?: Date | undefined;
+        fromYear?: number | undefined;
+        toYear?: number | undefined;
+        disableNavigation?: boolean | undefined;
+        pagedNavigation?: boolean | undefined;
+        reverseMonths?: boolean | undefined;
+        captionLayout?: import("react-day-picker").CaptionLayout | undefined;
+        fixedWeeks?: boolean | undefined;
+        hideHead?: boolean | undefined;
+        showOutsideDays?: boolean | undefined;
+        showWeekNumber?: boolean | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | undefined;
+        firstWeekContainsDate?: 1 | 4 | undefined;
+        ISOWeek?: boolean | undefined;
+        components?: import("react-day-picker").CustomComponents | undefined;
+        footer?: React.ReactNode;
+        initialFocus?: boolean | undefined;
+        disabled?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+        hidden?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+        today?: Date | undefined;
+        modifiers?: import("react-day-picker").DayModifiers | undefined;
+        locale?: import("date-fns").Locale | undefined;
+        labels?: Partial<import("react-day-picker").Labels> | undefined;
+        formatters?: Partial<import("react-day-picker").Formatters> | undefined;
+        dir?: string | undefined;
+        nonce?: string | undefined;
+        title?: string | undefined;
+        lang?: string | undefined;
+        onNextClick?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        onPrevClick?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        onWeekNumberClick?: import("react-day-picker").WeekNumberClickEventHandler | undefined;
+        onDayClick?: import("react-day-picker").DayClickEventHandler | undefined;
+        onDayFocus?: import("react-day-picker").DayFocusEventHandler | undefined;
+        onDayBlur?: import("react-day-picker").DayFocusEventHandler | undefined;
+        onDayMouseEnter?: import("react-day-picker").DayMouseEventHandler | undefined;
+        onDayMouseLeave?: import("react-day-picker").DayMouseEventHandler | undefined;
+        onDayKeyDown?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayKeyUp?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayKeyPress?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayPointerEnter?: import("react-day-picker").DayPointerEventHandler | undefined;
+        onDayPointerLeave?: import("react-day-picker").DayPointerEventHandler | undefined;
+        onDayTouchCancel?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchEnd?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchMove?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchStart?: import("react-day-picker").DayTouchEventHandler | undefined;
+    } | {
+        mode: "multiple";
+        selected?: Date[] | undefined;
+        onSelect?: import("react-day-picker").SelectMultipleEventHandler | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        className?: string | undefined;
+        classNames?: Partial<import("react-day-picker").StyledElement<string>> | undefined;
+        modifiersClassNames?: import("react-day-picker").ModifiersClassNames | undefined;
+        style?: React.CSSProperties | undefined;
+        styles?: Partial<Omit<import("react-day-picker").StyledElement<React.CSSProperties>, import("react-day-picker").InternalModifiersElement>> | undefined;
+        modifiersStyles?: import("react-day-picker").ModifiersStyles | undefined;
+        id?: string | undefined;
+        defaultMonth?: Date | undefined;
+        month?: Date | undefined;
+        onMonthChange?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        numberOfMonths?: number | undefined;
+        fromDate?: Date | undefined;
+        toDate?: Date | undefined;
+        fromMonth?: Date | undefined;
+        toMonth?: Date | undefined;
+        fromYear?: number | undefined;
+        toYear?: number | undefined;
+        disableNavigation?: boolean | undefined;
+        pagedNavigation?: boolean | undefined;
+        reverseMonths?: boolean | undefined;
+        captionLayout?: import("react-day-picker").CaptionLayout | undefined;
+        fixedWeeks?: boolean | undefined;
+        hideHead?: boolean | undefined;
+        showOutsideDays?: boolean | undefined;
+        showWeekNumber?: boolean | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | undefined;
+        firstWeekContainsDate?: 1 | 4 | undefined;
+        ISOWeek?: boolean | undefined;
+        components?: import("react-day-picker").CustomComponents | undefined;
+        footer?: React.ReactNode;
+        initialFocus?: boolean | undefined;
+        disabled?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+        hidden?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+        today?: Date | undefined;
+        modifiers?: import("react-day-picker").DayModifiers | undefined;
+        locale?: import("date-fns").Locale | undefined;
+        labels?: Partial<import("react-day-picker").Labels> | undefined;
+        formatters?: Partial<import("react-day-picker").Formatters> | undefined;
+        dir?: string | undefined;
+        nonce?: string | undefined;
+        title?: string | undefined;
+        lang?: string | undefined;
+        onNextClick?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        onPrevClick?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        onWeekNumberClick?: import("react-day-picker").WeekNumberClickEventHandler | undefined;
+        onDayClick?: import("react-day-picker").DayClickEventHandler | undefined;
+        onDayFocus?: import("react-day-picker").DayFocusEventHandler | undefined;
+        onDayBlur?: import("react-day-picker").DayFocusEventHandler | undefined;
+        onDayMouseEnter?: import("react-day-picker").DayMouseEventHandler | undefined;
+        onDayMouseLeave?: import("react-day-picker").DayMouseEventHandler | undefined;
+        onDayKeyDown?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayKeyUp?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayKeyPress?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayPointerEnter?: import("react-day-picker").DayPointerEventHandler | undefined;
+        onDayPointerLeave?: import("react-day-picker").DayPointerEventHandler | undefined;
+        onDayTouchCancel?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchEnd?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchMove?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchStart?: import("react-day-picker").DayTouchEventHandler | undefined;
+    } | {
+        mode: "range";
+        selected?: import("react-day-picker").DateRange | undefined;
+        onSelect?: import("react-day-picker").SelectRangeEventHandler | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        className?: string | undefined;
+        classNames?: Partial<import("react-day-picker").StyledElement<string>> | undefined;
+        modifiersClassNames?: import("react-day-picker").ModifiersClassNames | undefined;
+        style?: React.CSSProperties | undefined;
+        styles?: Partial<Omit<import("react-day-picker").StyledElement<React.CSSProperties>, import("react-day-picker").InternalModifiersElement>> | undefined;
+        modifiersStyles?: import("react-day-picker").ModifiersStyles | undefined;
+        id?: string | undefined;
+        defaultMonth?: Date | undefined;
+        month?: Date | undefined;
+        onMonthChange?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        numberOfMonths?: number | undefined;
+        fromDate?: Date | undefined;
+        toDate?: Date | undefined;
+        fromMonth?: Date | undefined;
+        toMonth?: Date | undefined;
+        fromYear?: number | undefined;
+        toYear?: number | undefined;
+        disableNavigation?: boolean | undefined;
+        pagedNavigation?: boolean | undefined;
+        reverseMonths?: boolean | undefined;
+        captionLayout?: import("react-day-picker").CaptionLayout | undefined;
+        fixedWeeks?: boolean | undefined;
+        hideHead?: boolean | undefined;
+        showOutsideDays?: boolean | undefined;
+        showWeekNumber?: boolean | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | undefined;
+        firstWeekContainsDate?: 1 | 4 | undefined;
+        ISOWeek?: boolean | undefined;
+        components?: import("react-day-picker").CustomComponents | undefined;
+        footer?: React.ReactNode;
+        initialFocus?: boolean | undefined;
+        disabled?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+        hidden?: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+        today?: Date | undefined;
+        modifiers?: import("react-day-picker").DayModifiers | undefined;
+        locale?: import("date-fns").Locale | undefined;
+        labels?: Partial<import("react-day-picker").Labels> | undefined;
+        formatters?: Partial<import("react-day-picker").Formatters> | undefined;
+        dir?: string | undefined;
+        nonce?: string | undefined;
+        title?: string | undefined;
+        lang?: string | undefined;
+        onNextClick?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        onPrevClick?: import("react-day-picker").MonthChangeEventHandler | undefined;
+        onWeekNumberClick?: import("react-day-picker").WeekNumberClickEventHandler | undefined;
+        onDayClick?: import("react-day-picker").DayClickEventHandler | undefined;
+        onDayFocus?: import("react-day-picker").DayFocusEventHandler | undefined;
+        onDayBlur?: import("react-day-picker").DayFocusEventHandler | undefined;
+        onDayMouseEnter?: import("react-day-picker").DayMouseEventHandler | undefined;
+        onDayMouseLeave?: import("react-day-picker").DayMouseEventHandler | undefined;
+        onDayKeyDown?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayKeyUp?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayKeyPress?: import("react-day-picker").DayKeyboardEventHandler | undefined;
+        onDayPointerEnter?: import("react-day-picker").DayPointerEventHandler | undefined;
+        onDayPointerLeave?: import("react-day-picker").DayPointerEventHandler | undefined;
+        onDayTouchCancel?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchEnd?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchMove?: import("react-day-picker").DayTouchEventHandler | undefined;
+        onDayTouchStart?: import("react-day-picker").DayTouchEventHandler | 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/cjs/types/components/Calendar/index.d.ts

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

package/dist/cjs/types/components/Collapsible/Collapsible.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+declare const CollapsibleButton: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string | undefined;
+    hideExpandIcon?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapsiblePanel: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+interface CollapsibleComponent extends React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>> {
+    Button: typeof CollapsibleButton;
+    Panel: typeof CollapsiblePanel;
+}
+interface CollapsibleProps {
+    size?: "sm" | "md" | "lg";
+    children: React.ReactNode;
+    isExpand?: boolean;
+    className?: string;
+    onToggle?: (isExpand: boolean) => void;
+}
+declare const Collapsible: CollapsibleComponent;
+export default Collapsible;

package/dist/cjs/types/components/Collapsible/Collapsible.stories.d.ts

@@ -0,0 +1,8 @@
+declare const meta: any;
+export default meta;
+export declare const Default: {
+    args: {
+        size: string;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Collapsible/Collapsible.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const collapseButtonVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const collapseIconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isExpand?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const collapsePanelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const collapseContainerVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/dist/cjs/types/components/Collapsible/CollapsibleContext.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+interface CollapsibleContextProps {
+    size?: "sm" | "md" | "lg";
+    isExpand: boolean;
+    toggle: () => void;
+    setIsExpand: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const useCollapsible: () => CollapsibleContextProps;
+interface CollapsibleProviderProps {
+    size?: "sm" | "md" | "lg";
+    children: ReactNode;
+    isExpandControlled?: boolean;
+    onToggle?: (isExpand: boolean) => void;
+}
+export declare const CollapsibleProvider: React.FC<CollapsibleProviderProps>;
+export {};

package/dist/cjs/types/components/Collapsible/index.d.ts

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

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

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { SelectSingleEventHandler } from "react-day-picker";
+type DatePickerProps = {
+    date: Date | undefined;
+    onSelect: SelectSingleEventHandler;
+};
+declare const DatePicker: FC<DatePickerProps>;
+export default DatePicker;

package/dist/cjs/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: import("react-day-picker").SelectSingleEventHandler;
+    }>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        date: Date | undefined;
+        onSelect: import("react-day-picker").SelectSingleEventHandler;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/types/index.d.ts

@@ -10,6 +10,10 @@ export { Input } from "./components/Input/Input";
 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/components/Calendar/Calendar.js

@@ -0,0 +1,43 @@
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid";
+import { DayPicker } from "react-day-picker";
+import { cn } from "@/utils/cn";
+import { buttonVariants } from "../Button/Button.styles";
+function Calendar(_a) {
+    var className = _a.className, classNames = _a.classNames, _b = _a.showOutsideDays, showOutsideDays = _b === void 0 ? true : _b, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
+    return (_jsx(DayPicker, __assign({ showOutsideDays: showOutsideDays, className: cn("p-3", className), classNames: __assign({ 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"), 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" }, classNames), components: {
+            IconLeft: function (_a) {
+                var props = __rest(_a, []);
+                return _jsx(ChevronLeftIcon, { className: "h-4 w-4" });
+            },
+            IconRight: function (_a) {
+                var props = __rest(_a, []);
+                return _jsx(ChevronRightIcon, { className: "h-4 w-4" });
+            },
+        } }, props)));
+}
+Calendar.displayName = "Calendar";
+export default Calendar;

package/dist/components/Calendar/Calendar.stories.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import Calendar from "./Calendar";
+// import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+var meta = {
+    title: "Components/Calendar",
+    component: Calendar,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {},
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        var _a = React.useState(new Date()), date = _a[0], setDate = _a[1];
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Calendar, { mode: "single", selected: date, onSelect: setDate, className: "rounded-md border" }) }));
+    },
+};

package/dist/components/Calendar/index.js

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

package/dist/components/Collapsible/Collapsible.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { CollapsibleProvider, useCollapsible } from "./CollapsibleContext";
+import { cn } from "@/utils/cn";
+import { collapseButtonVariants, collapseContainerVariants, collapseIconVariants, collapsePanelVariants, } from "./Collapsible.styles";
+var CollapsibleButton = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.hideExpandIcon, hideExpandIcon = _b === void 0 ? false : _b;
+    var _c = useCollapsible(), toggle = _c.toggle, isExpand = _c.isExpand, size = _c.size;
+    var collapseButtonClassName = collapseButtonVariants({ size: size });
+    var collapseIconClassName = collapseIconVariants({ isExpand: isExpand, size: size });
+    return (_jsxs("button", { onClick: toggle, className: cn(collapseButtonClassName, className), ref: ref, children: [_jsx("span", { className: "flex flex-1", children: children }), !hideExpandIcon && (_jsx("span", { className: cn(collapseIconClassName), children: _jsx(ChevronDownIcon, { className: cn("size-full") }) }))] }));
+});
+CollapsibleButton.displayName = "CollapsibleButton";
+var CollapsiblePanel = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className;
+    var _b = useCollapsible(), isExpand = _b.isExpand, size = _b.size;
+    var collapsePanelClassName = collapsePanelVariants({ size: size });
+    var _c = useState("0px"), height = _c[0], setHeight = _c[1];
+    var contentRef = useRef(null);
+    useEffect(function () {
+        if (contentRef.current) {
+            setHeight(isExpand ? "".concat(contentRef.current.scrollHeight, "px") : "0px");
+        }
+    }, [isExpand, children]); // Add `children` to the dependency array to recalculate height on content change
+    return (_jsx("div", { ref: ref, className: cn("overflow-hidden transition-all ease-in-out"), style: { height: height }, children: _jsx("div", { ref: contentRef, className: cn(collapsePanelClassName, className), children: children }) }));
+});
+CollapsiblePanel.displayName = "CollapsiblePanel";
+var Collapsible = forwardRef(function (_a, ref) {
+    var children = _a.children, isExpand = _a.isExpand, size = _a.size, className = _a.className, onToggle = _a.onToggle;
+    var collapseContainerClassName = collapseContainerVariants();
+    return (_jsx(CollapsibleProvider, { size: size, isExpandControlled: isExpand, onToggle: onToggle, children: _jsx("div", { ref: ref, className: cn(collapseContainerClassName, className), children: children }) }));
+});
+Collapsible.displayName = "Collapsible";
+Collapsible.Button = CollapsibleButton;
+Collapsible.Panel = CollapsiblePanel;
+export default Collapsible;

package/dist/components/Collapsible/Collapsible.stories.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import Collapsible from "./Collapsible";
+var meta = {
+    title: "Components/Collapsible",
+    component: Collapsible,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+var Test = function () {
+    useEffect(function () {
+        console.log("Mont");
+        return function () {
+            console.log("UnMont");
+        };
+    }, []);
+    return _jsx("p", { children: "This is the content of section 1." });
+};
+export var Default = {
+    args: {
+        size: "md",
+    },
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsxs("div", { className: "flex flex-col gap-1 w-full ", children: [_jsxs(Collapsible, __assign({ isExpand: true }, props, { children: [_jsx(Collapsible.Button, { children: "Section 1" }), _jsx(Collapsible.Panel, { children: "This is the content of section 1." })] })), _jsxs(Collapsible, { children: [_jsx(Collapsible.Button, { children: "Section 2" }), _jsx(Collapsible.Panel, { children: _jsx("p", { children: "This is the content of section 2." }) })] }), _jsxs(Collapsible, { children: [_jsx(Collapsible.Button, { children: "Section 3" }), _jsx(Collapsible.Panel, { children: _jsx("p", { children: "This is the content of section 3." }) })] })] }));
+    },
+};