linkedunion-design-kit 1.9.2 → 1.9.3

package/dist/src/components/Pagination/pagination.stories.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buttonStyles } from "../Button";
+import { variant } from "../Button/Button/Button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../Dropdown/select";
+import { Body } from "../Typography/Body/body";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./pagination";
+import { useState } from "react";
+var range = function (start, end) {
+    return Array.from({ length: end - start + 1 }, function (_, i) { return start + i; });
+};
+export default {
+    title: "Components/Pagination",
+    component: Pagination,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "A component for displaying pagination controls.",
+            },
+        },
+    },
+};
+var Template = function (args) { return (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { size: args.size, color: args.color, variant: args.variant, href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { size: args.size, color: args.color, variant: args.variant, href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { size: args.size, color: args.color, variant: args.variant, href: "#" }) })] }) })); };
+export var Default = Template.bind({});
+Default.args = {};
+Default.argTypes = {
+    size: {
+        control: { type: "select" },
+        options: Object.keys(buttonStyles.size),
+        description: "Size variant for Pagination",
+        table: {
+            defaultValue: { summary: "md" },
+            type: { summary: "enum" },
+            category: "Pagination",
+        },
+    },
+    color: {
+        control: { type: "select" },
+        options: Object.keys(buttonStyles.fillColor),
+        description: "Color theme for Pagination",
+        table: {
+            defaultValue: { summary: "gray" },
+            type: { summary: "enum" },
+            category: "Pagination",
+        },
+    },
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variant),
+        description: "Variant for Pagination (outline | fill | link)",
+        table: {
+            defaultValue: { summary: "ghost" },
+            type: { summary: "enum" },
+            category: "Pagination",
+        },
+    },
+};
+// Pagination with Ellipsis
+export var WithEllipsis = function () {
+    var pages = [1, 2, "ellipsis", 8, 9, 10];
+    return (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { color: "red", href: "#" }) }), pages.map(function (page, idx) {
+                    return page === "ellipsis" ? (_jsx(PaginationItem, { children: _jsx(PaginationEllipsis, { color: "red" }) }, "ellipsis-" + idx)) : (_jsx(PaginationItem, { children: _jsx(PaginationLink, { color: "red", href: "#", isActive: page === 1, children: page }) }, page));
+                }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { color: "red", href: "#" }) })] }) }));
+};
+WithEllipsis.parameters = {
+    docs: {
+        description: {
+            story: "Pagination example with an ellipsis to indicate skipped pages.",
+        },
+    },
+};
+// All Colors
+export var AllColors = function () { return (_jsx("div", { className: "flex flex-col gap-6", children: Object.keys(buttonStyles.fillColor).map(function (color) { return (_jsxs("div", { children: [_jsx("div", { className: "text-xl font-medium", children: color }), _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { color: color, href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { color: color, href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { color: color, href: "#" }) })] }) })] }, color)); }) })); };
+AllColors.parameters = {
+    docs: {
+        description: {
+            story: "Shows Pagination in all color variants.",
+        },
+    },
+};
+// All Variants
+export var AllVariants = function () { return (_jsx("div", { className: "flex flex-col gap-6", children: Object.keys(variant).map(function (v) { return (_jsxs("div", { children: [_jsx("div", { className: "text-xl font-medium", children: v }), _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { variant: v, href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { variant: v, href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { variant: v, href: "#" }) })] }) })] }, v)); }) })); };
+AllVariants.parameters = {
+    docs: {
+        description: {
+            story: "Shows Pagination in all variant styles (fill, outline, link, ghost).",
+        },
+    },
+};
+// All Sizes
+export var AllSizes = function () { return (_jsx("div", { className: "flex flex-col gap-6", children: Object.keys(buttonStyles.size).map(function (size) { return (_jsxs("div", { children: [_jsx("div", { className: "text-xl font-medium", children: size }), _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { size: size, href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { size: size, href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { size: size, href: "#" }) })] }) })] }, size)); }) })); };
+AllSizes.parameters = {
+    docs: {
+        description: {
+            story: "Shows Pagination in all size variants.",
+        },
+    },
+};
+// Table of Pagination Stories
+export var TablePagination = function () { return (_jsxs("div", { className: "flex  gap-6", children: [_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#" }) }), range(1, 5).map(function (page) { return (_jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", isActive: page === 1, children: page }) }, page)); }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#" }) })] }) }), _jsxs("div", { className: "inline-flex items-center gap-4", children: [_jsxs(Select, { defaultValue: "10", onValueChange: function () { }, children: [_jsx(SelectTrigger, { color: "default", shape: "rectangular", size: "md", variant: "fill", defaultValue: "10", children: _jsx(SelectValue, { placeholder: "Select an option", defaultValue: "10" }) }), _jsxs(SelectContent, { defaultValue: "10", className: "w-32", children: [_jsx(SelectItem, { value: "10", children: "10" }), _jsx(SelectItem, { value: "20", children: "20" }), _jsx(SelectItem, { value: "30", children: "30" })] })] }), _jsx(Body, { variant: "body-sm", className: "text-nowrap", children: "Showing 1 - 10 of 13" })] })] })); };
+TablePagination.parameters = {
+    docs: {
+        description: {
+            story: "Shows Pagination in all size variants.",
+        },
+    },
+};
+// Material-UI Style Pagination
+export var MultiPagination = function () {
+    var _a = useState(1), selectedPage = _a[0], setSelectedPage = _a[1];
+    var totalPages = 10;
+    var siblingCount = 1; // Number of pages to show on each side of the current page
+    var boundaryCount = 1; // Always show first and last page
+    // Helper to generate the pagination range
+    function getPaginationRange() {
+        var range = [];
+        var leftSibling = Math.max(selectedPage - siblingCount, boundaryCount + 2);
+        var rightSibling = Math.min(selectedPage + siblingCount, totalPages - boundaryCount - 1);
+        // Show all pages if total is small
+        if (totalPages <= 7) {
+            for (var i = 1; i <= totalPages; i++)
+                range.push(i);
+            return range;
+        }
+        // Always show first N pages
+        for (var i = 1; i <= boundaryCount; i++) {
+            range.push(i);
+        }
+        // Show left ellipsis if needed
+        if (leftSibling > boundaryCount + 2) {
+            range.push("ellipsis");
+        }
+        else {
+            for (var i = boundaryCount + 1; i < leftSibling; i++) {
+                range.push(i);
+            }
+        }
+        // Show middle pages
+        for (var i = leftSibling; i <= rightSibling; i++) {
+            range.push(i);
+        }
+        // Show right ellipsis if needed
+        if (rightSibling < totalPages - boundaryCount - 1) {
+            range.push("ellipsis");
+        }
+        else {
+            for (var i = rightSibling + 1; i < totalPages - boundaryCount + 1; i++) {
+                range.push(i);
+            }
+        }
+        // Always show last N pages
+        for (var i = totalPages - boundaryCount + 1; i <= totalPages; i++) {
+            range.push(i);
+        }
+        return range;
+    }
+    var pages = getPaginationRange();
+    return (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", onClick: function () { return setSelectedPage(function (p) { return Math.max(1, p - 1); }); } }) }), pages.map(function (page, idx) {
+                    return page === "ellipsis" ? (_jsx(PaginationItem, { children: _jsx(PaginationEllipsis, {}) }, "ellipsis-" + idx)) : (_jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", isActive: selectedPage === page, onClick: function () { return setSelectedPage(Number(page)); }, children: page }) }, page));
+                }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#", onClick: function () { return setSelectedPage(function (p) { return Math.min(totalPages, p + 1); }); } }) })] }) }));
+};
+MultiPagination.parameters = {
+    docs: {
+        description: {
+            story: "MultiPagination-UI style pagination: shows a window of pages, ellipses, and always the first/last page. Ellipses appear and disappear as you select different pages.",
+        },
+    },
+};

package/dist/src/components/Pagination/pagination.stories.jsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./pagination";
+var range = function (start, end) {
+    return Array.from({ length: end - start + 1 }, function (_, i) { return start + i; });
+};
+export default {
+    title: "Components/Pagination",
+    component: Pagination,
+};
+export var Basic = function () { return (<Pagination>
+    <PaginationContent>
+      <PaginationItem>
+        <PaginationPrevious href="#"/>
+      </PaginationItem>
+      {range(1, 5).map(function (page) { return (<PaginationItem key={page}>
+          <PaginationLink href="#" isActive={page === 1}>
+            {page}
+          </PaginationLink>
+        </PaginationItem>); })}
+      <PaginationItem>
+        <PaginationNext href="#"/>
+      </PaginationItem>
+    </PaginationContent>
+  </Pagination>); };
+Basic.storyName = "Basic";
+export var WithEllipsis = function () { return (<Pagination>
+    <PaginationContent>
+      <PaginationItem>
+        <PaginationPrevious href="#"/>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#">1</PaginationLink>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationEllipsis />
+      </PaginationItem>
+      {range(8, 10).map(function (page) { return (<PaginationItem key={page}>
+          <PaginationLink href="#" isActive={page === 9}>
+            {page}
+          </PaginationLink>
+        </PaginationItem>); })}
+      <PaginationItem>
+        <PaginationNext href="#"/>
+      </PaginationItem>
+    </PaginationContent>
+  </Pagination>); };
+WithEllipsis.storyName = "With Ellipsis";
+export var OnlyOnePage = function () { return (<Pagination>
+    <PaginationContent>
+      <PaginationItem>
+        <PaginationPrevious href="#"/>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" isActive>
+          1
+        </PaginationLink>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationNext href="#"/>
+      </PaginationItem>
+    </PaginationContent>
+  </Pagination>); };
+OnlyOnePage.storyName = "Only One Page";
+export var DisabledPreviousNext = function () { return (<Pagination>
+    <PaginationContent>
+      <PaginationItem>
+        <PaginationPrevious href="#" aria-disabled/>
+      </PaginationItem>
+      {range(1, 3).map(function (page) { return (<PaginationItem key={page}>
+          <PaginationLink href="#" isActive={page === 2}>
+            {page}
+          </PaginationLink>
+        </PaginationItem>); })}
+      <PaginationItem>
+        <PaginationNext href="#" aria-disabled/>
+      </PaginationItem>
+    </PaginationContent>
+  </Pagination>); };
+DisabledPreviousNext.storyName = "Disabled Previous/Next";
+export var CustomSizes = function () { return (<Pagination>
+    <PaginationContent>
+      <PaginationItem>
+        <PaginationPrevious href="#" size="sm"/>
+      </PaginationItem>
+      {range(1, 3).map(function (page) { return (<PaginationItem key={page}>
+          <PaginationLink href="#" size={page === 2 ? "lg" : "sm"} isActive={page === 2}>
+            {page}
+          </PaginationLink>
+        </PaginationItem>); })}
+      <PaginationItem>
+        <PaginationNext href="#" size="lg"/>
+      </PaginationItem>
+    </PaginationContent>
+  </Pagination>); };
+CustomSizes.storyName = "Custom Sizes";
+export var Playground = function (args) { return (<Pagination {...args}>
+    <PaginationContent>
+      <PaginationItem>
+        <PaginationPrevious href="#"/>
+      </PaginationItem>
+      {range(1, 5).map(function (page) { return (<PaginationItem key={page}>
+          <PaginationLink href="#" isActive={page === 3}>
+            {page}
+          </PaginationLink>
+        </PaginationItem>); })}
+      <PaginationItem>
+        <PaginationNext href="#"/>
+      </PaginationItem>
+    </PaginationContent>
+  </Pagination>); };
+Playground.storyName = "Playground";
+Playground.args = {
+    className: "",
+};

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

@@ -0,0 +1,146 @@
+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 { RadioGroup, RadioGroupItem, sizeClass } from "./radio-group";
+import { Label } from "../Label/Label";
+import React, { useState } from "react";
+import { Caption } from "../Typography/Caption/caption";
+import { Button } from "../Button/Button/Button";
+var meta = {
+    title: "Components/RadioGroup",
+    component: RadioGroup,
+    tags: ["autodocs"],
+    argTypes: {
+        defaultValue: { control: "text" },
+        value: {
+            control: "text",
+            description: "Controlled value of the RadioGroup",
+        },
+        onValueChange: {
+            action: "onValueChange",
+            description: "Callback when value changes",
+            table: {
+                type: { summary: "(value: string) => void" },
+            },
+        },
+        name: {
+            control: "text",
+            description: "Name attribute for the radio group",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        disabled: { control: "boolean" },
+        required: { control: "boolean" },
+    },
+};
+export default meta;
+export var Basic = {
+    argTypes: {
+        size: {
+            control: { type: "select" },
+            options: Object.keys(sizeClass),
+            description: "Radio button size (applies to all RadioGroupItem children)",
+            table: {
+                type: { summary: Object.keys(sizeClass).join(" | ") },
+                defaultValue: { summary: "md" },
+            },
+        },
+    },
+    parameters: {
+        controls: {
+            include: [
+                "defaultValue",
+                "value",
+                "onValueChange",
+                "name",
+                "disabled",
+                "required",
+                "aria-invalid",
+                "size",
+            ],
+        },
+    },
+    render: function DefaultSelectedStory(args) {
+        var _a = args.size, size = _a === void 0 ? "md" : _a, onValueChange = args.onValueChange, value = args.value, radioGroupProps = __rest(args, ["size", "onValueChange", "value"]);
+        var _b = useState(value || ""), currentValue = _b[0], setCurrentValue = _b[1];
+        var handleChange = function (value) {
+            setCurrentValue(value);
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value); // safe call for Storybook action
+        };
+        return (<>
+        <RadioGroup {...radioGroupProps} onValueChange={handleChange} value={currentValue}>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-1" id="option-1" size={size}/>
+            <Label htmlFor="option-1">Option 1</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-2" id="option-2" size={size}/>
+            <Label htmlFor="option-2">Option 2</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-3" id="option-3" size={size}/>
+            <Label htmlFor="option-3">Option 3</Label>
+          </div>
+        </RadioGroup>
+      </>);
+    },
+};
+export var Disabled = {
+    args: {
+        disabled: true,
+    },
+    render: function (args) { return (<RadioGroup {...args}>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="disabled-1" disabled/>
+        <Label htmlFor="disabled-1">Option 1</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="disabled-2" disabled/>
+        <Label htmlFor="disabled-2">Option 2</Label>
+      </div>
+    </RadioGroup>); },
+};
+export var ValidationComponent = function () {
+    var _a = useState(""), selected = _a[0], setSelected = _a[1];
+    var _b = useState(false), submitted = _b[0], setSubmitted = _b[1];
+    var hasError = submitted && !selected;
+    return (<form onSubmit={function (e) {
+            e.preventDefault();
+            setSubmitted(true);
+            if (selected) {
+                alert("Selected: ".concat(selected));
+            }
+        }} className="w-fit space-y-4">
+      <div className="space-y-2">
+        <Label>Choose an option</Label>
+        <RadioGroup value={selected} onValueChange={function (val) {
+            if (typeof val === "string") {
+                setSelected(val);
+                setSubmitted(false); // clear error on change
+            }
+        }} className="flex flex-col gap-2">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-1" id="validation-1" color={hasError ? "red" : "default"} className="border"/>
+            <Label htmlFor="validation-1">Option 1</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-2" id="validation-2" color={hasError ? "red" : "default"} className="border"/>
+            <Label htmlFor="validation-2">Option 2</Label>
+          </div>
+        </RadioGroup>
+        {hasError && (<Caption className="text-red-500">Please select an option.</Caption>)}
+      </div>
+      <Button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">
+        Submit
+      </Button>
+    </form>);
+};

package/dist/src/components/RadioGroup/radio-group.jsx

@@ -0,0 +1,49 @@
+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 RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+export var sizeClass = {
+    sm: "size-3.5",
+    md: "size-4",
+    lg: "size-5",
+};
+var checkedCircleSize = {
+    sm: "size-2",
+    md: "size-2.5",
+    lg: "size-3.5",
+};
+var RadioGroup = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<RadioGroupPrimitive.Root ref={ref} data-slot="radio-group" className={cn("grid !gap-2", className)} {...props}/>);
+});
+RadioGroup.displayName = "RadioGroup";
+function RadioGroupItem(props) {
+    var className = props.className, _a = props.size, size = _a === void 0 ? "md" : _a, _b = props.color, color = _b === void 0 ? "default" : _b, rest = __rest(props, ["className", "size", "color"]);
+    // Color classes for border and indicator, similar to Input
+    var colorClasses = {
+        default: "border-gray-200 hover:border-blue-600 data-[state=checked]:border-blue-600 focus-visible:ring-blue-200",
+        red: "border-red-600 focus-visible:ring-blue-200",
+    };
+    //used for CircleIcon
+    var indicatorColor = {
+        default: "fill-blue-600 stroke-blue-600",
+        red: "fill-red-600 stroke-red-600",
+    };
+    return (<RadioGroupPrimitive.Item data-slot="radio-group-item" className={cn(size && sizeClass[size], colorClasses[color], "focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square shrink-0 !rounded-full !border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100", className)} {...rest}>
+      <RadioGroupPrimitive.Indicator data-slot="radio-group-indicator" className="relative flex items-center justify-center">
+        <CircleIcon className={cn(indicatorColor[color], "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", checkedCircleSize[size])}/>
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>);
+}
+export { RadioGroup, RadioGroupItem };

package/dist/src/components/Skeleton/skeleton.d.ts

@@ -0,0 +1,117 @@
+import { avatarSize } from "../Avatar/Avatar";
+import { buttonStyles } from "../Button";
+import { badgeStyles } from "../Badge";
+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";
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Skeleton {
+    var Button: typeof ButtonSkeleton;
+    var Input: typeof InputSkeleton;
+    var Avatar: typeof AvatarSkeleton;
+    var Badge: typeof BadgeSkeleton;
+    var Card: typeof CardSkeleton;
+    var TableRow: typeof TableRowSkeleton;
+    var Checkbox: typeof CheckboxSkeleton;
+    var Switch: typeof SwitchSkeleton;
+    var Select: typeof SelectSkeleton;
+    var Icon: typeof IconSkeleton;
+    var Text: typeof TextSkeleton;
+    var Heading: typeof HeadingSkeleton;
+    var Image: typeof ImageSkeleton;
+}
+type ButtonSkeletonProps = {
+    size?: keyof typeof buttonStyles.size;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function ButtonSkeleton({ size, className, ...props }: ButtonSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const InputSkeletonSize: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+type InputSkeletonProps = {
+    size?: keyof typeof InputSkeletonSize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function InputSkeleton({ size, className, ...props }: InputSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type AvatarSkeletonProps = {
+    size?: keyof typeof avatarSize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function AvatarSkeleton({ size, className, ...props }: AvatarSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type BadgeSkeletonProps = {
+    size?: keyof typeof badgeStyles.size;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const BadgeSkeletonSize: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+declare function BadgeSkeleton({ size, className, ...props }: BadgeSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type CardSkeletonProps = {
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function CardSkeleton({ className, ...props }: CardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type TableRowSkeletonProps = {
+    columns?: number;
+    size?: keyof typeof tableBodySize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function TableRowSkeleton({ columns, size, className, ...props }: TableRowSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type CheckboxSkeletonProps = {
+    className?: string;
+    size?: keyof typeof checkboxSize;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function CheckboxSkeleton({ className, size, ...props }: CheckboxSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type SwitchSkeletonProps = {
+    className?: string;
+    size?: keyof typeof SwitchSizes;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function SwitchSkeleton({ className, size, ...props }: SwitchSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type SelectSkeletonProps = {
+    size?: keyof typeof comboboxSizes;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function SelectSkeleton({ size, className, ...props }: SelectSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type IconSkeletonProps = {
+    size?: keyof typeof LUIconSizes;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function IconSkeleton({ size, className, ...props }: IconSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const TextSkeletonSize: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+type TextSkeletonProps = {
+    lines?: number;
+    size?: keyof typeof TextSkeletonSize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function TextSkeleton({ lines, size, className, ...props }: TextSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const HeadingSkeletonSize: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+};
+type HeadingSkeletonProps = {
+    size?: keyof typeof HeadingSkeletonSize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function HeadingSkeleton({ size, className, ...props }: HeadingSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type ImageSkeletonProps = {
+    aspectRatio?: "square" | "video" | "portrait";
+    className?: string;
+    isIcon?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function ImageSkeleton({ aspectRatio, className, isIcon, ...props }: ImageSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };