@a2v2ai/uikit 0.0.1

package/Drawer/Drawer.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerOverlayVariants = exports.drawerContentVariants = void 0;
+exports.Drawer = Drawer;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerTrigger = DrawerTrigger;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerBody = DrawerBody;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerDescription = DrawerDescription;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vaul_1 = require("vaul");
+const class_variance_authority_1 = require("class-variance-authority");
+const Loader_1 = require("../Loader/Loader");
+const utils_1 = require("../lib/utils");
+const drawerContentVariants = (0, class_variance_authority_1.cva)("group/drawer-content fixed z-50 flex h-auto flex-col bg-white", {
+    variants: {
+        direction: {
+            bottom: "inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-[10px]",
+            top: "inset-x-0 top-0 mb-24 max-h-[80vh] rounded-b-[10px]",
+            left: "inset-y-0 left-0 w-3/4 sm:max-w-sm rounded-r-[10px]",
+            right: "inset-y-0 right-0 w-3/4 sm:max-w-sm rounded-l-[10px]",
+        },
+    },
+    defaultVariants: {
+        direction: "bottom",
+    },
+});
+exports.drawerContentVariants = drawerContentVariants;
+const drawerOverlayVariants = (0, class_variance_authority_1.cva)("fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0");
+exports.drawerOverlayVariants = drawerOverlayVariants;
+function Drawer({ direction = "bottom", dismissible = true, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(vaul_1.Drawer.Root, { direction: direction, dismissible: dismissible, ...props }));
+}
+function DrawerTrigger({ ...props }) {
+    return (0, jsx_runtime_1.jsx)(vaul_1.Drawer.Trigger, { ...props });
+}
+function DrawerPortal({ ...props }) {
+    return (0, jsx_runtime_1.jsx)(vaul_1.Drawer.Portal, { ...props });
+}
+function DrawerClose({ ...props }) {
+    return (0, jsx_runtime_1.jsx)(vaul_1.Drawer.Close, { ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(vaul_1.Drawer.Overlay, { className: (0, utils_1.cn)(drawerOverlayVariants(), className), ...props }));
+}
+function DrawerContent({ className, children, direction = "bottom", showHandle = true, loading = false, ...props }) {
+    const isVertical = direction === "bottom" || direction === "top";
+    return ((0, jsx_runtime_1.jsxs)(DrawerPortal, { children: [(0, jsx_runtime_1.jsx)(DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(vaul_1.Drawer.Content, { className: (0, utils_1.cn)(drawerContentVariants({ direction }), "shadow-lg", className), ...props, children: [showHandle && isVertical && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto shrink-0 rounded-full bg-neutral-200", direction === "bottom" ? "mt-2 mb-4" : "mb-2 mt-4", "h-[3px] w-[50px]") })), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 items-center justify-center p-8", children: (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "large", color: "grey" }) })) : (children)] })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col gap-1.5 p-4 text-center sm:text-left", className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mt-auto flex flex-col gap-2 p-4", className), ...props }));
+}
+function DrawerBody({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex-1 overflow-auto p-4", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(vaul_1.Drawer.Title, { className: (0, utils_1.cn)("text-lg font-semibold text-neutral-900", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(vaul_1.Drawer.Description, { className: (0, utils_1.cn)("text-sm text-neutral-500", className), ...props }));
+}

package/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,85 @@
+"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.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuShortcut = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../lib/utils");
+const DropdownMenu = DropdownMenuPrimitive.Root;
+exports.DropdownMenu = DropdownMenu;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+exports.DropdownMenuSub = DropdownMenuSub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: (0, utils_1.cn)("flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none focus:bg-grey-100 data-[state=open]:bg-grey-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "ml-auto" })] })));
+exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubContent, { ref: ref, className: (0, utils_1.cn)("z-50 min-w-[8rem] overflow-hidden rounded-lg border border-grey-200 bg-white p-1 text-main-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props })));
+exports.DropdownMenuSubContent = DropdownMenuSubContent;
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, utils_1.cn)("z-50 min-w-[8rem] overflow-hidden rounded-lg border border-grey-200 bg-white p-1 text-main-950 shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+exports.DropdownMenuContent = DropdownMenuContent;
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Item, { ref: ref, className: (0, utils_1.cn)("relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-grey-100 focus:text-main-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props })));
+exports.DropdownMenuItem = DropdownMenuItem;
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: (0, utils_1.cn)("relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-grey-100 focus:text-main-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "size-4" }) }) }), children] })));
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.RadioItem, { ref: ref, className: (0, utils_1.cn)("relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-grey-100 focus:text-main-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Circle, { className: "size-2 fill-current" }) }) }), children] })));
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Label, { ref: ref, className: (0, utils_1.cn)("px-2 py-1.5 text-sm font-semibold text-main-950", inset && "pl-8", className), ...props })));
+exports.DropdownMenuLabel = DropdownMenuLabel;
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Separator, { ref: ref, className: (0, utils_1.cn)("-mx-1 my-1 h-px bg-grey-100", className), ...props })));
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({ className, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("ml-auto text-xs tracking-widest text-grey-400", className), ...props }));
+};
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";

