@kala-ui/react 0.0.1-beta.7 → 0.0.2

package/dist/components/badge/badge.js

@@ -3,7 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { badgeStyles } from "../../config/badge";
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 const badgeVariants = cva(badgeStyles.base, {
     variants: badgeStyles.variants,
     defaultVariants: badgeStyles.defaultVariants,

package/dist/components/badge/badge.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Badge } from "./badge";
 const meta = {
     title: "Data Display/Badge",

package/dist/components/banner/banner-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Provides zero-CLS skeleton state that matches actual banner layout.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { SkeletonCircle } from "../skeleton/skeleton-patterns";
 /**
  * Banner skeleton component

package/dist/components/banner/banner.d.ts

@@ -12,7 +12,7 @@ import { type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 import type { BannerSkeletonConfig } from "../skeleton/skeleton.types";
 declare const bannerVariants: (props?: ({
-    variant?: "error" | "info" | "warning" | "success" | null | undefined;
+    variant?: "success" | "warning" | "info" | "error" | null | undefined;
     position?: "fixed" | "static" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BannerProps extends React.ComponentProps<"div">, VariantProps<typeof bannerVariants> {

package/dist/components/banner/banner.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Banner } from "./banner";
 const meta = {
     title: "Feedback/Banner",

package/dist/components/box/box.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
+    asChild?: boolean;
+    as?: React.ElementType;
+    [key: string]: any;
+}
+declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export { Box };

package/dist/components/box/box.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const Box = React.forwardRef(({ className, asChild = false, as: Tag = "div", ...props }, ref) => {
+    const Comp = asChild ? Slot : Tag;
+    return _jsx(Comp, { className: cn(className), ref: ref, ...props });
+});
+Box.displayName = "Box";
+export { Box };

package/dist/components/box/box.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "./box";
+declare const meta: Meta<typeof Box>;
+export default meta;
+type Story = StoryObj<typeof Box>;
+export declare const Default: Story;
+export declare const WithCustomStyles: Story;
+export declare const AsChild: Story;

package/dist/components/box/box.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "./box";
+const meta = {
+    title: "Components/Box",
+    component: Box,
+    tags: ["autodocs"],
+    argTypes: {
+        asChild: {
+            control: "boolean",
+            description: "Change the default rendered element for the one passed as a child, merging their props and behavior.",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: "This is a box",
+        className: "p-4 bg-gray-100 rounded border border-gray-200",
+    },
+};
+export const WithCustomStyles = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx("h3", { className: "font-bold mb-2", children: "Box with custom styles" }), _jsx("p", { children: "You can use any Tailwind utility classes on the Box component." })] })),
+        className: "p-6 bg-blue-50 text-blue-900 rounded-lg shadow-sm",
+    },
+};
+export const AsChild = {
+    args: {
+        asChild: true,
+        children: (_jsx("button", { type: "button", className: "px-4 py-2 bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity", children: "I am a button rendered via Box asChild" })),
+    },
+};

package/dist/components/box/index.d.ts

@@ -0,0 +1 @@
+export * from "./box";

package/dist/components/box/index.js

@@ -0,0 +1 @@
+export * from "./box";

package/dist/components/breadcrumbs/breadcrumbs-skeleton.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { Fragment } from "react";
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Breadcrumbs skeleton component
  *

package/dist/components/breadcrumbs/breadcrumbs.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Breadcrumbs } from "./breadcrumbs";
 const meta = {
     title: "Navigation/Breadcrumbs",

package/dist/components/burger/burger.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface BurgerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** State of the burger */
+    opened?: boolean;
+    /** Size of the burger */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+export declare const Burger: React.ForwardRefExoticComponent<BurgerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/burger/burger.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+export const Burger = React.forwardRef(({ className, opened, size = "md", ...props }, ref) => {
+    const sizeClasses = {
+        xs: "h-3 w-4",
+        sm: "h-4 w-5",
+        md: "h-5 w-6",
+        lg: "h-6 w-8",
+        xl: "h-8 w-10",
+    };
+    const lineSizeClasses = {
+        xs: "h-0.5",
+        sm: "h-0.5",
+        md: "h-0.5",
+        lg: "h-1",
+        xl: "h-1",
+    };
+    return (_jsxs("button", { ref: ref, type: "button", className: cn("relative flex flex-col justify-between cursor-pointer transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", sizeClasses[size], className), "aria-label": opened ? "Close navigation" : "Open navigation", "aria-expanded": opened, ...props, children: [_jsx("div", { className: cn("bg-foreground w-full rounded transition-transform origin-top-left", lineSizeClasses[size], opened && "translate-x-[3px] rotate-45") }), _jsx("div", { className: cn("bg-foreground w-full rounded transition-opacity", lineSizeClasses[size], opened && "opacity-0") }), _jsx("div", { className: cn("bg-foreground w-full rounded transition-transform origin-bottom-left", lineSizeClasses[size], opened && "translate-x-[3px] -rotate-45") })] }));
+});
+Burger.displayName = "Burger";

package/dist/components/burger/burger.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Burger } from "./burger";
+declare const meta: Meta<typeof Burger>;
+export default meta;
+type Story = StoryObj<typeof Burger>;
+export declare const Default: Story;
+export declare const Interactive: Story;
+export declare const Sizes: Story;

package/dist/components/burger/burger.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDisclosure } from "@kala-ui/react-hooks";
+import { Flex } from "../flex";
+import { Burger } from "./burger";
+const meta = {
+    title: "Components/Burger",
+    component: Burger,
+    tags: ["autodocs"],
+    argTypes: {
+        opened: { control: "boolean" },
+        size: {
+            control: { type: "select" },
+            options: ["xs", "sm", "md", "lg", "xl"],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        opened: false,
+    },
+};
+export const Interactive = {
+    render: () => {
+        const [opened, { toggle }] = useDisclosure(false);
+        return _jsx(Burger, { opened: opened, onClick: toggle });
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Burger, { size: "xs" }), _jsx(Burger, { size: "sm" }), _jsx(Burger, { size: "md" }), _jsx(Burger, { size: "lg" }), _jsx(Burger, { size: "xl" })] })),
+};

