luan-ui 0.1.0

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormContext } from "@components/form-field/form-field-context";
+import { Icon } from "@components/icon/icon";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { getVariants } from "@utilities/get-variants/get-variants";
+import { mapResponsiveValue, } from "@utilities/responsive/responsive";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { forwardRef, } from "react";
+export const SIZES = {
+    sm: {
+        small: "sm:h-4 sm:w-4",
+        medium: "sm:h-5 sm:w-5",
+        large: "sm:h-6 sm:w-6",
+    },
+    md: {
+        small: "md:h-4 md:w-4",
+        medium: "md:h-5 md:w-5",
+        large: "md:h-6 md:w-6",
+    },
+    lg: {
+        small: "lg:h-4 lg:w-4",
+        medium: "lg:h-5 lg:w-5",
+        large: "lg:h-6 lg:w-6",
+    },
+    xl: {
+        small: "xl:h-4 xl:w-4",
+        medium: "xl:h-5 xl:w-5",
+        large: "xl:h-6 xl:w-6",
+    },
+};
+const checkboxStyles = getVariants({
+    base: "peer flex h-4 w-4 items-center justify-center rounded-sm border border-gray-700 shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-700 data-[state=checked]:bg-gray-700 data-[state=checked]:text-gray-100",
+    variants: {
+        disabled: {
+            true: "cursor-not-allowed bg-gray-400 opacity-50",
+        },
+        size: {
+            small: "h-4 w-4",
+            medium: "h-5 w-5",
+            large: "h-6 w-6",
+        },
+    },
+});
+const iconSizeMap = {
+    small: "small",
+    medium: "medium",
+    large: "medium",
+};
+/**
+ * A checkbox component built on top of Radix UI's checkbox primitive.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox id="checkbox" onCheckedChange={(checked) => console.log(checked)} />
+ * ```
+ */
+export const Checkbox = forwardRef(({ className, disabled: initialDisabled, required: initialRequired, size = "medium", ...props }, ref) => {
+    const iconSize = mapResponsiveValue(size, (size) => iconSizeMap[size]);
+    const { disabled, required } = useFormContext({
+        disabled: initialDisabled,
+        required: initialRequired,
+    });
+    return (_jsx(CheckboxPrimitive.Root, { className: checkboxStyles({ disabled, size, className }), ref: ref, disabled: disabled, required: required, ...props, children: _jsx(CheckboxPrimitive.Indicator, { children: _jsx(Icon, { asChild: true, size: iconSize, children: _jsx(CheckIcon, {}) }) }) }));
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAEN,kBAAkB,GAClB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AAQf,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;CACD,CAAC;AACF,MAAM,cAAc,GAAG,WAAW,CAAC;IAClC,IAAI,EAAE,mNAAmN;IACzN,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,2CAA2C;SACjD;QACD,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SAChB;KACD;CACD,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG;IACnB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,QAAQ;CACN,CAAC;AAEX;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAIjC,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;IACvE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC7C,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,iBAAiB,CAAC,IAAI,IACtB,SAAS,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EACxD,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,YAET,KAAC,iBAAiB,CAAC,SAAS,cAC3B,KAAC,IAAI,IAAC,OAAO,QAAC,IAAI,EAAE,QAAQ,YAC3B,KAAC,SAAS,KAAG,GACP,GACsB,GACN,CACzB,CAAC;AACH,CAAC,CACD,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC"}

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,10 @@
+import { Dialog as RadixDialog } from "radix-ui";
+declare const Dialog: import("react").FC<RadixDialog.DialogProps>;
+declare const DialogTrigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DialogClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare const DialogFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, };

package/dist/components/dialog/dialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cross1Icon } from "@radix-ui/react-icons";
+import { cn } from "@utilities/cn/cn";
+import { Dialog as RadixDialog } from "radix-ui";
+import { forwardRef, } from "react";
+const Dialog = RadixDialog.Root;
+const DialogTrigger = RadixDialog.Trigger;
+const DialogClose = RadixDialog.Close;
+const DialogOverlay = forwardRef(({ className, ...props }, ref) => (_jsx(RadixDialog.Overlay, { ref: ref, className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in", className), ...props })));
+DialogOverlay.displayName = RadixDialog.Overlay.displayName;
+const DialogContent = forwardRef(({ children, className, ...props }, ref) => {
+    return (_jsxs(DialogOverlay, { children: [_jsx(DialogOverlay, {}), _jsxs(RadixDialog.Content, { className: cn("-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl flex-col gap-4 rounded-lg bg-white p-4", className), ...props, ref: ref, children: [_jsx(DialogClose, { asChild: true, children: _jsx("button", { type: "button", className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }) }), children] })] }));
+});
+const DialogHeader = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col gap-1", className), ...props })));
+DialogHeader.displayName = "DialogHeader";
+const DialogTitle = forwardRef(({ className, ...props }, ref) => (_jsx(RadixDialog.Title, { ref: ref, className: cn("font-semibold text-lg", className), ...props })));
+DialogTitle.displayName = "DialogTitle";
+const DialogDescription = forwardRef(({ className, ...props }, ref) => (_jsx(RadixDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props })));
+DialogDescription.displayName = "DialogDescription";
+const DialogFooter = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex justify-end gap-2", className), ...props })));
+DialogFooter.displayName = "DialogFooter";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, };
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-field/form-field-context.d.ts

@@ -0,0 +1,13 @@
+type FormFieldContextType = {
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+};
+export declare const FormFieldContext: import("react").Context<FormFieldContextType | undefined>;
+export declare const FormFieldProvider: import("react").Provider<FormFieldContextType | undefined>;
+export declare const useFormContext: (props: FormFieldContextType) => {
+    disabled: boolean | undefined;
+    required: boolean | undefined;
+    error: boolean | undefined;
+};
+export {};

package/dist/components/form-field/form-field-context.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+export const FormFieldContext = createContext(undefined);
+export const FormFieldProvider = FormFieldContext.Provider;
+export const useFormContext = (props) => {
+    const context = useContext(FormFieldContext);
+    return {
+        disabled: props.disabled ?? context?.disabled,
+        required: props.required ?? context?.required,
+        error: props.error ?? context?.error,
+    };
+};
+//# sourceMappingURL=form-field-context.js.map

package/dist/components/form-field/form-field-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-context.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAC5C,SAAS,CACT,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE7C,OAAO;QACN,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,OAAO,EAAE,QAAQ;QAC7C,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,OAAO,EAAE,QAAQ;QAC7C,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,OAAO,EAAE,KAAK;KACpC,CAAC;AACH,CAAC,CAAC"}

package/dist/components/form-field/form-field.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithoutRef } from "react";
+export type FormFieldProps = ComponentPropsWithoutRef<"div"> & {
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+};
+/**
+ * A component that displays a form field. Should be used as a parent of a Label, an input element and a FormHelper component.
+ *
+ * @example
+ * ```tsx
+ * <FormField>
+ *  <Label>Email</Label>
+ *  <Input />
+ *  <FormHelper>This is a helper text</FormHelper>
+ * </FormField>
+ * ```
+ */
+export declare const FormField: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/form-field/form-field.js

@@ -0,0 +1,46 @@
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { FormHelper } from "@components/form-helper/form-helper";
+import { Label } from "@components/label/label";
+import { getVariants } from "@utilities/get-variants/get-variants";
+import { Children, forwardRef, isValidElement, } from "react";
+import { FormFieldProvider } from "./form-field-context";
+const formFieldStyles = getVariants({
+    base: "flex gap-2",
+    variants: {
+        orientation: {
+            horizontal: "flex-row items-start",
+            vertical: "flex-col",
+        },
+    },
+});
+/**
+ * A component that displays a form field. Should be used as a parent of a Label, an input element and a FormHelper component.
+ *
+ * @example
+ * ```tsx
+ * <FormField>
+ *  <Label>Email</Label>
+ *  <Input />
+ *  <FormHelper>This is a helper text</FormHelper>
+ * </FormField>
+ * ```
+ */
+export const FormField = forwardRef(({ className, children, orientation = "vertical", disabled, required, error, ...props }, ref) => {
+    const childElements = Children.toArray(children);
+    const label = childElements.find((child) => isValidElement(child) && child.type === Label);
+    const helperText = childElements.find((child) => isValidElement(child) && child.type === FormHelper);
+    const input = childElements.find((child) => isValidElement(child) &&
+        child.type !== Label &&
+        child.type !== FormHelper);
+    if (!label || !input) {
+        console.warn("FormField requires both Label and Input components as children");
+        return null;
+    }
+    return (_jsx(FormFieldProvider, { value: {
+            disabled,
+            required,
+            error,
+        }, children: _jsx("div", { ref: ref, className: formFieldStyles({ orientation, className }), ...props, children: orientation === "horizontal" ? (_jsxs(_Fragment, { children: [input, _jsxs("div", { className: "flex flex-col", children: [label, helperText] })] })) : (_jsxs(_Fragment, { children: [label, input, helperText] })) }) }));
+});
+FormField.displayName = "FormField";
+//# sourceMappingURL=form-field.js.map

package/dist/components/form-field/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EACN,QAAQ,EAER,UAAU,EACV,cAAc,GACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD,MAAM,eAAe,GAAG,WAAW,CAAC;IACnC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE;QACT,WAAW,EAAE;YACZ,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,UAAU;SACpB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAClC,CACC,EACC,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,UAAU,EACxB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CACxD,CAAC;IACF,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CACpC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC7D,CAAC;IACF,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CACT,cAAc,CAAC,KAAK,CAAC;QACrB,KAAK,CAAC,IAAI,KAAK,KAAK;QACpB,KAAK,CAAC,IAAI,KAAK,UAAU,CAC1B,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,CAAC,IAAI,CACX,gEAAgE,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,KAAC,iBAAiB,IACjB,KAAK,EAAE;YACN,QAAQ;YACR,QAAQ;YACR,KAAK;SACL,YAED,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,KAClD,KAAK,YAER,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,CAC/B,8BACE,KAAK,EACN,eAAK,SAAS,EAAC,eAAe,aAC5B,KAAK,EACL,UAAU,IACN,IACJ,CACH,CAAC,CAAC,CAAC,CACH,8BACE,KAAK,EACL,KAAK,EACL,UAAU,IACT,CACH,GACI,GACa,CACpB,CAAC;AACH,CAAC,CACD,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/components/form-helper/form-helper.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithoutRef } from "react";
+export type FormHelperProps = ComponentPropsWithoutRef<"div"> & {
+    error?: boolean;
+    disabled?: boolean;
+};
+/**
+ * A component that displays a helper text for a form field. Should be used as a child of a FormField component and will inherit the form field's error and disabled state.
+ *
+ * @example
+ * ```tsx
+ * <FormField>
+ *  <Label>Email</Label>
+ *  <Input />
+ *  <FormHelper>This is a helper text</FormHelper>
+ * </FormField>
+ * ```
+ */
+export declare const FormHelper: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    error?: boolean;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/form-helper/form-helper.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormContext } from "@components/form-field/form-field-context";
+import { getVariants } from "@utilities/get-variants/get-variants";
+import { forwardRef } from "react";
+const formHelperStyles = getVariants({
+    base: "text-gray-500 text-sm",
+    variants: {
+        error: {
+            true: "text-red-600",
+        },
+        disabled: {
+            true: "text-gray-300",
+        },
+    },
+    compoundVariants: [
+        {
+            error: true,
+            disabled: true,
+            className: "text-gray-300",
+        },
+    ],
+});
+/**
+ * A component that displays a helper text for a form field. Should be used as a child of a FormField component and will inherit the form field's error and disabled state.
+ *
+ * @example
+ * ```tsx
+ * <FormField>
+ *  <Label>Email</Label>
+ *  <Input />
+ *  <FormHelper>This is a helper text</FormHelper>
+ * </FormField>
+ * ```
+ */
+export const FormHelper = forwardRef(({ className, children, error: initialError, disabled: initialDisabled, ...props }, ref) => {
+    const { error, disabled } = useFormContext({
+        error: initialError,
+        disabled: initialDisabled,
+    });
+    return (_jsx("div", { ref: ref, className: formHelperStyles({ error, disabled, className }), ...props, children: children }));
+});
+//# sourceMappingURL=form-helper.js.map

package/dist/components/form-helper/form-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-helper.js","sourceRoot":"","sources":["../../../src/components/form-helper/form-helper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAOlE,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACpC,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,cAAc;SACpB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,eAAe;SACrB;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,eAAe;SAC1B;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CACnC,CACC,EACC,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC1C,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,KACvD,KAAK,YAER,QAAQ,GACJ,CACN,CAAC;AACH,CAAC,CACD,CAAC"}

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,54 @@
+import type { ResponsiveValue } from "@utilities/responsive/responsive";
+export type IconProps = React.SVGProps<SVGSVGElement> & {
+    asChild?: boolean;
+    size?: ResponsiveValue<"small" | "medium" | "large">;
+};
+export declare const SIZES: {
+    sm: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    md: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    lg: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    xl: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+};
+/**
+ * A flexible icon component that serves as a wrapper for SVG icons.
+ * Must be used with asChild={true} to render the actual icon component.
+ *
+ * @example
+ * // Correct usage
+ * <Icon asChild size="medium">
+ *   <HomeIcon />
+ * </Icon>
+ *
+ * @example
+ * // With different sizes
+ * <Icon asChild size="small">
+ *   <UserIcon />
+ * </Icon>
+ *
+ * @example
+ * // With custom className
+ * <Icon asChild className="text-blue-500">
+ *   <SettingsIcon />
+ * </Icon>
+ *
+ * @param {boolean} [props.asChild] - Should always be true when using this component
+ * @param {ResponsiveValue<"small" | "medium" | "large">} [props.size="medium"] - The size of the icon
+ * @param {string} [props.className] - Additional CSS classes to apply
+ */
+export declare const Icon: import("react").ForwardRefExoticComponent<Omit<IconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/icon/icon.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@components/slot/slot";
+import { getVariants } from "@utilities/get-variants/get-variants";
+import { forwardRef } from "react";
+export const SIZES = {
+    sm: {
+        small: "sm:h-4 sm:w-4",
+        medium: "sm:h-6 sm:w-6",
+        large: "sm:h-8 sm:w-8",
+    },
+    md: {
+        small: "md:h-4 md:w-4",
+        medium: "md:h-6 md:w-6",
+        large: "md:h-8 md:w-8",
+    },
+    lg: {
+        small: "lg:h-4 lg:w-4",
+        medium: "lg:h-6 lg:w-6",
+        large: "lg:h-8 lg:w-8",
+    },
+    xl: {
+        small: "xl:h-4 xl:w-4",
+        medium: "xl:h-6 xl:w-6",
+        large: "xl:h-8 xl:w-8",
+    },
+};
+const iconStyles = getVariants({
+    base: "fill-current text-current",
+    variants: {
+        size: {
+            small: "h-4 w-4",
+            medium: "h-6 w-6",
+            large: "h-8 w-8",
+        },
+    },
+});
+/**
+ * A flexible icon component that serves as a wrapper for SVG icons.
+ * Must be used with asChild={true} to render the actual icon component.
+ *
+ * @example
+ * // Correct usage
+ * <Icon asChild size="medium">
+ *   <HomeIcon />
+ * </Icon>
+ *
+ * @example
+ * // With different sizes
+ * <Icon asChild size="small">
+ *   <UserIcon />
+ * </Icon>
+ *
+ * @example
+ * // With custom className
+ * <Icon asChild className="text-blue-500">
+ *   <SettingsIcon />
+ * </Icon>
+ *
+ * @param {boolean} [props.asChild] - Should always be true when using this component
+ * @param {ResponsiveValue<"small" | "medium" | "large">} [props.size="medium"] - The size of the icon
+ * @param {string} [props.className] - Additional CSS classes to apply
+ */
+export const Icon = forwardRef(({ className, size = "medium", asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "svg";
+    return (_jsx(Comp, { ref: ref, className: iconStyles({ size, className }), ...props }));
+});
+//# sourceMappingURL=icon.js.map

package/dist/components/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAOtD,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;CACD,CAAC;AAEF,MAAM,UAAU,GAAG,WAAW,CAAC;IAC9B,IAAI,EAAE,2BAA2B;IACjC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SAChB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACpC,OAAO,CACN,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,GAAI,CACzE,CAAC;AACH,CAAC,CACD,CAAC"}

package/dist/components/input/input.d.ts

@@ -0,0 +1,15 @@
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    error?: boolean;
+};
+/**
+ * A basic input component with styling.
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter your email" id="email" />
+ * ```
+ */
+declare const Input: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
+    error?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/input/input.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormContext } from "@components/form-field/form-field-context";
+import { cn } from "@utilities/cn/cn";
+import { getVariants } from "@utilities/get-variants/get-variants";
+import { forwardRef } from "react";
+const inputStyles = getVariants({
+    base: "rounded-sm border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline focus-visible:outline-gray-800",
+    variants: {
+        error: {
+            true: "border-red-600",
+        },
+        disabled: {
+            true: "disabled:cursor-not-allowed disabled:opacity-50",
+        },
+    },
+    compoundVariants: [
+        {
+            error: true,
+            disabled: true,
+            className: "border-gray-400 disabled:cursor-not-allowed disabled:opacity-50",
+        },
+    ],
+});
+/**
+ * A basic input component with styling.
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter your email" id="email" />
+ * ```
+ */
+const Input = forwardRef(({ className, disabled: initialDisabled, required: initialRequired, error: initialError, ...props }, ref) => {
+    const { disabled, required, error } = useFormContext({
+        disabled: initialDisabled,
+        required: initialRequired,
+        error: initialError,
+    });
+    return (_jsx("input", { className: inputStyles({ disabled, error, className }), disabled: disabled, required: required, ...props, ref: ref }));
+});
+Input.displayName = "Input";
+export { Input };
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,oIAAoI;IAC1I,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,gBAAgB;SACtB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,iDAAiD;SACvD;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EACR,iEAAiE;SAClE;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,MAAM,KAAK,GAAG,UAAU,CACvB,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,YAAY,EACnB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QACpD,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,gBACC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,EACT,GAAG,EAAE,GAAG,GACP,CACF,CAAC;AACH,CAAC,CACD,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/label/label.d.ts

@@ -0,0 +1,16 @@
+export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+    required?: boolean;
+};
+/**
+ * A label component that can be used to label form fields.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" />
+ * ```
+ */
+declare const Label: import("react").ForwardRefExoticComponent<import("react").LabelHTMLAttributes<HTMLLabelElement> & {
+    required?: boolean;
+} & import("react").RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/components/label/label.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormContext } from "@components/form-field/form-field-context";
+import { cn } from "@utilities/cn/cn";
+import { Label as RadixLabel } from "radix-ui";
+import { forwardRef } from "react";
+/**
+ * A label component that can be used to label form fields.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" />
+ * ```
+ */
+const Label = forwardRef(({ className, required: initialRequired, children, ...props }, ref) => {
+    const { required } = useFormContext({
+        required: initialRequired,
+    });
+    return (_jsxs(RadixLabel.Root, { className: cn("font-medium text-gray-900 text-md peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props, ref: ref, children: [children, required && _jsx("span", { children: "*" })] }));
+});
+Label.displayName = RadixLabel.Root.displayName;
+export { Label };
+//# sourceMappingURL=label.js.map

package/dist/components/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/components/label/label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC;;;;;;;;GAQG;AACH,MAAM,KAAK,GAAG,UAAU,CACvB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACnC,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,MAAC,UAAU,CAAC,IAAI,IACf,SAAS,EAAE,EAAE,CACZ,6FAA6F,EAC7F,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,EACR,QAAQ,IAAI,+BAAc,IACV,CAClB,CAAC;AACH,CAAC,CACD,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Pagination
+ */
+export type PaginationProps = {
+    children?: React.ReactNode;
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    asChild?: boolean;
+} & React.HTMLAttributes<HTMLElement>;
+/**
+ * Pagination component that provides navigation controls for a set of pages.
+ *
+ * @param {number} props.page - The current active page number
+ * @param {number} props.totalPages - The total number of pages
+ * @param {(page: number) => void} props.onPageChange - Callback function called when page changes
+ * @param {boolean} [props.asChild] - Whether to render the root element as a child component
+ * @param {React.ReactNode} [props.children] - The content to render within the pagination component
+ * @param {string} [props.className] - Additional CSS classes to apply
+ *
+ * @example
+ * ```tsx
+ * <Pagination page={1} totalPages={10} onPageChange={(page) => console.log(page)}>
+ *   <PaginationPrev>Previous</PaginationPrev>
+ *   <PaginationItem index={1}>1</PaginationItem>
+ *   <PaginationItem index={2}>2</PaginationItem>
+ *   <PaginationNext>Next</PaginationNext>
+ * </Pagination>
+ * ```
+ */
+declare const Pagination: import("react").ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    asChild?: boolean;
+} & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+/**
+ * Pagination Item
+ */
+export type PaginationItemProps = {
+    children?: React.ReactNode;
+    index?: number;
+} & React.HTMLAttributes<HTMLButtonElement>;
+/**
+ * Individual page item within the Pagination component.
+ *
+ * @example
+ * ```tsx
+ * <PaginationItem index={1}>1</PaginationItem>
+ */
+declare const PaginationItem: import("react").ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    index?: number;
+} & import("react").HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Pagination Prev
+ */
+/**
+ * Previous page button component for the Pagination.
+ * Automatically disabled when on the first page.
+ *
+ * @example
+ * ```tsx
+ * <PaginationPrev>Previous</PaginationPrev>
+ * ```
+ */
+declare const PaginationPrev: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Pagination Next
+ */
+/**
+ * Next page button component for the Pagination.
+ * Automatically disabled when on the last page.
+ *
+ * @example
+ * ```tsx
+ * <PaginationNext>Next</PaginationNext>
+ * ```
+ */
+declare const PaginationNext: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export { Pagination, PaginationItem, PaginationPrev, PaginationNext };