package/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type TypographyColor } from "../Typography/Typography";
+export interface ErrorMessageProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+    /**
+     * The field name to check for errors
+     */
+    name: string;
+    /**
+     * Object containing error messages keyed by field name
+     */
+    errors: Record<string, string | undefined>;
+    /**
+     * Optional object containing touched state keyed by field name
+     * If provided, error is only shown when field is touched
+     */
+    touched?: Record<string, boolean | undefined>;
+    /**
+     * Color variant for the error message
+     * @default "error-600"
+     */
+    color?: TypographyColor;
+}
+declare function ErrorMessage({ name, errors, touched, className, color, ...props }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ErrorMessage {
+    var displayName: string;
+}
+export { ErrorMessage };

package/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = ErrorMessage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Typography_1 = require("../Typography/Typography");
+const utils_1 = require("../lib/utils");
+function ErrorMessage({ name, errors, touched, className, color = "error-600", ...props }) {
+    const hasError = errors && typeof errors[name] === "string";
+    const shouldShow = touched ? hasError && touched[name] : hasError;
+    if (!shouldShow) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: color, className: (0, utils_1.cn)("mt-1", className), ...props, children: errors[name] }));
+}
+ErrorMessage.displayName = "ErrorMessage";

package/Flex/Flex.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const flexVariants: (props?: ({
+    direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type FlexProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof flexVariants> & {
+    as?: React.ElementType;
+};
+declare const Flex: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
+    as?: React.ElementType;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Flex, flexVariants };
+export type { FlexProps };

package/Flex/Flex.js

@@ -0,0 +1,101 @@
+"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.flexVariants = exports.Flex = 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 flexVariants = (0, class_variance_authority_1.cva)("flex", {
+    variants: {
+        direction: {
+            row: "flex-row",
+            column: "flex-col",
+            "row-reverse": "flex-row-reverse",
+            "column-reverse": "flex-col-reverse",
+        },
+        align: {
+            start: "items-start",
+            center: "items-center",
+            end: "items-end",
+            stretch: "items-stretch",
+            baseline: "items-baseline",
+        },
+        justify: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            between: "justify-between",
+            around: "justify-around",
+            evenly: "justify-evenly",
+        },
+        wrap: {
+            nowrap: "flex-nowrap",
+            wrap: "flex-wrap",
+            "wrap-reverse": "flex-wrap-reverse",
+        },
+        gap: {
+            0: "gap-0",
+            1: "gap-1",
+            2: "gap-2",
+            3: "gap-3",
+            4: "gap-4",
+            5: "gap-5",
+            6: "gap-6",
+            8: "gap-8",
+            10: "gap-10",
+            12: "gap-12",
+            16: "gap-16",
+            20: "gap-20",
+            24: "gap-24",
+            32: "gap-32",
+            40: "gap-40",
+            48: "gap-48",
+        },
+    },
+    defaultVariants: {
+        direction: "row",
+        align: "stretch",
+        justify: "start",
+        wrap: "nowrap",
+        gap: 0,
+    },
+});
+exports.flexVariants = flexVariants;
+const Flex = React.forwardRef(({ className, direction, align, justify, wrap, gap, as: Component = "div", ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(Component, { ref: ref, className: (0, utils_1.cn)(flexVariants({ direction, align, justify, wrap, gap, className })), ...props }));
+});
+exports.Flex = Flex;
+Flex.displayName = "Flex";

package/IconButton/IconButton.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const iconButtonVariants: (props?: ({
+    variant?: "secondary" | "outline" | "primary" | "ghost" | null | undefined;
+    size?: "small" | "regular" | "large" | "mini" | null | undefined;
+    roundness?: "default" | "round" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
+    /** Use the Slot component to render a different element */
+    asChild?: boolean;
+    /** The icon to render inside the button */
+    icon?: React.ReactNode;
+    /** Accessible label for screen readers */
+    "aria-label": string;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { IconButton, iconButtonVariants };

package/IconButton/IconButton.js

@@ -0,0 +1,85 @@
+"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.iconButtonVariants = exports.IconButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_slot_1 = require("@radix-ui/react-slot");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../lib/utils");
+const iconButtonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center shrink-0 cursor-pointer transition-colors focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_#d4d4d4] disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            primary: "bg-main-950 text-main-50 hover:bg-main-800",
+            secondary: "bg-main-100 text-main-950 hover:bg-main-200",
+            outline: "border border-main-300 bg-transparent text-main-950 hover:bg-main-100",
+            ghost: "bg-transparent text-main-600 hover:bg-main-100 hover:text-main-950",
+        },
+        size: {
+            mini: "size-6 [&_svg]:size-3",
+            small: "size-8 [&_svg]:size-4",
+            regular: "size-9 [&_svg]:size-4",
+            large: "size-10 [&_svg]:size-5",
+        },
+        roundness: {
+            default: "rounded-lg",
+            round: "rounded-full",
+        },
+    },
+    compoundVariants: [
+        {
+            size: "mini",
+            roundness: "default",
+            className: "rounded-md",
+        },
+        {
+            size: "small",
+            roundness: "default",
+            className: "rounded-md",
+        },
+    ],
+    defaultVariants: {
+        variant: "primary",
+        size: "regular",
+        roundness: "default",
+    },
+});
+exports.iconButtonVariants = iconButtonVariants;
+const IconButton = React.forwardRef(({ className, variant, size, roundness, asChild = false, icon, children, ...props }, ref) => {
+    const Comp = asChild ? react_slot_1.Slot : "button";
+    return ((0, jsx_runtime_1.jsx)(Comp, { className: (0, utils_1.cn)(iconButtonVariants({ variant, size, roundness, className })), ref: ref, ...props, children: icon || children }));
+});
+exports.IconButton = IconButton;
+IconButton.displayName = "IconButton";

