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

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Supports multiple items with expanded state.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Accordion skeleton component
  *

package/dist/components/accordion/accordion.js

@@ -5,6 +5,7 @@ import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../lib/utils";
+import { Box } from "../box";
 const accordionVariants = cva("w-full", {
     variants: {
         variant: {
@@ -37,6 +38,6 @@ function AccordionTrigger({ className, children, ...props }) {
 }
 function AccordionContent({ className, children, ...props }) {
     const { variant } = React.useContext(AccordionContext);
-    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", ...props, children: _jsx("div", { className: cn("text-sm text-foreground leading-relaxed", variant === "default" && "pb-4 pt-1", variant === "bordered" && "px-4 pb-4 pt-2", variant === "filled" && "px-4 pb-4 pt-2 bg-muted/50", className), children: children }) }));
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", ...props, children: _jsx(Box, { className: cn("text-sm text-foreground leading-relaxed", variant === "default" && "pb-4 pt-1", variant === "bordered" && "px-4 pb-4 pt-2", variant === "filled" && "px-4 pb-4 pt-2 bg-muted/50", className), children: children }) }));
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,12 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const actionIconVariants: (props?: ({
+    variant?: "filled" | "light" | "outline" | "subtle" | "transparent" | "ghost" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ActionIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof actionIconVariants> {
+    asChild?: boolean;
+    loading?: boolean;
+}
+declare const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps & React.RefAttributes<HTMLButtonElement>>;
+export { ActionIcon, actionIconVariants };

package/dist/components/action-icon/action-icon.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const actionIconVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", {
+    variants: {
+        variant: {
+            filled: "bg-primary text-primary-foreground hover:bg-primary/90",
+            light: "bg-primary/10 text-primary hover:bg-primary/20",
+            outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+            subtle: "hover:bg-accent hover:text-accent-foreground",
+            transparent: "bg-transparent hover:bg-transparent text-foreground",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+        },
+        size: {
+            xs: "h-6 w-6",
+            sm: "h-8 w-8",
+            md: "h-10 w-10",
+            lg: "h-12 w-12",
+            xl: "h-14 w-14",
+        },
+    },
+    defaultVariants: {
+        variant: "subtle",
+        size: "md",
+    },
+});
+const ActionIcon = React.forwardRef(({ className, variant, size, asChild = false, loading = false, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { className: cn(actionIconVariants({ variant, size, className })), ref: ref, disabled: disabled || loading, ...props, children: loading ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : children }));
+});
+ActionIcon.displayName = "ActionIcon";
+export { ActionIcon, actionIconVariants };

package/dist/components/action-icon/action-icon.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ActionIcon } from "./action-icon";
+declare const meta: Meta<typeof ActionIcon>;
+export default meta;
+type Story = StoryObj<typeof ActionIcon>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const Loading: Story;

package/dist/components/action-icon/action-icon.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heart, Settings, Trash } from "lucide-react";
+import { ActionIcon } from "./action-icon";
+const meta = {
+    title: "Components/ActionIcon",
+    component: ActionIcon,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["filled", "light", "outline", "subtle", "transparent", "ghost"],
+        },
+        size: {
+            control: "select",
+            options: ["xs", "sm", "md", "lg", "xl"],
+        },
+        loading: {
+            control: "boolean",
+        },
+        disabled: {
+            control: "boolean",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: _jsx(Settings, { className: "h-4 w-4" }),
+    },
+};
+export const Variants = {
+    render: () => (_jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(ActionIcon, { variant: "filled", children: _jsx(Heart, { className: "h-4 w-4" }) }), _jsx(ActionIcon, { variant: "light", children: _jsx(Heart, { className: "h-4 w-4" }) }), _jsx(ActionIcon, { variant: "outline", children: _jsx(Heart, { className: "h-4 w-4" }) }), _jsx(ActionIcon, { variant: "subtle", children: _jsx(Heart, { className: "h-4 w-4" }) }), _jsx(ActionIcon, { variant: "ghost", children: _jsx(Heart, { className: "h-4 w-4" }) })] })),
+};
+export const Sizes = {
+    render: () => (_jsxs("div", { className: "flex gap-4 items-end", children: [_jsx(ActionIcon, { size: "xs", variant: "outline", children: _jsx(Trash, { className: "h-3 w-3" }) }), _jsx(ActionIcon, { size: "sm", variant: "outline", children: _jsx(Trash, { className: "h-4 w-4" }) }), _jsx(ActionIcon, { size: "md", variant: "outline", children: _jsx(Trash, { className: "h-5 w-5" }) }), _jsx(ActionIcon, { size: "lg", variant: "outline", children: _jsx(Trash, { className: "h-6 w-6" }) }), _jsx(ActionIcon, { size: "xl", variant: "outline", children: _jsx(Trash, { className: "h-8 w-8" }) })] })),
+};
+export const Loading = {
+    args: {
+        loading: true,
+        variant: "outline",
+    }
+};

