@kala-ui/react 0.0.1-beta.1

package/dist/src/components/popover/popover.stories.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info } from "lucide-react";
+import * as React from "react";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Label } from "../label";
+import { Skeleton } from "../skeleton/skeleton";
+import { Popover, PopoverBody, PopoverClose, PopoverContent, PopoverHeader, PopoverTrigger, } from "./popover";
+const meta = {
+    title: "Overlay/Popover",
+    component: Popover,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+// ============================================================================
+// With Arrow (Default and Variants)
+// ============================================================================
+export const WithArrow = {
+    render: () => (_jsxs("div", { className: "flex gap-4 flex-wrap", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Default with Arrow" }) }), _jsx(PopoverContent, { className: "w-60", showArrow: true, children: _jsx("p", { className: "text-sm", children: "This popover shows an arrow pointing to the trigger." }) })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "success", children: "Success Header Arrow" }) }), _jsxs(PopoverContent, { variant: "header-success", side: "bottom", children: [_jsx(PopoverHeader, { children: "Success Header" }), _jsx(PopoverBody, { children: _jsx("p", { className: "text-sm", children: "The arrow matches the green header color." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "danger", children: "Danger Full Arrow" }) }), _jsx(PopoverContent, { variant: "danger", side: "right", children: _jsx("p", { className: "text-sm text-white p-2", children: "The arrow matches the full red background." }) })] })] })),
+};
+// ============================================================================
+// Basic Example
+// ============================================================================
+export const Basic = {
+    render: () => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open popover" }) }), _jsx(PopoverContent, { className: "w-80", children: _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-medium leading-none", children: "Dimensions" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Set the dimensions for the layer." })] }), _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { htmlFor: "width", children: "Width" }), _jsx(Input, { id: "width", defaultValue: "100%", className: "col-span-2 h-8" })] }), _jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { htmlFor: "height", children: "Height" }), _jsx(Input, { id: "height", defaultValue: "25px", className: "col-span-2 h-8" })] })] })] }) })] })),
+};
+// ============================================================================
+// Four Directions
+// ============================================================================
+export const Directions = {
+    render: () => (_jsxs("div", { className: "flex gap-4 flex-wrap items-center justify-center", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Popover Top" }) }), _jsx(PopoverContent, { side: "top", children: _jsx("p", { className: "text-sm", children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Popover Right" }) }), _jsx(PopoverContent, { side: "right", children: _jsx("p", { className: "text-sm", children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Popover Bottom" }) }), _jsx(PopoverContent, { side: "bottom", children: _jsx("p", { className: "text-sm", children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Popover Left" }) }), _jsx(PopoverContent, { side: "left", children: _jsx("p", { className: "text-sm", children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] })] })),
+};
+// ============================================================================
+// Simple Text
+// ============================================================================
+export const SimpleText = {
+    render: () => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { children: [_jsx(Info, { className: "mr-2 h-4 w-4" }), "Show info"] }) }), _jsx(PopoverContent, { children: _jsx("p", { className: "text-sm", children: "This is a simple popover with text content." }) })] })),
+};
+// ============================================================================
+// With Header (Colored Header Variants)
+// ============================================================================
+export const ColoredHeaders = {
+    render: () => (_jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { children: "Primary Header" }) }), _jsxs(PopoverContent, { variant: "header-primary", children: [_jsx(PopoverHeader, { children: "Primary Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Secondary Header" }) }), _jsxs(PopoverContent, { variant: "header-secondary", children: [_jsx(PopoverHeader, { children: "Secondary Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "success", children: "Success Header" }) }), _jsxs(PopoverContent, { variant: "header-success", children: [_jsx(PopoverHeader, { children: "Success Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "danger", children: "Danger Header" }) }), _jsxs(PopoverContent, { variant: "header-danger", children: [_jsx(PopoverHeader, { children: "Danger Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "warning", children: "Warning Header" }) }), _jsxs(PopoverContent, { variant: "header-warning", children: [_jsx(PopoverHeader, { children: "Warning Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "info", children: "Info Header" }) }), _jsxs(PopoverContent, { variant: "header-info", children: [_jsx(PopoverHeader, { children: "Info Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." }) })] })] })] })),
+};
+// ============================================================================
+// Full Background Color Variants
+// ============================================================================
+export const FullColoredBackgrounds = {
+    render: () => (_jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { children: "Primary Popover" }) }), _jsxs(PopoverContent, { variant: "primary", children: [_jsx(PopoverHeader, { children: "Primary Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Fully colored background with primary color." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Secondary Popover" }) }), _jsxs(PopoverContent, { variant: "secondary", children: [_jsx(PopoverHeader, { children: "Secondary Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Fully colored background with secondary color." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "success", children: "Success Popover" }) }), _jsxs(PopoverContent, { variant: "success", children: [_jsx(PopoverHeader, { children: "Success Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Fully colored background with success color." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "danger", children: "Danger Popover" }) }), _jsxs(PopoverContent, { variant: "danger", children: [_jsx(PopoverHeader, { children: "Danger Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Fully colored background with danger color." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "warning", children: "Warning Popover" }) }), _jsxs(PopoverContent, { variant: "warning", children: [_jsx(PopoverHeader, { children: "Warning Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Fully colored background with warning color." }) })] })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "info", children: "Info Popover" }) }), _jsxs(PopoverContent, { variant: "info", children: [_jsx(PopoverHeader, { children: "Info Popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Fully colored background with info color." }) })] })] })] })),
+};
+// ============================================================================
+// Form in Popover
+// ============================================================================
+export const WithForm = {
+    render: () => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Update profile" }) }), _jsx(PopoverContent, { className: "w-80", children: _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-medium leading-none", children: "Profile Settings" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Update your profile information." })] }), _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "name", children: "Name" }), _jsx(Input, { id: "name", placeholder: "Your name" })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", placeholder: "your@email.com" })] })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(PopoverClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", children: "Cancel" }) }), _jsx(Button, { size: "sm", children: "Save" })] })] }) })] })),
+};
+// ============================================================================
+// Dismissible Focus (Closes on ANY click, including inside content)
+// ============================================================================
+export const DismissibleFocus = {
+    render: () => {
+        const [open, setOpen] = React.useState(false);
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Click to open, then click anywhere (even inside) to dismiss:" }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "danger", children: "Dismissible Popover" }) }), _jsxs(PopoverContent, { variant: "header-danger", onClick: () => setOpen(false), onPointerDownOutside: () => setOpen(false), children: [_jsx(PopoverHeader, { children: "Dismissible popover" }), _jsx(PopoverBody, { children: _jsx("p", { children: "Click anywhere to dismiss this popover - even on this text!" }) })] })] })] }));
+    },
+};
+export const LoadingSkeleton = {
+    render: () => (_jsx(Skeleton, { className: "h-10 w-32 rounded-md" })),
+    parameters: {
+        docs: {
+            description: {
+                story: "Loading skeleton placeholder for popover trigger while loading.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=popover.stories.js.map

package/dist/src/components/popover/popover.stories.js.map

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

package/dist/src/components/popover/popover.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=popover.test.d.ts.map

package/dist/src/components/popover/popover.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.test.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.test.tsx"],"names":[],"mappings":""}

package/dist/src/components/popover/popover.test.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Button } from "../button";
+import { Popover, PopoverBody, PopoverClose, PopoverContent, PopoverHeader, PopoverTrigger, } from "./popover";
+describe("Popover", () => {
+    it("should render popover trigger", () => {
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open Popover" }), _jsx(PopoverContent, { children: "Popover content" })] }));
+        expect(screen.getByText("Open Popover")).toBeInTheDocument();
+    });
+    it("should open popover when trigger is clicked", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { children: "Open Popover" }) }), _jsx(PopoverContent, { children: "Popover content here" })] }));
+        await user.click(screen.getByText("Open Popover"));
+        expect(screen.getByText("Popover content here")).toBeInTheDocument();
+    });
+    it("should apply custom className to content", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open Popover" }), _jsx(PopoverContent, { className: "custom-popover", children: "Popover content" })] }));
+        await user.click(screen.getByText("Open Popover"));
+        const content = document.body.querySelector('[data-slot="popover-content"]');
+        expect(content).toHaveClass("custom-popover");
+    });
+    it("should render with header and body", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsxs(PopoverContent, { children: [_jsx(PopoverHeader, { children: "Header Text" }), _jsx(PopoverBody, { children: "Body Text" })] })] }));
+        await user.click(screen.getByText("Open"));
+        expect(screen.getByText("Header Text")).toBeInTheDocument();
+        expect(screen.getByText("Body Text")).toBeInTheDocument();
+    });
+    it("should apply variant attribute", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsx(PopoverContent, { variant: "header-primary", children: "Content" })] }));
+        await user.click(screen.getByText("Open"));
+        const content = document.body.querySelector('[data-slot="popover-content"]');
+        expect(content).toHaveAttribute("data-variant", "header-primary");
+    });
+    it("should render close button", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsxs(PopoverContent, { children: [_jsx(PopoverClose, { asChild: true, children: _jsx(Button, { variant: "ghost", children: "Close" }) }), "Content"] })] }));
+        await user.click(screen.getByText("Open"));
+        expect(screen.getByText("Close")).toBeInTheDocument();
+    });
+    it("should close when close button is clicked", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsxs(PopoverContent, { children: [_jsx(PopoverClose, { asChild: true, children: _jsx(Button, { variant: "ghost", children: "Close" }) }), "Content Text"] })] }));
+        await user.click(screen.getByText("Open"));
+        expect(screen.getByText("Content Text")).toBeInTheDocument();
+        await user.click(screen.getByText("Close"));
+        expect(screen.queryByText("Content Text")).not.toBeInTheDocument();
+    });
+    it("should support different side positions", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsx(PopoverContent, { side: "top", children: "Content" })] }));
+        await user.click(screen.getByText("Open"));
+        const content = document.body.querySelector('[data-slot="popover-content"]');
+        expect(content).toBeInTheDocument();
+    });
+    it("should apply colored header variant styles", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsx(PopoverContent, { variant: "header-success", children: _jsx(PopoverHeader, { children: "Success Header" }) })] }));
+        await user.click(screen.getByText("Open"));
+        expect(screen.getByText("Success Header")).toBeInTheDocument();
+    });
+    it("should apply full color variant styles", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsx(PopoverContent, { variant: "danger", children: _jsx(PopoverHeader, { children: "Danger" }) })] }));
+        await user.click(screen.getByText("Open"));
+        const content = document.body.querySelector('[data-slot="popover-content"]');
+        expect(content).toHaveAttribute("data-variant", "danger");
+    });
+    it("should render arrow by default", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsx(PopoverContent, { children: "Content" })] }));
+        await user.click(screen.getByText("Open"));
+        const content = document.body.querySelector('[data-slot="popover-content"]');
+        const arrow = content?.querySelector(".size-2\\.5");
+        expect(arrow).toBeInTheDocument();
+    });
+    it("should not render arrow when showArrow is false", async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsx(PopoverContent, { showArrow: false, children: "Content" })] }));
+        await user.click(screen.getByText("Open"));
+        const content = document.body.querySelector('[data-slot="popover-content"]');
+        const arrow = content?.querySelector(".size-2\\.5");
+        expect(arrow).not.toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=popover.test.js.map