package/Input/Input.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const inputVariants: (props?: ({
+    size?: "small" | "regular" | "large" | "mini" | null | undefined;
+    roundness?: "default" | "round" | null | undefined;
+    variant?: "default" | "error" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    leftAddon?: React.ReactNode;
+    rightAddon?: React.ReactNode;
+    rightElement?: React.ReactNode;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input, inputVariants };

package/Input/Input.js

@@ -0,0 +1,75 @@
+"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.inputVariants = exports.Input = 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 inputVariants = (0, class_variance_authority_1.cva)("flex w-full bg-white border font-normal font-sans transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grey-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-grey-50", {
+    variants: {
+        size: {
+            mini: "h-6 px-3 text-xs rounded-md",
+            small: "h-8 px-3 text-sm rounded-md",
+            regular: "h-9 px-3 text-sm rounded-lg",
+            large: "h-10 px-3 text-base rounded-lg",
+        },
+        roundness: {
+            default: "",
+            round: "!rounded-full",
+        },
+        variant: {
+            default: "border-grey-300 focus-visible:border-grey-300 focus-visible:ring-[3px] focus-visible:ring-grey-300/50",
+            error: "border-error-500 focus-visible:border-error-500 focus-visible:ring-[3px] focus-visible:ring-error-200",
+        },
+    },
+    defaultVariants: {
+        size: "regular",
+        roundness: "default",
+        variant: "default",
+    },
+});
+exports.inputVariants = inputVariants;
+const Input = React.forwardRef(({ className, type = "text", size, roundness, variant, leftIcon, rightIcon, leftAddon, rightAddon, rightElement, ...props }, ref) => {
+    const hasAddons = leftIcon || rightIcon || leftAddon || rightAddon || rightElement;
+    if (hasAddons) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 bg-white border font-sans transition-colors", "focus-within:ring-[3px]", variant === "error"
+                ? "border-error-500 focus-within:border-error-500 focus-within:ring-error-200"
+                : "border-grey-300 focus-within:border-grey-300 focus-within:ring-grey-300/50", size === "mini" && "h-6 pl-3 pr-0.5 text-xs rounded-md", size === "small" && "h-8 pl-3 pr-0.5 text-sm rounded-md", size === "regular" && "h-9 pl-3 pr-0.5 text-sm rounded-lg", size === "large" && "h-10 pl-3 pr-0.5 text-base rounded-lg", !size && "h-9 pl-3 pr-0.5 text-sm rounded-lg", !rightElement && "pr-3", roundness === "round" && "!rounded-full", props.disabled && "opacity-50 cursor-not-allowed bg-grey-50", className), children: [leftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: leftIcon })), leftAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: leftAddon })), (0, jsx_runtime_1.jsx)("input", { type: type, className: (0, utils_1.cn)("flex-1 min-w-0 bg-transparent border-0 outline-none placeholder:text-grey-400", "disabled:cursor-not-allowed"), ref: ref, ...props }), rightAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: rightAddon })), rightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: rightIcon })), rightElement && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: rightElement }))] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("input", { type: type, className: (0, utils_1.cn)(inputVariants({ size, roundness, variant, className })), ref: ref, ...props }));
+});
+exports.Input = Input;
+Input.displayName = "Input";

package/InputOTP/InputOTP.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { OTPInput } from "input-otp";
+import { type VariantProps } from "class-variance-authority";
+declare const inputOTPVariants: (props?: ({} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface InputOTPProps extends Omit<React.ComponentPropsWithoutRef<typeof OTPInput>, "render"> {
+    children?: React.ReactNode;
+}
+declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLInputElement>>;
+declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const inputOTPSlotVariants: (props?: ({
+    slotSize?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<"div">, VariantProps<typeof inputOTPSlotVariants> {
+    index: number;
+}
+declare const InputOTPSlot: React.ForwardRefExoticComponent<InputOTPSlotProps & React.RefAttributes<HTMLDivElement>>;
+declare const InputOTPSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, inputOTPVariants, inputOTPSlotVariants, };