linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Pagination/{pagination.js → pagination.jsx}

@@ -1,14 +1,3 @@
-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)
@@ -20,49 +9,57 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
 import { buttonVariants } from "../Button/Button/Button";
 import LUIcon from "../Icons/LUIcon";
 var Pagination = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("nav", __assign({ role: "navigation", "aria-label": "pagination", className: cn("mx-auto flex w-full justify-center", className) }, props)));
+    return (<nav role="navigation" aria-label="pagination" className={cn("mx-auto flex w-full justify-center", className)} {...props}/>);
 };
 Pagination.displayName = "Pagination";
 var PaginationContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("ul", __assign({ "data-slot": "reset-bs-ul", ref: ref, className: cn("flex flex-row items-center gap-1", className) }, props)));
+    return (<ul data-slot="reset-bs-ul" ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props}/>);
 });
 PaginationContent.displayName = "PaginationContent";
 var PaginationItem = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("li", __assign({ ref: ref, className: cn("", className) }, props)));
+    return (<li ref={ref} className={cn("", className)} {...props}/>);
 });
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = function (_a) {
     var className = _a.className, isActive = _a.isActive, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.color, color = _c === void 0 ? "gray" : _c, _d = _a.variant, variant = _d === void 0 ? "ghost" : _d, props = __rest(_a, ["className", "isActive", "size", "color", "variant"]);
-    return (_jsx("a", __assign({ "aria-current": isActive ? "page" : undefined, "data-slot": "reset-bs-link", className: cn(buttonVariants({
+    return (<a aria-current={isActive ? "page" : undefined} data-slot="reset-bs-link" className={cn(buttonVariants({
             variant: isActive ? (variant === "link" ? variant : "fill") : variant,
             size: size,
             color: color,
-        }), className) }, props)));
+        }), className)} {...props}/>);
 };
 PaginationLink.displayName = "PaginationLink";
 var PaginationPrevious = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to previous page", size: "md", className: cn("gap-1 pl-2.5", className) }, props, { children: [_jsx(LUIcon, { icon: "arrow-left" }), _jsx("span", { className: "max-sm:hidden", children: "Previous" })] })));
+    return (<PaginationLink aria-label="Go to previous page" size="md" className={cn("gap-1 pl-2.5", className)} {...props}>
+    <LUIcon icon="arrow-left"/>
+    <span className="max-sm:hidden">Previous</span>
+  </PaginationLink>);
 };
 PaginationPrevious.displayName = "PaginationPrevious";
 var PaginationNext = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to next page", size: "md", className: cn("gap-1 pr-2.5", className) }, props, { children: [_jsx("span", { className: "max-sm:hidden", children: "Next" }), _jsx(LUIcon, { icon: "arrow-right" })] })));