package/dist/components/burger/index.d.ts

@@ -0,0 +1 @@
+export * from "./burger";

package/dist/components/burger/index.js

@@ -0,0 +1 @@
+export * from "./burger";

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

@@ -5,8 +5,8 @@
 import * as React from "react";
 import type { ButtonProps } from "./button.types";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "dark" | "light" | "info" | "warning" | "success" | "primary" | "secondary" | "danger" | "destructive" | "outline" | "muted" | "ghost" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-warning" | "outline-danger" | "outline-info" | "outline-dark" | "outline-light" | "outline-muted" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | "xs" | null | undefined;
+    variant?: "link" | "default" | "dark" | "light" | "primary" | "secondary" | "success" | "danger" | "destructive" | "warning" | "info" | "outline" | "muted" | "ghost" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-warning" | "outline-danger" | "outline-info" | "outline-dark" | "outline-light" | "outline-muted" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     rounded?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/button/button.stories.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fn } from "@storybook/test";
-import { Skeleton } from "../skeleton/skeleton";
+import { Box } from "../box";
+import { Flex } from "../flex";
+import { Stack } from "../stack";
+import { Skeleton } from "../skeleton";
 import { Button } from "./button";
 const meta = {
     title: "Buttons/Button",
@@ -63,19 +66,19 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: (args) => (_jsx("div", { className: "flex flex-col gap-4", children: _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { ...args, variant: "primary", children: "Primary" }), _jsx(Button, { ...args, variant: "secondary", children: "Secondary" }), _jsx(Button, { ...args, variant: "success", children: "Success" }), _jsx(Button, { ...args, variant: "warning", children: "Warning" }), _jsx(Button, { ...args, variant: "danger", children: "Danger" }), _jsx(Button, { ...args, variant: "info", children: "Info" }), _jsx(Button, { ...args, variant: "light", children: "Light" }), _jsx(Button, { ...args, variant: "dark", children: "Dark" }), _jsx(Button, { ...args, variant: "link", children: "Link" }), _jsx(Button, { ...args, variant: "ghost", children: "Ghost" })] }) })),
+    render: (args) => (_jsx(Stack, { gap: 4, children: _jsxs(Flex, { wrap: "wrap", gap: 2, children: [_jsx(Button, { ...args, variant: "primary", children: "Primary" }), _jsx(Button, { ...args, variant: "secondary", children: "Secondary" }), _jsx(Button, { ...args, variant: "success", children: "Success" }), _jsx(Button, { ...args, variant: "warning", children: "Warning" }), _jsx(Button, { ...args, variant: "danger", children: "Danger" }), _jsx(Button, { ...args, variant: "info", children: "Info" }), _jsx(Button, { ...args, variant: "light", children: "Light" }), _jsx(Button, { ...args, variant: "dark", children: "Dark" }), _jsx(Button, { ...args, variant: "link", children: "Link" }), _jsx(Button, { ...args, variant: "ghost", children: "Ghost" })] }) })),
 };
 export const OutlineVariants = {
-    render: (args) => (_jsx("div", { className: "flex flex-col gap-4", children: _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { ...args, variant: "outline", children: "Default Outline" }), _jsx(Button, { ...args, variant: "outline-primary", children: "Primary" }), _jsx(Button, { ...args, variant: "outline-secondary", children: "Secondary" }), _jsx(Button, { ...args, variant: "outline-success", children: "Success" }), _jsx(Button, { ...args, variant: "outline-warning", children: "Warning" }), _jsx(Button, { ...args, variant: "outline-danger", children: "Danger" }), _jsx(Button, { ...args, variant: "outline-info", children: "Info" }), _jsx(Button, { ...args, variant: "outline-light", children: "Light" }), _jsx(Button, { ...args, variant: "outline-dark", children: "Dark" })] }) })),
+    render: (args) => (_jsx(Stack, { gap: 4, children: _jsxs(Flex, { wrap: "wrap", gap: 2, children: [_jsx(Button, { ...args, variant: "outline", children: "Default Outline" }), _jsx(Button, { ...args, variant: "outline-primary", children: "Primary" }), _jsx(Button, { ...args, variant: "outline-secondary", children: "Secondary" }), _jsx(Button, { ...args, variant: "outline-success", children: "Success" }), _jsx(Button, { ...args, variant: "outline-warning", children: "Warning" }), _jsx(Button, { ...args, variant: "outline-danger", children: "Danger" }), _jsx(Button, { ...args, variant: "outline-info", children: "Info" }), _jsx(Button, { ...args, variant: "outline-light", children: "Light" }), _jsx(Button, { ...args, variant: "outline-dark", children: "Dark" })] }) })),
 };
 export const Sizes = {
-    render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { ...args, size: "xs", children: "Extra Small" }), _jsx(Button, { ...args, size: "sm", children: "Small" }), _jsx(Button, { ...args, size: "default", children: "Default" }), _jsx(Button, { ...args, size: "lg", children: "Large" }), _jsx(Button, { ...args, size: "icon", children: _jsx("span", { className: "h-4 w-4", children: "\uD83D\uDE80" }) })] })),
+    render: (args) => (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Button, { ...args, size: "xs", children: "Extra Small" }), _jsx(Button, { ...args, size: "sm", children: "Small" }), _jsx(Button, { ...args, size: "default", children: "Default" }), _jsx(Button, { ...args, size: "lg", children: "Large" }), _jsx(Button, { ...args, size: "icon", children: _jsx(Box, { as: "span", className: "h-4 w-4", children: "\uD83D\uDE80" }) })] })),
 };
 export const States = {
-    render: (args) => (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { ...args, children: "Normal" }), _jsx(Button, { ...args, disabled: true, children: "Disabled" }), _jsx(Button, { ...args, isLoading: true, children: "Loading" })] })),
+    render: (args) => (_jsxs(Flex, { wrap: "wrap", gap: 2, children: [_jsx(Button, { ...args, children: "Normal" }), _jsx(Button, { ...args, disabled: true, children: "Disabled" }), _jsx(Button, { ...args, isLoading: true, children: "Loading" })] })),
 };
 export const Shapes = {
-    render: (args) => (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { ...args, children: "Default" }), _jsx(Button, { ...args, rounded: true, children: "Rounded Pill" })] })),
+    render: (args) => (_jsxs(Flex, { wrap: "wrap", gap: 2, children: [_jsx(Button, { ...args, children: "Default" }), _jsx(Button, { ...args, rounded: true, children: "Rounded Pill" })] })),
 };
 export const FullWidth = {
     args: {
@@ -87,7 +90,7 @@ export const FullWidth = {
     },
 };
 export const LoadingSkeleton = {
-    render: () => (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Skeleton, { className: "h-10 w-24 rounded-md" }), _jsx(Skeleton, { className: "h-10 w-32 rounded-md" }), _jsx(Skeleton, { className: "h-10 w-28 rounded-md" })] })),
+    render: () => (_jsxs(Flex, { wrap: "wrap", gap: 2, children: [_jsx(Skeleton, { className: "h-10 w-24 rounded-md" }), _jsx(Skeleton, { className: "h-10 w-32 rounded-md" }), _jsx(Skeleton, { className: "h-10 w-28 rounded-md" })] })),
     parameters: {
         docs: {
             description: {

package/dist/components/button-group/button-group.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, Minus, Plus } from "lucide-react";
 import { Button } from "../button";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, } from "./button-group";
 const meta = {
     title: "Buttons/ButtonGroup",

package/dist/components/calendar/calendar-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Displays month header and calendar grid.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Calendar skeleton component
  *

package/dist/components/calendar/calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type DayButton, DayPicker } from "react-day-picker";
-import { Button } from "../button/button";
+import { Button } from "../button";
 export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
     isLoading?: boolean;

package/dist/components/calendar/calendar.js

@@ -4,7 +4,7 @@ import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from "lucide-reac
 import * as React from "react";
 import { DayPicker, getDefaultClassNames, } from "react-day-picker";
 import { cn } from "../../lib/utils";
-import { Button, buttonVariants } from "../button/button";
+import { Button, buttonVariants } from "../button";
 import { CalendarSkeleton } from "./calendar-skeleton";
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, isLoading = false, skeletonConfig, skeleton, ...props }) {
     if (isLoading) {

package/dist/components/calendar/calendar.types.d.ts

@@ -1,7 +1,7 @@
-import type { DayPicker } from "react-day-picker";
 import type * as React from "react";
-import type { Button } from "../button/button";
-import type { CalendarSkeletonConfig } from "../skeleton/skeleton.types";
+import type { DayPicker } from "react-day-picker";
+import type { Button } from "../button";
+import type { CalendarSkeletonConfig } from "./calendar-skeleton";
 export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
     isLoading?: boolean;

package/dist/components/card/card-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Provides zero-CLS skeleton states that match actual card layouts.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { SkeletonText } from "../skeleton/skeleton-patterns";
 /**
  * Card skeleton component with multiple variants
@@ -19,7 +19,7 @@ import { SkeletonText } from "../skeleton/skeleton-patterns";
  * ```
  */
 export function CardSkeleton({ variant = "default", hasHeader = true, hasFooter = false, imagePosition = "top", contentRows = 3, showActions = false, className, "data-testid": dataTestId, }) {
-    return (_jsxs("div", { "data-testid": dataTestId || "card-skeleton", className: cn("rounded-md border bg-card overflow-hidden", className), children: [variant === "default" && (_jsx(DefaultCardSkeleton, { hasHeader: hasHeader, contentRows: contentRows, hasFooter: hasFooter, showActions: showActions })), variant === "withImage" && (_jsx(WithImageCardSkeleton, { hasHeader: hasHeader, contentRows: contentRows, hasFooter: hasFooter, showActions: showActions })), variant === "withImageTop" && (_jsx(WithImageTopCardSkeleton, { hasHeader: hasHeader, contentRows: contentRows, hasFooter: hasFooter, showActions: showActions })), variant === "horizontal" && (_jsx(HorizontalCardSkeleton, { imagePosition: imagePosition, hasHeader: hasHeader, contentRows: contentRows, hasFooter: hasFooter, showActions: showActions })), variant === "withFooter" && (_jsx(WithFooterCardSkeleton, { hasHeader: hasHeader, contentRows: contentRows, showActions: showActions })), variant === "minimal" && _jsx(MinimalCardSkeleton, { contentRows: contentRows })] }));
+    return (_jsxs("div", { "data-testid": dataTestId || "card-skeleton", className: cn("rounded-md border bg-card overflow-hidden", className), children: [variant === "default" && (_jsx(DefaultCardSkeleton, { hasHeader: hasHeader, contentRows: contentRows, hasFooter: hasFooter, showActions: showActions })), variant === "withImage" && (_jsx(WithImageCardSkeleton, { hasHeader: hasHeader, contentRows: contentRows, hasFooter: hasFooter, showActions: showActions })), variant === "withImageTop" && (_jsx(WithImageTopCardSkeleton, { hasHeader: hasHeader, contentRows: contentRows, hasFooter: hasFooter, showActions: showActions })), variant === "horizontal" && (_jsx(HorizontalCardSkeleton, { imagePosition: imagePosition, hasHeader: hasHeader, contentRows: contentRows, hasFooter: hasFooter, showActions: showActions })), variant === "withFooter" && (_jsx(WithFooterCardSkeleton, { hasHeader: hasHeader, contentRows: contentRows, showActions: showActions })), variant === "minimal" && (_jsx(MinimalCardSkeleton, { contentRows: contentRows }))] }));
 }
 /**
  * Default variant: header + content rows

package/dist/components/card/card.js

@@ -3,45 +3,48 @@ import * as React from "react";
 import { cardStyles } from "../../config/card";
 import { cn } from "../../lib/utils";
 import { CardSkeleton } from "./card-skeleton";
+import { Box } from "../box";
+import { Heading } from "../heading";
+import { Text } from "../text";
 const Card = React.forwardRef(({ className, isLoading = false, skeletonConfig, skeleton, children, ...props }, ref) => {
     if (isLoading) {
         if (skeleton) {
-            return (_jsx("div", { ref: ref, className: cn(cardStyles.base, className), children: skeleton }));
+            return (_jsx(Box, { ref: ref, className: cn(cardStyles.base, className), children: skeleton }));
         }
         return _jsx(CardSkeleton, { ...skeletonConfig });
     }
-    return (_jsx("div", { ref: ref, className: cn(cardStyles.base, className), ...props, children: children }));
+    return (_jsx(Box, { ref: ref, className: cn(cardStyles.base, className), ...props, children: children }));
 });
 Card.displayName = "Card";
 function CardHeader({ className, ...props }) {
-    return _jsx("div", { className: cn(cardStyles.header, className), ...props });
+    return _jsx(Box, { className: cn(cardStyles.header, className), ...props });
 }
 function CardTitle({ className, ...props }) {
-    return _jsx("h5", { className: cn(cardStyles.title, className), ...props });
+    return _jsx(Heading, { as: "h5", className: cn(cardStyles.title, className), ...props });
 }
 function CardSubtitle({ className, ...props }) {
-    return _jsx("h6", { className: cn(cardStyles.subtitle, className), ...props });
+    return _jsx(Heading, { as: "h6", className: cn(cardStyles.subtitle, className), ...props });
 }
 function CardDescription({ className, ...props }) {
-    return _jsx("p", { className: cn(cardStyles.description, className), ...props });
+    return _jsx(Text, { className: cn(cardStyles.description, className), ...props });
 }
 function CardAction({ className, ...props }) {
-    return _jsx("div", { className: cn("ml-auto", className), ...props });
+    return _jsx(Box, { className: cn("ml-auto", className), ...props });
 }
 function CardContent({ className, ...props }) {
-    return _jsx("div", { className: cn(cardStyles.content, className), ...props });
+    return _jsx(Box, { className: cn(cardStyles.content, className), ...props });
 }
 function CardFooter({ className, ...props }) {
-    return _jsx("div", { className: cn(cardStyles.footer, className), ...props });
+    return _jsx(Box, { className: cn(cardStyles.footer, className), ...props });
 }
 function CardImage({ className, alt = "", ...props }) {
     if (!alt) {
         console.warn("CardImage: Missing alt text. Images should have descriptive alt text for accessibility.");
     }
-    return (_jsx("img", { alt: alt, className: cn(cardStyles.image, className), ...props }));
+    return (_jsx(Box, { as: "img", alt: alt, className: cn(cardStyles.image, className), ...props }));
 }
 function CardImageOverlay({ className, ...props }) {
-    return _jsx("div", { className: cn(cardStyles.overlay, className), ...props });
+    return _jsx(Box, { className: cn(cardStyles.overlay, className), ...props });
 }
 function CardMarker({ className, position = "top-left", variant = "default", color = "default", children, ...props }) {
     const positionClasses = {
@@ -60,17 +63,17 @@ function CardMarker({ className, position = "top-left", variant = "default", col
     };
     // Base marker styles
     if (variant === "default") {
-        return (_jsx("div", { className: cn("absolute z-10 rounded px-2 py-1 text-xs font-semibold shadow-sm", positionClasses[position], colorClasses[color], className), ...props, children: children }));
+        return (_jsx(Box, { className: cn("absolute z-10 rounded px-2 py-1 text-xs font-semibold shadow-sm", positionClasses[position], colorClasses[color], className), ...props, children: children }));
     }
     // Icon marker - larger, rounded, typically just an icon
     if (variant === "icon") {
-        return (_jsx("div", { className: cn("absolute z-10 flex h-10 w-10 items-center justify-center rounded-full shadow-lg", position === "top-left" && "top-2 left-2", position === "top-right" && "top-2 right-2", position === "bottom-left" && "bottom-2 left-2", position === "bottom-right" && "bottom-2 right-2", colorClasses[color], className), ...props, children: children }));
+        return (_jsx(Box, { className: cn("absolute z-10 flex h-10 w-10 items-center justify-center rounded-full shadow-lg", position === "top-left" && "top-2 left-2", position === "top-right" && "top-2 right-2", position === "bottom-left" && "bottom-2 left-2", position === "bottom-right" && "bottom-2 right-2", colorClasses[color], className), ...props, children: children }));
     }
     // Ribbon marker - diagonal corner ribbon
     if (variant === "ribbon") {
         const ribbonPosition = position.startsWith("top") ? "top" : "bottom";
         const ribbonSide = position.endsWith("left") ? "left" : "right";
-        return (_jsx("div", { className: cn("absolute z-10 px-8 py-1 text-xs font-semibold shadow-lg", ribbonPosition === "top" &&
+        return (_jsx(Box, { className: cn("absolute z-10 px-8 py-1 text-xs font-semibold shadow-lg", ribbonPosition === "top" &&
                 ribbonSide === "left" &&
                 "top-3 -left-8 -rotate-45 origin-top-left", ribbonPosition === "top" &&
                 ribbonSide === "right" &&

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

@@ -1,2 +1,2 @@
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardImageOverlay, CardMarker, type CardMarkerProps, CardSubtitle, CardTitle, type CardProps, } from "./card";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardImageOverlay, CardMarker, type CardMarkerProps, type CardProps, CardSubtitle, CardTitle, } from "./card";
 export { CardSkeleton } from "./card-skeleton";

package/dist/components/center/center.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface CenterProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+    inline?: boolean;
+}
+declare const Center: React.ForwardRefExoticComponent<CenterProps & React.RefAttributes<HTMLDivElement>>;
+export { Center };

package/dist/components/center/center.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const Center = React.forwardRef(({ className, inline = false, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { className: cn("flex items-center justify-center", inline ? "inline-flex" : "flex", className), ref: ref, ...props }));
+});
+Center.displayName = "Center";
+export { Center };

package/dist/components/center/center.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Center } from "./center";
+declare const meta: Meta<typeof Center>;
+export default meta;
+type Story = StoryObj<typeof Center>;
+export declare const Default: Story;
+export declare const Inline: Story;

package/dist/components/center/center.stories.js

@@ -0,0 +1,25 @@
+import { Center } from "./center";
+const meta = {
+    title: "Components/Center",
+    component: Center,
+    tags: ["autodocs"],
+    argTypes: {
+        inline: {
+            control: "boolean",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        className: "h-20 bg-primary/20 rounded",
+        children: "Centered content",
+    },
+};
+export const Inline = {
+    args: {
+        inline: true,
+        className: "h-10 w-20 bg-primary/20 rounded",
+        children: "Inline",
+    },
+};

package/dist/components/center/index.d.ts

@@ -0,0 +1 @@
+export * from "./center";

package/dist/components/center/index.js

@@ -0,0 +1 @@
+export * from "./center";

package/dist/components/charts/area-chart.js

@@ -7,8 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cn } from "../../lib/utils";
 import { Chart } from "./chart";
-import { getDefaultChartOptions } from "./utils";
 import { useThemeAwareChart } from "./use-theme-aware-chart";
+import { getDefaultChartOptions } from "./utils";
 export function AreaChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, curve = "smooth", stacked = false, dataLabels = false, yAxisLabel, referenceLines = [], options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const chartOptions = useMemo(() => {

package/dist/components/charts/bar-chart.js

@@ -7,8 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cn } from "../../lib/utils";
 import { Chart } from "./chart";
-import { getDefaultChartOptions } from "./utils";
 import { useThemeAwareChart } from "./use-theme-aware-chart";
+import { getDefaultChartOptions } from "./utils";
 export function BarChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, horizontal = false, stacked = false, dataLabels = false, barWidth = 70, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const chartOptions = useMemo(() => {

package/dist/components/charts/donut-chart.js

@@ -7,8 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cn } from "../../lib/utils";
 import { Chart } from "./chart";
-import { getDefaultChartOptions } from "./utils";
 import { useThemeAwareChart } from "./use-theme-aware-chart";
+import { getDefaultChartOptions } from "./utils";
 export function DonutChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, donut = true, donutSize = 65, dataLabels = true, legend = true, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const chartOptions = useMemo(() => {

package/dist/components/charts/index.d.ts

@@ -5,10 +5,10 @@
 export { AreaChart } from "./area-chart";
 export { BarChart } from "./bar-chart";
 export { Chart, ChartSkeleton } from "./chart";
+export * from "./chart.types";
 export { DonutChart, PieChart } from "./donut-chart";
 export { LineChart } from "./line-chart";
 export { RadialBarChart } from "./radial-bar-chart";
-export * from "./chart.types";
-export * from "./utils";
 export * from "./theme-utils";
 export { useThemeAwareChart } from "./use-theme-aware-chart";
+export * from "./utils";

package/dist/components/charts/index.js

@@ -5,10 +5,10 @@
 export { AreaChart } from "./area-chart";
 export { BarChart } from "./bar-chart";
 export { Chart, ChartSkeleton } from "./chart";
+export * from "./chart.types";
 export { DonutChart, PieChart } from "./donut-chart";
 export { LineChart } from "./line-chart";
 export { RadialBarChart } from "./radial-bar-chart";
-export * from "./chart.types";
-export * from "./utils";
 export * from "./theme-utils";
 export { useThemeAwareChart } from "./use-theme-aware-chart";
+export * from "./utils";

package/dist/components/charts/line-chart.js

@@ -7,8 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cn } from "../../lib/utils";
 import { Chart } from "./chart";
-import { getDefaultChartOptions } from "./utils";
 import { useThemeAwareChart } from "./use-theme-aware-chart";
+import { getDefaultChartOptions } from "./utils";
 export function LineChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, curve = "smooth", strokeWidth = 2, markers = true, yAxisLabel, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const chartOptions = useMemo(() => {

package/dist/components/charts/radial-bar-chart.js

@@ -7,8 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cn } from "../../lib/utils";
 import { Chart } from "./chart";
-import { getDefaultChartOptions } from "./utils";
 import { useThemeAwareChart } from "./use-theme-aware-chart";
+import { getDefaultChartOptions } from "./utils";
 export function RadialBarChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, dataLabels = true, hollowSize = "50%", options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const chartOptions = useMemo(() => {

package/dist/components/charts/theme-utils.d.ts

@@ -66,5 +66,5 @@ export declare function createThemeAwareChart(): {
     /**
      * Get current theme
      */
-    getTheme: () => "dark" | "light" | "neutral" | "accent";
+    getTheme: () => "dark" | "light" | "accent" | "neutral";
 };

package/dist/components/charts/use-theme-aware-chart.d.ts

@@ -8,5 +8,5 @@
  */
 export declare function useThemeAwareChart(): {
     colors: import("./theme-utils").ThemeColorScheme;
-    theme: "dark" | "light" | "neutral" | "accent";
+    theme: "dark" | "light" | "accent" | "neutral";
 };