linkedunion-design-kit 1.11.6 → 1.11.8

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

@@ -1,414 +0,0 @@
-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";
-import { Body } from "../Typography/Body/body";
-import { Heading } from "../Typography/Heading/heading";
-// Dynamically define Skeleton variants
-var SKELETON_VARIANTS = [
-    "default",
-    "button",
-    "input",
-    "avatar",
-    "badge",
-    "card",
-    "tableRow",
-    "checkbox",
-    "switch",
-    "select",
-    "icon",
-    "text",
-    "heading",
-    "image",
-];
-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: SKELETON_VARIANTS,
-            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;
-            // Dynamically determine which variants support size
-            var variantsWithSize = SKELETON_VARIANTS.filter(function (v) {
-                return [
-                    "button",
-                    "avatar",
-                    "badge",
-                    "input",
-                    "tableRow",
-                    "select",
-                    "icon",
-                    "text",
-                    "heading",
-                ].includes(v);
-            });
-            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(Heading, { variant: "h4", 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", { children: size.toUpperCase() }), _jsx(Skeleton.Button, { size: size })] }, size)); }) })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", 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(Body, { children: "Small Input" }), _jsx(Skeleton.Input, { size: "sm" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Medium Input" }), _jsx(Skeleton.Input, { size: "md" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Large Input (Default)" }), _jsx(Skeleton.Input, { size: "lg" })] }), _jsxs("div", { children: [_jsx(Body, { 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 () {
-    var allAvatarSizes = Object.keys(avatarSize);
-    return (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "flex items-center gap-4 flex-wrap", children: allAvatarSizes.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(Body, { children: "Small Badge" }), _jsx(Skeleton.Badge, { size: "sm" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Medium Badge (Default)" }), _jsx(Skeleton.Badge, { size: "md" })] }), _jsxs("div", { children: [_jsx(Body, { 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(Body, { children: "Default Card Skeleton" }), _jsx(Skeleton.Card, {})] }), _jsxs("div", { children: [_jsx(Body, { 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(Body, { children: "3 Columns - Small" }), _jsx(Skeleton.TableRow, { columns: 3, size: "sm" })] }), _jsxs("div", { children: [_jsx(Body, { children: "4 Columns - Medium" }), _jsx(Skeleton.TableRow, { columns: 4, size: "md" })] }), _jsxs("div", { children: [_jsx(Body, { children: "5 Columns - Large" }), _jsx(Skeleton.TableRow, { columns: 5, size: "lg" })] }), _jsxs("div", { children: [_jsx(Body, { 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(Heading, { variant: "h4", 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(Heading, { variant: "h4", 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(Heading, { variant: "h4", 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(Heading, { variant: "h4", children: "Text Sizes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Body, { children: "Extra Small (xs)" }), _jsx(Skeleton.Text, { lines: 1, size: "xs" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Small (sm)" }), _jsx(Skeleton.Text, { lines: 1, size: "sm" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Medium (md) - Default" }), _jsx(Skeleton.Text, { lines: 1, size: "md" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Large (lg)" }), _jsx(Skeleton.Text, { lines: 1, size: "lg" })] }), _jsxs("div", { children: [_jsx(Body, { children: "Extra Large (xl)" }), _jsx(Skeleton.Text, { lines: 1, size: "xl" })] })] })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", children: "Multi-line Text" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Body, { children: "Two Lines" }), _jsx(Skeleton.Text, { lines: 2 })] }), _jsxs("div", { children: [_jsx(Body, { children: "Three Lines" }), _jsx(Skeleton.Text, { lines: 3 })] }), _jsxs("div", { children: [_jsx(Body, { 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(Heading, { variant: "h4", children: "Heading Sizes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Body, { children: "H1 - Largest" }), _jsx(Skeleton.Heading, { size: "h1" })] }), _jsxs("div", { children: [_jsx(Body, { children: "H2 - Default" }), _jsx(Skeleton.Heading, { size: "h2" })] }), _jsxs("div", { children: [_jsx(Body, { children: "H3" }), _jsx(Skeleton.Heading, { size: "h3" })] }), _jsxs("div", { children: [_jsx(Body, { children: "H4" }), _jsx(Skeleton.Heading, { size: "h4" })] }), _jsxs("div", { children: [_jsx(Body, { children: "H5" }), _jsx(Skeleton.Heading, { size: "h5" })] }), _jsxs("div", { children: [_jsx(Body, { 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(Body, { children: "Square Aspect Ratio" }), _jsx("div", { className: "w-64", children: _jsx(Skeleton.Image, { aspectRatio: "square" }) })] }), _jsxs("div", { children: [_jsx(Body, { children: "Video Aspect Ratio (16:9)" }), _jsx("div", { className: "w-64", children: _jsx(Skeleton.Image, { aspectRatio: "video" }) })] }), _jsxs("div", { children: [_jsx(Body, { children: "Portrait Aspect Ratio (3:4)" }), _jsx("div", { className: "w-48", children: _jsx(Skeleton.Image, { aspectRatio: "portrait" }) })] }), _jsxs("div", { children: [_jsx(Body, { children: "Icon Scale Variations" }), _jsxs("div", { className: "flex gap-6 flex-wrap", children: [_jsxs("div", { className: "w-40", children: [_jsx(Body, { children: "Scale: sm" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx(Body, { children: "Scale: md" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx(Body, { children: "Scale: lg" }), _jsx(Skeleton.Image, { aspectRatio: "square" })] }), _jsxs("div", { className: "w-40", children: [_jsx(Body, { 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(Heading, { variant: "h4", 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(Heading, { variant: "h4", 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(Heading, { variant: "h4", 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(Heading, { variant: "h4", 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(Heading, { variant: "h4", 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(Heading, { variant: "h4", children: "Text" }), _jsx("div", { className: "max-w-md", children: _jsx(Skeleton.Text, { lines: 3 }) })] }), _jsxs("div", { children: [_jsx(Heading, { variant: "h4", 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.js

@@ -1,38 +0,0 @@
-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);
-};
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 (_jsxs(SliderPrimitive.Root, __assign({ "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, { children: [_jsx(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"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("bg-blue-600 absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), Array.from({ length: _values.length }, function (_, index) { return (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", 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" }, index)); })] })));
-}
-export { Slider };

package/dist/src/components/Tabs/tabs.js

@@ -1,43 +0,0 @@
-"use client";
-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);
-};
-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 { jsx as _jsx } from "react/jsx-runtime";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cn } from "../../lib/utils";
-function Tabs(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(TabsPrimitive.Root, __assign({ "data-slot": "tabs", className: cn("flex flex-col gap-6", className) }, props)));
-}
-function TabsList(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(TabsPrimitive.List, __assign({ "data-slot": "tabs-list", className: cn("bg-blue-100 !p-1 rounded-lg", className) }, props)));
-}
-function TabsTrigger(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(TabsPrimitive.Trigger, __assign({ "data-slot": "tabs-trigger", className: cn("!py-2 !px-3 transition-all !rounded-sm !text-sm !font-normal !leading-5 w-1/2 max-sm:w-full", "data-[state=active]:bg-blue-600 data-[state=active]:text-blue-50", "data-[state=inactive]:bg-blue-100 data-[state=inactive]:text-blue-600", className) }, props)));
-}
-function TabsContent(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(TabsPrimitive.Content, __assign({ "data-slot": "tabs-content", className: cn("flex-1 outline-none", className) }, props)));
-}
-export { Tabs, TabsList, TabsTrigger, TabsContent };