+    return (<PaginationLink aria-label="Go to next page" size="md" className={cn("gap-1 pr-2.5", className)} {...props}>
+    <span className="max-sm:hidden">Next</span>
+    <LUIcon icon="arrow-right"/>
+  </PaginationLink>);
 };
 PaginationNext.displayName = "PaginationNext";
 var PaginationEllipsis = function (_a) {
     var color = _a.color, props = __rest(_a, ["color"]);
-    return (_jsxs(_Fragment, { children: [_jsx(LUIcon, __assign({ icon: "ellipsis-horizontal" // Always use ellipsis-horizontal
-                , color: color }, props)), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+    return (<>
+    <LUIcon icon="ellipsis-horizontal" // Always use ellipsis-horizontal
+     color={color} {...props}/>
+    <span className="sr-only">More pages</span>
+  </>);
 };
 PaginationEllipsis.displayName = "PaginationEllipsis";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

package/dist/src/components/Pagination/pagination.stories.d.ts

@@ -13,7 +13,7 @@ type PaginationStoryArgs = {
 };
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, PaginationStoryArgs>;
 export declare const WithEllipsis: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -23,7 +23,7 @@ export declare const WithEllipsis: {
     };
 };
 export declare const AllColors: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -33,7 +33,7 @@ export declare const AllColors: {
     };
 };
 export declare const AllVariants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -43,7 +43,7 @@ export declare const AllVariants: {
     };
 };
 export declare const AllSizes: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -53,7 +53,7 @@ export declare const AllSizes: {
     };
 };
 export declare const TablePagination: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -63,7 +63,7 @@ export declare const TablePagination: {
     };
 };
 export declare const MultiPagination: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {

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

@@ -0,0 +1,301 @@
+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 (<Pagination>
+    <PaginationContent>
+      <PaginationItem>
+        <PaginationPrevious size={args.size} color={args.color} variant={args.variant} href="#"/>
+      </PaginationItem>
+      {range(1, 5).map(function (page) { return (<PaginationItem key={page}>
+          <PaginationLink size={args.size} color={args.color} variant={args.variant} href="#" isActive={page === 1}>
+            {page}
+          </PaginationLink>
+        </PaginationItem>); })}
+      <PaginationItem>
+        <PaginationNext size={args.size} color={args.color} variant={args.variant} href="#"/>
+      </PaginationItem>
+    </PaginationContent>
+  </Pagination>); };
+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 (<Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious color="red" href="#"/>
+        </PaginationItem>
+        {pages.map(function (page, idx) {
+            return page === "ellipsis" ? (<PaginationItem key={"ellipsis-" + idx}>
+              <PaginationEllipsis color="red"/>
+            </PaginationItem>) : (<PaginationItem key={page}>
+              <PaginationLink color="red" href="#" isActive={page === 1}>
+                {page}
+              </PaginationLink>
+            </PaginationItem>);
+        })}
+        <PaginationItem>
+          <PaginationNext color="red" href="#"/>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>);
+};
+WithEllipsis.parameters = {
+    docs: {
+        description: {
+            story: "Pagination example with an ellipsis to indicate skipped pages.",
+        },
+    },
+};
+// All Colors
+export var AllColors = function () { return (<div className="flex flex-col gap-6">
+    {Object.keys(buttonStyles.fillColor).map(function (color) { return (<div key={color}>
+        <div className="text-xl font-medium">{color}</div>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious color={color} href="#"/>
+            </PaginationItem>
+            {range(1, 5).map(function (page) { return (<PaginationItem key={page}>
+                <PaginationLink color={color} href="#" isActive={page === 1}>
+                  {page}
+                </PaginationLink>
+              </PaginationItem>); })}
+            <PaginationItem>
+              <PaginationNext color={color} href="#"/>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>); })}
+  </div>); };
+AllColors.parameters = {
+    docs: {
+        description: {
+            story: "Shows Pagination in all color variants.",
+        },
+    },
+};
+// All Variants
+export var AllVariants = function () { return (<div className="flex flex-col gap-6">
+    {Object.keys(variant).map(function (v) { return (<div key={v}>
+        <div className="text-xl font-medium">{v}</div>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious variant={v} href="#"/>
+            </PaginationItem>
+            {range(1, 5).map(function (page) { return (<PaginationItem key={page}>
+                <PaginationLink variant={v} href="#" isActive={page === 1}>
+                  {page}
+                </PaginationLink>
+              </PaginationItem>); })}
+            <PaginationItem>
+              <PaginationNext variant={v} href="#"/>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>); })}
+  </div>); };
+AllVariants.parameters = {
+    docs: {
+        description: {
+            story: "Shows Pagination in all variant styles (fill, outline, link, ghost).",
+        },
+    },
+};
+// All Sizes
+export var AllSizes = function () { return (<div className="flex flex-col gap-6">
+    {Object.keys(buttonStyles.size).map(function (size) { return (<div key={size}>
+        <div className="text-xl font-medium">{size}</div>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious size={size} href="#"/>
+            </PaginationItem>
+            {range(1, 5).map(function (page) { return (<PaginationItem key={page}>
+                <PaginationLink size={size} href="#" isActive={page === 1}>
+                  {page}
+                </PaginationLink>
+              </PaginationItem>); })}
+            <PaginationItem>
+              <PaginationNext size={size} href="#"/>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>); })}
+  </div>); };
+AllSizes.parameters = {
+    docs: {
+        description: {
+            story: "Shows Pagination in all size variants.",
+        },
+    },
+};
+// Table of Pagination Stories
+export var TablePagination = function () { return (<div className="flex  gap-6">
+    <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>
+    <div className="inline-flex items-center gap-4">
+      <Select defaultValue="10" onValueChange={function () { }}>
+        <SelectTrigger color="default" shape="rectangular" size="md" variant="fill" defaultValue={"10"}>
+          <SelectValue placeholder="Select an option" defaultValue={"10"}/>
+        </SelectTrigger>
+        <SelectContent defaultValue={"10"} className="w-32">
+          <SelectItem value="10">10</SelectItem>
+          <SelectItem value="20">20</SelectItem>
+          <SelectItem value="30">30</SelectItem>
+        </SelectContent>
+      </Select>
+      <Body variant={"body-sm"} className="text-nowrap">
+        Showing 1 - 10 of 13
+      </Body>
+    </div>
+  </div>); };
+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 (<Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" onClick={function () { return setSelectedPage(function (p) { return Math.max(1, p - 1); }); }}/>
+        </PaginationItem>
+        {pages.map(function (page, idx) {
+            return page === "ellipsis" ? (<PaginationItem key={"ellipsis-" + idx}>
+              <PaginationEllipsis />
+            </PaginationItem>) : (<PaginationItem key={page}>
+              <PaginationLink href="#" isActive={selectedPage === page} onClick={function () { return setSelectedPage(Number(page)); }}>
+                {page}
+              </PaginationLink>
+            </PaginationItem>);
+        })}
+        <PaginationItem>
+          <PaginationNext href="#" onClick={function () { return setSelectedPage(function (p) { return Math.min(totalPages, p + 1); }); }}/>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>);
+};
+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/RadioGroup/{RadioGroup.stories.js → RadioGroup.stories.jsx}

