linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/Skeleton/skeleton.stories.js

@@ -0,0 +1,404 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BadgeSkeletonSize, HeadingSkeletonSize, InputSkeletonSize, Skeleton, TextSkeletonSize, } from "./skeleton";
+import { avatarSize } from "../Avatar/Avatar";
+import { buttonStyles } from "../Button";
+import { tableBodySize } from "../Table";
+import { comboboxSizes } from "../Dropdown/Combobox";
+import { iconSize as LUIconSizes } from "../Icons";
+import { checkboxSize } from "../Checkbox/checkbox";
+import { size as SwitchSizes } from "../Switch/switch";
+var meta = {
+    title: "Components/Skeleton",
+    component: Skeleton,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "A component for displaying loading skeleton placeholders. ",
+            },
+        },
+        controls: {
+            expanded: true,
+            sort: "requiredFirst",
+            hideNoControlsWarning: true,
+            exclude: [],
+        },
+    },
+    args: {
+        className: "",
+        variant: "default",
+        size: "md",
+        isIcon: true,
+    },
+    argTypes: {
+        variant: {
+            control: { type: "select" },
+            options: [
+                "default",
+                "button",
+                "input",
+                "avatar",
+                "badge",
+                "card",
+                "tableRow",
+                "checkbox",
+                "switch",
+                "select",
+                "icon",
+                "text",
+                "heading",
+                "image",
+            ],
+            description: "Select the skeleton component variant",
+            table: {
+                defaultValue: { summary: "default" },
+                type: { summary: "enum" },
+                category: "Component",
+            },
+        },
+        size: {
+            control: { type: "select" },
+            options: Object.keys(avatarSize), // Will be dynamically updated by decorator
+            description: "Size for Avatar, Button, Badge, Input, TableRow, Select, Icon, Text, and Heading skeletons (when applicable)",
+            table: {
+                defaultValue: { summary: "md" },
+                type: { summary: "enum" },
+                category: "Size",
+            },
+        },
+        columns: {
+            control: { type: "number", min: 1, max: 10 },
+            description: "Number of columns for TableRow skeleton",
+            table: {
+                type: { summary: "number" },
+                category: "TableRow",
+            },
+            if: { arg: "variant", eq: "tableRow" },
+        },
+        lines: {
+            control: { type: "number", min: 1, max: 10 },
+            description: "Number of lines for Text skeleton",
+            table: {
+                type: { summary: "number" },
+                category: "Text",
+            },
+            if: { arg: "variant", eq: "text" },
+        },
+        aspectRatio: {
+            control: { type: "select" },
+            options: ["square", "video", "portrait"],
+            description: "Aspect ratio for Image skeleton",
+            table: {
+                type: { summary: '"square" | "video" | "portrait"' },
+                category: "Image",
+            },
+            if: { arg: "variant", eq: "image" },
+        },
+        isIcon: {
+            control: { type: "boolean" },
+            description: "Toggle placeholder icon inside Image skeleton",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" },
+                category: "Image",
+            },
+            if: { arg: "variant", eq: "image" },
+        },
+        className: {
+            control: "text",
+            description: "Custom className to override default sizing",
+            table: {
+                type: { summary: "string" },
+                category: "Styling",
+            },
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            var currentVariant = context.args.variant;
+            var variantsWithSize = [
+                "button",
+                "avatar",
+                "badge",
+                "input",
+                "tableRow",
+                "select",
+                "icon",
+                "text",
+                "heading",
+            ];
+            if (context.argTypes && context.argTypes.size) {
+                // Hide size control for variants that don't support it
+                if (!variantsWithSize.includes(currentVariant !== null && currentVariant !== void 0 ? currentVariant : "")) {
+                    context.argTypes.size.table = { disable: true };
+                    delete context.argTypes.size.control;
+                }
+                else {
+                    // Show size control and update options based on variant
+                    context.argTypes.size.control = { type: "select" };
+                    context.argTypes.size.table = {
+                        defaultValue: { summary: "md" },
+                        type: { summary: "enum" },
+                        category: "Size",
+                    };
+                    // Set default size and options based on variant
+                    if (currentVariant === "button") {
+                        context.argTypes.size.options = Object.keys(buttonStyles.size);
+                        // Set default size if not already set
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "avatar") {
+                        context.argTypes.size.options = Object.keys(avatarSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "badge") {
+                        context.argTypes.size.options = Object.keys(BadgeSkeletonSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "switch") {
+                        context.argTypes.size.options = Object.keys(SwitchSizes);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "input") {
+                        context.argTypes.size.options = Object.keys(InputSkeletonSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "lg"; // Input default is lg
+                        }
+                    }
+                    else if (currentVariant === "tableRow") {
+                        context.argTypes.size.options = Object.keys(tableBodySize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "select") {
+                        context.argTypes.size.options = Object.keys(comboboxSizes);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "icon") {
+                        context.argTypes.size.options = Object.keys(LUIconSizes);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "text") {
+                        context.argTypes.size.options = Object.keys(TextSkeletonSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "checkbox") {
+                        context.argTypes.size.options = Object.keys(checkboxSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "heading") {
+                        context.argTypes.size.options = Object.keys(HeadingSkeletonSize);
+                        // Heading has a special default
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "h2";
+                        }
+                        context.argTypes.size.table.defaultValue = { summary: "h2" };
+                    }
+                }
+            }
+            return _jsx(Story, __assign({}, context));
+        },
+    ],
+};
+export default meta;
+// Default Skeleton
+var Template = function (args) {
+    var _a = args.variant, variant = _a === void 0 ? "default" : _a, className = args.className, columns = args.columns, lines = args.lines, aspectRatio = args.aspectRatio, isIcon = args.isIcon;
+    // Set appropriate default size based on variant
+    // Narrow size type for each variant
+    var size = args.size;
+    if (!size) {
+        if (variant === "heading") {
+            size = "h2";
+        }
+        else {
+            size = "md";
+        }
+    }
+    switch (variant) {
+        case "button":
+            return (_jsx(Skeleton.Button, { size: size, className: className }));
+        case "input":
+            return (_jsx(Skeleton.Input, { size: size, className: className }));
+        case "avatar":
+            return (_jsx(Skeleton.Avatar, { size: size, className: className }));
+        case "badge":
+            return (_jsx(Skeleton.Badge, { size: size, className: className }));
+        case "card":
+            return _jsx(Skeleton.Card, { className: className });
+        case "tableRow":
+            return (_jsx(Skeleton.TableRow, { columns: columns, size: size, className: className }));
+        case "checkbox":
+            return _jsx(Skeleton.Checkbox, { className: className });
+        case "switch":
+            return _jsx(Skeleton.Switch, { className: className });
+        case "select":
+            return (_jsx(Skeleton.Select, { size: size, className: className }));
+        case "icon":
+            return (_jsx(Skeleton.Icon, { size: size, className: className }));
+        case "text":
+            return (_jsx(Skeleton.Text, { lines: lines, size: size, className: className }));
+        case "heading":
+            return (_jsx(Skeleton.Heading, { size: size, className: className }));
+        case "image":
+            return (_jsx(Skeleton.Image, { aspectRatio: aspectRatio, isIcon: isIcon, className: className }));
+        case "default":
+        default:
+            return _jsx(Skeleton, { className: "w-48 h-48 ".concat(className) });
+    }
+};
+export var Default = Template.bind({});
+// Button Skeletons - All Sizes
+export var ButtonSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Button Skeleton Sizes" }), _jsx("div", { className: "flex flex-col gap-4", children: Object.keys(buttonStyles.size).map(function (size) { return (_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: size.toUpperCase() }), _jsx(Skeleton.Button, { size: size })] }, size)); }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Custom Width" }), _jsx(Skeleton.Button, { className: "w-64" })] })] })); };
+ButtonSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Button skeleton placeholders in all available sizes (sm, md, lg, xl).",
+        },
+    },
+};
+// Input Skeletons - All Sizes
+export var InputSkeletons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Small Input" }), _jsx(Skeleton.Input, { size: "sm" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Medium Input" }), _jsx(Skeleton.Input, { size: "md" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Large Input (Default)" }), _jsx(Skeleton.Input, { size: "lg" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Custom Width" }), _jsx(Skeleton.Input, { className: "w-1/2" })] })] })); };
+InputSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Input skeleton placeholders with size options (sm, md, lg).",
+        },
+    },
+};
+// Avatar Skeletons - All Sizes
+export var AvatarSkeletons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center gap-4 flex-wrap", children: ["4xs", "3xs", "2xs", "xs", "sm", "md", "lg", "xl"].map(function (size) { return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Skeleton.Avatar, { size: size }), _jsx("span", { className: "text-xs text-gray-500", children: size })] }, size)); }) }), _jsx("div", { className: "flex items-center gap-4 flex-wrap", children: ["2xl", "3xl", "4xl", "5xl", "huge", "massive"].map(function (size) { return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Skeleton.Avatar, { size: size }), _jsx("span", { className: "text-xs text-gray-500", children: size })] }, size)); }) })] })); };
+AvatarSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Avatar skeleton placeholders in all available sizes.",
+        },
+    },
+};
+// Badge Skeletons - All Sizes
+export var BadgeSkeletons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Small Badge" }), _jsx(Skeleton.Badge, { size: "sm" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Medium Badge (Default)" }), _jsx(Skeleton.Badge, { size: "md" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Large Badge" }), _jsx(Skeleton.Badge, { size: "lg" })] })] })); };
+BadgeSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Badge skeleton placeholders with size options (sm, md, lg).",
+        },
+    },
+};
+// Card Skeleton
+export var CardSkeleton = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Default Card Skeleton" }), _jsx(Skeleton.Card, {})] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Custom Height" }), _jsx(Skeleton.Card, { className: "h-64" })] })] })); };
+CardSkeleton.parameters = {
+    docs: {
+        description: {
+            story: "Card skeleton placeholder for card components.",
+        },
+    },
+};
+// Table Row Skeletons
+export var TableRowSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "3 Columns - Small" }), _jsx(Skeleton.TableRow, { columns: 3, size: "sm" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "4 Columns - Medium" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "5 Columns - Large" }), _jsx(Skeleton.TableRow, { columns: 5, size: "lg" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Full Table Example" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton.TableRow, { columns: 4, size: "md" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" })] })] })] })); };
+TableRowSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Table row skeleton with customizable columns and sizes. Perfect for table loading states.",
+        },
+    },
+};
+// Form Elements Skeletons
+export var FormElementsSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Checkbox" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton.Checkbox, {}), _jsx(Skeleton, { className: "h-4 w-24" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Switch" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton.Switch, {}), _jsx(Skeleton, { className: "h-4 w-32" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Select/Dropdown" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton.Select, { size: "sm" }), _jsx(Skeleton.Select, { size: "md" }), _jsx(Skeleton.Select, { size: "lg" })] })] })] })); };
+FormElementsSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Skeleton loaders for form elements like checkbox, switch, and select.",
+        },
+    },
+};
+// Icon Skeletons
+export var IconSkeletons = function () { return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Skeleton.Icon, { size: "sm" }), _jsx("span", { className: "text-xs text-gray-500", children: "Small" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Skeleton.Icon, { size: "md" }), _jsx("span", { className: "text-xs text-gray-500", children: "Medium" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Skeleton.Icon, { size: "lg" }), _jsx("span", { className: "text-xs text-gray-500", children: "Large" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Skeleton.Icon, { size: "xl" }), _jsx("span", { className: "text-xs text-gray-500", children: "XLarge" })] })] }) })); };
+IconSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Icon skeleton placeholders in different sizes (sm, md, lg, xl).",
+        },
+    },
+};
+// Text Skeletons
+export var TextSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Text Sizes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Extra Small (xs)" }), _jsx(Skeleton.Text, { lines: 1, size: "xs" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Small (sm)" }), _jsx(Skeleton.Text, { lines: 1, size: "sm" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Medium (md) - Default" }), _jsx(Skeleton.Text, { lines: 1, size: "md" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Large (lg)" }), _jsx(Skeleton.Text, { lines: 1, size: "lg" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Extra Large (xl)" }), _jsx(Skeleton.Text, { lines: 1, size: "xl" })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Multi-line Text" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Two Lines" }), _jsx(Skeleton.Text, { lines: 2 })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Three Lines" }), _jsx(Skeleton.Text, { lines: 3 })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Five Lines" }), _jsx(Skeleton.Text, { lines: 5 })] })] })] })] })); };
+TextSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Text skeleton placeholders with multiple size options (xs, sm, md, lg, xl) and multi-line support. The last line is automatically 75% width for multi-line text.",
+        },
+    },
+};
+// Heading Skeletons
+export var HeadingSkeletons = function () { return (_jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Heading Sizes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H1 - Largest" }), _jsx(Skeleton.Heading, { size: "h1" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H2 - Default" }), _jsx(Skeleton.Heading, { size: "h2" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H3" }), _jsx(Skeleton.Heading, { size: "h3" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H4" }), _jsx(Skeleton.Heading, { size: "h4" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H5" }), _jsx(Skeleton.Heading, { size: "h5" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "H6 - Smallest" }), _jsx(Skeleton.Heading, { size: "h6" })] })] })] }) })); };
+HeadingSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Heading skeleton placeholders with all heading sizes (h1 through h6). Default width is 75% but can be customized with className.",
+        },
+    },
+};
+// Image Skeletons
+export var ImageSkeletons = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Square Aspect Ratio" }), _jsx("div", { className: "w-64", children: _jsx(Skeleton.Image, { aspectRatio: "square" }) })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Video Aspect Ratio (16:9)" }), _jsx("div", { className: "w-64", children: _jsx(Skeleton.Image, { aspectRatio: "video" }) })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Portrait Aspect Ratio (3:4)" }), _jsx("div", { className: "w-48", children: _jsx(Skeleton.Image, { aspectRatio: "portrait" }) })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium", children: "Icon Scale Variations" }), _jsxs("div", { className: "flex gap-6 flex-wrap", children: [_jsxs("div", { className: "w-40", children: [_jsx("p", { className: "text-xs mb-1", children: "Scale: sm" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx("p", { className: "text-xs mb-1", children: "Scale: md" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx("p", { className: "text-xs mb-1", children: "Scale: lg" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx("p", { className: "text-xs mb-1", children: "Scale: auto (responsive)" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] })] })] })] })); };
+ImageSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Image skeleton placeholders with different aspect ratio options (square, video, portrait).",
+        },
+    },
+};
+// Complete Card Example
+export var CompleteCardExample = function () { return (_jsxs("div", { className: "w-80 rounded-lg border p-6", children: [_jsxs("div", { className: "flex items-center gap-4 mb-4", children: [_jsx(Skeleton.Avatar, { size: "lg" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] }), _jsx("div", { className: "space-y-2 mb-4", children: _jsx(Skeleton.Text, { lines: 3 }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Skeleton.Button, { size: "md", className: "flex-1" }), _jsx(Skeleton.Button, { size: "md", className: "flex-1" })] })] })); };
+CompleteCardExample.parameters = {
+    docs: {
+        description: {
+            story: "A complete card loading state example using multiple skeleton components.",
+        },
+    },
+};
+// Complete Form Example
+export var CompleteFormExample = function () { return (_jsxs("div", { className: "w-96 space-y-4", children: [_jsxs("div", { children: [_jsx(Skeleton, { className: "h-4 w-20 mb-2" }), _jsx(Skeleton.Input, { size: "lg" })] }), _jsxs("div", { children: [_jsx(Skeleton, { className: "h-4 w-24 mb-2" }), _jsx(Skeleton.Input, { size: "lg" })] }), _jsxs("div", { children: [_jsx(Skeleton, { className: "h-4 w-32 mb-2" }), _jsx(Skeleton.Select, { size: "md" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton.Checkbox, {}), _jsx(Skeleton, { className: "h-4 w-40" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton.Switch, {}), _jsx(Skeleton, { className: "h-4 w-36" })] }), _jsx(Skeleton.Button, { size: "lg", className: "w-full" })] })); };
+CompleteFormExample.parameters = {
+    docs: {
+        description: {
+            story: "A complete form loading state example with various input types.",
+        },
+    },
+};
+// All Variants Together
+export var AllVariants = function () { return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Buttons" }), _jsxs("div", { className: "flex gap-4", children: [_jsx(Skeleton.Button, { size: "sm" }), _jsx(Skeleton.Button, { size: "md" }), _jsx(Skeleton.Button, { size: "lg" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Inputs & Selects" }), _jsxs("div", { className: "space-y-2 max-w-md", children: [_jsx(Skeleton.Input, { size: "sm" }), _jsx(Skeleton.Input, { size: "md" }), _jsx(Skeleton.Select, { size: "lg" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Avatars" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton.Avatar, { size: "sm" }), _jsx(Skeleton.Avatar, { size: "md" }), _jsx(Skeleton.Avatar, { size: "lg" }), _jsx(Skeleton.Avatar, { size: "xl" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Badges" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton.Badge, { size: "sm" }), _jsx(Skeleton.Badge, { size: "md" }), _jsx(Skeleton.Badge, { size: "lg" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Form Controls" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton.Checkbox, {}), _jsx(Skeleton.Switch, {}), _jsx(Skeleton.Icon, { size: "md" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Text" }), _jsx("div", { className: "max-w-md", children: _jsx(Skeleton.Text, { lines: 3 }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Images" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "w-32", children: _jsx(Skeleton.Image, { aspectRatio: "square" }) }), _jsx("div", { className: "w-48", children: _jsx(Skeleton.Image, { aspectRatio: "video" }) })] })] })] })); };
+AllVariants.parameters = {
+    docs: {
+        description: {
+            story: "Overview of all skeleton variants and their common use cases.",
+        },
+    },
+};

package/dist/src/components/Slider/Slider.stories.jsx

@@ -0,0 +1,159 @@
+import { Slider } from "./slider";
+var meta = {
+    title: "Components/Slider",
+    component: Slider,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "Slider component that allows users to select a value or range by dragging a handle along a track.",
+            },
+        },
+        controls: {
+            expanded: true,
+            sort: "requiredFirst",
+            hideNoControlsWarning: true,
+        },
+    },
+    args: {
+        // Default values for the slider
+        min: 0,
+        max: 100,
+        step: 1,
+        orientation: "horizontal",
+    },
+    argTypes: {
+        min: {
+            control: { type: "number" },
+            description: "The minimum value of the slider",
+            defaultValue: 0,
+            table: {
+                defaultValue: { summary: "0" },
+                type: { summary: "number" },
+            },
+        },
+        max: {
+            control: { type: "number" },
+            description: "The maximum value of the slider",
+            defaultValue: 100,
+            table: {
+                defaultValue: { summary: "100" },
+                type: { summary: "number" },
+            },
+        },
+        step: {
+            control: { type: "number" },
+            description: "The step increment value for the slider",
+            defaultValue: 1,
+            table: {
+                defaultValue: { summary: "1" },
+                type: { summary: "number" },
+            },
+        },
+        value: {
+            control: { type: "object" },
+            description: "The controlled value of the slider (for controlled components)",
+            table: {
+                defaultValue: { summary: "undefined" },
+                type: { summary: "number[]" },
+            },
+        },
+        defaultValue: {
+            control: { type: "object" },
+            description: "The default value of the slider (for uncontrolled components)",
+            table: {
+                defaultValue: { summary: "[min, max]" },
+                type: { summary: "number[]" },
+            },
+        },
+        orientation: {
+            control: { type: "radio" },
+            options: ["horizontal", "vertical"],
+            description: "The orientation of the slider",
+            defaultValue: "horizontal",
+            table: {
+                defaultValue: { summary: "horizontal" },
+                type: { summary: "string" },
+            },
+        },
+        disabled: {
+            control: { type: "boolean" },
+            description: "Whether the slider is disabled",
+            defaultValue: false,
+            table: {
+                defaultValue: { summary: "false" },
+                type: { summary: "boolean" },
+            },
+        },
+        onValueChange: {
+            action: "valueChanged",
+            description: "Callback function called when the value changes",
+            table: {
+                category: "Events",
+            },
+        },
+    },
+};
+export default meta;
+// Basic single value slider
+export var Default = {
+    args: {
+        defaultValue: [50],
+    },
+};
+// Slider with predefined value
+export var PresetValue = {
+    args: {
+        value: [40],
+    },
+};
+// Range slider with two thumbs
+export var Range = {
+    args: {
+        defaultValue: [25, 75],
+    },
+};
+// Slider with custom step
+export var CustomStep = {
+    args: {
+        defaultValue: [50],
+        step: 10,
+    },
+};
+// Disabled slider
+export var Disabled = {
+    args: {
+        defaultValue: [50],
+        disabled: true,
+    },
+};
+// Vertical orientation
+export var VerticalSlider = {
+    args: {
+        defaultValue: [50],
+        orientation: "vertical",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "A slider with vertical orientation. Note that you may need to set a height on the container.",
+            },
+        },
+    },
+};
+// Vertical range slider
+export var VerticalRange = {
+    args: {
+        defaultValue: [25, 75],
+        orientation: "vertical",
+    },
+};
+// Custom range slider
+export var CustomRange = {
+    args: {
+        min: 100,
+        max: 1000,
+        defaultValue: [400, 700],
+        step: 100,
+    },
+};

package/dist/src/components/Slider/slider.jsx

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../lib/utils";
+function Slider(_a) {
+    var className = _a.className, defaultValue = _a.defaultValue, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, props = __rest(_a, ["className", "defaultValue", "value", "min", "max"]);
+    var _values = React.useMemo(function () {
+        return Array.isArray(value)
+            ? value
+            : Array.isArray(defaultValue)
+                ? defaultValue
+                : [min, max];
+    }, [value, defaultValue, min, max]);
+    return (<SliderPrimitive.Root data-slot="slider" defaultValue={defaultValue} value={value} min={min} max={max} className={cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className)} {...props}>
+      <SliderPrimitive.Track data-slot="slider-track" className={cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5")}>
+        <SliderPrimitive.Range data-slot="slider-range" className={cn("bg-blue-600 absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")}/>
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, function (_, index) { return (<SliderPrimitive.Thumb data-slot="slider-thumb" key={index} className="border-blue-600 bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"/>); })}
+    </SliderPrimitive.Root>);
+}
+export { Slider };