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

package/dist/components/social-login-button/social-login-button.js

@@ -21,32 +21,32 @@ const providerConfig = {
     google: {
         icon: siGoogle,
         label: "Google",
-        color: "hover:bg-[#4285F4] hover:text-white hover:border-[#4285F4]",
+        color: "hover:bg-brand-google hover:text-white hover:border-brand-google",
     },
     github: {
         icon: siGithub,
         label: "GitHub",
-        color: "hover:bg-[#181717] hover:text-white hover:border-[#181717]",
+        color: "hover:bg-brand-github hover:text-white hover:border-brand-github",
     },
     facebook: {
         icon: siFacebook,
         label: "Facebook",
-        color: "hover:bg-[#1877F2] hover:text-white hover:border-[#1877F2]",
+        color: "hover:bg-brand-facebook hover:text-white hover:border-brand-facebook",
     },
     twitter: {
         icon: siX,
         label: "X",
-        color: "hover:bg-black hover:text-white hover:border-black",
+        color: "hover:bg-brand-twitter hover:text-white hover:border-brand-twitter",
     },
     x: {
         icon: siX,
         label: "X",
-        color: "hover:bg-black hover:text-white hover:border-black",
+        color: "hover:bg-brand-twitter hover:text-white hover:border-brand-twitter",
     },
     linkedin: {
         icon: null, // Custom component used instead
         label: "LinkedIn",
-        color: "hover:bg-[#0A66C2] hover:text-white hover:border-[#0A66C2]",
+        color: "hover:bg-brand-linkedin hover:text-white hover:border-brand-linkedin",
     },
 };
 export const SocialLoginButton = React.forwardRef(({ provider, isLoading = false, label, className, disabled, ...props }, ref) => {

package/dist/components/sparkline-chart/sparkline-chart.js

@@ -7,7 +7,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
 import { Chart } from "../charts/chart";
-export function SparklineChart({ data, type = "line", color = "#3B82F6", width = "100%", height = 64, tooltip = false, className, gradientFrom, gradientTo, animated = true, interactive = false, }) {
+import { useThemeAwareChart } from "../charts";
+export function SparklineChart({ data, type = "line", color, width = "100%", height = 64, tooltip = false, className, gradientFrom, gradientTo, animated = true, interactive = false, }) {
+    const { colors: themeColors, theme } = useThemeAwareChart();
+    const chartColor = color || themeColors.primary[0];
     const options = {
         chart: {
             type,
@@ -25,6 +28,7 @@ export function SparklineChart({ data, type = "line", color = "#3B82F6", width =
                 enabled: false,
             },
         },
+        colors: [chartColor],
         states: {
             hover: {
                 filter: {
@@ -67,10 +71,9 @@ export function SparklineChart({ data, type = "line", color = "#3B82F6", width =
                 },
             }),
         },
-        colors: [color],
         tooltip: {
             enabled: tooltip,
-            theme: "dark",
+            theme: theme === "dark" || theme === "accent" ? "dark" : "light",
             x: {
                 show: false,
             },

package/dist/components/sparkline-chart/sparkline-chart.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../card/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../card";
 import { SparklineChart } from "./sparkline-chart";
 const meta = {
     title: "Data Display/SparklineChart",

package/dist/components/spinner/spinner.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const spinnerVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    variant?: "default" | "current" | "white" | "muted" | "ghost" | null | undefined;
+    variant?: "current" | "default" | "white" | "muted" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SpinnerProps extends React.ComponentProps<"svg">, VariantProps<typeof spinnerVariants> {
     label?: string;

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

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

package/dist/components/spoiler/index.js

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

package/dist/components/spoiler/spoiler.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface SpoilerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Max height in collapsed state (px) */
+    maxHeight: number;
+    /** Label for "Show more" button */
+    showLabel?: React.ReactNode;
+    /** Label for "Show less" button */
+    hideLabel?: React.ReactNode;
+    /** Initial state */
+    initialState?: boolean;
+    /** Transition duration in seconds */
+    transitionDuration?: number;
+}
+export declare const Spoiler: React.ForwardRefExoticComponent<SpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/spoiler.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDisclosure } from "@kala-ui/react-hooks";
+import { motion } from "framer-motion";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Box } from "../box";
+import { Button } from "../button";
+import { Flex } from "../flex";
+export const Spoiler = React.forwardRef(({ className, children, maxHeight = 100, showLabel = "Show more", hideLabel = "Show less", initialState = false, transitionDuration = 0.2, ...props }, ref) => {
+    const [expanded, { toggle: toggleExpanded }] = useDisclosure(initialState);
+    const [showButton, setShowButton] = React.useState(false);
+    const contentRef = React.useRef(null);
+    React.useEffect(() => {
+        if (contentRef.current) {
+            setShowButton(contentRef.current.scrollHeight > maxHeight);
+        }
+    }, [maxHeight]);
+    return (_jsxs(Box, { ref: ref, className: cn("relative", className), ...props, children: [_jsx(motion.div, { initial: false, animate: { height: expanded ? "auto" : maxHeight }, transition: { duration: transitionDuration, ease: "easeInOut" }, className: "overflow-hidden", children: _jsx(Box, { ref: contentRef, children: children }) }), showButton && (_jsx(Flex, { justify: "center", className: "mt-2", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: toggleExpanded, children: expanded ? hideLabel : showLabel }) }))] }));
+});
+Spoiler.displayName = "Spoiler";

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

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

package/dist/components/spoiler/spoiler.stories.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spoiler } from "./spoiler";
+import { Stack } from "../stack";
+import { Text } from "../text";
+const meta = {
+    title: "Components/Spoiler",
+    component: Spoiler,
+    tags: ["autodocs"],
+    argTypes: {
+        maxHeight: { control: "number" },
+        transitionDuration: { control: "number" },
+    },
+};
+export default meta;
+const longContent = (_jsxs(Stack, { gap: 4, children: [_jsx(Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(Text, { children: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }), _jsx(Text, { children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." })] }));
+export const Default = {
+    args: {
+        maxHeight: 60,
+        children: longContent,
+    },
+};
+export const CustomLabels = {
+    args: {
+        maxHeight: 50,
+        showLabel: "Read full article",
+        hideLabel: "Hide article",
+        children: longContent,
+    },
+};
+export const NoButtonIfNeeded = {
+    args: {
+        maxHeight: 500, // Large enough to fit content
+        children: _jsx(Text, { children: "Short content that fits within max height." }),
+    },
+};

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

@@ -1 +1 @@
-export * from './stack';
+export * from "./stack";

package/dist/components/stack/index.js

@@ -1 +1 @@
-export * from './stack';
+export * from "./stack";

package/dist/components/stack/stack.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { type FlexProps } from "../flex/flex";
+import { type FlexProps } from "../flex";
 export interface StackProps extends Omit<FlexProps, "direction"> {
     direction?: "column" | "columnReverse";
 }
-declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Stack };

package/dist/components/stack/stack.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Flex } from "../flex/flex";
+import { Flex } from "../flex";
 const Stack = React.forwardRef(({ className, direction = "column", gap = 4, align = "stretch", ...props }, ref) => {
     return (_jsx(Flex, { ref: ref, direction: direction, gap: gap, align: align, className: cn("w-full", className), ...props }));
 });

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

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

package/dist/components/steps/steps.js

@@ -3,6 +3,8 @@ import { cva } from "class-variance-authority";
 import { Check } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../lib/utils";
+import { Box } from "../box";
+import { Text } from "../text";
 const stepsVariants = cva("flex w-full", {
     variants: {
         orientation: {
@@ -15,21 +17,21 @@ const stepsVariants = cva("flex w-full", {
     },
 });
 const Steps = React.forwardRef(({ className, orientation, currentStep, items, onStepClick, showLine = true, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn(stepsVariants({ orientation }), className), ...props, children: items.map((step, index) => {
+    return (_jsx(Box, { ref: ref, className: cn(stepsVariants({ orientation }), className), ...props, children: items.map((step, index) => {
             const stepNumber = index + 1;
             const isCompleted = stepNumber < currentStep;
             const isActive = stepNumber === currentStep;
             const isLast = index === items.length - 1;
             const isClickable = !!onStepClick;
-            return (_jsxs("div", { className: cn("group relative flex", orientation === "vertical"
+            return (_jsxs(Box, { className: cn("group relative flex", orientation === "vertical"
                     ? "flex-col pb-8 last:pb-0"
-                    : "flex-1 flex-col items-center"), children: [!isLast && showLine && (_jsxs(_Fragment, { children: [orientation === "horizontal" && (_jsx("div", { className: "absolute top-4 left-1/2 w-full h-[2px] -translate-y-1/2 bg-separator", children: _jsx("div", { className: cn("h-full bg-primary transition-all duration-500 ease-in-out", isCompleted ? "w-full" : "w-0") }) })), orientation === "vertical" && (_jsx("div", { className: "absolute top-8 left-4 h-[calc(100%-32px)] w-[2px] -translate-x-1/2 bg-separator", children: _jsx("div", { className: cn("w-full bg-primary transition-all duration-500 ease-in-out", isCompleted ? "h-full" : "h-0") }) }))] })), _jsxs("div", { className: cn("flex items-center", orientation === "vertical" ? "flex-row" : "flex-col w-full"), children: [_jsx("button", { type: "button", className: cn("relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-all duration-300", isActive
+                    : "flex-1 flex-col items-center"), children: [!isLast && showLine && (_jsxs(_Fragment, { children: [orientation === "horizontal" && (_jsx(Box, { className: "absolute top-4 left-1/2 w-full h-[2px] -translate-y-1/2 bg-separator", children: _jsx(Box, { className: cn("h-full bg-primary transition-all duration-500 ease-in-out", isCompleted ? "w-full" : "w-0") }) })), orientation === "vertical" && (_jsx(Box, { className: "absolute top-8 left-4 h-[calc(100%-32px)] w-[2px] -translate-x-1/2 bg-separator", children: _jsx(Box, { className: cn("w-full bg-primary transition-all duration-500 ease-in-out", isCompleted ? "h-full" : "h-0") }) }))] })), _jsxs(Box, { className: cn("flex items-center", orientation === "vertical" ? "flex-row" : "flex-col w-full"), children: [_jsx(Box, { as: "button", type: "button", className: cn("relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-all duration-300", isActive
                                     ? "border-primary bg-primary text-primary-foreground scale-110"
                                     : isCompleted
                                         ? "border-primary bg-primary text-primary-foreground"
-                                        : "border-border bg-background text-muted-foreground group-hover:border-primary/50", isClickable && !isActive ? "cursor-pointer" : ""), disabled: !isClickable, onClick: () => onStepClick?.(stepNumber), children: isCompleted ? (_jsx(Check, { className: "h-4 w-4" })) : (step.icon || stepNumber) }), _jsxs("div", { className: cn(orientation === "vertical"
+                                        : "border-border bg-background text-muted-foreground group-hover:border-primary/50", isClickable && !isActive ? "cursor-pointer" : ""), disabled: !isClickable, onClick: () => onStepClick?.(stepNumber), children: isCompleted ? (_jsx(Check, { className: "h-4 w-4" })) : (step.icon || stepNumber) }), _jsxs(Box, { className: cn(orientation === "vertical"
                                     ? "ml-4"
-                                    : "mt-2 text-center px-2"), children: [_jsx("div", { className: cn("text-sm font-medium", isActive ? "text-primary" : "text-foreground"), children: step.title }), step.description && (_jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: step.description }))] })] })] }, step.title));
+                                    : "mt-2 text-center px-2"), children: [_jsx(Text, { size: "sm", weight: "medium", className: cn(isActive ? "text-primary" : "text-foreground"), children: step.title }), step.description && (_jsx(Text, { size: "xs", className: "text-muted-foreground mt-0.5", children: step.description }))] })] })] }, step.title));
         }) }));
 });
 Steps.displayName = "Steps";

package/dist/components/steps/steps.stories.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle, ChevronLeft, ChevronRight, CreditCard, Settings, User, } from "lucide-react";
 import * as React from "react";
+import { Box } from "../box";
 import { Button } from "../button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../card";
+import { Flex } from "../flex";
 import { Input } from "../input";
 import { Label } from "../label";
 import { RadioGroup, RadioGroupItem } from "../radio-group";
+import { Stack } from "../stack";
+import { Text } from "../text";
 import { Steps } from "./steps";
 const meta = {
     title: "Data Display/Steps",
@@ -125,7 +129,7 @@ export const FullFlow = () => {
             setCurrentStep((prev) => prev - 1);
         }
     };
-    return (_jsxs("div", { className: "w-[600px] max-w-full", children: [_jsx(Steps, { currentStep: currentStep, items: flowItems, className: "mb-8" }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: flowItems[currentStep - 1]?.title }), _jsx(CardDescription, { children: flowItems[currentStep - 1]?.description })] }), _jsxs(CardContent, { children: [currentStep === 1 && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "name", children: "Name" }), _jsx(Input, { id: "name", placeholder: "John Doe", value: formData.name, onChange: (e) => setFormData({ ...formData, name: e.target.value }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", placeholder: "john@example.com", value: formData.email, onChange: (e) => setFormData({ ...formData, email: e.target.value }) })] })] })), currentStep === 2 && (_jsxs(RadioGroup, { value: formData.plan, onValueChange: (val) => setFormData({ ...formData, plan: val }), variant: "cards", children: [_jsx(RadioGroupItem, { value: "free", id: "free", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Free Plan" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Basic features" })] }), _jsx("span", { className: "font-bold", children: "$0/mo" })] }) }), _jsx(RadioGroupItem, { value: "pro", id: "pro", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Pro Plan" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "All features included" })] }), _jsx("span", { className: "font-bold", children: "$20/mo" })] }) })] })), currentStep === 3 && (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "card", children: "Card Number" }), _jsx(Input, { id: "card", placeholder: "0000 0000 0000 0000", value: formData.cardNumber, onChange: (e) => setFormData({ ...formData, cardNumber: e.target.value }) })] }) })), currentStep === 4 && (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "rounded-md bg-muted p-4", children: [_jsxs("p", { children: [_jsx("strong", { children: "Name:" }), " ", formData.name || "Not set"] }), _jsxs("p", { children: [_jsx("strong", { children: "Email:" }), " ", formData.email || "Not set"] }), _jsxs("p", { children: [_jsx("strong", { children: "Plan:" }), " ", formData.plan] }), _jsxs("p", { children: [_jsx("strong", { children: "Card:" }), " **** **** ****", " ", formData.cardNumber.slice(-4) || "****"] })] }) }))] }), _jsxs(CardFooter, { className: "flex justify-between", children: [_jsxs(Button, { variant: "outline", onClick: handlePrev, disabled: currentStep === 1, children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), " Back"] }), _jsxs(Button, { onClick: handleNext, disabled: currentStep === flowItems.length, children: [currentStep === flowItems.length ? "Finish" : "Next", " ", _jsx(ChevronRight, { className: "ml-2 h-4 w-4" })] })] })] })] }));
+    return (_jsxs(Box, { className: "w-[600px] max-w-full", children: [_jsx(Steps, { currentStep: currentStep, items: flowItems, className: "mb-8" }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: flowItems[currentStep - 1]?.title }), _jsx(CardDescription, { children: flowItems[currentStep - 1]?.description })] }), _jsxs(CardContent, { children: [currentStep === 1 && (_jsxs(Stack, { gap: 4, children: [_jsxs(Stack, { gap: 2, children: [_jsx(Label, { htmlFor: "name", children: "Name" }), _jsx(Input, { id: "name", placeholder: "John Doe", value: formData.name, onChange: (e) => setFormData({ ...formData, name: e.target.value }) })] }), _jsxs(Stack, { gap: 2, children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", placeholder: "john@example.com", value: formData.email, onChange: (e) => setFormData({ ...formData, email: e.target.value }) })] })] })), currentStep === 2 && (_jsxs(RadioGroup, { value: formData.plan, onValueChange: (val) => setFormData({ ...formData, plan: val }), variant: "cards", children: [_jsx(RadioGroupItem, { value: "free", id: "free", children: _jsxs(Flex, { align: "center", justify: "between", className: "w-full", children: [_jsxs(Box, { children: [_jsx(Text, { size: "sm", weight: "medium", children: "Free Plan" }), _jsx(Text, { size: "sm", className: "text-muted-foreground", children: "Basic features" })] }), _jsx(Text, { weight: "bold", children: "$0/mo" })] }) }), _jsx(RadioGroupItem, { value: "pro", id: "pro", children: _jsxs(Flex, { align: "center", justify: "between", className: "w-full", children: [_jsxs(Box, { children: [_jsx(Text, { size: "sm", weight: "medium", children: "Pro Plan" }), _jsx(Text, { size: "sm", className: "text-muted-foreground", children: "All features included" })] }), _jsx(Text, { weight: "bold", children: "$20/mo" })] }) })] })), currentStep === 3 && (_jsx(Stack, { gap: 4, children: _jsxs(Stack, { gap: 2, children: [_jsx(Label, { htmlFor: "card", children: "Card Number" }), _jsx(Input, { id: "card", placeholder: "0000 0000 0000 0000", value: formData.cardNumber, onChange: (e) => setFormData({ ...formData, cardNumber: e.target.value }) })] }) })), currentStep === 4 && (_jsx(Stack, { gap: 4, children: _jsxs(Box, { className: "rounded-md bg-muted p-4", children: [_jsxs(Text, { children: [_jsx("strong", { children: "Name:" }), " ", formData.name || "Not set"] }), _jsxs(Text, { children: [_jsx("strong", { children: "Email:" }), " ", formData.email || "Not set"] }), _jsxs(Text, { children: [_jsx("strong", { children: "Plan:" }), " ", formData.plan] }), _jsxs(Text, { children: [_jsx("strong", { children: "Card:" }), " **** **** ****", " ", formData.cardNumber.slice(-4) || "****"] })] }) }))] }), _jsxs(CardFooter, { className: "flex justify-between", children: [_jsxs(Button, { variant: "outline", onClick: handlePrev, disabled: currentStep === 1, children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), " Back"] }), _jsxs(Button, { onClick: handleNext, disabled: currentStep === flowItems.length, children: [currentStep === flowItems.length ? "Finish" : "Next", " ", _jsx(ChevronRight, { className: "ml-2 h-4 w-4" })] })] })] })] }));
 };
 export const VerticalFullFlow = () => {
     const [currentStep, setCurrentStep] = React.useState(1);
@@ -167,5 +171,5 @@ export const VerticalFullFlow = () => {
             setCurrentStep((prev) => prev - 1);
         }
     };
-    return (_jsxs("div", { className: "flex w-[800px] max-w-full gap-8", children: [_jsx("div", { className: "w-64 shrink-0", children: _jsx(Steps, { currentStep: currentStep, items: flowItems, orientation: "vertical" }) }), _jsxs(Card, { className: "flex-1", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: flowItems[currentStep - 1]?.title }), _jsx(CardDescription, { children: flowItems[currentStep - 1]?.description })] }), _jsxs(CardContent, { children: [currentStep === 1 && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "v-name", children: "Name" }), _jsx(Input, { id: "v-name", placeholder: "John Doe", value: formData.name, onChange: (e) => setFormData({ ...formData, name: e.target.value }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "v-email", children: "Email" }), _jsx(Input, { id: "v-email", type: "email", placeholder: "john@example.com", value: formData.email, onChange: (e) => setFormData({ ...formData, email: e.target.value }) })] })] })), currentStep === 2 && (_jsxs(RadioGroup, { value: formData.plan, onValueChange: (val) => setFormData({ ...formData, plan: val }), variant: "cards", children: [_jsx(RadioGroupItem, { value: "free", id: "v-free", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Free Plan" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Basic features" })] }), _jsx("span", { className: "font-bold", children: "$0/mo" })] }) }), _jsx(RadioGroupItem, { value: "pro", id: "v-pro", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Pro Plan" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "All features included" })] }), _jsx("span", { className: "font-bold", children: "$20/mo" })] }) })] })), currentStep === 3 && (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "v-card", children: "Card Number" }), _jsx(Input, { id: "v-card", placeholder: "0000 0000 0000 0000", value: formData.cardNumber, onChange: (e) => setFormData({ ...formData, cardNumber: e.target.value }) })] }) })), currentStep === 4 && (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "rounded-md bg-muted p-4", children: [_jsxs("p", { children: [_jsx("strong", { children: "Name:" }), " ", formData.name || "Not set"] }), _jsxs("p", { children: [_jsx("strong", { children: "Email:" }), " ", formData.email || "Not set"] }), _jsxs("p", { children: [_jsx("strong", { children: "Plan:" }), " ", formData.plan] }), _jsxs("p", { children: [_jsx("strong", { children: "Card:" }), " **** **** ****", " ", formData.cardNumber.slice(-4) || "****"] })] }) }))] }), _jsxs(CardFooter, { className: "flex justify-between", children: [_jsxs(Button, { variant: "outline", onClick: handlePrev, disabled: currentStep === 1, children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), " Back"] }), _jsxs(Button, { onClick: handleNext, disabled: currentStep === flowItems.length, children: [currentStep === flowItems.length ? "Finish" : "Next", " ", _jsx(ChevronRight, { className: "ml-2 h-4 w-4" })] })] })] })] }));
+    return (_jsxs(Flex, { className: "w-[800px] max-w-full", gap: 8, children: [_jsx(Box, { className: "w-64 shrink-0", children: _jsx(Steps, { currentStep: currentStep, items: flowItems, orientation: "vertical" }) }), _jsxs(Card, { className: "flex-1", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: flowItems[currentStep - 1]?.title }), _jsx(CardDescription, { children: flowItems[currentStep - 1]?.description })] }), _jsxs(CardContent, { children: [currentStep === 1 && (_jsxs(Stack, { gap: 4, children: [_jsxs(Stack, { gap: 2, children: [_jsx(Label, { htmlFor: "v-name", children: "Name" }), _jsx(Input, { id: "v-name", placeholder: "John Doe", value: formData.name, onChange: (e) => setFormData({ ...formData, name: e.target.value }) })] }), _jsxs(Stack, { gap: 2, children: [_jsx(Label, { htmlFor: "v-email", children: "Email" }), _jsx(Input, { id: "v-email", type: "email", placeholder: "john@example.com", value: formData.email, onChange: (e) => setFormData({ ...formData, email: e.target.value }) })] })] })), currentStep === 2 && (_jsxs(RadioGroup, { value: formData.plan, onValueChange: (val) => setFormData({ ...formData, plan: val }), variant: "cards", children: [_jsx(RadioGroupItem, { value: "free", id: "v-free", children: _jsxs(Flex, { align: "center", justify: "between", className: "w-full", children: [_jsxs(Box, { children: [_jsx(Text, { size: "sm", weight: "medium", children: "Free Plan" }), _jsx(Text, { size: "sm", className: "text-muted-foreground", children: "Basic features" })] }), _jsx(Text, { weight: "bold", children: "$0/mo" })] }) }), _jsx(RadioGroupItem, { value: "pro", id: "v-pro", children: _jsxs(Flex, { align: "center", justify: "between", className: "w-full", children: [_jsxs(Box, { children: [_jsx(Text, { size: "sm", weight: "medium", children: "Pro Plan" }), _jsx(Text, { size: "sm", className: "text-muted-foreground", children: "All features included" })] }), _jsx(Text, { weight: "bold", children: "$20/mo" })] }) })] })), currentStep === 3 && (_jsx(Stack, { gap: 4, children: _jsxs(Stack, { gap: 2, children: [_jsx(Label, { htmlFor: "v-card", children: "Card Number" }), _jsx(Input, { id: "v-card", placeholder: "0000 0000 0000 0000", value: formData.cardNumber, onChange: (e) => setFormData({ ...formData, cardNumber: e.target.value }) })] }) })), currentStep === 4 && (_jsx(Stack, { gap: 4, children: _jsxs(Box, { className: "rounded-md bg-muted p-4", children: [_jsxs(Text, { children: [_jsx("strong", { children: "Name:" }), " ", formData.name || "Not set"] }), _jsxs(Text, { children: [_jsx("strong", { children: "Email:" }), " ", formData.email || "Not set"] }), _jsxs(Text, { children: [_jsx("strong", { children: "Plan:" }), " ", formData.plan] }), _jsxs(Text, { children: [_jsx("strong", { children: "Card:" }), " **** **** ****", " ", formData.cardNumber.slice(-4) || "****"] })] }) }))] }), _jsxs(CardFooter, { className: "flex justify-between", children: [_jsxs(Button, { variant: "outline", onClick: handlePrev, disabled: currentStep === 1, children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), " Back"] }), _jsxs(Button, { onClick: handleNext, disabled: currentStep === flowItems.length, children: [currentStep === flowItems.length ? "Finish" : "Next", " ", _jsx(ChevronRight, { className: "ml-2 h-4 w-4" })] })] })] })] }));
 };

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