@@ -1,14 +1,3 @@
-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)
@@ -20,10 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { RadioGroup, RadioGroupItem, sizeClass } from "./radio-group";
 import { Label } from "../Label/Label";
-import { useState } from "react";
+import React, { useState } from "react";
 import { Caption } from "../Typography/Caption/caption";
 import { Button } from "../Button/Button/Button";
 var meta = {
@@ -88,29 +76,71 @@ export var Basic = {
             setCurrentValue(value);
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value); // safe call for Storybook action
         };
-        return (_jsx(_Fragment, { children: _jsxs(RadioGroup, __assign({}, radioGroupProps, { onValueChange: handleChange, value: currentValue, children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-1", id: "option-1", size: size }), _jsx(Label, { htmlFor: "option-1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-2", id: "option-2", size: size }), _jsx(Label, { htmlFor: "option-2", children: "Option 2" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-3", id: "option-3", size: size }), _jsx(Label, { htmlFor: "option-3", children: "Option 3" })] })] })) }));
+        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 (_jsxs(RadioGroup, __assign({}, args, { children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-1", id: "disabled-1", disabled: true }), _jsx(Label, { htmlFor: "disabled-1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-2", id: "disabled-2", disabled: true }), _jsx(Label, { htmlFor: "disabled-2", children: "Option 2" })] })] }))); },
+    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 (_jsxs("form", { onSubmit: function (e) {
+    return (<form onSubmit={function (e) {
             e.preventDefault();
             setSubmitted(true);
             if (selected) {
                 alert("Selected: ".concat(selected));
             }
-        }, className: "w-fit space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Choose an option" }), _jsxs(RadioGroup, { value: selected, onValueChange: function (val) {
-                            if (typeof val === "string") {
-                                setSelected(val);
-                                setSubmitted(false); // clear error on change
-                            }
-                        }, className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-1", id: "validation-1", color: hasError ? "red" : "default", className: "border" }), _jsx(Label, { htmlFor: "validation-1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-2", id: "validation-2", color: hasError ? "red" : "default", className: "border" }), _jsx(Label, { htmlFor: "validation-2", children: "Option 2" })] })] }), hasError && (_jsx(Caption, { className: "text-red-500", children: "Please select an option." }))] }), _jsx(Button, { type: "submit", className: "px-4 py-2 bg-blue-600 text-white rounded", children: "Submit" })] }));
+        }} 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.d.ts

@@ -10,5 +10,5 @@ interface RadioGroupItemProps extends Omit<React.ComponentProps<typeof RadioGrou
     size?: keyof typeof sizeClass;
     color?: "default" | "red";
 }
-declare function RadioGroupItem(props: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroupItem(props: RadioGroupItemProps): React.JSX.Element;
 export { RadioGroup, RadioGroupItem };

package/dist/src/components/RadioGroup/{radio-group.js → radio-group.jsx}

@@ -1,14 +1,3 @@
-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)
@@ -20,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";
@@ -37,7 +25,7 @@ var checkedCircleSize = {
 };
 var RadioGroup = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(RadioGroupPrimitive.Root, __assign({ ref: ref, "data-slot": "radio-group", className: cn("grid !gap-2", className) }, props)));
+    return (<RadioGroupPrimitive.Root ref={ref} data-slot="radio-group" className={cn("grid !gap-2", className)} {...props}/>);
 });
 RadioGroup.displayName = "RadioGroup";
 function RadioGroupItem(props) {
@@ -52,6 +40,10 @@ function RadioGroupItem(props) {
         default: "fill-blue-600 stroke-blue-600",
         red: "fill-red-600 stroke-red-600",
     };
-    return (_jsx(RadioGroupPrimitive.Item, __assign({ "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, { children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(CircleIcon, { className: cn(indicatorColor[color], "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", checkedCircleSize[size]) }) }) })));
+    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/Separator/Separator.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "../../components/Separator/separator";
+declare const meta: Meta<typeof Separator>;
+export default meta;
+type Story = StoryObj<typeof Separator>;
+export declare function SeparatorDemo({ orientation, decorative, className, }: {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const Demo: Story;
+export declare const DecorativeTrue: Story;
+export declare const DecorativeFalse: Story;