package/dist/components/action-icon/index.d.ts

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

package/dist/components/action-icon/index.js

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

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

@@ -5,10 +5,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Loading placeholder for the Alert component.
  * Provides zero-CLS skeleton state that matches actual alert layout.
  */
+import { alertStyles } from "../../config/alert";
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { SkeletonCircle } from "../skeleton/skeleton-patterns";
-import { alertStyles } from "../../config/alert";
 /**
  * Alert skeleton component
  *
@@ -20,7 +20,8 @@ import { alertStyles } from "../../config/alert";
  * ```
  */
 export function AlertSkeleton({ variant = "primary", showIcon = true, className, "data-testid": dataTestId, }) {
-    return (_jsxs("div", { "data-testid": dataTestId || "alert-skeleton", role: "alert", className: cn(alertStyles.base, variant && alertStyles.compoundVariants?.find(v => v.variant === variant && v.style === 'default')?.className, className), children: [showIcon && _jsx(SkeletonCircle, { size: "1rem", className: "rounded-md" }), _jsxs("div", { className: "flex-1", children: [_jsx(Skeleton, { className: "h-5 w-48 mb-2" }), _jsx(Skeleton, { className: "h-4 w-64" })] })] }));
+    return (_jsxs("div", { "data-testid": dataTestId || "alert-skeleton", role: "alert", className: cn(alertStyles.base, variant &&
+            alertStyles.compoundVariants?.find((v) => v.variant === variant && v.style === "default")?.className, className), children: [showIcon && _jsx(SkeletonCircle, { size: "1rem", className: "rounded-md" }), _jsxs("div", { className: "flex-1", children: [_jsx(Skeleton, { className: "h-5 w-48 mb-2" }), _jsx(Skeleton, { className: "h-4 w-64" })] })] }));
 }
 /**
  * Compound component: Alert.Skeleton

package/dist/components/alert/alert.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import type { AlertProps } from "./alert.types";
 declare const alertVariants: (props?: ({
-    readonly variant?: "info" | "warning" | "success" | "primary" | "secondary" | "danger" | "destructive" | null | undefined;
-    readonly style?: "default" | "solid" | "outline" | null | undefined;
+    readonly variant?: "primary" | "secondary" | "success" | "danger" | "destructive" | "warning" | "info" | null | undefined;
+    readonly style?: "default" | "outline" | "solid" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Alert({ className, variant, style: alertStyle, dismissable, onDismiss, showIcon, children, isLoading, skeletonConfig, skeleton, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/alert/alert.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDisclosure } from "@kala-ui/react-hooks";
 import { cva } from "class-variance-authority";
 import { AlertCircle, AlertTriangle, CheckCircle2, Info, X, } from "lucide-react";
 import * as React from "react";
 import { alertStyles } from "../../config/alert";
 import { cn } from "../../lib/utils";
+import { Box } from "../box";
 import { AlertSkeleton } from "./alert-skeleton";
 const alertVariants = cva(alertStyles.base, {
     variants: alertStyles.variants,
@@ -20,15 +22,15 @@ const variantIcons = {
     info: Info,
 };
 function Alert({ className, variant = "primary", style: alertStyle, dismissable = false, onDismiss, showIcon = true, children, isLoading = false, skeletonConfig, skeleton, ...props }) {
-    const [isVisible, setIsVisible] = React.useState(true);
+    const [isVisible, { close }] = useDisclosure(true);
     if (isLoading) {
         if (skeleton) {
-            return (_jsx("div", { "data-slot": "alert", className: cn(alertVariants({ variant, style: alertStyle }), className), ...props, children: skeleton }));
+            return (_jsx(Box, { "data-slot": "alert", className: cn(alertVariants({ variant, style: alertStyle }), className), ...props, children: skeleton }));
         }
         return (_jsx(AlertSkeleton, { variant: variant || "default", showIcon: showIcon, className: className, ...props }));
     }
     const handleDismiss = () => {
-        setIsVisible(false);
+        close();
         onDismiss?.();
     };
     if (!isVisible)
@@ -53,12 +55,12 @@ function Alert({ className, variant = "primary", style: alertStyle, dismissable
             name.includes("X") ||
             props.className?.includes("lucide"));
     });
-    return (_jsxs("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant, style: alertStyle }), dismissable && "pr-10", className), ...props, children: [showIcon && !hasCustomIcon && (_jsx(Icon, { className: "size-4 translate-y-0.5", "aria-hidden": "true" })), children, dismissable && (_jsx("button", { type: "button", onClick: handleDismiss, className: "cursor-pointer absolute right-2 top-2 rounded-md p-1 hover:bg-accent transition-colors", "aria-label": "Dismiss alert", children: _jsx(X, { className: "h-4 w-4" }) }))] }));
+    return (_jsxs(Box, { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant, style: alertStyle }), dismissable && "pr-10", className), ...props, children: [showIcon && !hasCustomIcon && (_jsx(Icon, { className: "size-4 translate-y-0.5", "aria-hidden": "true" })), children, dismissable && (_jsx(Box, { as: "button", type: "button", onClick: handleDismiss, className: "cursor-pointer absolute right-2 top-2 rounded-md p-1 hover:bg-accent transition-colors", "aria-label": "Dismiss alert", children: _jsx(X, { className: "h-4 w-4" }) }))] }));
 }
 function AlertTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-title", className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className), ...props }));
+    return (_jsx(Box, { "data-slot": "alert-title", className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className), ...props }));
 }
 function AlertDescription({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-description", className: cn("col-start-2 text-sm [&_p]:leading-relaxed", className), ...props }));
+    return (_jsx(Box, { "data-slot": "alert-description", className: cn("col-start-2 text-sm [&_p]:leading-relaxed", className), ...props }));
 }
 export { Alert, AlertTitle, AlertDescription, alertVariants };

package/dist/components/alert/alert.stories.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertTriangle, CheckCircle2, Info as InfoIcon, } from "lucide-react";
-import { Skeleton } from "../skeleton/skeleton";
+import { Box } from "../box";
+import { Flex } from "../flex";
+import { Stack } from "../stack";
+import { Text } from "../text";
+import { Skeleton } from "../skeleton";
 import { Alert, AlertDescription, AlertTitle } from "./alert";
 const meta = {
     title: "Feedback/Alert",
@@ -13,19 +17,19 @@ const meta = {
 export default meta;
 // Default Style (light background)
 export const DefaultStyle = {
-    render: () => (_jsxs("div", { className: "flex flex-col gap-4 w-[600px]", children: [_jsx(Alert, { variant: "primary", children: _jsx(AlertDescription, { children: "A simple primary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "secondary", children: _jsx(AlertDescription, { children: "A simple secondary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "success", children: _jsx(AlertDescription, { children: "A simple success alert\u2014check it out!" }) }), _jsx(Alert, { variant: "danger", children: _jsx(AlertDescription, { children: "A simple danger alert\u2014check it out!" }) }), _jsx(Alert, { variant: "warning", children: _jsx(AlertDescription, { children: "A simple warning alert\u2014check it out!" }) }), _jsx(Alert, { variant: "info", children: _jsx(AlertDescription, { children: "A simple info alert\u2014check it out!" }) })] })),
+    render: () => (_jsxs(Flex, { direction: "column", gap: 4, className: "w-[600px]", children: [_jsx(Alert, { variant: "primary", children: _jsx(AlertDescription, { children: "A simple primary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "secondary", children: _jsx(AlertDescription, { children: "A simple secondary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "success", children: _jsx(AlertDescription, { children: "A simple success alert\u2014check it out!" }) }), _jsx(Alert, { variant: "danger", children: _jsx(AlertDescription, { children: "A simple danger alert\u2014check it out!" }) }), _jsx(Alert, { variant: "warning", children: _jsx(AlertDescription, { children: "A simple warning alert\u2014check it out!" }) }), _jsx(Alert, { variant: "info", children: _jsx(AlertDescription, { children: "A simple info alert\u2014check it out!" }) })] })),
 };
 // Outline Style
 export const OutlineStyle = {
-    render: () => (_jsxs("div", { className: "flex flex-col gap-4 w-[600px]", children: [_jsx(Alert, { variant: "primary", style: "outline", children: _jsx(AlertDescription, { children: "An outline primary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "secondary", style: "outline", children: _jsx(AlertDescription, { children: "An outline secondary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "success", style: "outline", children: _jsx(AlertDescription, { children: "An outline success alert\u2014check it out!" }) }), _jsx(Alert, { variant: "danger", style: "outline", children: _jsx(AlertDescription, { children: "An outline danger alert\u2014check it out!" }) }), _jsx(Alert, { variant: "warning", style: "outline", children: _jsx(AlertDescription, { children: "An outline warning alert\u2014check it out!" }) }), _jsx(Alert, { variant: "info", style: "outline", children: _jsx(AlertDescription, { children: "An outline info alert\u2014check it out!" }) })] })),
+    render: () => (_jsxs(Flex, { direction: "column", gap: 4, className: "w-[600px]", children: [_jsx(Alert, { variant: "primary", style: "outline", children: _jsx(AlertDescription, { children: "An outline primary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "secondary", style: "outline", children: _jsx(AlertDescription, { children: "An outline secondary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "success", style: "outline", children: _jsx(AlertDescription, { children: "An outline success alert\u2014check it out!" }) }), _jsx(Alert, { variant: "danger", style: "outline", children: _jsx(AlertDescription, { children: "An outline danger alert\u2014check it out!" }) }), _jsx(Alert, { variant: "warning", style: "outline", children: _jsx(AlertDescription, { children: "An outline warning alert\u2014check it out!" }) }), _jsx(Alert, { variant: "info", style: "outline", children: _jsx(AlertDescription, { children: "An outline info alert\u2014check it out!" }) })] })),
 };
 // Solid Style
 export const SolidStyle = {
-    render: () => (_jsxs("div", { className: "flex flex-col gap-4 w-[600px]", children: [_jsx(Alert, { variant: "primary", style: "solid", children: _jsx(AlertDescription, { children: "A solid primary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "secondary", style: "solid", children: _jsx(AlertDescription, { children: "A solid secondary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "success", style: "solid", children: _jsx(AlertDescription, { children: "A solid success alert\u2014check it out!" }) }), _jsx(Alert, { variant: "danger", style: "solid", children: _jsx(AlertDescription, { children: "A solid danger alert\u2014check it out!" }) }), _jsx(Alert, { variant: "warning", style: "solid", children: _jsx(AlertDescription, { children: "A solid warning alert\u2014check it out!" }) }), _jsx(Alert, { variant: "info", style: "solid", children: _jsx(AlertDescription, { children: "A solid info alert\u2014check it out!" }) })] })),
+    render: () => (_jsxs(Flex, { direction: "column", gap: 4, className: "w-[600px]", children: [_jsx(Alert, { variant: "primary", style: "solid", children: _jsx(AlertDescription, { children: "A solid primary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "secondary", style: "solid", children: _jsx(AlertDescription, { children: "A solid secondary alert\u2014check it out!" }) }), _jsx(Alert, { variant: "success", style: "solid", children: _jsx(AlertDescription, { children: "A solid success alert\u2014check it out!" }) }), _jsx(Alert, { variant: "danger", style: "solid", children: _jsx(AlertDescription, { children: "A solid danger alert\u2014check it out!" }) }), _jsx(Alert, { variant: "warning", style: "solid", children: _jsx(AlertDescription, { children: "A solid warning alert\u2014check it out!" }) }), _jsx(Alert, { variant: "info", style: "solid", children: _jsx(AlertDescription, { children: "A solid info alert\u2014check it out!" }) })] })),
 };
 // With Icons
 export const WithIcons = {
-    render: () => (_jsxs("div", { className: "flex flex-col gap-4 w-[600px]", children: [_jsxs(Alert, { variant: "primary", children: [_jsx(InfoIcon, {}), _jsx(AlertDescription, { children: "A primary alert with icon\u2014check it out!" })] }), _jsxs(Alert, { variant: "success", children: [_jsx(CheckCircle2, {}), _jsx(AlertDescription, { children: "A success alert with icon\u2014check it out!" })] }), _jsxs(Alert, { variant: "warning", children: [_jsx(AlertTriangle, {}), _jsx(AlertDescription, { children: "A warning alert with icon\u2014check it out!" })] }), _jsxs(Alert, { variant: "danger", children: [_jsx(AlertCircle, {}), _jsx(AlertDescription, { children: "A danger alert with icon\u2014check it out!" })] })] })),
+    render: () => (_jsxs(Flex, { direction: "column", gap: 4, className: "w-[600px]", children: [_jsxs(Alert, { variant: "primary", children: [_jsx(InfoIcon, {}), _jsx(AlertDescription, { children: "A primary alert with icon\u2014check it out!" })] }), _jsxs(Alert, { variant: "success", children: [_jsx(CheckCircle2, {}), _jsx(AlertDescription, { children: "A success alert with icon\u2014check it out!" })] }), _jsxs(Alert, { variant: "warning", children: [_jsx(AlertTriangle, {}), _jsx(AlertDescription, { children: "A warning alert with icon\u2014check it out!" })] }), _jsxs(Alert, { variant: "danger", children: [_jsx(AlertCircle, {}), _jsx(AlertDescription, { children: "A danger alert with icon\u2014check it out!" })] })] })),
 };
 // With Title and Description
 export const WithTitleAndDescription = {
@@ -33,18 +37,18 @@ export const WithTitleAndDescription = {
 };
 // With Link
 export const WithLink = {
-    render: () => (_jsx(Alert, { variant: "primary", className: "w-[600px]", children: _jsxs(AlertDescription, { children: ["A simple primary alert with", " ", _jsx("a", { href: "/", className: "font-semibold underline hover:no-underline", children: "an example link" }), ". Give it a click if you like."] }) })),
+    render: () => (_jsx(Alert, { variant: "primary", className: "w-[600px]", children: _jsxs(AlertDescription, { children: ["A simple primary alert with", " ", _jsx(Box, { as: "a", href: "/", className: "font-semibold underline hover:no-underline", children: "an example link" }), ". Give it a click if you like."] }) })),
 };
 // Dismissable Alerts
 export const Dismissable = {
-    render: () => (_jsxs("div", { className: "flex flex-col gap-4 w-[600px]", children: [_jsxs(Alert, { variant: "success", dismissable: true, children: [_jsx(CheckCircle2, {}), _jsx(AlertTitle, { children: "Success" }), _jsx(AlertDescription, { children: "Your changes have been saved successfully." })] }), _jsxs(Alert, { variant: "info", dismissable: true, children: [_jsx(InfoIcon, {}), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "This alert can be dismissed by clicking the X button." })] }), _jsxs(Alert, { variant: "warning", dismissable: true, onDismiss: () => console.log("Warning dismissed"), children: [_jsx(AlertTriangle, {}), _jsx(AlertTitle, { children: "Warning" }), _jsx(AlertDescription, { children: "Please review your settings before continuing. This will trigger a callback when dismissed." })] }), _jsxs(Alert, { variant: "danger", dismissable: true, children: [_jsx(AlertCircle, {}), _jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: "There was a problem processing your request." })] })] })),
+    render: () => (_jsxs(Flex, { direction: "column", gap: 4, className: "w-[600px]", children: [_jsxs(Alert, { variant: "success", dismissable: true, children: [_jsx(CheckCircle2, {}), _jsx(AlertTitle, { children: "Success" }), _jsx(AlertDescription, { children: "Your changes have been saved successfully." })] }), _jsxs(Alert, { variant: "info", dismissable: true, children: [_jsx(InfoIcon, {}), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "This alert can be dismissed by clicking the X button." })] }), _jsxs(Alert, { variant: "warning", dismissable: true, onDismiss: () => console.log("Warning dismissed"), children: [_jsx(AlertTriangle, {}), _jsx(AlertTitle, { children: "Warning" }), _jsx(AlertDescription, { children: "Please review your settings before continuing. This will trigger a callback when dismissed." })] }), _jsxs(Alert, { variant: "danger", dismissable: true, children: [_jsx(AlertCircle, {}), _jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: "There was a problem processing your request." })] })] })),
 };
 // Complex with Paragraphs
 export const ComplexAlert = {
-    render: () => (_jsxs(Alert, { variant: "info", className: "w-[600px]", children: [_jsx(InfoIcon, {}), _jsx(AlertTitle, { children: "Information" }), _jsxs(AlertDescription, { children: [_jsx("p", { className: "mb-2", children: "This is an informational message with multiple paragraphs. The first paragraph provides the main context." }), _jsx("p", { children: "Whenever you need to, be sure to properly structure your content to keep things nice and tidy." })] })] })),
+    render: () => (_jsxs(Alert, { variant: "info", className: "w-[600px]", children: [_jsx(InfoIcon, {}), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: _jsxs(Stack, { gap: 2, children: [_jsx(Text, { children: "This is an informational message with multiple paragraphs. The first paragraph provides the main context." }), _jsx(Text, { children: "Whenever you need to, be sure to properly structure your content to keep things nice and tidy." })] }) })] })),
 };
 export const LoadingSkeleton = {
-    render: () => (_jsx("div", { className: "w-full max-w-md space-y-4", children: _jsxs("div", { className: "flex gap-3 p-4 border rounded-lg", children: [_jsx(Skeleton, { className: "h-5 w-5 rounded-full flex-shrink-0" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-5 w-32" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-3/4" })] })] }) })),
+    render: () => (_jsx(Stack, { gap: 4, className: "w-full max-w-md", children: _jsxs(Flex, { gap: 3, className: "p-4 border rounded-lg", children: [_jsx(Skeleton, { className: "h-5 w-5 rounded-full flex-shrink-0" }), _jsxs(Stack, { gap: 2, className: "flex-1", children: [_jsx(Skeleton, { className: "h-5 w-32" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-3/4" })] })] }) })),
     parameters: {
         docs: {
             description: {

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

@@ -1,3 +1,3 @@
-export type { AlertProps } from "./alert.types";
 export { Alert, AlertDescription, AlertTitle, alertVariants } from "./alert";
+export type { AlertProps } from "./alert.types";
 export { AlertSkeleton } from "./alert-skeleton";

package/dist/components/alert-dialog/alert-dialog.js

@@ -2,7 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { cn } from "../../lib/utils";
+import { Box } from "../box";
 import { buttonVariants } from "../button";
+import { Heading } from "../heading";
+import { Text } from "../text";
 function AlertDialog({ ...props }) {
     return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
 }
@@ -19,19 +22,19 @@ function AlertDialogContent({ className, ...props }) {
     return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn("bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-30 flex flex-col translate-x-[-50%] translate-y-[-50%] rounded-lg border duration-200 w-[90vw] max-w-lg theme-card", className), ...props })] }));
 }
 function AlertDialogHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("flex flex-col gap-1.5 px-6 py-4 border-b", className), ...props }));
+    return (_jsx(Box, { "data-slot": "alert-dialog-header", className: cn("flex flex-col gap-1.5 px-6 py-4 border-b", className), ...props }));
 }
 function AlertDialogFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end px-6 py-4 border-t bg-muted/50 rounded-b-lg", className), ...props }));
+    return (_jsx(Box, { "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end px-6 py-4 border-t bg-muted/50 rounded-b-lg", className), ...props }));
 }
 function AlertDialogTitle({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("text-lg font-semibold leading-none tracking-tight text-foreground", className), ...props }));
+    return (_jsx(AlertDialogPrimitive.Title, { asChild: true, "data-slot": "alert-dialog-title", children: _jsx(Heading, { level: 3, className: cn("text-lg font-semibold leading-none tracking-tight text-foreground", className), ...props }) }));
 }
 function AlertDialogDescription({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-sm leading-relaxed text-muted-foreground", className), ...props }));
+    return (_jsx(AlertDialogPrimitive.Description, { asChild: true, "data-slot": "alert-dialog-description", children: _jsx(Text, { className: cn("text-sm leading-relaxed text-muted-foreground", className), ...props }) }));
 }
 function AlertDialogBody({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-body", className: cn("flex-1 overflow-y-auto px-6 py-4 min-h-0", className), ...props }));
+    return (_jsx(Box, { "data-slot": "alert-dialog-body", className: cn("flex-1 overflow-y-auto px-6 py-4 min-h-0", className), ...props }));
 }
 function AlertDialogAction({ className, variant, size, ...props }) {
     return (_jsx(AlertDialogPrimitive.Action, { className: cn(buttonVariants({ variant, size }), className), ...props }));

package/dist/components/app-shell/app-shell.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Header configuration */
+    header?: {
+        height: number | string;
+    };
+    /** Navbar configuration */
+    navbar?: {
+        width: number | string;
+        breakpoint?: "sm" | "md" | "lg" | "xl";
+        collapsed?: {
+            mobile?: boolean;
+            desktop?: boolean;
+        };
+    };
+    /** Aside configuration */
+    aside?: {
+        width: number | string;
+        breakpoint?: "sm" | "md" | "lg" | "xl";
+        collapsed?: {
+            mobile?: boolean;
+            desktop?: boolean;
+        };
+    };
+    /** Footer configuration */
+    footer?: {
+        height: number | string;
+    };
+    /** Padding for the main content */
+    padding?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+}
+export declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: typeof AppShellHeader;
+    Navbar: typeof AppShellNavbar;
+    Main: typeof AppShellMain;
+    Aside: typeof AppShellAside;
+    Footer: typeof AppShellFooter;
+};
+export interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    withBorder?: boolean;
+}
+declare const AppShellHeader: React.ForwardRefExoticComponent<AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
+export interface AppShellNavbarProps extends React.HTMLAttributes<HTMLElement> {
+    withBorder?: boolean;
+}
+declare const AppShellNavbar: React.ForwardRefExoticComponent<AppShellNavbarProps & React.RefAttributes<HTMLElement>>;
+export interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement> {
+    withBorder?: boolean;
+}
+declare const AppShellAside: React.ForwardRefExoticComponent<AppShellAsideProps & React.RefAttributes<HTMLElement>>;
+export interface AppShellMainProps extends React.HTMLAttributes<HTMLElement> {
+}
+declare const AppShellMain: React.ForwardRefExoticComponent<AppShellMainProps & React.RefAttributes<HTMLElement>>;
+export interface AppShellFooterProps extends React.HTMLAttributes<HTMLElement> {
+    withBorder?: boolean;
+}
+declare const AppShellFooter: React.ForwardRefExoticComponent<AppShellFooterProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/app-shell/app-shell.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Box } from "../box";
+const AppShellContext = React.createContext({});
+export const AppShell = React.forwardRef(({ children, className, header, navbar, aside, footer, padding = "md", ...props }, ref) => {
+    // Convert padding to Tailwind class or CSS value
+    const _paddingClasses = {
+        none: "p-0",
+        xs: "p-2",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8",
+    };
+    const cssVars = {
+        "--app-shell-header-height": typeof header?.height === "number"
+            ? `${header.height}px`
+            : (header?.height ?? "0px"),
+        "--app-shell-footer-height": typeof footer?.height === "number"
+            ? `${footer.height}px`
+            : (footer?.height ?? "0px"),
+        "--app-shell-navbar-width": typeof navbar?.width === "number"
+            ? `${navbar.width}px`
+            : (navbar?.width ?? "0px"),
+        "--app-shell-aside-width": typeof aside?.width === "number"
+            ? `${aside.width}px`
+            : (aside?.width ?? "0px"),
+    };
+    return (_jsx(AppShellContext.Provider, { value: { header, navbar, aside, footer, padding }, children: _jsx(Box, { ref: ref, className: cn("flex min-h-screen flex-col bg-background text-foreground", className), style: cssVars, ...props, children: children }) }));
+});
+const AppShellHeader = React.forwardRef(({ className, withBorder = true, ...props }, ref) => {
+    const { header } = React.useContext(AppShellContext);
+    if (!header)
+        return null;
+    return (_jsx(Box, { as: "header", ref: ref, className: cn("fixed top-0 left-0 right-0 z-50 flex items-center bg-background px-4", withBorder && "border-b", className), style: { height: "var(--app-shell-header-height)" }, ...props }));
+});
+AppShellHeader.displayName = "AppShell.Header";
+const AppShellNavbar = React.forwardRef(({ className, withBorder = true, ...props }, ref) => {
+    const { navbar } = React.useContext(AppShellContext);
+    if (!navbar)
+        return null;
+    const collapsedMobile = navbar.collapsed?.mobile;
+    const collapsedDesktop = navbar.collapsed?.desktop;
+    return (_jsx(Box, { as: "nav", ref: ref, className: cn("fixed left-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-in-out", withBorder && "border-r", 
+        // Mobile handling
+        collapsedMobile ? "-translate-x-full" : "translate-x-0", 
+        // Desktop handling (simplified for now, ideally needs media query check or CSS media query)
+        // For now we assume desktop is usually visible unless collapsedDesktop is true
+        collapsedDesktop && "lg:-translate-x-full", className), style: {
+            width: "var(--app-shell-navbar-width)",
+            top: "var(--app-shell-header-height)",
+            height: "calc(100vh - var(--app-shell-header-height))",
+        }, ...props }));
+});
+AppShellNavbar.displayName = "AppShell.Navbar";
+const AppShellAside = React.forwardRef(({ className, withBorder = true, ...props }, ref) => {
+    const { aside } = React.useContext(AppShellContext);
+    if (!aside)
+        return null;
+    const collapsedMobile = aside.collapsed?.mobile;
+    const collapsedDesktop = aside.collapsed?.desktop;
+    return (_jsx(Box, { as: "aside", ref: ref, className: cn("fixed right-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-in-out", withBorder && "border-l", collapsedMobile ? "translate-x-full" : "translate-x-0", collapsedDesktop && "lg:translate-x-full", className), style: {
+            width: "var(--app-shell-aside-width)",
+            top: "var(--app-shell-header-height)",
+            height: "calc(100vh - var(--app-shell-header-height))",
+        }, ...props }));
+});
+AppShellAside.displayName = "AppShell.Aside";
+const AppShellMain = React.forwardRef(({ className, ...props }, ref) => {
+    const { header, navbar, aside, footer, padding } = React.useContext(AppShellContext);
+    const paddingClasses = {
+        none: "p-0",
+        xs: "p-2",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8",
+    };
+    return (_jsx(Box, { as: "main", ref: ref, className: cn("flex-1 transition-all duration-300 ease-in-out", padding && paddingClasses[padding], className), style: {
+            paddingTop: header
+                ? "calc(var(--app-shell-header-height) + var(--padding-top, 0px))"
+                : undefined,
+            paddingBottom: footer
+                ? "calc(var(--app-shell-footer-height) + var(--padding-bottom, 0px))"
+                : undefined,
+            paddingLeft: navbar
+                ? "calc(var(--app-shell-navbar-width) + var(--padding-left, 0px))"
+                : undefined,
+            paddingRight: aside
+                ? "calc(var(--app-shell-aside-width) + var(--padding-right, 0px))"
+                : undefined,
+            // Note: Real responsive margin adjustment requires media queries matching the navbar breakpoint
+            // For this basic implementation, we assume the navbar takes space.
+            // Users can override margins with Tailwind classes if needed for responsive behavior.
+        }, ...props }));
+});
+AppShellMain.displayName = "AppShell.Main";
+const AppShellFooter = React.forwardRef(({ className, withBorder = true, ...props }, ref) => {
+    const { footer } = React.useContext(AppShellContext);
+    if (!footer)
+        return null;
+    return (_jsx(Box, { as: "footer", ref: ref, className: cn("fixed bottom-0 left-0 right-0 z-50 flex items-center bg-background px-4", withBorder && "border-t", className), style: { height: "var(--app-shell-footer-height)" }, ...props }));
+});
+AppShellFooter.displayName = "AppShell.Footer";
+// Attach subcomponents
+AppShell.Header = AppShellHeader;
+AppShell.Navbar = AppShellNavbar;
+AppShell.Main = AppShellMain;
+AppShell.Aside = AppShellAside;
+AppShell.Footer = AppShellFooter;

