linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Slider/slider.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): React.JSX.Element;
 export { Slider };

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 };

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

@@ -27,14 +27,14 @@ declare const sweetAlertContentVariants: (props?: ({
     variant?: "fill" | "outline" | "light" | null | undefined;
     color?: "blue" | "green" | "yellow" | "red" | "indigo" | "gray" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function SweetAlertRoot({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function SweetAlertTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function SweetAlertContent({ className, shadow, color, variant, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & VariantProps<typeof sweetAlertContentVariants>): import("react/jsx-runtime").JSX.Element;
-declare function SweetAlertFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function SweetAlertTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function SweetAlertDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
-declare function SweetAlertAction({ className, color: colorProp, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
-declare function SweetAlertCancel({ className, color: colorProp, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
-declare function SweetAlertIcon({ size, variant, color: colorProp, shape, ...props }: React.ComponentProps<typeof LUIcon>): import("react/jsx-runtime").JSX.Element;
+declare function SweetAlertRoot({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function SweetAlertTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function SweetAlertContent({ className, shadow, color, variant, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & VariantProps<typeof sweetAlertContentVariants>): React.JSX.Element;
+declare function SweetAlertFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SweetAlertTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function SweetAlertDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function SweetAlertAction({ className, color: colorProp, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function SweetAlertCancel({ className, color: colorProp, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function SweetAlertIcon({ size, variant, color: colorProp, shape, ...props }: React.ComponentProps<typeof LUIcon>): React.JSX.Element;
 export { SweetAlertRoot as SweetAlert, SweetAlertTrigger, SweetAlertContent, SweetAlertFooter, SweetAlertTitle, SweetAlertDescription, SweetAlertAction, SweetAlertCancel, SweetAlertIcon, };
 export default SweetAlertRoot;

package/dist/src/components/SweetAlert/{SweetAlert.js → SweetAlert.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, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { cva } from "class-variance-authority";
@@ -94,11 +82,11 @@ var sweetAlertContentVariants = cva("data-[state=open]:animate-in data-[state=cl
 });
 function SweetAlertRoot(_a) {
     var props = __rest(_a, []);
-    return _jsx(AlertDialogPrimitive.Root, __assign({ "data-slot": "sweet-alert" }, props));
+    return <AlertDialogPrimitive.Root data-slot="sweet-alert" {...props}/>;
 }
 function SweetAlertTrigger(_a) {
     var props = __rest(_a, []);
-    return (_jsx(AlertDialogPrimitive.Trigger, __assign({ "data-slot": "sweet-alert-trigger" }, props)));
+    return (<AlertDialogPrimitive.Trigger data-slot="sweet-alert-trigger" {...props}/>);
 }
 function SweetAlertContent(_a) {
     var className = _a.className, shadow = _a.shadow, color = _a.color, variant = _a.variant, props = __rest(_a, ["className", "shadow", "color", "variant"]);
@@ -107,19 +95,24 @@ function SweetAlertContent(_a) {
         color: color || undefined,
         variant: variant || undefined,
     }); }, [color, variant]);
-    return (_jsx(SweetAlertContext.Provider, { value: contextValue, children: _jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50" }), _jsx(AlertDialogPrimitive.Content, __assign({ "data-slot": "sweet-alert-content", className: cn(sweetAlertContentVariants({ shadow: shadow, color: color, variant: variant }), "flex flex-col items-center gap-4 text-center", className) }, props))] }) }));
+    return (<SweetAlertContext.Provider value={contextValue}>
+      <AlertDialogPrimitive.Portal>
+        <AlertDialogPrimitive.Overlay className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"/>
+        <AlertDialogPrimitive.Content data-slot="sweet-alert-content" className={cn(sweetAlertContentVariants({ shadow: shadow, color: color, variant: variant }), "flex flex-col items-center gap-4 text-center", className)} {...props}/>
+      </AlertDialogPrimitive.Portal>
+    </SweetAlertContext.Provider>);
 }
 function SweetAlertFooter(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ "data-slot": "sweet-alert-footer", className: cn("flex flex-row justify-center text-lg gap-3 mt-6", className) }, props)));
+    return (<div data-slot="sweet-alert-footer" className={cn("flex flex-row justify-center text-lg gap-3 mt-6", className)} {...props}/>);
 }
 function SweetAlertTitle(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Title, __assign({ "data-slot": "sweet-alert-title", className: cn("font-semibold text-2xl", className) }, props)));
+    return (<AlertDialogPrimitive.Title data-slot="sweet-alert-title" className={cn("font-semibold text-2xl", className)} {...props}/>);
 }
 function SweetAlertDescription(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Description, __assign({ "data-slot": "sweet-alert-description", className: cn("text-lg", className) }, props)));
+    return (<AlertDialogPrimitive.Description data-slot="sweet-alert-description" className={cn("text-lg", className)} {...props}/>);
 }
 // Helper function to get color based on context and variant
 function getColorWithVariant(colorProp, contextColor, contextVariant) {
@@ -132,19 +125,23 @@ function SweetAlertAction(_a) {
     var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
     var _b = useAlertContext(), contextColor = _b.color, contextVariant = _b.variant;
     var color = getColorWithVariant(colorProp, contextColor, contextVariant);
-    return (_jsx(AlertDialogPrimitive.Action, { asChild: true, children: _jsx(Button, __assign({ variant: "fill", color: color, "data-slot": "sweet-alert-action", className: cn(className) }, props)) }));
+    return (<AlertDialogPrimitive.Action asChild>
+      <Button variant="fill" color={color} data-slot="sweet-alert-action" className={cn(className)} {...props}/>
+    </AlertDialogPrimitive.Action>);
 }
 function SweetAlertCancel(_a) {
     var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
     var _b = useAlertContext(), contextColor = _b.color, contextVariant = _b.variant;
     var color = getColorWithVariant(colorProp, contextColor, contextVariant);
-    return (_jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: _jsx(Button, __assign({ variant: "outline", color: color, "data-slot": "sweet-alert-cancel", className: cn(className) }, props)) }));
+    return (<AlertDialogPrimitive.Cancel asChild>
+      <Button variant="outline" color={color} data-slot="sweet-alert-cancel" className={cn(className)} {...props}/>
+    </AlertDialogPrimitive.Cancel>);
 }
 function SweetAlertIcon(_a) {
     var _b = _a.size, size = _b === void 0 ? "12xl" : _b, _c = _a.variant, variant = _c === void 0 ? "padded" : _c, colorProp = _a.color, _d = _a.shape, shape = _d === void 0 ? "rounded" : _d, props = __rest(_a, ["size", "variant", "color", "shape"]);
     var _e = useAlertContext(), contextColor = _e.color, contextVariant = _e.variant;
     var color = getColorWithVariant(colorProp, contextColor, contextVariant);
-    return (_jsx(LUIcon, __assign({ size: size, variant: variant, color: color, shape: shape }, props)));
+    return (<LUIcon size={size} variant={variant} color={color} shape={shape} {...props}/>);
 }
 export { SweetAlertRoot as SweetAlert, SweetAlertTrigger, SweetAlertContent, SweetAlertFooter, SweetAlertTitle, SweetAlertDescription, SweetAlertAction, SweetAlertCancel, SweetAlertIcon, };
 export default SweetAlertRoot;

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

@@ -15,7 +15,7 @@ declare const _default: Meta;
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SweetAlertStoryArgs>;
 export declare const Example: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -25,7 +25,7 @@ export declare const Example: {
     };
 };
 export declare const BasicExample: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -35,7 +35,7 @@ export declare const BasicExample: {
     };
 };
 export declare const AllColors: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             source: {
@@ -45,7 +45,7 @@ export declare const AllColors: {
     };
 };
 export declare const ColorVariants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             source: {
@@ -55,7 +55,7 @@ export declare const ColorVariants: {
     };
 };
 export declare const RealWorldExamples: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             source: {
@@ -65,7 +65,7 @@ export declare const RealWorldExamples: {
     };
 };
 export declare const ButtonVariants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             source: {
@@ -75,7 +75,7 @@ export declare const ButtonVariants: {
     };
 };
 export declare const CustomizeAlert: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {

package/dist/src/components/SweetAlert/{SweetAlert.stories.js → SweetAlert.stories.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { SweetAlert, SweetAlertAction, SweetAlertCancel, SweetAlertContent, SweetAlertDescription, SweetAlertTitle, SweetAlertTrigger, SweetAlertFooter, SweetAlertIcon, sweetAlertVariants, } from "./SweetAlert";
 import { Button } from "../Button/Button/Button";
@@ -128,7 +127,22 @@ export default {
 // Reusable SweetAlert component
 var SweetAlertExample = function (_a) {
     var triggerText = _a.triggerText, triggerColor = _a.triggerColor, _b = _a.shadow, shadow = _b === void 0 ? "none" : _b, color = _a.color, _c = _a.variant, variant = _c === void 0 ? "outline" : _c, icon = _a.icon, title = _a.title, description = _a.description, cancelText = _a.cancelText, actionText = _a.actionText, _d = _a.showCancel, showCancel = _d === void 0 ? true : _d, _e = _a.showAction, showAction = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f;
-    return (_jsxs(SweetAlert, { children: [_jsx(SweetAlertTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: triggerColor, className: className, children: triggerText }) }), _jsxs(SweetAlertContent, { shadow: shadow, color: color, variant: variant, children: [icon && _jsx(SweetAlertIcon, { icon: icon }), _jsx(SweetAlertTitle, { children: title }), _jsx(SweetAlertDescription, { children: description }), _jsxs(SweetAlertFooter, { children: [showCancel && (_jsx(SweetAlertCancel, { children: cancelText || "Cancel" })), showAction && (_jsx(SweetAlertAction, { children: actionText || "OK" }))] })] })] }));
+    return (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color={triggerColor} className={className}>
+        {triggerText}
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent shadow={shadow} color={color} variant={variant}>
+      {icon && <SweetAlertIcon icon={icon}/>}
+      <SweetAlertTitle>{title}</SweetAlertTitle>
+      <SweetAlertDescription>{description}</SweetAlertDescription>
+      <SweetAlertFooter>
+        {showCancel && (<SweetAlertCancel>{cancelText || "Cancel"}</SweetAlertCancel>)}
+        {showAction && (<SweetAlertAction>{actionText || "OK"}</SweetAlertAction>)}
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>);
 };
 // Component with eye icon to show code
 var ColorVariantWithEyeIcon = function (_a) {
@@ -136,7 +150,30 @@ var ColorVariantWithEyeIcon = function (_a) {
     var _c = useState(false), showCode = _c[0], setShowCode = _c[1];
     var triggerText = color.charAt(0).toUpperCase() + color.slice(1).replace("-", " ");
     var sweetAlertCode = "<SweetAlert>\n  <SweetAlertTrigger asChild>\n    <Button variant=\"outline\" color=\"".concat(color, "\">\n      ").concat(triggerText, "\n    </Button>\n  </SweetAlertTrigger>\n  <SweetAlertContent color=\"").concat(color, "\" variant=\"").concat(variant, "\">\n    <SweetAlertIcon icon=\"").concat(getIconForColor(color), "\" />\n    <SweetAlertTitle>").concat(content.title, "</SweetAlertTitle>\n    <SweetAlertDescription>\n      ").concat(content.description, "\n    </SweetAlertDescription>\n    <SweetAlertFooter>\n      <SweetAlertCancel>Cancel</SweetAlertCancel>\n      <SweetAlertAction>").concat(content.button, "</SweetAlertAction>\n    </SweetAlertFooter>\n  </SweetAlertContent>\n</SweetAlert>");
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(SweetAlertExample, { triggerText: triggerText, triggerColor: color, color: color, variant: variant, icon: getIconForColor(color), title: content.title, description: content.description, cancelText: "Cancel", actionText: content.button, className: "w-full" }) }), _jsx(Button, { onClick: function () { return setShowCode(!showCode); }, variant: "ghost", size: "sm", title: showCode ? "Hide Code" : "Show Code", className: "text-gray-600 hover:text-gray-800 hover:bg-gray-100", children: _jsx(LUIcon, { icon: showCode ? "eye-slash" : "eye" }) })] }), showCode && (_jsxs("div", { className: "p-3 bg-gray-50 border rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs(Body, { variant: "body-sm", className: "font-semibold text-gray-700", children: [triggerText, " - SweetAlert Code"] }), _jsx(Button, { onClick: function () { return navigator.clipboard.writeText(sweetAlertCode); }, variant: "ghost", size: "sm", title: "Copy code to clipboard", className: "text-xs text-blue-700 hover:bg-blue-200 bg-blue-100", children: "Copy Code" })] }), _jsx("pre", { className: "text-xs bg-white p-3 rounded border overflow-x-auto", children: _jsx("code", { className: "text-gray-800", children: sweetAlertCode }) })] }))] }));
+    return (<div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <div className="flex-1">
+          <SweetAlertExample triggerText={triggerText} triggerColor={color} color={color} variant={variant} icon={getIconForColor(color)} title={content.title} description={content.description} cancelText="Cancel" actionText={content.button} className="w-full"/>
+        </div>
+        <Button onClick={function () { return setShowCode(!showCode); }} variant="ghost" size="sm" title={showCode ? "Hide Code" : "Show Code"} className="text-gray-600 hover:text-gray-800 hover:bg-gray-100">
+          <LUIcon icon={showCode ? "eye-slash" : "eye"}/>
+        </Button>
+      </div>
+
+      {showCode && (<div className="p-3 bg-gray-50 border rounded-lg">
+          <div className="flex items-center justify-between mb-2">
+            <Body variant="body-sm" className="font-semibold text-gray-700">
+              {triggerText} - SweetAlert Code
+            </Body>
+            <Button onClick={function () { return navigator.clipboard.writeText(sweetAlertCode); }} variant="ghost" size="sm" title="Copy code to clipboard" className="text-xs text-blue-700 hover:bg-blue-200 bg-blue-100">
+              Copy Code
+            </Button>
+          </div>
+          <pre className="text-xs bg-white p-3 rounded border overflow-x-auto">
+            <code className="text-gray-800">{sweetAlertCode}</code>
+          </pre>
+        </div>)}
+    </div>);
 };
 // Component with eye icon to show code for all variants of a color
 var ColorVariantsWithEyeIcon = function (_a) {
@@ -152,10 +189,52 @@ var ColorVariantsWithEyeIcon = function (_a) {
     var allVariantsCode = variants
         .map(function (variant) { return generateVariantCode(variant); })
         .join("\n\n");
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Heading, { variant: "h4", className: "font-medium text-gray-700", children: colorName }), _jsx(Button, { onClick: function () { return setShowCode(!showCode); }, variant: "ghost", size: "sm", title: showCode ? "Hide Code" : "Show Code", className: "text-gray-600 hover:text-gray-800 hover:bg-gray-100", children: _jsx(LUIcon, { icon: showCode ? "eye-slash" : "eye" }) })] }), _jsx("div", { className: "flex flex-col gap-2", children: variants.map(function (variant) { return (_jsx(SweetAlertExample, { triggerText: "".concat(color, " - ").concat(variant.charAt(0).toUpperCase() + variant.slice(1)), triggerColor: color, color: color, variant: variant, icon: getIconForColor(color), title: "".concat(colorName, " Alert"), description: "This is a ".concat(color, " ").concat(variant, " variant alert."), showCancel: true, showAction: true, cancelText: "Cancel", actionText: "OK" }, variant)); }) }), showCode && (_jsxs("div", { className: "p-3 bg-gray-50 border rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs(Body, { variant: "body-sm", className: "font-semibold text-gray-700", children: [colorName, " - All Variants Code"] }), _jsx(Button, { onClick: function () { return navigator.clipboard.writeText(allVariantsCode); }, variant: "ghost", size: "sm", title: "Copy code to clipboard", className: "text-xs text-blue-700 hover:bg-blue-200 bg-blue-100", children: "Copy Code" })] }), _jsx("pre", { className: "text-xs bg-white p-3 rounded border overflow-x-auto", children: _jsx("code", { className: "text-gray-800", children: allVariantsCode }) })] }))] }));
+    return (<div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Heading variant="h4" className="font-medium text-gray-700">
+          {colorName}
+        </Heading>
+        <Button onClick={function () { return setShowCode(!showCode); }} variant="ghost" size="sm" title={showCode ? "Hide Code" : "Show Code"} className="text-gray-600 hover:text-gray-800 hover:bg-gray-100">
+          <LUIcon icon={showCode ? "eye-slash" : "eye"}/>
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {variants.map(function (variant) { return (<SweetAlertExample key={variant} triggerText={"".concat(color, " - ").concat(variant.charAt(0).toUpperCase() + variant.slice(1))} triggerColor={color} color={color} variant={variant} icon={getIconForColor(color)} title={"".concat(colorName, " Alert")} description={"This is a ".concat(color, " ").concat(variant, " variant alert.")} showCancel={true} showAction={true} cancelText="Cancel" actionText="OK"/>); })}
+      </div>
+
+      {showCode && (<div className="p-3 bg-gray-50 border rounded-lg">
+          <div className="flex items-center justify-between mb-2">
+            <Body variant="body-sm" className="font-semibold text-gray-700">
+              {colorName} - All Variants Code
+            </Body>
+            <Button onClick={function () { return navigator.clipboard.writeText(allVariantsCode); }} variant="ghost" size="sm" title="Copy code to clipboard" className="text-xs text-blue-700 hover:bg-blue-200 bg-blue-100">
+              Copy Code
+            </Button>
+          </div>
+          <pre className="text-xs bg-white p-3 rounded border overflow-x-auto">
+            <code className="text-gray-800">{allVariantsCode}</code>
+          </pre>
+        </div>)}
+    </div>);
 };
 // Template for stories with args
-var Template = function (args) { return (_jsxs(SweetAlert, { children: [_jsx(SweetAlertTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Show Sweet Alert" }) }), _jsxs(SweetAlertContent, { shadow: args.shadow, color: args.color, variant: args.variant, children: [args.icon && _jsx(SweetAlertIcon, { icon: args.icon }), _jsx(SweetAlertTitle, { children: args.title }), _jsx(SweetAlertDescription, { children: args.description }), _jsxs(SweetAlertFooter, { children: [_jsx(SweetAlertCancel, { children: args.cancelText }), _jsx(SweetAlertAction, { children: args.actionText })] })] })] })); };
+var Template = function (args) { return (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Sweet Alert
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent shadow={args.shadow} color={args.color} variant={args.variant}>
+      {args.icon && <SweetAlertIcon icon={args.icon}/>}
+      <SweetAlertTitle>{args.title}</SweetAlertTitle>
+      <SweetAlertDescription>{args.description}</SweetAlertDescription>
+      <SweetAlertFooter>
+        <SweetAlertCancel>{args.cancelText}</SweetAlertCancel>
+        <SweetAlertAction>{args.actionText}</SweetAlertAction>
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>); };
 // Default story with all controls
 export var Default = Template.bind({});
 Default.args = {
@@ -241,7 +320,25 @@ Default.argTypes = {
     },
 };
 // Simple Example showing the exact code structure
-export var Example = function () { return (_jsxs(SweetAlert, { children: [_jsx(SweetAlertTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Show Sweet Alert" }) }), _jsxs(SweetAlertContent, { color: "blue", shadow: "none", children: [_jsx(SweetAlertIcon, { icon: "info" }), _jsx(SweetAlertTitle, { children: "Update Available" }), _jsx(SweetAlertDescription, { children: "A new version of the application is available. Would you like to update now? The update includes bug fixes and performance improvements." }), _jsxs(SweetAlertFooter, { children: [_jsx(SweetAlertCancel, { children: "Later" }), _jsx(SweetAlertAction, { children: "Update Now" })] })] })] })); };
+export var Example = function () { return (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Sweet Alert
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent color="blue" shadow="none">
+      <SweetAlertIcon icon="info"/>
+      <SweetAlertTitle>Update Available</SweetAlertTitle>
+      <SweetAlertDescription>
+        A new version of the application is available. Would you like to update
+        now? The update includes bug fixes and performance improvements.
+      </SweetAlertDescription>
+      <SweetAlertFooter>
+        <SweetAlertCancel>Later</SweetAlertCancel>
+        <SweetAlertAction>Update Now</SweetAlertAction>
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>); };
 Example.parameters = {
     docs: {
         description: {
@@ -250,7 +347,25 @@ Example.parameters = {
     },
 };
 // Basic Example - Shows the actual component code
-export var BasicExample = function () { return (_jsxs(SweetAlert, { children: [_jsx(SweetAlertTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Show Basic Alert" }) }), _jsxs(SweetAlertContent, { color: "blue", shadow: "none", children: [_jsx(SweetAlertIcon, { icon: "info" }), _jsx(SweetAlertTitle, { children: "Update Available" }), _jsx(SweetAlertDescription, { children: "A new version of the application is available. Would you like to update now? The update includes bug fixes and performance improvements." }), _jsxs(SweetAlertFooter, { children: [_jsx(SweetAlertCancel, { children: "Later" }), _jsx(SweetAlertAction, { children: "Update Now" })] })] })] })); };
+export var BasicExample = function () { return (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Basic Alert
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent color="blue" shadow="none">
+      <SweetAlertIcon icon="info"/>
+      <SweetAlertTitle>Update Available</SweetAlertTitle>
+      <SweetAlertDescription>
+        A new version of the application is available. Would you like to update
+        now? The update includes bug fixes and performance improvements.
+      </SweetAlertDescription>
+      <SweetAlertFooter>
+        <SweetAlertCancel>Later</SweetAlertCancel>
+        <SweetAlertAction>Update Now</SweetAlertAction>
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>); };
 BasicExample.parameters = {
     docs: {
         description: {
@@ -258,10 +373,20 @@ BasicExample.parameters = {
         },
     },
 };
-export var AllColors = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx(Heading, { variant: "h3", className: "text-lg font-semibold", children: "All Color Variants" }), _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "Click the eye icon (\uD83D\uDC41\uFE0F) to view the code for each color variant" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: colorOptions.map(function (color) {
-                var content = getContentForColor(color);
-                return (_jsx(ColorVariantWithEyeIcon, { color: color, content: content }, color));
-            }) })] })); };
+export var AllColors = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      All Color Variants
+    </Heading>
+    <Body variant="body-sm" className="text-gray-600">
+      Click the eye icon (👁️) to view the code for each color variant
+    </Body>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {colorOptions.map(function (color) {
+        var content = getContentForColor(color);
+        return (<ColorVariantWithEyeIcon key={color} color={color} content={content}/>);
+    })}
+    </div>
+  </div>); };
 AllColors.parameters = {
     docs: {
         source: {
@@ -269,7 +394,17 @@ AllColors.parameters = {
         },
     },
 };
-export var ColorVariants = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx(Heading, { variant: "h3", className: "text-lg font-semibold", children: "Color Variant Examples" }), _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "Click the eye icon (\uD83D\uDC41\uFE0F) to view the code for each color variant" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: colorOptions.map(function (color) { return (_jsx(ColorVariantsWithEyeIcon, { color: color }, color)); }) })] })); };
+export var ColorVariants = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      Color Variant Examples
+    </Heading>
+    <Body variant="body-sm" className="text-gray-600">
+      Click the eye icon (👁️) to view the code for each color variant
+    </Body>
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      {colorOptions.map(function (color) { return (<ColorVariantsWithEyeIcon key={color} color={color}/>); })}
+    </div>
+  </div>); };
 ColorVariants.parameters = {
     docs: {
         source: {
@@ -277,7 +412,14 @@ ColorVariants.parameters = {
         },
     },
 };
-export var RealWorldExamples = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx(Heading, { variant: "h3", className: "text-lg font-semibold", children: "Real-world Use Cases" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: realWorldExamples.map(function (example, index) { return (_jsx(SweetAlertExample, { triggerText: example.triggerText, triggerColor: example.triggerColor, shadow: example.shadow, color: example.color, variant: example.variant, icon: example.icon, title: example.title, description: example.description, cancelText: example.cancelText, actionText: example.actionText, className: "w-full" }, index)); }) })] })); };
+export var RealWorldExamples = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      Real-world Use Cases
+    </Heading>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {realWorldExamples.map(function (example, index) { return (<SweetAlertExample key={index} triggerText={example.triggerText} triggerColor={example.triggerColor} shadow={example.shadow} color={example.color} variant={example.variant} icon={example.icon} title={example.title} description={example.description} cancelText={example.cancelText} actionText={example.actionText} className="w-full"/>); })}
+    </div>
+  </div>); };
 RealWorldExamples.parameters = {
     docs: {
         source: {
@@ -286,7 +428,39 @@ RealWorldExamples.parameters = {
     },
 };
 // Button Configuration Variants - Comprehensive Examples
-export var ButtonVariants = function () { return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx(Heading, { variant: "h3", className: "text-lg font-semibold", children: "Button Configuration Variants" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Heading, { variant: "h4", className: "font-medium text-gray-700", children: "Single Button (Action Only)" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(SweetAlertExample, { triggerText: "Success Message", triggerColor: "light-green", color: "green", icon: "check", title: "Message Sent", description: "Your message has been delivered successfully to all recipients.", showCancel: false, actionText: "Close" }), _jsx(SweetAlertExample, { triggerText: "Error Alert", triggerColor: "light-red", shadow: "lg", color: "red", icon: "star", title: "Connection Failed", description: "Unable to connect to the server. Please check your internet connection and try again.", showCancel: false, actionText: "Retry" }), _jsx(SweetAlertExample, { triggerText: "Installation Complete", triggerColor: "blue", color: "green", icon: "check", title: "Installation Complete", description: "The application has been successfully installed on your device. You can now start using all the features.", showCancel: false, actionText: "Start Using App" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Heading, { variant: "h4", className: "font-medium text-gray-700", children: "Both Buttons (Cancel + Action)" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(SweetAlertExample, { triggerText: "Confirm Action", triggerColor: "blue", color: "blue", icon: "info", title: "Confirm Your Action", description: "Do you want to proceed with this action? This will update your settings and preferences.", cancelText: "No, Cancel", actionText: "Yes, Proceed" }), _jsx(SweetAlertExample, { triggerText: "Delete Confirmation", triggerColor: "light-red", color: "red", icon: "star", title: "Confirm Deletion", description: "Are you sure you want to delete this item? This action cannot be undone.", cancelText: "Cancel", actionText: "Delete" }), _jsx(SweetAlertExample, { triggerText: "Save Changes", triggerColor: "blue", color: "blue", title: "Save Draft", description: "You have unsaved changes in your document. Would you like to save them as a draft before leaving?", cancelText: "Discard Changes", actionText: "Save Draft" })] })] })] })); };
+export var ButtonVariants = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      Button Configuration Variants
+    </Heading>
+
+    {/* Single Button Examples */}
+    <div className="space-y-4">
+      <Heading variant="h4" className="font-medium text-gray-700">
+        Single Button (Action Only)
+      </Heading>
+      <div className="flex flex-wrap gap-4">
+        <SweetAlertExample triggerText="Success Message" triggerColor="light-green" color="green" icon="check" title="Message Sent" description="Your message has been delivered successfully to all recipients." showCancel={false} actionText="Close"/>
+
+        <SweetAlertExample triggerText="Error Alert" triggerColor="light-red" shadow="lg" color="red" icon="star" title="Connection Failed" description="Unable to connect to the server. Please check your internet connection and try again." showCancel={false} actionText="Retry"/>
+
+        <SweetAlertExample triggerText="Installation Complete" triggerColor="blue" color="green" icon="check" title="Installation Complete" description="The application has been successfully installed on your device. You can now start using all the features." showCancel={false} actionText="Start Using App"/>
+      </div>
+    </div>
+
+    {/* Both Buttons Examples */}
+    <div className="space-y-4">
+      <Heading variant="h4" className="font-medium text-gray-700">
+        Both Buttons (Cancel + Action)
+      </Heading>
+      <div className="flex flex-wrap gap-4">
+        <SweetAlertExample triggerText="Confirm Action" triggerColor="blue" color="blue" icon="info" title="Confirm Your Action" description="Do you want to proceed with this action? This will update your settings and preferences." cancelText="No, Cancel" actionText="Yes, Proceed"/>
+
+        <SweetAlertExample triggerText="Delete Confirmation" triggerColor="light-red" color="red" icon="star" title="Confirm Deletion" description="Are you sure you want to delete this item? This action cannot be undone." cancelText="Cancel" actionText="Delete"/>
+
+        <SweetAlertExample triggerText="Save Changes" triggerColor="blue" color="blue" title="Save Draft" description="You have unsaved changes in your document. Would you like to save them as a draft before leaving?" cancelText="Discard Changes" actionText="Save Draft"/>
+      </div>
+    </div>
+  </div>); };
 ButtonVariants.parameters = {
     docs: {
         source: {
@@ -295,7 +469,33 @@ ButtonVariants.parameters = {
     },
 };
 // Story showing how to customize the SweetAlert
-export var CustomizeAlert = function () { return (_jsxs(SweetAlert, { children: [_jsx(SweetAlertTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", color: "blue", children: "Customize Alert" }) }), _jsxs(SweetAlertContent, { color: "red", shadow: "lg", variant: "fill", children: [_jsx(SweetAlertIcon, { icon: "info" }), _jsx(SweetAlertTitle, { children: _jsx(Heading, { variant: "h1-700", children: "Customize Alert Title" }) }), _jsx(SweetAlertDescription, { children: _jsx(Body, { variant: "body-xs", children: "This SweetAlert uses customized styling with a red background, large icon, and custom typography." }) }), _jsxs(SweetAlertFooter, { children: [_jsx(SweetAlertCancel, { variant: "fill", color: "light-indigo", children: "Close" }), _jsx(SweetAlertAction, { variant: "outline", color: "light-green", children: "OK" })] })] })] })); };
+export var CustomizeAlert = function () { return (<SweetAlert>
+    <SweetAlertTrigger asChild>
+      <Button variant="outline" color="blue">
+        Customize Alert
+      </Button>
+    </SweetAlertTrigger>
+    <SweetAlertContent color="red" shadow="lg" variant="fill">
+      <SweetAlertIcon icon="info"/>
+      <SweetAlertTitle>
+        <Heading variant="h1-700">Customize Alert Title</Heading>
+      </SweetAlertTitle>
+      <SweetAlertDescription>
+        <Body variant="body-xs">
+          This SweetAlert uses customized styling with a red background, large
+          icon, and custom typography.
+        </Body>
+      </SweetAlertDescription>
+      <SweetAlertFooter>
+        <SweetAlertCancel variant="fill" color="light-indigo">
+          Close
+        </SweetAlertCancel>
+        <SweetAlertAction variant="outline" color="light-green">
+          OK
+        </SweetAlertAction>
+      </SweetAlertFooter>
+    </SweetAlertContent>
+  </SweetAlert>); };
 CustomizeAlert.parameters = {
     docs: {
         description: {

package/dist/src/components/Switch/{Switch.stories.js → Switch.stories.jsx}

@@ -1,22 +1,10 @@
-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 } from "react/jsx-runtime";
 import { size, Switch, variant } from "./switch";
 export default {
     title: "Components/Switch",
     component: Switch,
     tags: ["autodocs"],
 };
-var Template = function (args) { return _jsx(Switch, __assign({}, args)); };
+var Template = function (args) { return <Switch {...args}></Switch>; };
 export var _Switch = Template.bind({});
 _Switch.args = {
     size: "md",

package/dist/src/components/Switch/switch.d.ts

@@ -18,5 +18,5 @@ declare const switchVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, VariantProps<typeof switchVariants> {
 }
-declare function Switch({ className, size, variant, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+declare function Switch({ className, size, variant, ...props }: SwitchProps): React.JSX.Element;
 export { Switch };

package/dist/src/components/Switch/{switch.js → switch.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,7 @@ 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 SwitchPrimitive from "@radix-ui/react-switch";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -65,6 +54,8 @@ var thumbTranslateVariants = {
 };
 function Switch(_a) {
     var className = _a.className, size = _a.size, variant = _a.variant, props = __rest(_a, ["className", "size", "variant"]);
-    return (_jsx(SwitchPrimitive.Root, __assign({ "data-slot": "switch", className: cn(switchVariants({ size: size, variant: variant }), className) }, props, { children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn(thumbVariants({ size: size }), size ? thumbTranslateVariants[size] : "", "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground") }) })));
+    return (<SwitchPrimitive.Root data-slot="switch" className={cn(switchVariants({ size: size, variant: variant }), className)} {...props}>
+      <SwitchPrimitive.Thumb data-slot="switch-thumb" className={cn(thumbVariants({ size: size }), size ? thumbTranslateVariants[size] : "", "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground")}/>
+    </SwitchPrimitive.Root>);
 }
 export { Switch };