package/dist/src/components/popover/popover.test.js.map

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

package/dist/src/components/progress/index.d.ts

@@ -0,0 +1,3 @@
+export type { ProgressBarProps, ProgressProps } from "./progress.types";
+export { Progress, ProgressBar, ProgressGroup } from "./progress";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/components/progress/index.js

@@ -0,0 +1,2 @@
+export { Progress, ProgressBar, ProgressGroup } from "./progress";
+//# sourceMappingURL=index.js.map

package/dist/src/components/progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/progress/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/components/progress/progress.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { ProgressProps, ProgressBarProps } from "./progress.types";
+type ProgressSize = "sm" | "md" | "lg";
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ProgressBar for use in multiple bar scenarios
+ */
+declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Container for multiple progress bars
+ */
+declare const ProgressGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    size?: ProgressSize;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Progress, ProgressBar, ProgressGroup };
+//# sourceMappingURL=progress.d.ts.map

package/dist/src/components/progress/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/progress/progress.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGxE,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAmBvC,QAAA,MAAM,QAAQ,sFAoEb,CAAC;AAIF;;GAEG;AACH,QAAA,MAAM,WAAW,yFAgDhB,CAAC;AAIF;;GAEG;AACH,QAAA,MAAM,aAAa;WAE8B,YAAY;wCAgB3D,CAAC;AAIH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC"}

package/dist/src/components/progress/progress.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const sizeClasses = {
+    sm: "h-1",
+    md: "h-2.5",
+    lg: "h-4",
+};
+const colorClasses = {
+    default: "bg-primary",
+    success: "bg-success",
+    info: "bg-info",
+    warning: "bg-warning",
+    destructive: "bg-destructive",
+};
+const stripedGradient = "bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)]";
+const Progress = React.forwardRef(({ className, value = 0, max = 100, min = 0, color = "default", size = "md", striped = false, animated = false, label, showValue = false, ...props }, ref) => {
+    // Clamp value between min and max
+    const clampedValue = Math.min(Math.max(value ?? 0, min), max);
+    const percentage = ((clampedValue - min) / (max - min)) * 100;
+    const variantColor = color === "danger" ? "destructive" : color;
+    return (_jsx(ProgressPrimitive.Root, { ref: ref, className: cn("relative w-full overflow-hidden rounded-full bg-primary/20", sizeClasses[size], className), value: clampedValue, max: max, ...props, children: _jsx(ProgressPrimitive.Indicator, { className: cn("h-full w-full flex-1 transition-all duration-500 ease-in-out", colorClasses[variantColor], striped && stripedGradient, striped && "bg-size-[1rem_1rem]", animated && striped && "animate-progress-stripes"), style: { transform: `translateX(-${100 - percentage}%)` }, children: (label || showValue) && size !== "sm" && (_jsx("span", { className: cn("flex h-full items-center justify-center text-xs font-medium", variantColor === "default" && "text-primary-foreground", variantColor === "success" && "text-success-foreground", variantColor === "info" && "text-info-foreground", variantColor === "warning" && "text-warning-foreground", variantColor === "destructive" && "text-destructive-foreground", size === "md" && "text-[10px]", size === "lg" && "text-xs"), children: label || (showValue && `${Math.round(percentage)}%`) })) }) }));
+});
+Progress.displayName = "Progress";
+/**
+ * ProgressBar for use in multiple bar scenarios
+ */
+const ProgressBar = React.forwardRef(({ value, color = "default", striped = false, animated = false, label, className, }, ref) => {
+    const variantColor = color === "danger" ? "destructive" : color;
+    return (_jsx("div", { ref: ref, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100, className: cn("h-full transition-all duration-500 ease-in-out flex items-center justify-center", colorClasses[variantColor], striped && stripedGradient, striped && "bg-size-[1rem_1rem]", animated && striped && "animate-progress-stripes", className), style: { width: `${Math.min(100, Math.max(0, value))}%` }, children: label && (_jsx("span", { className: cn("text-xs font-medium px-2", variantColor === "default" && "text-primary-foreground", variantColor === "success" && "text-success-foreground", variantColor === "info" && "text-info-foreground", variantColor === "warning" && "text-warning-foreground", variantColor === "destructive" && "text-destructive-foreground"), children: label })) }));
+});
+ProgressBar.displayName = "ProgressBar";
+/**
+ * Container for multiple progress bars
+ */
+const ProgressGroup = React.forwardRef(({ className, size = "md", children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, role: "presentation", className: cn("relative w-full overflow-hidden rounded-full bg-primary/20 flex", sizeClasses[size], className), ...props, children: children }));
+});
+ProgressGroup.displayName = "ProgressGroup";
+export { Progress, ProgressBar, ProgressGroup };
+//# sourceMappingURL=progress.js.map