package/dist/components/app-shell/app-shell.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AppShell } from "./app-shell";
+declare const meta: Meta<typeof AppShell>;
+export default meta;
+type Story = StoryObj<typeof AppShell>;
+export declare const Basic: Story;
+export declare const WithToggle: Story;
+export declare const FullLayout: Story;

package/dist/components/app-shell/app-shell.stories.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDisclosure } from "@kala-ui/react-hooks";
+import { Box } from "../box";
+import { Burger } from "../burger";
+import { Button } from "../button";
+import { Flex } from "../flex";
+import { Heading } from "../heading";
+import { Stack } from "../stack";
+import { Text } from "../text";
+import { AppShell } from "./app-shell";
+const meta = {
+    title: "Components/AppShell",
+    component: AppShell,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+export const Basic = {
+    render: () => (_jsxs(AppShell, { header: { height: 60 }, navbar: { width: 300, breakpoint: "sm" }, padding: "md", children: [_jsx(AppShell.Header, { children: _jsx(Box, { className: "p-4", children: _jsx(Heading, { size: "h4", children: "My App" }) }) }), _jsx(AppShell.Navbar, { children: _jsx(Box, { className: "p-4", children: _jsx(Text, { children: "Navbar content" }) }) }), _jsx(AppShell.Main, { children: _jsx(Box, { className: "h-[200vh] bg-muted/20 p-4 border border-dashed", children: _jsx(Text, { children: "Main content (scrollable)" }) }) })] })),
+};
+export const WithToggle = {
+    render: () => {
+        const [opened, { toggle }] = useDisclosure(false);
+        return (_jsxs(AppShell, { header: { height: 60 }, navbar: {
+                width: 300,
+                breakpoint: "sm",
+                collapsed: { mobile: !opened },
+            }, padding: "md", children: [_jsx(AppShell.Header, { children: _jsxs(Flex, { align: "center", gap: 4, className: "h-full px-4", children: [_jsx(Burger, { opened: opened, onClick: toggle, className: "lg:hidden" }), _jsx(Heading, { size: "h4", children: "My App" })] }) }), _jsx(AppShell.Navbar, { children: _jsxs(Stack, { gap: 2, className: "p-4", children: [_jsx(Button, { variant: "ghost", className: "justify-start", children: "Home" }), _jsx(Button, { variant: "ghost", className: "justify-start", children: "Profile" }), _jsx(Button, { variant: "ghost", className: "justify-start", children: "Settings" })] }) }), _jsx(AppShell.Main, { children: _jsxs(Box, { className: "p-4", children: [_jsx(Heading, { size: "h2", className: "mb-4", children: "Dashboard" }), _jsx(Text, { children: "Resize window to see mobile collapse behavior." })] }) })] }));
+    },
+};
+export const FullLayout = {
+    render: () => (_jsxs(AppShell, { header: { height: 60 }, footer: { height: 60 }, navbar: { width: 250, breakpoint: "sm" }, aside: { width: 250, breakpoint: "md" }, padding: "md", children: [_jsx(AppShell.Header, { children: _jsx(Box, { className: "font-bold px-4 py-2", children: "Header" }) }), _jsx(AppShell.Navbar, { children: _jsx(Box, { className: "p-4", children: "Navbar" }) }), _jsx(AppShell.Main, { children: _jsx(Box, { className: "p-4 border border-dashed h-full", children: "Main Content" }) }), _jsx(AppShell.Aside, { children: _jsx(Box, { className: "p-4", children: "Aside" }) }), _jsx(AppShell.Footer, { children: _jsx(Box, { className: "font-bold px-4 py-2", children: "Footer" }) })] })),
+};

package/dist/components/app-shell/index.d.ts

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

package/dist/components/app-shell/index.js

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

package/dist/components/avatar/avatar.d.ts

@@ -2,7 +2,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const avatarVariants: (props?: ({
-    size?: "default" | "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
+    size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | null | undefined;
     shape?: "circle" | "square" | "rounded" | null | undefined;
     status?: "none" | "online" | "offline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -19,7 +19,7 @@ interface AvatarImageProps extends React.ComponentProps<typeof AvatarPrimitive.I
 declare function AvatarImage({ className, shape: shapeProp, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
 declare const avatarFallbackVariants: (props?: ({
     shape?: "circle" | "square" | "rounded" | null | undefined;
-    variant?: "default" | "info" | "warning" | "success" | "primary" | "secondary" | "danger" | "destructive" | "muted" | null | undefined;
+    variant?: "default" | "primary" | "secondary" | "success" | "danger" | "destructive" | "warning" | "info" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface AvatarFallbackProps extends React.ComponentProps<typeof AvatarPrimitive.Fallback>, VariantProps<typeof avatarFallbackVariants> {
 }

package/dist/components/avatar/avatar.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 { Avatar, AvatarFallback, AvatarImage } from "./avatar";
 const meta = {
     title: "Data Display/Avatar",

package/dist/components/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "dark" | "light" | "error" | "info" | "warning" | "success" | "primary" | "secondary" | "danger" | "destructive" | "outline" | "muted" | null | undefined;
+    variant?: "primary" | "success" | "warning" | "info" | "destructive" | "secondary" | "default" | "error" | "outline" | "danger" | "dark" | "light" | "muted" | null | undefined;
     shape?: "default" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, shape, asChild, isLoading, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {