luan-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Benedikt Sperl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# luan-ui
+
+Luan UI is built with Tailwind on top of Radix UI Primitives. It includes Responsive values that can be defined based on breakpoints.

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,34 @@
+import { Accordion as RadixAccordion } from "radix-ui";
+import { type ComponentPropsWithoutRef } from "react";
+/**
+ * Accordion component that allows users to expand and collapse content sections.
+ * Built on top of Radix UI's Accordion primitive.
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content for section 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @param {Object} props - The component props
+ * @param {string} props.className - Optional class name for custom styling
+ * @param {React.ReactNode} props.children - The accordion items to render
+ * @param {"single" | "multiple"} [props.type="single"] - Whether to allow single or multiple items expanded
+ * @param {boolean} [props.collapsible=false] - Whether the expanded item can be collapsed
+ * @param {string} [props.value] - The controlled value(s) of the expanded accordion item(s)
+ * @param {function} [props.onValueChange] - Callback when value changes
+ * @returns {React.ReactNode} The rendered accordion component
+ */
+export type AccordionProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root>;
+declare const Accordion: import("react").ForwardRefExoticComponent<(RadixAccordion.AccordionSingleProps | RadixAccordion.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>;
+export type AccordionItemProps = ComponentPropsWithoutRef<typeof RadixAccordion.Item>;
+declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<RadixAccordion.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type AccordionTriggerProps = ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>;
+declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<RadixAccordion.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type AccordionContentProps = ComponentPropsWithoutRef<typeof RadixAccordion.Content>;
+declare const AccordionContent: import("react").ForwardRefExoticComponent<Omit<RadixAccordion.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/accordion/accordion.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@components/icon/icon";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { cn } from "@utilities/cn/cn";
+import { Accordion as RadixAccordion } from "radix-ui";
+import { forwardRef, } from "react";
+const Accordion = RadixAccordion.Root;
+const AccordionItem = forwardRef(({ className, ...props }, ref) => (_jsx(RadixAccordion.Item, { ref: ref, className: cn("border-gray-200 border-b", className), ...props })));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = forwardRef(({ className, children, ...props }, ref) => (_jsx(RadixAccordion.Header, { className: "flex", children: _jsxs(RadixAccordion.Trigger, { ref: ref, className: cn("flex flex-1 cursor-pointer items-center justify-between py-4 text-left font-medium text-sm transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(Icon, { asChild: true, size: "small", children: _jsx(ChevronDownIcon, { className: "shrink-0 cursor-pointer text-gray-500 transition-transform duration-350" }) })] }) })));
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionContent = forwardRef(({ className, children, ...props }, ref) => (_jsx(RadixAccordion.Content, { ref: ref, className: cn("overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", className), ...props, children: _jsx("div", { className: "pt-0 pb-4", children: children }) })));
+AccordionContent.displayName = "AccordionContent";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AA6Bf,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC;AAMtC,MAAM,aAAa,GAAG,UAAU,CAG9B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,cAAc,CAAC,IAAI,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,KAChD,KAAK,GACR,CACF,CAAC,CAAC;AACH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAM5C,MAAM,gBAAgB,GAAG,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,KAAC,cAAc,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACtC,MAAC,cAAc,CAAC,OAAO,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,+JAA+J,EAC/J,SAAS,CACT,KACG,KAAK,aAER,QAAQ,EACT,KAAC,IAAI,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,YACzB,KAAC,eAAe,IAAC,SAAS,EAAC,yEAAyE,GAAG,GACjG,IACiB,GACF,CACxB,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAMlD,MAAM,gBAAgB,GAAG,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,KAAC,cAAc,CAAC,OAAO,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,2GAA2G,EAC3G,SAAS,CACT,KACG,KAAK,YAET,cAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,GACnB,CACzB,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/button/button.d.ts

@@ -0,0 +1,60 @@
+import type { ResponsiveValue } from "@utilities/responsive/responsive";
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "primary" | "secondary";
+    size?: ResponsiveValue<"small" | "medium" | "large">;
+    asChild?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+};
+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;
+    };
+};
+/**
+ * A flexible button component that supports variants, sizes, and icons
+ * @param {Object} props - The props for the Button component
+ * @param {'primary' | 'secondary'} [props.variant='primary'] - The visual style variant of the button
+ * @param {'small' | 'medium' | 'large'} [props.size='medium'] - The size of the button
+ * @param {boolean} [props.asChild] - Whether to render the button as a child component using Radix Slot
+ * @param {React.ReactNode} [props.iconStart] - Icon element to display before the button content
+ * @param {React.ReactNode} [props.iconEnd] - Icon element to display after the button content
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The Button component
+ * @example
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * // With variants and size
+ * <Button variant="secondary" size="large">
+ *   Large Secondary Button
+ * </Button>
+ *
+ * // With icons
+ * <Button iconStart={<SearchIcon />} iconEnd={<ArrowRightIcon />}>
+ *   Search
+ * </Button>
+ *
+ * // Disabled state
+ * <Button disabled>Disabled Button</Button>
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "primary" | "secondary";
+    size?: ResponsiveValue<"small" | "medium" | "large">;
+    asChild?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/button/button.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@components/icon/icon";
+import { Slot, Slottable } from "@components/slot/slot";
+import { getVariants } from "@utilities/get-variants/get-variants";
+import { forwardRef } from "react";
+export const SIZES = {
+    sm: {
+        small: "sm:text-sm sm:px-2 sm:py-1 sm:gap-2",
+        medium: "sm:text-base sm:px-4 sm:py-2 sm:gap-4",
+        large: "sm:text-lg sm:px-6 sm:py-3 sm:gap-6",
+    },
+    md: {
+        small: "md:text-sm md:px-2 md:py-1 md:gap-2",
+        medium: "md:text-base md:px-4 md:py-2 md:gap-4",
+        large: "md:text-lg md:px-6 md:py-3 md:gap-6",
+    },
+    lg: {
+        small: "lg:text-sm lg:px-2 lg:py-1 lg:gap-2",
+        medium: "lg:text-base lg:px-4 lg:py-2 lg:gap-4",
+        large: "lg:text-lg lg:px-6 lg:py-3 lg:gap-6",
+    },
+};
+const buttonStyles = getVariants({
+    base: "flex w-fit cursor-pointer items-center justify-center gap-2 rounded border font-semibold",
+    variants: {
+        variant: {
+            primary: "border-transparent bg-gray-700 text-white hover:bg-gray-800",
+            secondary: "border-gray-700 bg-white text-gray-700 hover:bg-gray-50",
+        },
+        size: {
+            small: "gap-2 px-2 py-1 text-sm",
+            medium: "gap-3 px-4 py-2 text-base",
+            large: "gap-4 px-6 py-3 text-lg",
+        },
+        disabled: {
+            true: "cursor-not-allowed opacity-50",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "secondary",
+            size: "medium",
+            className: "test-compound-variant",
+        },
+    ],
+});
+/**
+ * A flexible button component that supports variants, sizes, and icons
+ * @param {Object} props - The props for the Button component
+ * @param {'primary' | 'secondary'} [props.variant='primary'] - The visual style variant of the button
+ * @param {'small' | 'medium' | 'large'} [props.size='medium'] - The size of the button
+ * @param {boolean} [props.asChild] - Whether to render the button as a child component using Radix Slot
+ * @param {React.ReactNode} [props.iconStart] - Icon element to display before the button content
+ * @param {React.ReactNode} [props.iconEnd] - Icon element to display after the button content
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The Button component
+ * @example
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * // With variants and size
+ * <Button variant="secondary" size="large">
+ *   Large Secondary Button
+ * </Button>
+ *
+ * // With icons
+ * <Button iconStart={<SearchIcon />} iconEnd={<ArrowRightIcon />}>
+ *   Search
+ * </Button>
+ *
+ * // Disabled state
+ * <Button disabled>Disabled Button</Button>
+ */
+export const Button = forwardRef(({ asChild, children, variant = "primary", size = "medium", className, disabled, iconStart, iconEnd, ...props }, ref) => {
+    const Component = asChild ? Slot : "button";
+    return (_jsx(Component, { ref: ref, className: buttonStyles({ variant, size, disabled, className }), ...props, children: _jsx(Slottable, { child: children, children: (child) => (_jsxs(_Fragment, { children: [iconStart && (_jsx(Icon, { size: size, asChild: true, children: iconStart })), child, iconEnd && (_jsx(Icon, { size: size, asChild: true, children: iconEnd }))] })) }) }));
+});
+Button.displayName = "Button";
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUnC,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;CACD,CAAC;AAEF,MAAM,YAAY,GAAG,WAAW,CAAC;IAChC,IAAI,EAAE,0FAA0F;IAChG,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,6DAA6D;YACtE,SAAS,EAAE,yDAAyD;SACpE;QACD,IAAI,EAAE;YACL,KAAK,EAAE,yBAAyB;YAChC,MAAM,EAAE,2BAA2B;YACnC,KAAK,EAAE,yBAAyB;SAChC;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,+BAA+B;SACrC;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,OAAO,EAAE,WAAW;YACpB,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,uBAAuB;SAClC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC/B,CACC,EACC,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC5C,OAAO,CACN,KAAC,SAAS,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,KAC3D,KAAK,YAET,KAAC,SAAS,IAAC,KAAK,EAAE,QAAQ,YACxB,CAAC,KAAK,EAAE,EAAE,CAAC,CACX,8BACE,SAAS,IAAI,CACb,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACvB,SAAS,GACJ,CACP,EACA,KAAK,EACL,OAAO,IAAI,CACX,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACvB,OAAO,GACF,CACP,IACC,CACH,GACU,GACD,CACZ,CAAC;AACH,CAAC,CACD,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/components/card/card.d.ts

@@ -0,0 +1,172 @@
+import type { ResponsiveValue } from "@utilities/responsive/responsive";
+/**
+ * Card
+ */
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: ResponsiveValue<"small" | "medium" | "large">;
+    asChild?: boolean;
+};
+export declare const CARD_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;
+    };
+};
+/**
+ * Card component that provides a container with consistent styling and spacing.
+ * Supports different sizes and can be used with asChild prop for composition.
+ *
+ * @example
+ * ```tsx
+ * <Card size="medium">
+ *   <CardHeader>Header</CardHeader>
+ *   <CardContent>Content</CardContent>
+ *   <CardFooter>Footer</CardFooter>
+ * </Card>
+ * ```
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+    size?: ResponsiveValue<"small" | "medium" | "large">;
+    asChild?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Card Header
+ */
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: ResponsiveValue<"small" | "medium" | "large">;
+    asChild?: boolean;
+};
+export declare const CARD_HEADER_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;
+    };
+};
+/**
+ * Card Header component that provides a consistent header section for the Card.
+ * Inherits size from parent Card component.
+ *
+ * @example
+ * ```tsx
+ * <CardHeader>
+ *   <h2>Title</h2>
+ *   <button>Action</button>
+ * </CardHeader>
+ * ```
+ */
+export declare const CardHeader: import("react").ForwardRefExoticComponent<Omit<CardHeaderProps, "size"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Card Content
+ */
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: ResponsiveValue<"small" | "medium" | "large">;
+    asChild?: boolean;
+};
+export declare const CARD_CONTENT_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;
+    };
+};
+/**
+ * Card Content component that provides the main content area for the Card.
+ * Inherits size from parent Card component.
+ *
+ * @example
+ * ```tsx
+ * <CardContent>
+ *   <p>Main content goes here</p>
+ * </CardContent>
+ * ```
+ */
+export declare const CardContent: import("react").ForwardRefExoticComponent<Omit<CardContentProps, "size"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Card Footer
+ */
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: ResponsiveValue<"small" | "medium" | "large">;
+    asChild?: boolean;
+};
+export declare const CARD_FOOTER_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;
+    };
+};
+/**
+ * Card Footer component that provides a consistent footer section for the Card.
+ * Inherits size from parent Card component.
+ *
+ * @example
+ * ```tsx
+ * <CardFooter>
+ *   <button>Cancel</button>
+ *   <button>Submit</button>
+ * </CardFooter>
+ * ```
+ */
+export declare const CardFooter: import("react").ForwardRefExoticComponent<Omit<CardFooterProps, "size"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/card/card.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@components/slot/slot";
+import { getVariants } from "@utilities/get-variants/get-variants";
+import { createContext, forwardRef, useContext } from "react";
+const CardContext = createContext(undefined);
+const useCardContext = () => {
+    const context = useContext(CardContext);
+    if (!context) {
+        throw new Error("Card components must be used within a Card");
+    }
+    return context;
+};
+export const CARD_SIZES = {
+    sm: {
+        small: "sm:gap-2 sm:py-2",
+        medium: "sm:gap-4 sm:py-4",
+        large: "sm:gap-6 sm:py-6",
+    },
+    md: {
+        small: "md:gap-2 md:py-2",
+        medium: "md:gap-4 md:py-4",
+        large: "md:gap-6 md:py-6",
+    },
+    lg: {
+        small: "lg:gap-2 lg:py-2",
+        medium: "lg:gap-4 lg:py-4",
+        large: "lg:gap-6 lg:py-6",
+    },
+    xl: {
+        small: "xl:gap-2 xl:py-2",
+        medium: "xl:gap-4 xl:py-4",
+        large: "xl:gap-6 xl:py-6",
+    },
+};
+const cardStyles = getVariants({
+    base: "flex flex-col rounded-lg border border-gray-200 bg-white shadow-md",
+    variants: {
+        size: {
+            small: "gap-2 py-2",
+            medium: "gap-4 py-4",
+            large: "gap-6 py-6",
+        },
+    },
+});
+/**
+ * Card component that provides a container with consistent styling and spacing.
+ * Supports different sizes and can be used with asChild prop for composition.
+ *
+ * @example
+ * ```tsx
+ * <Card size="medium">
+ *   <CardHeader>Header</CardHeader>
+ *   <CardContent>Content</CardContent>
+ *   <CardFooter>Footer</CardFooter>
+ * </Card>
+ * ```
+ */
+export const Card = forwardRef(({ className, size = "medium", asChild, ...props }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (_jsx(CardContext.Provider, { value: { size }, children: _jsx(Component, { ref: ref, className: cardStyles({ className, size }), ...props }) }));
+});
+Card.displayName = "Card";
+export const CARD_HEADER_SIZES = {
+    sm: {
+        small: "sm:px-2 sm:pb-2",
+        medium: "sm:px-4 sm:pb-4",
+        large: "sm:px-6 sm:pb-6",
+    },
+    md: {
+        small: "md:px-2 md:pb-2",
+        medium: "md:px-4 md:pb-4",
+        large: "md:px-6 md:pb-6",
+    },
+    lg: {
+        small: "lg:px-2 lg:pb-2",
+        medium: "lg:px-4 lg:pb-4",
+        large: "lg:px-6 lg:pb-6",
+    },
+    xl: {
+        small: "xl:px-2 xl:pb-2",
+        medium: "xl:px-4 xl:pb-4",
+        large: "xl:px-6 xl:pb-6",
+    },
+};
+const cardHeaderStyles = getVariants({
+    base: "flex items-center justify-between border-gray-200 border-b",
+    variants: {
+        size: {
+            small: "px-2 pb-2",
+            medium: "px-4 pb-4",
+            large: "px-6 pb-6",
+        },
+    },
+});
+/**
+ * Card Header component that provides a consistent header section for the Card.
+ * Inherits size from parent Card component.
+ *
+ * @example
+ * ```tsx
+ * <CardHeader>
+ *   <h2>Title</h2>
+ *   <button>Action</button>
+ * </CardHeader>
+ * ```
+ */
+export const CardHeader = forwardRef(({ className, asChild, ...props }, ref) => {
+    const { size } = useCardContext();
+    const Component = asChild ? Slot : "div";
+    return (_jsx(Component, { ref: ref, className: cardHeaderStyles({ className, size }), ...props }));
+});
+CardHeader.displayName = "CardHeader";
+export const CARD_CONTENT_SIZES = {
+    sm: {
+        small: "sm:gap-2 sm:px-2",
+        medium: "sm:gap-4 sm:px-4",
+        large: "sm:gap-6 sm:px-6",
+    },
+    md: {
+        small: "md:gap-2 md:px-2",
+        medium: "md:gap-4 md:px-4",
+        large: "md:gap-6 md:px-6",
+    },
+    lg: {
+        small: "lg:gap-2 lg:px-2",
+        medium: "lg:gap-4 lg:px-4",
+        large: "lg:gap-6 lg:px-6",
+    },
+    xl: {
+        small: "xl:gap-2 xl:px-2",
+        medium: "xl:gap-4 xl:px-4",
+        large: "xl:gap-6 xl:px-6",
+    },
+};
+const cardContentStyles = getVariants({
+    base: "flex flex-col",
+    variants: {
+        size: {
+            small: "gap-2 px-2",
+            medium: "gap-4 px-4",
+            large: "gap-6 px-6",
+        },
+    },
+});
+/**
+ * Card Content component that provides the main content area for the Card.
+ * Inherits size from parent Card component.
+ *
+ * @example
+ * ```tsx
+ * <CardContent>
+ *   <p>Main content goes here</p>
+ * </CardContent>
+ * ```
+ */
+export const CardContent = forwardRef(({ className, asChild, ...props }, ref) => {
+    const { size } = useCardContext();
+    const Component = asChild ? Slot : "div";
+    return (_jsx(Component, { ref: ref, className: cardContentStyles({ className, size }), ...props }));
+});
+CardContent.displayName = "CardContent";
+export const CARD_FOOTER_SIZES = {
+    sm: {
+        small: "sm:px-2 sm:pt-2",
+        medium: "sm:px-4 sm:pt-4",
+        large: "sm:px-6 sm:pt-6",
+    },
+    md: {
+        small: "md:px-2 md:pt-2",
+        medium: "md:px-4 md:pt-4",
+        large: "lg:px-6 lg:pt-6",
+    },
+    lg: {
+        small: "lg:px-2 lg:pt-2",
+        medium: "lg:px-4 lg:pt-4",
+        large: "lg:px-6 lg:pt-6",
+    },
+    xl: {
+        small: "xl:px-2 xl:pt-2",
+        medium: "xl:px-4 xl:pt-4",
+        large: "xl:px-6 xl:pt-6",
+    },
+};
+const cardFooterStyles = getVariants({
+    base: "flex items-center justify-between border-gray-200 border-t",
+    variants: {
+        size: {
+            small: "px-2 pt-2",
+            medium: "px-4 pt-4",
+            large: "px-6 pt-6",
+        },
+    },
+});
+/**
+ * Card Footer component that provides a consistent footer section for the Card.
+ * Inherits size from parent Card component.
+ *
+ * @example
+ * ```tsx
+ * <CardFooter>
+ *   <button>Cancel</button>
+ *   <button>Submit</button>
+ * </CardFooter>
+ * ```
+ */
+export const CardFooter = forwardRef(({ className, asChild, ...props }, ref) => {
+    const { size } = useCardContext();
+    const Component = asChild ? Slot : "div";
+    return (_jsx(Component, { ref: ref, className: cardFooterStyles({ className, size }), ...props }));
+});
+CardFooter.displayName = "CardFooter";
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

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

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,39 @@
+import { type ResponsiveValue } from "@utilities/responsive/responsive";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { type ComponentPropsWithoutRef } from "react";
+export type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    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 checkbox component built on top of Radix UI's checkbox primitive.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox id="checkbox" onCheckedChange={(checked) => console.log(checked)} />
+ * ```
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    size?: ResponsiveValue<"small" | "medium" | "large">;
+} & import("react").RefAttributes<HTMLButtonElement>>;