package/dist/src/components/progress/progress.js.map

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

package/dist/src/components/progress/progress.stories.d.ts

@@ -0,0 +1,99 @@
+import type { StoryObj } from "@storybook/react";
+import * as React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./progress.types").ProgressProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        value: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        striped: {
+            control: "boolean";
+            description: string;
+        };
+        animated: {
+            control: "boolean";
+            description: string;
+        };
+        showValue: {
+            control: "boolean";
+            description: string;
+        };
+    };
+    args: {
+        value: number;
+        color: "default";
+        size: "md";
+        striped: false;
+        animated: false;
+        showValue: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Basic progress bar with default styling
+ */
+export declare const Basic: Story;
+/**
+ * Progress bar with label text
+ */
+export declare const WithLabel: Story;
+/**
+ * Progress bar with percentage display
+ */
+export declare const WithPercentage: Story;
+/**
+ * Different height/size variants
+ */
+export declare const Sizes: Story;
+/**
+ * Different color variants based on status
+ */
+export declare const Colors: Story;
+/**
+ * Striped pattern for visual emphasis
+ */
+export declare const Striped: Story;
+/**
+ * Animated striped pattern for active operations
+ */
+export declare const Animated: Story;
+/**
+ * Multiple progress bars stacked in one container
+ */
+export declare const MultipleBars: Story;
+/**
+ * Interactive progress simulation
+ */
+export declare const Interactive: Story;
+/**
+ * Real-world example: File upload with status
+ */
+export declare const FileUpload: Story;
+/**
+ * Edge cases: min/max values and clamping
+ */
+export declare const EdgeCases: Story;
+export declare const LoadingSkeleton: Story;
+//# sourceMappingURL=progress.stories.d.ts.map

package/dist/src/components/progress/progress.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/progress/progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KAyBpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAoC1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAiCzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KA4DxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAsCvB,CAAC;AACF,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAC"}

package/dist/src/components/progress/progress.stories.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../button";
+import { Skeleton } from "../skeleton/skeleton";
+import { Progress, ProgressBar, ProgressGroup } from "./progress";
+const meta = {
+    title: "Feedback/Progress",
+    component: Progress,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        value: {
+            control: { type: "range", min: 0, max: 100, step: 1 },
+            description: "Progress value (0-100)",
+        },
+        color: {
+            control: "select",
+            options: ["default", "success", "info", "warning", "danger"],
+            description: "Color variant",
+        },
+        size: {
+            control: "select",
+            options: ["sm", "md", "lg"],
+            description: "Size variant",
+        },
+        striped: {
+            control: "boolean",
+            description: "Show striped pattern",
+        },
+        animated: {
+            control: "boolean",
+            description: "Animate striped pattern (requires striped=true)",
+        },
+        showValue: {
+            control: "boolean",
+            description: "Show percentage value",
+        },
+    },
+    args: {
+        value: 40,
+        color: "default",
+        size: "md",
+        striped: false,
+        animated: false,
+        showValue: false,
+    },
+};
+export default meta;
+/**
+ * Basic progress bar with default styling
+ */
+export const Basic = {
+    args: {
+        value: 40,
+    },
+    render: (args) => (_jsx("div", { className: "w-96", children: _jsx(Progress, { ...args }) })),
+};
+/**
+ * Progress bar with label text
+ */
+export const WithLabel = {
+    args: {
+        value: 25,
+        label: "25%",
+        size: "lg",
+    },
+    render: (args) => (_jsx("div", { className: "w-96", children: _jsx(Progress, { ...args }) })),
+};
+/**
+ * Progress bar with percentage display
+ */
+export const WithPercentage = {
+    args: {
+        value: 65,
+        showValue: true,
+        size: "lg",
+    },
+    render: (args) => (_jsx("div", { className: "w-96", children: _jsx(Progress, { ...args }) })),
+};
+/**
+ * Different height/size variants
+ */
+export const Sizes = {
+    render: () => (_jsxs("div", { className: "w-96 space-y-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Small (sm)" }), _jsx(Progress, { value: 40, size: "sm" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Medium (md) - Default" }), _jsx(Progress, { value: 50, size: "md" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Large (lg)" }), _jsx(Progress, { value: 60, size: "lg", showValue: true })] })] })),
+};
+/**
+ * Different color variants based on status
+ */
+export const Colors = {
+    render: () => (_jsxs("div", { className: "w-96 space-y-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Default" }), _jsx(Progress, { value: 40, color: "default" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2 text-success", children: "Success" }), _jsx(Progress, { value: 100, color: "success" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2 text-info", children: "Info" }), _jsx(Progress, { value: 50, color: "info" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2 text-warning", children: "Warning" }), _jsx(Progress, { value: 75, color: "warning" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2 text-destructive", children: "Danger" }), _jsx(Progress, { value: 30, color: "danger" })] })] })),
+};
+/**
+ * Striped pattern for visual emphasis
+ */
+export const Striped = {
+    render: () => (_jsxs("div", { className: "w-96 space-y-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Success with Stripes" }), _jsx(Progress, { value: 30, color: "success", striped: true, size: "lg" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Warning with Stripes" }), _jsx(Progress, { value: 60, color: "warning", striped: true, size: "lg" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Danger with Stripes" }), _jsx(Progress, { value: 85, color: "danger", striped: true, size: "lg" })] })] })),
+};
+/**
+ * Animated striped pattern for active operations
+ */
+export const Animated = {
+    render: () => (_jsxs("div", { className: "w-96 space-y-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Uploading..." }), _jsx(Progress, { value: 45, color: "success", striped: true, animated: true, size: "lg" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Processing..." }), _jsx(Progress, { value: 65, color: "info", striped: true, animated: true, size: "lg" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Loading..." }), _jsx(Progress, { value: 30, color: "default", striped: true, animated: true, size: "lg" })] })] })),
+};
+/**
+ * Multiple progress bars stacked in one container
+ */
+export const MultipleBars = {
+    render: () => (_jsxs("div", { className: "w-96 space-y-6", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Storage Usage Breakdown" }), _jsxs(ProgressGroup, { size: "lg", children: [_jsx(ProgressBar, { value: 15, color: "danger", label: "Docs" }), _jsx(ProgressBar, { value: 30, color: "warning", label: "Images" }), _jsx(ProgressBar, { value: 20, color: "success", label: "Videos" })] }), _jsxs("div", { className: "mt-2 flex gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-destructive rounded" }), _jsx("span", { children: "Docs (15%)" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-warning rounded" }), _jsx("span", { children: "Images (30%)" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-success rounded" }), _jsx("span", { children: "Videos (20%)" })] })] })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Server Resources" }), _jsxs(ProgressGroup, { size: "md", children: [_jsx(ProgressBar, { value: 25, color: "success", striped: true }), _jsx(ProgressBar, { value: 40, color: "info", striped: true }), _jsx(ProgressBar, { value: 15, color: "warning", striped: true })] })] })] })),
+};
+/**
+ * Interactive progress simulation
+ */
+export const Interactive = {
+    render: () => {
+        const [progress, setProgress] = React.useState(13);
+        React.useEffect(() => {
+            const timer = setTimeout(() => setProgress(66), 500);
+            return () => clearTimeout(timer);
+        }, []);
+        return (_jsxs("div", { className: "w-96 space-y-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between text-sm mb-2", children: [_jsx("span", { className: "font-medium", children: "Uploading file..." }), _jsxs("span", { className: "text-muted-foreground", children: [progress, "%"] })] }), _jsx(Progress, { value: progress, color: "success", striped: true, animated: true, size: "lg" })] }), _jsx(Button, { type: "button", onClick: () => setProgress((p) => Math.min(100, p + 10)), children: "Increase Progress" })] }));
+    },
+};
+/**
+ * Real-world example: File upload with status
+ */
+export const FileUpload = {
+    render: () => {
+        const [uploadProgress, setUploadProgress] = React.useState(0);
+        const [isUploading, setIsUploading] = React.useState(false);
+        const startUpload = () => {
+            setIsUploading(true);
+            setUploadProgress(0);
+            const interval = setInterval(() => {
+                setUploadProgress((prev) => {
+                    if (prev >= 100) {
+                        clearInterval(interval);
+                        setIsUploading(false);
+                        return 100;
+                    }
+                    return prev + 10;
+                });
+            }, 200);
+        };
+        const getColor = () => {
+            if (uploadProgress === 100)
+                return "success";
+            if (uploadProgress > 75)
+                return "warning";
+            return "info";
+        };
+        return (_jsxs("div", { className: "w-96 space-y-4", children: [_jsxs("div", { className: "p-4 border rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("div", { className: "text-sm font-medium", children: "document.pdf" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "2.4 MB" })] }), _jsx(Progress, { value: uploadProgress, color: getColor(), size: "md", striped: true, animated: isUploading }), _jsxs("div", { className: "mt-2 text-xs text-muted-foreground", children: [uploadProgress === 0 && "Ready to upload", uploadProgress > 0 &&
+                                    uploadProgress < 100 &&
+                                    `Uploading... ${uploadProgress}%`, uploadProgress === 100 && "Upload complete!"] })] }), _jsx(Button, { type: "button", onClick: startUpload, disabled: isUploading, className: "w-full", children: isUploading ? "Uploading..." : "Start Upload" })] }));
+    },
+};
+/**
+ * Edge cases: min/max values and clamping
+ */
+export const EdgeCases = {
+    render: () => (_jsxs("div", { className: "w-96 space-y-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Value: 0%" }), _jsx(Progress, { value: 0, size: "lg", showValue: true })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Value: 100%" }), _jsx(Progress, { value: 100, color: "success", size: "lg", showValue: true })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Value exceeds max (clamped to 100)" }), _jsx(Progress, { value: 150, color: "warning", size: "lg", showValue: true })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Negative value (clamped to 0)" }), _jsx(Progress, { value: -20, color: "danger", size: "lg", showValue: true })] }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium mb-2", children: "Custom range: 50-200, value 125" }), _jsx(Progress, { value: 125, min: 50, max: 200, color: "info", size: "lg", label: "75/150" })] })] })),
+};
+export const LoadingSkeleton = {
+    render: () => (_jsxs("div", { className: "w-full max-w-md space-y-4", children: [_jsx(Skeleton, { className: "h-2 w-full rounded-full" }), _jsx(Skeleton, { className: "h-2 w-full rounded-full" }), _jsx(Skeleton, { className: "h-3 w-full rounded-full" })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: "Loading skeleton placeholders for progress bars while loading.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=progress.stories.js.map