@@ -1,2 +1,2 @@
-export type { SwitchProps } from "./switch.types";
 export { Switch } from "./switch";
+export type { SwitchProps } from "./switch.types";

package/dist/components/switch/switch.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { switchStyles, switchThumbStyles } from "../../config/switch";
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 function Switch({ className, isLoading = false, ...props }) {
     if (isLoading) {
         return _jsx(Skeleton, { className: cn("h-6 w-11 rounded-full", className) });

package/dist/components/switch/switch.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fn } from "@storybook/test";
 import { Label } from "../label";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Switch } from "./switch";
 const meta = {
     title: "Forms/Switch",

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

@@ -4,8 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Provides a loading placeholder that matches the actual Table component structure
  * to prevent Cumulative Layout Shift (CLS)
  */
-import { cn } from "../../lib/utils";
 import { tableBodyStyles, tableCellStyles, tableHeaderStyles, tableHeadStyles, tableRowStyles, } from "../../config/table";
+import { cn } from "../../lib/utils";
 import { Skeleton } from "../skeleton";
 export function TableSkeleton({ rows = 5, columns = 4, headers, columnWidths, showActions = false, showCheckboxes = false, stickyHeader = false, }) {
     const _totalColumns = columns + (showActions ? 1 : 0);
@@ -18,7 +18,7 @@ export function TableSkeleton({ rows = 5, columns = 4, headers, columnWidths, sh
         // Calculate default width based on alignment to match typical column behavior
         return undefined; // Let CSS handle default width
     };
-    return (_jsx("div", { className: "relative w-full overflow-x-auto border rounded-lg bg-card theme-card shadow-sm", children: _jsxs("table", { "data-slot": "table", className: "w-full caption-bottom text-sm", children: [_jsx("thead", { "data-slot": "table-header", className: cn(tableHeaderStyles.base, "bg-muted/50", stickyHeader && "sticky top-0 z-1"), children: _jsxs("tr", { "data-slot": "table-row", className: cn(tableRowStyles.base, "border-0"), children: [showCheckboxes && _jsx("th", { "data-slot": "table-head", className: cn(tableHeadStyles.base, "w-12") }), displayHeaders.map((header, index) => (_jsx("th", { "data-slot": "table-head", className: tableHeadStyles.base, style: { width: getCellWidth(index) }, children: header || _jsx(Skeleton, { className: "h-4 w-24" }) }, `header-${header || index}-${crypto.randomUUID()}`))), showActions && _jsx("th", { "data-slot": "table-head", className: tableHeadStyles.base, children: "Actions" }, "actions-header")] }) }), _jsx("tbody", { "data-slot": "table-body", className: tableBodyStyles.base, children: Array.from({ length: rows }).map(() => {
+    return (_jsx("div", { className: "relative w-full overflow-x-auto border rounded-lg bg-card theme-card shadow-sm", children: _jsxs("table", { "data-slot": "table", className: "w-full caption-bottom text-sm", children: [_jsx("thead", { "data-slot": "table-header", className: cn(tableHeaderStyles.base, "bg-muted/50", stickyHeader && "sticky top-0 z-1"), children: _jsxs("tr", { "data-slot": "table-row", className: cn(tableRowStyles.base, "border-0"), children: [showCheckboxes && (_jsx("th", { "data-slot": "table-head", className: cn(tableHeadStyles.base, "w-12") })), displayHeaders.map((header, index) => (_jsx("th", { "data-slot": "table-head", className: tableHeadStyles.base, style: { width: getCellWidth(index) }, children: header || _jsx(Skeleton, { className: "h-4 w-24" }) }, `header-${header || index}-${crypto.randomUUID()}`))), showActions && (_jsx("th", { "data-slot": "table-head", className: tableHeadStyles.base, children: "Actions" }, "actions-header"))] }) }), _jsx("tbody", { "data-slot": "table-body", className: tableBodyStyles.base, children: Array.from({ length: rows }).map(() => {
                         const rowId = crypto.randomUUID();
                         return (_jsxs("tr", { "data-slot": "table-row", className: cn(tableRowStyles.base, "border-0"), children: [showCheckboxes && (_jsx("td", { "data-slot": "table-cell", className: tableCellStyles.base, children: _jsx(Skeleton, { className: "h-4 w-4 rounded" }) })), Array.from({ length: columns }).map((_, colIndex) => {
                                     const cellId = crypto.randomUUID();

package/dist/components/table/table.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Skeleton } from "../skeleton/skeleton";
 import { tableBodyStyles, tableCaptionStyles, tableCellStyles, tableFooterStyles, tableHeaderStyles, tableHeadStyles, tableRowStyles, } from "../../config/table";
 import { cn } from "../../lib/utils";
+import { Box } from "../box";
+import { Skeleton } from "../skeleton";
 // Table Skeleton component (defined inline to avoid circular dependencies)
 function TableSkeleton({ rows = 5, columns = 4, headers, showActions = false, showCheckboxes = false, }) {
-    return (_jsx("div", { className: "relative w-full overflow-x-auto border rounded-lg bg-card theme-card", children: _jsxs("table", { className: "w-full caption-bottom text-sm", children: [headers ? (_jsx("thead", { className: "border-b bg-muted/50", children: _jsxs("tr", { children: [showCheckboxes && (_jsx("th", { className: "w-10 px-4 py-3 text-left", children: _jsx(Skeleton, { className: "h-4 w-4" }) })), headers.map((_header, i) => (_jsx("th", { className: "px-4 py-3 text-left", children: _jsx(Skeleton, { className: "h-4 w-24" }) }, i))), showActions && (_jsx("th", { className: "w-16 px-4 py-3 text-right", children: _jsx(Skeleton, { className: "ml-auto h-4 w-8" }) }))] }) })) : (_jsx("thead", { className: "border-b bg-muted/50", children: _jsxs("tr", { children: [showCheckboxes && (_jsx("th", { className: "w-10 px-4 py-3 text-left", children: _jsx(Skeleton, { className: "h-4 w-4" }) })), Array.from({ length: columns }).map((_, i) => (_jsx("th", { className: "px-4 py-3 text-left", children: _jsx(Skeleton, { className: "h-4 w-24" }) }, i))), showActions && (_jsx("th", { className: "w-16 px-4 py-3 text-right", children: _jsx(Skeleton, { className: "ml-auto h-4 w-8" }) }))] }) })), _jsx("tbody", { className: tableBodyStyles.base, children: Array.from({ length: rows }).map((_, rowIndex) => (_jsxs("tr", { className: "border-b transition-colors hover:bg-muted/50", children: [showCheckboxes && (_jsx("td", { className: "w-10 px-4 py-3", children: _jsx(Skeleton, { className: "h-4 w-4" }) })), Array.from({ length: columns }).map((_, colIndex) => (_jsx("td", { className: "px-4 py-3", children: _jsx(Skeleton, { className: "h-4 w-full max-w-[200px]" }) }, colIndex))), showActions && (_jsx("td", { className: "w-16 px-4 py-3 text-right", children: _jsx(Skeleton, { className: "ml-auto h-4 w-8" }) }))] }, rowIndex))) })] }) }));
+    return (_jsx(Box, { className: "relative w-full overflow-x-auto border rounded-lg bg-card theme-card", children: _jsxs("table", { className: "w-full caption-bottom text-sm", children: [headers ? (_jsx("thead", { className: "border-b bg-muted/50", children: _jsxs("tr", { children: [showCheckboxes && (_jsx("th", { className: "w-10 px-4 py-3 text-left", children: _jsx(Skeleton, { className: "h-4 w-4" }) })), headers.map((_header, i) => (_jsx("th", { className: "px-4 py-3 text-left", children: _jsx(Skeleton, { className: "h-4 w-24" }) }, i))), showActions && (_jsx("th", { className: "w-16 px-4 py-3 text-right", children: _jsx(Skeleton, { className: "ml-auto h-4 w-8" }) }))] }) })) : (_jsx("thead", { className: "border-b bg-muted/50", children: _jsxs("tr", { children: [showCheckboxes && (_jsx("th", { className: "w-10 px-4 py-3 text-left", children: _jsx(Skeleton, { className: "h-4 w-4" }) })), Array.from({ length: columns }).map((_, i) => (_jsx("th", { className: "px-4 py-3 text-left", children: _jsx(Skeleton, { className: "h-4 w-24" }) }, i))), showActions && (_jsx("th", { className: "w-16 px-4 py-3 text-right", children: _jsx(Skeleton, { className: "ml-auto h-4 w-8" }) }))] }) })), _jsx("tbody", { className: tableBodyStyles.base, children: Array.from({ length: rows }).map((_, rowIndex) => (_jsxs("tr", { className: "border-b transition-colors hover:bg-muted/50", children: [showCheckboxes && (_jsx("td", { className: "w-10 px-4 py-3", children: _jsx(Skeleton, { className: "h-4 w-4" }) })), Array.from({ length: columns }).map((_, colIndex) => (_jsx("td", { className: "px-4 py-3", children: _jsx(Skeleton, { className: "h-4 w-full max-w-[200px]" }) }, colIndex))), showActions && (_jsx("td", { className: "w-16 px-4 py-3 text-right", children: _jsx(Skeleton, { className: "ml-auto h-4 w-8" }) }))] }, rowIndex))) })] }) }));
 }
 function Table({ className, isLoading, loadingRows = 5, loadingColumns = 4, loadingShowActions = false, loadingHeaders, skeletonConfig, skeleton, ...props }) {
     // Render skeleton state directly
@@ -23,7 +24,7 @@ function Table({ className, isLoading, loadingRows = 5, loadingColumns = 4, load
         };
         return _jsx(TableSkeleton, { ...config });
     }
-    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto border rounded-lg bg-card theme-card", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+    return (_jsx(Box, { "data-slot": "table-container", className: "relative w-full overflow-x-auto border rounded-lg bg-card theme-card", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
     return (_jsx("thead", { "data-slot": "table-header", className: cn(tableHeaderStyles.base, className), ...props }));

package/dist/components/table/table.stories.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Badge } from "../badge";
+import { Box } from "../box";
 import { Button } from "../button";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
+import { Stack } from "../stack";
+import { Text } from "../text";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./table";
 import { TableSkeleton } from "./table-skeleton";
 const meta = {
@@ -116,7 +119,7 @@ export const Hoverable = {
                         email: "bob@example.com",
                         status: "Inactive",
                     },
-                ].map((user) => (_jsxs(TableRow, { className: "cursor-pointer hover:bg-primary/10", onClick: () => alert(`Clicked ${user.name}`), children: [_jsx(TableCell, { children: user.id }), _jsx(TableCell, { className: "font-medium", children: user.name }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: _jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${user.status === "Active"
+                ].map((user) => (_jsxs(TableRow, { className: "cursor-pointer hover:bg-primary/10", onClick: () => alert(`Clicked ${user.name}`), children: [_jsx(TableCell, { children: user.id }), _jsx(TableCell, { className: "font-medium", children: user.name }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: _jsx(Text, { as: "span", className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${user.status === "Active"
                                     ? "bg-success/10 text-success"
                                     : "bg-muted text-muted-foreground"}`, children: user.status }) })] }, user.id))) })] })),
 };
@@ -124,7 +127,7 @@ export const Hoverable = {
  * Responsive table that stacks on mobile
  */
 export const Responsive = {
-    render: () => (_jsx("div", { className: "w-full max-w-4xl", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Product" }), _jsx(TableHead, { className: "hidden sm:table-cell", children: "Category" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Stock" }), _jsx(TableHead, { className: "text-right", children: "Price" })] }) }), _jsx(TableBody, { children: [
+    render: () => (_jsx(Box, { className: "w-full max-w-4xl", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Product" }), _jsx(TableHead, { className: "hidden sm:table-cell", children: "Category" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Stock" }), _jsx(TableHead, { className: "text-right", children: "Price" })] }) }), _jsx(TableBody, { children: [
                         {
                             product: "Laptop Pro",
                             category: "Electronics",
@@ -171,7 +174,7 @@ export const CenterAligned = {
  * Dark theme table
  */
 export const BackgroundExample = {
-    render: () => (_jsx("div", { className: "p-6 bg-card rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" }), _jsx(TableHead, { className: "text-right", children: "Status" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "Alice Johnson" }), _jsx(TableCell, { children: "alice@example.com" }), _jsx(TableCell, { children: "Admin" }), _jsx(TableCell, { className: "text-right", children: _jsx(Badge, { variant: "success", children: "Active" }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "Bob Smith" }), _jsx(TableCell, { children: "bob@example.com" }), _jsx(TableCell, { children: "User" }), _jsx(TableCell, { className: "text-right", children: _jsx(Badge, { variant: "success", children: "Active" }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "Carol White" }), _jsx(TableCell, { children: "carol@example.com" }), _jsx(TableCell, { children: "User" }), _jsx(TableCell, { className: "text-right", children: _jsx(Badge, { variant: "secondary", children: "Inactive" }) })] })] })] }) })),
+    render: () => (_jsx(Box, { className: "p-6 bg-card rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" }), _jsx(TableHead, { className: "text-right", children: "Status" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "Alice Johnson" }), _jsx(TableCell, { children: "alice@example.com" }), _jsx(TableCell, { children: "Admin" }), _jsx(TableCell, { className: "text-right", children: _jsx(Badge, { variant: "success", children: "Active" }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "Bob Smith" }), _jsx(TableCell, { children: "bob@example.com" }), _jsx(TableCell, { children: "User" }), _jsx(TableCell, { className: "text-right", children: _jsx(Badge, { variant: "success", children: "Active" }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "Carol White" }), _jsx(TableCell, { children: "carol@example.com" }), _jsx(TableCell, { children: "User" }), _jsx(TableCell, { className: "text-right", children: _jsx(Badge, { variant: "secondary", children: "Inactive" }) })] })] })] }) })),
 };
 /**
  * Scrollable table with fixed height - useful for tables with many rows
@@ -192,7 +195,7 @@ export const ScrollableWithManyRows = {
             }));
         };
         const rows = generateRows(50);
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "text-sm text-muted-foreground", children: "This table has 50 rows with a maximum height of 600px and vertical scrolling." }), _jsx("div", { className: "max-h-[600px] overflow-y-auto rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 bg-card z-10", children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[80px]", children: "#" }), _jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" }), _jsx(TableHead, { className: "text-right", children: "Status" })] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: row.id }), _jsx(TableCell, { children: row.name }), _jsx(TableCell, { children: row.email }), _jsx(TableCell, { children: row.role }), _jsx(TableCell, { className: "text-right", children: _jsx(Badge, { variant: row.status === "Active"
+        return (_jsxs(Stack, { gap: 4, children: [_jsx(Text, { size: "sm", className: "text-muted-foreground", children: "This table has 50 rows with a maximum height of 600px and vertical scrolling." }), _jsx(Box, { className: "max-h-[600px] overflow-y-auto rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 bg-card z-10", children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[80px]", children: "#" }), _jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" }), _jsx(TableHead, { className: "text-right", children: "Status" })] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: row.id }), _jsx(TableCell, { children: row.name }), _jsx(TableCell, { children: row.email }), _jsx(TableCell, { children: row.role }), _jsx(TableCell, { className: "text-right", children: _jsx(Badge, { variant: row.status === "Active"
                                                     ? "success"
                                                     : row.status === "Inactive"
                                                         ? "secondary"
@@ -228,11 +231,11 @@ export const LoadingState = {
             { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
             { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "User" },
         ];
-        return (_jsxs("div", { children: [_jsx("div", { className: "mb-4", children: _jsx(Button, { onClick: () => setIsLoading(!isLoading), children: isLoading ? "Show Data" : "Show Loading" }) }), _jsxs(Table, { isLoading: isLoading, loadingRows: 3, loadingColumns: 4, loadingHeaders: ["ID", "Name", "Email", "Role"], children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "ID" }), _jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" })] }) }), _jsx(TableBody, { children: data.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.id }), _jsx(TableCell, { children: row.name }), _jsx(TableCell, { children: row.email }), _jsx(TableCell, { children: row.role })] }, row.id))) })] })] }));
+        return (_jsxs(Box, { children: [_jsx(Box, { className: "mb-4", children: _jsx(Button, { onClick: () => setIsLoading(!isLoading), children: isLoading ? "Show Data" : "Show Loading" }) }), _jsxs(Table, { isLoading: isLoading, loadingRows: 3, loadingColumns: 4, loadingHeaders: ["ID", "Name", "Email", "Role"], children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "ID" }), _jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" })] }) }), _jsx(TableBody, { children: data.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.id }), _jsx(TableCell, { children: row.name }), _jsx(TableCell, { children: row.email }), _jsx(TableCell, { children: row.role })] }, row.id))) })] })] }));
     },
 };
 export const LoadingSkeleton = {
-    render: () => (_jsx("div", { className: "w-full", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-16" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-20" }) })] }) }), _jsx(TableBody, { children: Array.from({ length: 5 }).map((_, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-12" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-40" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) })] }, i))) })] }) })),
+    render: () => (_jsx(Box, { className: "w-full", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-16" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-20" }) })] }) }), _jsx(TableBody, { children: Array.from({ length: 5 }).map((_, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-12" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-40" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) })] }, i))) })] }) })),
     parameters: {
         docs: {
             description: {

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Supports different variants and content area.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Tabs skeleton component
  *

package/dist/components/tabs/tabs.stories.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "../button/button";
-import { Skeleton } from "../skeleton/skeleton";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../card/card";
-import { Input } from "../input/input";
-import { Label } from "../label/label";
+import { Button } from "../button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../card";
+import { Input } from "../input";
+import { Label } from "../label";
+import { Skeleton } from "../skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 const meta = {
     title: "Navigation/Tabs",

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

@@ -1 +1 @@
-export * from './text';
+export * from "./text";

package/dist/components/text/index.js

@@ -1 +1 @@
-export * from './text';
+export * from "./text";

package/dist/components/text/text.d.ts

@@ -1,14 +1,16 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const textVariants: (props?: ({
-    size?: "base" | "sm" | "lg" | "xl" | "xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null | undefined;
-    weight?: "bold" | "black" | "normal" | "medium" | "thin" | "light" | "semibold" | "extrabold" | "extralight" | null | undefined;
-    align?: "center" | "end" | "start" | "left" | "right" | "justify" | null | undefined;
+    size?: "base" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null | undefined;
+    weight?: "bold" | "medium" | "semibold" | "extrabold" | "thin" | "extralight" | "light" | "normal" | "black" | null | undefined;
+    align?: "center" | "end" | "left" | "right" | "justify" | "start" | null | undefined;
     color?: "default" | "primary" | "secondary" | "destructive" | "muted" | "accent" | null | undefined;
     truncate?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface TextProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">, VariantProps<typeof textVariants> {
+export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof textVariants> {
     asChild?: boolean;
+    as?: React.ElementType;
+    [key: string]: any;
 }
-declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Text, textVariants };

package/dist/components/text/text.js

@@ -58,8 +58,8 @@ const textVariants = cva("text-foreground", {
         color: "default",
     },
 });
-const Text = React.forwardRef(({ className, size, weight, align, color, truncate, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "p";
+const Text = React.forwardRef(({ className, size, weight, align, color, truncate, asChild = false, as: Tag = "p", ...props }, ref) => {
+    const Comp = asChild ? Slot : Tag;
     return (_jsx(Comp, { className: cn(textVariants({ size, weight, align, color, truncate, className })), ref: ref, ...props }));
 });
 Text.displayName = "Text";