@a2v2ai/uikit 0.0.1

package/Calendar/Calendar.js

@@ -0,0 +1,113 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = Calendar;
+exports.CalendarDayButton = CalendarDayButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const react_day_picker_1 = require("react-day-picker");
+const utils_1 = require("../lib/utils");
+const Button_1 = require("../Button/Button");
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+    const defaultClassNames = (0, react_day_picker_1.getDefaultClassNames)();
+    return ((0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { showOutsideDays: showOutsideDays, className: (0, utils_1.cn)("bg-white group/calendar p-3 rounded-lg border border-grey-200", className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: (0, utils_1.cn)("w-fit", defaultClassNames.root),
+            months: (0, utils_1.cn)("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+            month: (0, utils_1.cn)("flex flex-col w-full gap-4", defaultClassNames.month),
+            nav: (0, utils_1.cn)("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
+            button_previous: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: buttonVariant, size: "small" }), "size-8 aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous),
+            button_next: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: buttonVariant, size: "small" }), "size-8 aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next),
+            month_caption: (0, utils_1.cn)("flex items-center justify-center h-8 w-full px-8", defaultClassNames.month_caption),
+            dropdowns: (0, utils_1.cn)("w-full flex items-center text-sm font-medium justify-center h-8 gap-1.5", defaultClassNames.dropdowns),
+            dropdown_root: (0, utils_1.cn)("relative has-focus:border-grey-400 border border-grey-300 shadow-xs has-focus:ring-grey-300/50 has-focus:ring-[3px] rounded-md", defaultClassNames.dropdown_root),
+            dropdown: (0, utils_1.cn)("absolute bg-white inset-0 opacity-0", defaultClassNames.dropdown),
+            caption_label: (0, utils_1.cn)("select-none font-medium text-main-900", captionLayout === "label"
+                ? "text-sm"
+                : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-main-400 [&>svg]:size-3.5", defaultClassNames.caption_label),
+            table: "w-full border-collapse",
+            weekdays: (0, utils_1.cn)("flex", defaultClassNames.weekdays),
+            weekday: (0, utils_1.cn)("text-main-500 rounded-md flex-1 font-normal text-[0.8rem] select-none w-8 h-8 flex items-center justify-center", defaultClassNames.weekday),
+            week: (0, utils_1.cn)("flex w-full mt-2", defaultClassNames.week),
+            week_number_header: (0, utils_1.cn)("select-none w-8", defaultClassNames.week_number_header),
+            week_number: (0, utils_1.cn)("text-[0.8rem] select-none text-main-400", defaultClassNames.week_number),
+            day: (0, utils_1.cn)("relative w-8 h-8 p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day select-none", props.showWeekNumber
+                ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+                : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
+            range_start: (0, utils_1.cn)("rounded-l-md bg-main-100", defaultClassNames.range_start),
+            range_middle: (0, utils_1.cn)("rounded-none", defaultClassNames.range_middle),
+            range_end: (0, utils_1.cn)("rounded-r-md bg-main-100", defaultClassNames.range_end),
+            today: (0, utils_1.cn)("bg-main-100 text-main-900 rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
+            outside: (0, utils_1.cn)("text-main-300 aria-selected:text-main-400", defaultClassNames.outside),
+            disabled: (0, utils_1.cn)("text-main-300 opacity-50", defaultClassNames.disabled),
+            hidden: (0, utils_1.cn)("invisible", defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "calendar", ref: rootRef, className: (0, utils_1.cn)(className), ...props }));
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === "left") {
+                    return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, { className: (0, utils_1.cn)("size-4", className), ...props }));
+                }
+                if (orientation === "right") {
+                    return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { className: (0, utils_1.cn)("size-4", className), ...props }));
+                }
+                return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: (0, utils_1.cn)("size-4", className), ...props }));
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...props }) => {
+                return ((0, jsx_runtime_1.jsx)("td", { ...props, children: (0, jsx_runtime_1.jsx)("div", { className: "flex size-8 items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const defaultClassNames = (0, react_day_picker_1.getDefaultClassNames)();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { ref: ref, variant: "ghost", size: "small", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: (0, utils_1.cn)("size-8 p-0 font-normal", "data-[selected-single=true]:bg-main-900 data-[selected-single=true]:text-white", "data-[range-middle=true]:bg-main-100 data-[range-middle=true]:text-main-900", "data-[range-start=true]:bg-main-900 data-[range-start=true]:text-white", "data-[range-end=true]:bg-main-900 data-[range-end=true]:text-white", "group-data-[focused=true]/day:border-grey-400 group-data-[focused=true]/day:ring-grey-300/50", "hover:bg-main-100 hover:text-main-900", "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]", "data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md", "data-[range-middle=true]:rounded-none", "data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md", defaultClassNames.day, className), ...props }));
+}
+Calendar.displayName = "Calendar";

package/Card/Card.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const cardVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants };

package/Card/Card.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardVariants = exports.CardContent = exports.CardDescription = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../lib/utils");
+const cardVariants = (0, class_variance_authority_1.cva)("rounded-xl border bg-white text-main-950 shadow-sm", {
+    variants: {
+        variant: {
+            default: "border-grey-200",
+            outline: "border-grey-300 shadow-none",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+exports.cardVariants = cardVariants;
+const Card = React.forwardRef(({ className, variant, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)(cardVariants({ variant }), className), ...props })));
+exports.Card = Card;
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("flex flex-col space-y-1.5 p-6", className), ...props })));
+exports.CardHeader = CardHeader;
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("font-semibold leading-none tracking-tight", className), ...props })));
+exports.CardTitle = CardTitle;
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("text-sm text-grey-500", className), ...props })));
+exports.CardDescription = CardDescription;
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("p-6 pt-0", className), ...props })));
+exports.CardContent = CardContent;
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("flex items-center p-6 pt-0", className), ...props })));
+exports.CardFooter = CardFooter;
+CardFooter.displayName = "CardFooter";

package/ChatBubble/ChatBubble.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const chatBubbleVariants: (props?: ({
+    side?: "left" | "right" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const bubbleContentVariants: (props?: ({
+    color?: "blue" | "grey" | "green" | null | undefined;
+    theme?: "dark" | "light" | null | undefined;
+    side?: "left" | "right" | null | undefined;
+    size?: "small" | "large" | "xlarge" | "medium" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chatBubbleVariants> {
+    /** The side of the chat bubble (left for received, right for sent) */
+    side?: "left" | "right";
+    /** The color variant of the bubble */
+    color?: "blue" | "grey" | "green";
+    /** The theme variant */
+    theme?: "dark" | "light";
+    /** The text size of the bubble */
+    size?: "small" | "medium" | "large" | "xlarge";
+    /** The message content */
+    children: React.ReactNode;
+    /** Optional label shown above the bubble (e.g., sender name) */
+    label?: string;
+    /** Whether to show the label */
+    showLabel?: boolean;
+}
+declare const ChatBubble: React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatBubble, chatBubbleVariants, bubbleContentVariants };

package/ChatBubble/ChatBubble.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bubbleContentVariants = exports.chatBubbleVariants = exports.ChatBubble = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../lib/utils");
+const chatBubbleVariants = (0, class_variance_authority_1.cva)("flex flex-col gap-1.5 w-full", {
+    variants: {
+        side: {
+            left: "items-start",
+            right: "items-end",
+        },
+    },
+    defaultVariants: {
+        side: "left",
+    },
+});
+exports.chatBubbleVariants = chatBubbleVariants;
+const bubbleContentVariants = (0, class_variance_authority_1.cva)("px-4 py-3 font-medium leading-normal max-w-[85%]", {
+    variants: {
+        color: {
+            blue: "bg-blue-500",
+            grey: "",
+            green: "bg-green-500",
+        },
+        theme: {
+            dark: "",
+            light: "",
+        },
+        side: {
+            left: "rounded-2xl rounded-bl-md",
+            right: "rounded-2xl rounded-br-md",
+        },
+        size: {
+            small: "text-sm px-3 py-2",
+            medium: "text-base px-4 py-3",
+            large: "text-lg px-4 py-3",
+            xlarge: "text-xl px-5 py-4",
+        },
+    },
+    compoundVariants: [
+        // Blue variants
+        {
+            color: "blue",
+            theme: "dark",
+            className: "bg-blue-500 text-white",
+        },
+        {
+            color: "blue",
+            theme: "light",
+            className: "bg-[#2e9dfb] text-white",
+        },
+        // Grey variants
+        {
+            color: "grey",
+            theme: "dark",
+            className: "bg-[#232323] text-white",
+        },
+        {
+            color: "grey",
+            theme: "light",
+            className: "bg-[#e7e7e7] text-neutral-900",
+        },
+        // Green variants
+        {
+            color: "green",
+            theme: "dark",
+            className: "bg-green-500 text-white",
+        },
+        {
+            color: "green",
+            theme: "light",
+            className: "bg-green-500 text-white",
+        },
+    ],
+    defaultVariants: {
+        color: "blue",
+        theme: "dark",
+        side: "left",
+        size: "small",
+    },
+});
+exports.bubbleContentVariants = bubbleContentVariants;
+const labelVariants = (0, class_variance_authority_1.cva)("text-sm text-neutral-400 mb-0.5", {
+    variants: {
+        side: {
+            left: "ml-3",
+            right: "mr-3",
+        },
+    },
+    defaultVariants: {
+        side: "left",
+    },
+});
+const ChatBubble = React.forwardRef(({ className, side = "left", color = "blue", theme = "dark", size = "small", children, label, showLabel = true, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)(chatBubbleVariants({ side, className })), ...props, children: [showLabel && label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(labelVariants({ side })), children: label })), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(bubbleContentVariants({ color, theme, side, size })), children: children })] }));
+});
+exports.ChatBubble = ChatBubble;
+ChatBubble.displayName = "ChatBubble";

package/Checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { type VariantProps } from "class-variance-authority";
+declare const checkboxVariants: (props?: ({
+    size?: "small" | "regular" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox, checkboxVariants };

package/Checkbox/Checkbox.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxVariants = exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const CheckboxPrimitive = __importStar(require("@radix-ui/react-checkbox"));
+const lucide_react_1 = require("lucide-react");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../lib/utils");
+const checkboxVariants = (0, class_variance_authority_1.cva)("peer shrink-0 border border-grey-300 bg-white ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-main-950 data-[state=checked]:border-main-950 data-[state=checked]:text-main-50 data-[state=indeterminate]:bg-main-950 data-[state=indeterminate]:border-main-950 data-[state=indeterminate]:text-main-50", {
+    variants: {
+        size: {
+            small: "size-4 rounded-[4px]",
+            regular: "size-5 rounded-md",
+        },
+    },
+    defaultVariants: {
+        size: "regular",
+    },
+});
+exports.checkboxVariants = checkboxVariants;
+const Checkbox = React.forwardRef(({ className, size, ...props }, ref) => ((0, jsx_runtime_1.jsx)(CheckboxPrimitive.Root, { ref: ref, className: (0, utils_1.cn)(checkboxVariants({ size }), className), ...props, children: (0, jsx_runtime_1.jsx)(CheckboxPrimitive.Indicator, { className: (0, utils_1.cn)("flex items-center justify-center text-current"), children: props.checked === "indeterminate" ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { className: (0, utils_1.cn)(size === "small" ? "size-3" : "size-3.5") })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: (0, utils_1.cn)(size === "small" ? "size-3" : "size-3.5") })) }) })));
+exports.Checkbox = Checkbox;
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;

package/Dialog/Dialog.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const dialogContentVariants: (props?: ({
+    type?: "desktop" | "mobile" | null | undefined;
+    scrollable?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof dialogContentVariants> {
+    showCloseButton?: boolean;
+    closeButtonVariant?: "default" | "icon-button";
+    disableOutsideClick?: boolean;
+    loading?: boolean;
+}
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const dialogHeaderVariants: (props?: ({
+    type?: "header" | "close-only" | "icon-button-close" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dialogHeaderVariants> {
+}
+declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const dialogFooterVariants: (props?: ({
+    type?: "buttons-right" | "full-width" | "single-full-width" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dialogFooterVariants> {
+}
+declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogBody, dialogContentVariants, dialogHeaderVariants, dialogFooterVariants, };

package/Dialog/Dialog.js

@@ -0,0 +1,130 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogFooterVariants = exports.dialogHeaderVariants = exports.dialogContentVariants = exports.DialogBody = exports.DialogDescription = exports.DialogTitle = exports.DialogFooter = exports.DialogHeader = exports.DialogContent = exports.DialogTrigger = exports.DialogClose = exports.DialogOverlay = exports.DialogPortal = exports.Dialog = void 0;
+const React = __importStar(require("react"));
+const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const lucide_react_1 = require("lucide-react");
+const class_variance_authority_1 = require("class-variance-authority");
+const Button_1 = require("../Button/Button");
+const utils_1 = require("../lib/utils");
+const Dialog = DialogPrimitive.Root;
+exports.Dialog = Dialog;
+const DialogTrigger = DialogPrimitive.Trigger;
+exports.DialogTrigger = DialogTrigger;
+const DialogPortal = DialogPrimitive.Portal;
+exports.DialogPortal = DialogPortal;
+const DialogClose = DialogPrimitive.Close;
+exports.DialogClose = DialogClose;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (React.createElement(DialogPrimitive.Overlay, { ref: ref, className: (0, utils_1.cn)("fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+exports.DialogOverlay = DialogOverlay;
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const dialogContentVariants = (0, class_variance_authority_1.cva)("fixed z-50 grid gap-4 bg-white border border-grey-200 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", {
+    variants: {
+        type: {
+            desktop: "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] w-full max-w-[640px] rounded-lg",
+            mobile: "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] w-full max-w-[320px] rounded-lg",
+        },
+        scrollable: {
+            true: "max-h-[80vh] overflow-y-auto",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        type: "desktop",
+        scrollable: false,
+    },
+});
+exports.dialogContentVariants = dialogContentVariants;
+const DialogContent = React.forwardRef(({ className, children, type, scrollable, showCloseButton = true, closeButtonVariant = "default", disableOutsideClick = false, loading = false, ...props }, ref) => (React.createElement(DialogPortal, null,
+    React.createElement(DialogOverlay, null),
+    React.createElement(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)(dialogContentVariants({ type, scrollable, className })), onPointerDownOutside: disableOutsideClick ? (e) => e.preventDefault() : undefined, onEscapeKeyDown: disableOutsideClick ? (e) => e.preventDefault() : undefined, ...props },
+        loading && (React.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white/80 rounded-lg" },
+            React.createElement(lucide_react_1.Loader2, { className: "size-8 text-main-600 animate-spin" }))),
+        children,
+        showCloseButton && closeButtonVariant === "default" && !loading && (React.createElement(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:shadow-[0_0_0_3px_#d4d4d4] disabled:pointer-events-none cursor-pointer" },
+            React.createElement(lucide_react_1.X, { className: "size-4 text-grey-600" }),
+            React.createElement("span", { className: "sr-only" }, "Close"))),
+        showCloseButton && closeButtonVariant === "icon-button" && !loading && (React.createElement(DialogPrimitive.Close, { asChild: true },
+            React.createElement(Button_1.Button, { variant: "ghost", size: "small", className: "absolute right-2 top-2 size-9 p-0" },
+                React.createElement(lucide_react_1.X, { className: "size-4" }),
+                React.createElement("span", { className: "sr-only" }, "Close"))))))));
+exports.DialogContent = DialogContent;
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const dialogHeaderVariants = (0, class_variance_authority_1.cva)("flex p-4", {
+    variants: {
+        type: {
+            header: "flex-row items-center justify-between",
+            "close-only": "flex-col items-end",
+            "icon-button-close": "flex-col items-end justify-center pr-0",
+        },
+    },
+    defaultVariants: {
+        type: "header",
+    },
+});
+exports.dialogHeaderVariants = dialogHeaderVariants;
+const DialogHeader = React.forwardRef(({ className, type, ...props }, ref) => (React.createElement("div", { ref: ref, className: (0, utils_1.cn)(dialogHeaderVariants({ type, className })), ...props })));
+exports.DialogHeader = DialogHeader;
+DialogHeader.displayName = "DialogHeader";
+const dialogFooterVariants = (0, class_variance_authority_1.cva)("flex gap-2 p-4", {
+    variants: {
+        type: {
+            "buttons-right": "flex-row items-center justify-end",
+            "full-width": "flex-row items-start",
+            "single-full-width": "flex-row items-start",
+        },
+    },
+    defaultVariants: {
+        type: "buttons-right",
+    },
+});
+exports.dialogFooterVariants = dialogFooterVariants;
+const DialogFooter = React.forwardRef(({ className, type, children, ...props }, ref) => (React.createElement("div", { ref: ref, className: (0, utils_1.cn)(dialogFooterVariants({ type, className })), ...props }, type === "full-width" || type === "single-full-width" ? (React.createElement("div", { className: "flex gap-2 w-full" }, React.Children.map(children, (child) => React.isValidElement(child)
+    ? React.cloneElement(child, {
+        className: (0, utils_1.cn)("flex-1", child.props.className),
+    })
+    : child))) : (children))));
+exports.DialogFooter = DialogFooter;
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (React.createElement(DialogPrimitive.Title, { ref: ref, className: (0, utils_1.cn)("text-2xl font-bold leading-[1.2] tracking-tight text-main-950 font-display", className), ...props })));
+exports.DialogTitle = DialogTitle;
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (React.createElement(DialogPrimitive.Description, { ref: ref, className: (0, utils_1.cn)("text-sm text-grey-600", className), ...props })));
+exports.DialogDescription = DialogDescription;
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+const DialogBody = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("flex-1 px-4 py-2", className), ...props })));
+exports.DialogBody = DialogBody;
+DialogBody.displayName = "DialogBody";

package/Drawer/Drawer.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { type VariantProps } from "class-variance-authority";
+declare const drawerContentVariants: (props?: ({
+    direction?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const drawerOverlayVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root> & {
+    /** Direction the drawer slides in from */
+    direction?: "bottom" | "top" | "left" | "right";
+    /** Whether clicking outside or dragging down dismisses the drawer */
+    dismissible?: boolean;
+};
+export type DrawerContentProps = Omit<React.ComponentProps<typeof DrawerPrimitive.Content>, "direction"> & VariantProps<typeof drawerContentVariants> & {
+    /** Whether to show the drag handle */
+    showHandle?: boolean;
+    /** Whether the drawer content is in a loading state */
+    loading?: boolean;
+};
+declare function Drawer({ direction, dismissible, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ className, children, direction, showHandle, loading, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerBody({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerBody, DrawerTitle, DrawerDescription, drawerContentVariants, drawerOverlayVariants, };