npm - linkedunion-design-kit - Versions diffs - 1.9.2 → 1.9.4 - Mend

linkedunion-design-kit 1.9.2 → 1.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/dist/src/components/Alerts/AlertDialog/alert-dialog.stories.jsx ADDED Viewed

@@ -0,0 +1,552 @@
+import { useState } from "react";
+import { Button } from "../../Button/Button/Button";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, colorOptions, sizeOptions, shadowOptions, variantOptions, getButtonColor, getIconForColor, getContentForColor, sizeExamples, shadowExamples, realWorldExamples, } from "./index";
+import LUIcon from "../../Icons/LUIcon";
+export default {
+    title: "Components/Alert/AlertDialog",
+    component: AlertDialog,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "A modal dialog that interrupts the user with important content and expects a response. Built with Radix UI primitives.",
+            },
+        },
+    },
+};
+// Component with eye icon to show code
+var ColorVariantWithEyeIcon = function (_a) {
+    var color = _a.color, content = _a.content;
+    var _b = useState(false), showCode = _b[0], setShowCode = _b[1];
+    var triggerText = color.charAt(0).toUpperCase() + color.slice(1).replace("-", " ");
+    var alertDialogCode = "<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button variant=\"outline\" color=\"".concat(getButtonColor(color), "\">\n      ").concat(triggerText, "\n    </Button>\n  </AlertDialogTrigger>\n  <AlertDialogContent color=\"").concat(color, "\">\n    <AlertDialogHeader>\n      <LUIcon icon=\"").concat(getIconForColor(color), "\" variant=\"padded\" />\n      <AlertDialogTitle>").concat(content.title, "</AlertDialogTitle>\n      <AlertDialogDescription>\n        ").concat(content.description, "\n      </AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogFooter>\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\n      <AlertDialogAction>").concat(content.button, "</AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>");
+    return (<div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <div className="flex-1">
+          <AlertDialogExample triggerText={triggerText} triggerColor={getButtonColor(color)} color={color} 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} - AlertDialog Code
+            </Body>
+            <Button onClick={function () { return navigator.clipboard.writeText(alertDialogCode); }} 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">{alertDialogCode}</code>
+          </pre>
+        </div>)}
+    </div>);
+};
+// Component with eye icon to show size code
+var SizeVariantWithEyeIcon = function (_a) {
+    var sizeExample = _a.sizeExample;
+    var _b = useState(false), showCode = _b[0], setShowCode = _b[1];
+    var alertDialogCode = "<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button variant=\"outline\" color=\"blue\">\n      ".concat(sizeExample.triggerText, "\n    </Button>\n  </AlertDialogTrigger>\n  <AlertDialogContent size=\"").concat(sizeExample.size, "\" color=\"blue\">\n    <AlertDialogHeader>\n      <LUIcon icon=\"").concat(sizeExample.icon, "\" variant=\"padded\" />\n      <AlertDialogTitle>").concat(sizeExample.title, "</AlertDialogTitle>\n      <AlertDialogDescription>\n        ").concat(sizeExample.description, "\n      </AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogFooter>\n      <AlertDialogCancel>").concat(sizeExample.cancelText, "</AlertDialogCancel>\n      <AlertDialogAction>").concat(sizeExample.actionText, "</AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>");
+    return (<div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <div className="flex-1">
+          <AlertDialogExample triggerText={sizeExample.triggerText} triggerColor="blue" size={sizeExample.size} color="blue" icon={sizeExample.icon} title={sizeExample.title} description={sizeExample.description} cancelText={sizeExample.cancelText} actionText={sizeExample.actionText}/>
+        </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">
+              {sizeExample.size.toUpperCase()} Size - AlertDialog Code
+            </Body>
+            <Button onClick={function () { return navigator.clipboard.writeText(alertDialogCode); }} 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">{alertDialogCode}</code>
+          </pre>
+        </div>)}
+    </div>);
+};
+// Component with eye icon to show shadow code
+var ShadowVariantWithEyeIcon = function (_a) {
+    var shadowExample = _a.shadowExample;
+    var _b = useState(false), showCode = _b[0], setShowCode = _b[1];
+    var alertDialogCode = "<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button variant=\"outline\" color=\"blue\">\n      ".concat(shadowExample.triggerText, "\n    </Button>\n  </AlertDialogTrigger>\n  <AlertDialogContent shadow=\"").concat(shadowExample.shadow, "\" color=\"blue\">\n    <AlertDialogHeader>\n      <LUIcon icon=\"").concat(shadowExample.icon, "\" variant=\"padded\" />\n      <AlertDialogTitle>").concat(shadowExample.title, "</AlertDialogTitle>\n      <AlertDialogDescription>\n        ").concat(shadowExample.description, "\n      </AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogFooter>\n      <AlertDialogCancel>").concat(shadowExample.cancelText, "</AlertDialogCancel>\n      <AlertDialogAction>").concat(shadowExample.actionText, "</AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>");
+    return (<div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <div className="flex-1">
+          <AlertDialogExample triggerText={shadowExample.triggerText} triggerColor="blue" shadow={shadowExample.shadow} color="blue" icon={shadowExample.icon} title={shadowExample.title} description={shadowExample.description} cancelText={shadowExample.cancelText} actionText={shadowExample.actionText}/>
+        </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">
+              {shadowExample.shadow === "none" ? "No Shadow" : "Large Shadow"} -
+              AlertDialog Code
+            </Body>
+            <Button onClick={function () { return navigator.clipboard.writeText(alertDialogCode); }} 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">{alertDialogCode}</code>
+          </pre>
+        </div>)}
+    </div>);
+};
+// Reusable AlertDialog component
+var AlertDialogExample = function (_a) {
+    var triggerText = _a.triggerText, triggerColor = _a.triggerColor, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.shadow, shadow = _c === void 0 ? "none" : _c, color = _a.color, variant = _a.variant, 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 (<AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button size={size} variant="outline" color={triggerColor ? triggerColor : getButtonColor(color)} className={className}>
+        {triggerText}
+      </Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent size={size} shadow={shadow} color={color} variant={variant}>
+      <AlertDialogHeader>
+        {icon && <LUIcon icon={icon} variant="padded"/>}
+        <AlertDialogTitle>{title}</AlertDialogTitle>
+        <AlertDialogDescription>{description}</AlertDialogDescription>
+      </AlertDialogHeader>
+      {(showCancel || showAction) && (<AlertDialogFooter>
+          {showCancel && (<AlertDialogCancel>{cancelText || "Cancel"}</AlertDialogCancel>)}
+          {showAction && (<AlertDialogAction>{actionText || "OK"}</AlertDialogAction>)}
+        </AlertDialogFooter>)}
+    </AlertDialogContent>
+  </AlertDialog>);
+};
+// Template for stories with args - Using actual AlertDialog components
+var Template = function (args) { return (<AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Alert Dialog
+      </Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent size={args.size} shadow={args.shadow} color={args.color} variant={args.variant}>
+      <AlertDialogHeader>
+        {args.Icon && <LUIcon icon={args.Icon} variant="padded"/>}
+        <AlertDialogTitle>{args.title}</AlertDialogTitle>
+        <AlertDialogDescription>{args.description}</AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>{args.cancelText}</AlertDialogCancel>
+        <AlertDialogAction>{args.actionText}</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>); };
+// Default story with all controls
+export var Default = Template.bind({});
+Default.args = {
+    size: "md",
+    shadow: "none",
+    color: "blue",
+    variant: "outline",
+    Icon: "info",
+    title: "Update Available",
+    description: "A new version of the application is available. Would you like to update now? The update includes bug fixes and performance improvements.",
+    cancelText: "Later",
+    actionText: "Update Now",
+};
+Default.argTypes = {
+    size: {
+        control: { type: "select" },
+        options: sizeOptions,
+        description: "Size variant for AlertDialogContent",
+        table: {
+            defaultValue: { summary: "md" },
+            type: { summary: "enum" },
+            category: "AlertDialogContent",
+        },
+    },
+    shadow: {
+        control: { type: "select" },
+        options: shadowOptions,
+        description: "Shadow variant for AlertDialogContent",
+        table: {
+            defaultValue: { summary: "none" },
+            type: { summary: "enum" },
+            category: "AlertDialogContent",
+        },
+    },
+    color: {
+        control: { type: "select" },
+        options: colorOptions,
+        description: "Color theme for AlertDialogContent",
+        table: {
+            defaultValue: { summary: "blue" },
+            type: { summary: "enum" },
+            category: "AlertDialogContent",
+        },
+    },
+    variant: {
+        control: { type: "select" },
+        options: variantOptions,
+        description: "Variant for AlertDialogContent (outline | fill)",
+        table: {
+            defaultValue: { summary: "outline" },
+            type: { summary: "enum" },
+            category: "AlertDialogContent",
+        },
+    },
+    Icon: {
+        control: { type: "text" },
+        description: "Icon to display in AlertDialogHeader (LUIcon name)",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogHeader",
+        },
+    },
+    title: {
+        control: { type: "text" },
+        description: "Title text for AlertDialogTitle",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogTitle",
+        },
+    },
+    description: {
+        control: { type: "text" },
+        description: "Description text for AlertDialogDescription",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogDescription",
+        },
+    },
+    cancelText: {
+        control: { type: "text" },
+        description: "Text for AlertDialogCancel button",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogCancel",
+        },
+    },
+    actionText: {
+        control: { type: "text" },
+        description: "Text for AlertDialogAction button",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDialogAction",
+        },
+    },
+};
+// Simple Example showing the exact code structure
+export var Example = function () { return (<AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Alert Dialog
+      </Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent color="blue" size="md" shadow="none">
+      <AlertDialogHeader>
+        <LUIcon icon="info" variant="padded"/>
+        <AlertDialogTitle>Update Available</AlertDialogTitle>
+        <AlertDialogDescription>
+          A new version of the application is available. Would you like to
+          update now? The update includes bug fixes and performance
+          improvements.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Later</AlertDialogCancel>
+        <AlertDialogAction>Update Now</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>); };
+Example.parameters = {
+    docs: {
+        description: {
+            story: "This example shows the exact code structure you should use to implement the AlertDialog component.",
+        },
+    },
+};
+// Basic Example - Shows the actual component code
+export var BasicExample = function () { return (<AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Basic Alert
+      </Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent color="blue" size="md" shadow="none">
+      <AlertDialogHeader>
+        <LUIcon icon="info" variant="padded"/>
+        <AlertDialogTitle>Update Available</AlertDialogTitle>
+        <AlertDialogDescription>
+          A new version of the application is available. Would you like to
+          update now? The update includes bug fixes and performance
+          improvements.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Later</AlertDialogCancel>
+        <AlertDialogAction>Update Now</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>); };
+BasicExample.parameters = {
+    docs: {
+        description: {
+            story: "Basic AlertDialog example showing the actual component structure.",
+        },
+    },
+};
+export var AllSizes = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      All Size Variants
+    </Heading>
+    <Body variant="body-sm" className="text-gray-600">
+      Click the eye icon (👁️) to view the code for each size variant
+    </Body>
+    <div className="space-y-6">
+      {sizeExamples.map(function (example, index) { return (<SizeVariantWithEyeIcon key={index} sizeExample={example}/>); })}
+    </div>
+  </div>); };
+AllSizes.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Story showing both padded and default icon variants side-by-side
+export var IconPaddedAndDefault = function () { return (<div className="flex flex-col gap-6 md:flex-row md:items-start md:gap-4">
+    <div className="flex-1">
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" color="blue">
+            Padded Icon
+          </Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent color="blue" size="md">
+          <AlertDialogHeader>
+            <LUIcon icon="info" color="light-blue" variant="padded"/>
+            <AlertDialogTitle>Padded Icon</AlertDialogTitle>
+            <AlertDialogDescription>
+              This AlertDialog uses a padded icon (icon with background). The
+              icon size remains fixed.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Close</AlertDialogCancel>
+            <AlertDialogAction>OK</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+    <div className="flex-1">
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" color="blue">
+            Default Icon
+          </Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent color="blue" size="md">
+          <AlertDialogHeader>
+            <LUIcon icon="info" variant="default"/>
+            <AlertDialogTitle>Default Icon</AlertDialogTitle>
+            <AlertDialogDescription>
+              This AlertDialog uses the default (non-padded) icon.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Close</AlertDialogCancel>
+            <AlertDialogAction>OK</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  </div>); };
+export var AllShadows = function () { return (<div className="flex flex-col gap-8">
+    <Heading variant="h3" className="text-lg font-semibold">
+      All Shadow Variants
+    </Heading>
+    <Body variant="body-sm" className="text-gray-600">
+      Click the eye icon (👁️) to view the code for each shadow variant
+    </Body>
+    <div className="space-y-6">
+      {shadowExamples.map(function (example, index) { return (<ShadowVariantWithEyeIcon key={index} shadowExample={example}/>); })}
+    </div>
+  </div>); };
+AllShadows.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+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: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Essential Layout Variants
+export var WithoutIcon = function () { return (<AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline" color="blue">
+        Show Alert Dialog
+      </Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent color="blue">
+      <AlertDialogHeader>
+        <AlertDialogTitle>Save Draft</AlertDialogTitle>
+        <AlertDialogDescription>
+          You have unsaved changes in your document. Would you like to save them
+          as a draft before leaving?
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Discard Changes</AlertDialogCancel>
+        <AlertDialogAction>Save Draft</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>); };
+export var SingleActionButton = function () { return (<AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline" color="green">
+        Show Success Message
+      </Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent color="green">
+      <AlertDialogHeader>
+        <LUIcon icon="check" variant="padded"/>
+        <AlertDialogTitle>Success!</AlertDialogTitle>
+        <AlertDialogDescription>
+          Your message has been sent successfully.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction>Close</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>); };
+export var RealWorldUseCases = 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 (<AlertDialogExample key={index} triggerText={example.triggerText} triggerColor={example.triggerColor} size={example.size} shadow={example.shadow} color={example.color} icon={example.icon} title={example.title} description={example.description} cancelText={example.cancelText} actionText={example.actionText} className="w-full"/>); })}
+    </div>
+  </div>); };
+RealWorldUseCases.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Button Configuration Variants - Comprehensive Examples
+var ButtonVariantsTemplate = 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">
+        <AlertDialogExample triggerText="Success Message" triggerColor="light-green" size="md" color="green" icon="check" title="Message Sent" description="Your message has been delivered successfully to all recipients." showCancel={false} actionText="Close"/>
+        <AlertDialogExample triggerText="Error Alert" triggerColor="light-red" size="md" shadow="lg" color="red" icon="circle-exclamation" title="Connection Failed" description="Unable to connect to the server. Please check your internet connection and try again." showCancel={false} actionText="Retry"/>
+        <AlertDialogExample triggerText="Installation Complete" triggerColor="blue" size="md" 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">
+        <AlertDialogExample triggerText="Confirm Action" triggerColor="blue" size="md" 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"/>
+        <AlertDialogExample triggerText="Delete Confirmation" triggerColor="light-red" size="md" color="red" icon="circle-exclamation" title="Confirm Deletion" description="Are you sure you want to delete this item? This action cannot be undone." cancelText="Cancel" actionText="Delete"/>
+        <AlertDialogExample triggerText="Save Changes" triggerColor="blue" size="md" 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>
+    {/* No Buttons Examples */}
+    <div className="space-y-4">
+      <Heading variant="h4" className="font-medium text-gray-700">
+        No Buttons (Information Only)
+      </Heading>
+      <div className="flex flex-wrap gap-4">
+        <AlertDialogExample triggerText="Loading State" triggerColor="blue" size="sm" color="blue" icon="clock" title="Syncing..." description="Synchronizing your data with the cloud. Please wait." showCancel={false} showAction={false}/>
+        <AlertDialogExample triggerText="System Info" triggerColor="yellow" size="md" color="yellow" icon="info" title="System Information" description="Server maintenance is currently in progress. Some features may be temporarily unavailable. We apologize for any inconvenience." showCancel={false} showAction={false}/>
+        <AlertDialogExample triggerText="Processing" triggerColor="yellow" size="md" color="yellow" icon="clock" title="Processing Your Request" description="Please wait while we process your request. This may take a few moments. Do not close this window." showCancel={false} showAction={false}/>
+      </div>
+    </div>
+  </div>); };
+export var ButtonVariants = ButtonVariantsTemplate.bind({});
+ButtonVariants.parameters = {
+    docs: {
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+// Story showing both padded and default icon variants side-by-side
+export var CustomizeAlert = function () { return (<AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline" color="blue">
+        Customize Alert
+      </Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent color="red" size="md">
+      <AlertDialogHeader>
+        <LUIcon icon="info" size="9xl" color="light-red" variant="padded"/>
+        <AlertDialogTitle>
+          <Heading variant="h1-700"> Customize Alert Title</Heading>
+        </AlertDialogTitle>
+        <AlertDialogDescription>
+          <Body variant="body-xs">
+            This AlertDialog uses a Customize Alert Icon.
+          </Body>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel variant="fill" color="indigo">
+          Close
+        </AlertDialogCancel>
+        <AlertDialogAction variant="outline" color="light-green">
+          OK
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>); };

package/dist/src/components/AppIcons/AndroidIcon.jsx ADDED Viewed

@@ -0,0 +1,24 @@
+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 React from "react";
+var AndroidIcon = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? "177" : _b, _c = _a.height, height = _c === void 0 ? "60" : _c, _d = _a.fill, fill = _d === void 0 ? "#000000" : _d, _e = _a.textFill, textFill = _e === void 0 ? "#ffffff" : _e, _f = _a.iconFill, iconFill = _f === void 0 ? textFill : _f, className = _a.className, _g = _a.stroke, stroke = _g === void 0 ? textFill : _g, props = __rest(_a, ["width", "height", "fill", "textFill", "iconFill", "className", "stroke"]);
+    return (<svg width={width} height={height} viewBox="0 0 177 59" fill={fill} xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+      <path d="M2 0.5H175C175.828 0.5 176.5 1.17157 176.5 2V57C176.5 57.8284 175.828 58.5 175 58.5H2C1.17157 58.5 0.5 57.8284 0.5 57V2C0.5 1.17157 1.17157 0.5 2 0.5Z" stroke={stroke}/>
+      <g>
+        <path d="M31.3639 33.9716C31.1002 33.9716 30.8424 33.8934 30.6231 33.7469C30.4039 33.6004 30.233 33.3922 30.132 33.1485C30.0311 32.9049 30.0047 32.6368 30.0562 32.3782C30.1076 32.1195 30.2346 31.882 30.4211 31.6955C30.6075 31.509 30.8451 31.382 31.1038 31.3306C31.3624 31.2791 31.6305 31.3055 31.8741 31.4065C32.1178 31.5074 32.326 31.6783 32.4725 31.8975C32.619 32.1168 32.6972 32.3746 32.6972 32.6383C32.6972 32.9919 32.5567 33.3311 32.3067 33.5811C32.0567 33.8312 31.7175 33.9716 31.3639 33.9716ZM16.6361 33.9716C16.3724 33.9716 16.1146 33.8934 15.8954 33.7469C15.6761 33.6004 15.5052 33.3922 15.4043 33.1485C15.3034 32.9049 15.277 32.6368 15.3284 32.3782C15.3798 32.1195 15.5068 31.882 15.6933 31.6955C15.8798 31.509 16.1173 31.382 16.376 31.3306C16.6346 31.2791 16.9027 31.3055 17.1464 31.4065C17.39 31.5074 17.5982 31.6783 17.7447 31.8975C17.8912 32.1168 17.9694 32.3746 17.9694 32.6383C17.9694 32.9919 17.829 33.3311 17.5789 33.5811C17.3289 33.8312 16.9897 33.9716 16.6361 33.9716ZM31.8417 25.945L34.505 21.3339C34.5474 21.2707 34.5763 21.1995 34.5901 21.1247C34.6038 21.0499 34.6021 20.9731 34.5849 20.899C34.5678 20.8249 34.5356 20.7552 34.4904 20.694C34.4452 20.6329 34.3879 20.5816 34.3221 20.5435C34.2563 20.5054 34.1833 20.4812 34.1078 20.4725C34.0322 20.4637 33.9557 20.4705 33.8829 20.4925C33.8101 20.5145 33.7426 20.5513 33.6846 20.6004C33.6265 20.6496 33.5792 20.7101 33.5456 20.7783L30.8489 25.4489C28.6948 24.4828 26.3608 23.9833 24 23.9833C21.6392 23.9833 19.3052 24.4828 17.1511 25.4489L14.4544 20.7783C14.4208 20.7101 14.3735 20.6496 14.3154 20.6004C14.2574 20.5513 14.1899 20.5145 14.1171 20.4925C14.0443 20.4705 13.9678 20.4637 13.8922 20.4725C13.8167 20.4812 13.7438 20.5054 13.6779 20.5435C13.6121 20.5816 13.5548 20.6329 13.5096 20.694C13.4644 20.7552 13.4322 20.8249 13.4151 20.899C13.3979 20.9731 13.3962 21.0499 13.4099 21.1247C13.4237 21.1995 13.4526 21.2707 13.495 21.3339L16.1583 25.945C11.585 28.4322 8.45778 33.0616 8 38.5311H40C39.5422 33.0616 36.4144 28.4322 31.8417 25.945Z" fill={iconFill}/>
+      </g>
+      <path d="M56.47 12.07C56.1993 11.5007 55.8073 11.062 55.294 10.754C54.7807 10.4367 54.1833 10.278 53.502 10.278C52.8207 10.278 52.2047 10.4367 51.654 10.754C51.1127 11.062 50.6833 11.51 50.366 12.098C50.058 12.6767 49.904 13.3487 49.904 14.114C49.904 14.8793 50.058 15.5513 50.366 16.13C50.6833 16.7087 51.1127 17.1567 51.654 17.474C52.2047 17.782 52.8207 17.936 53.502 17.936C54.454 17.936 55.238 17.6513 55.854 17.082C56.47 16.5127 56.8293 15.7427 56.932 14.772H53.04V13.736H58.29V14.716C58.2153 15.5187 57.9633 16.256 57.534 16.928C57.1047 17.5907 56.54 18.118 55.84 18.51C55.14 18.8927 54.3607 19.084 53.502 19.084C52.5967 19.084 51.7707 18.874 51.024 18.454C50.2773 18.0247 49.6847 17.432 49.246 16.676C48.8167 15.92 48.602 15.066 48.602 14.114C48.602 13.162 48.8167 12.308 49.246 11.552C49.6847 10.7867 50.2773 10.194 51.024 9.774C51.7707 9.34467 52.5967 9.13 53.502 9.13C54.538 9.13 55.4527 9.38667 56.246 9.9C57.0487 10.4133 57.632 11.1367 57.996 12.07H56.47ZM66.9745 14.87C66.9745 15.1127 66.9605 15.3693 66.9325 15.64H60.8005C60.8472 16.396 61.1038 16.9887 61.5705 17.418C62.0465 17.838 62.6205 18.048 63.2925 18.048C63.8432 18.048 64.3005 17.922 64.6645 17.67C65.0378 17.4087 65.2992 17.0633 65.4485 16.634H66.8205C66.6152 17.3713 66.2045 17.9733 65.5885 18.44C64.9725 18.8973 64.2072 19.126 63.2925 19.126C62.5645 19.126 61.9112 18.9627 61.3325 18.636C60.7632 18.3093 60.3152 17.8473 59.9885 17.25C59.6618 16.6433 59.4985 15.9433 59.4985 15.15C59.4985 14.3567 59.6572 13.6613 59.9745 13.064C60.2918 12.4667 60.7352 12.0093 61.3045 11.692C61.8832 11.3653 62.5458 11.202 63.2925 11.202C64.0205 11.202 64.6645 11.3607 65.2245 11.678C65.7845 11.9953 66.2138 12.434 66.5125 12.994C66.8205 13.5447 66.9745 14.17 66.9745 14.87ZM65.6585 14.604C65.6585 14.1187 65.5512 13.7033 65.3365 13.358C65.1218 13.0033 64.8278 12.7373 64.4545 12.56C64.0905 12.3733 63.6845 12.28 63.2365 12.28C62.5925 12.28 62.0418 12.4853 61.5845 12.896C61.1365 13.3067 60.8798 13.876 60.8145 14.604H65.6585ZM70.2101 12.378V16.9C70.2101 17.2733 70.2895 17.5393 70.4481 17.698C70.6068 17.8473 70.8821 17.922 71.2741 17.922H72.2121V19H71.0641C70.3548 19 69.8228 18.8367 69.4681 18.51C69.1135 18.1833 68.9361 17.6467 68.9361 16.9V12.378H67.9421V11.328H68.9361V9.396H70.2101V11.328H72.2121V12.378H70.2101ZM78.1462 10.082C77.9035 10.082 77.6982 9.998 77.5302 9.83C77.3622 9.662 77.2782 9.45667 77.2782 9.214C77.2782 8.97133 77.3622 8.766 77.5302 8.598C77.6982 8.43 77.9035 8.346 78.1462 8.346C78.3795 8.346 78.5755 8.43 78.7342 8.598C78.9022 8.766 78.9862 8.97133 78.9862 9.214C78.9862 9.45667 78.9022 9.662 78.7342 9.83C78.5755 9.998 78.3795 10.082 78.1462 10.082ZM78.7622 11.328V19H77.4882V11.328H78.7622ZM82.4875 12.378V16.9C82.4875 17.2733 82.5668 17.5393 82.7255 17.698C82.8841 17.8473 83.1595 17.922 83.5515 17.922H84.4895V19H83.3415C82.6321 19 82.1001 18.8367 81.7455 18.51C81.3908 18.1833 81.2135 17.6467 81.2135 16.9V12.378H80.2195V11.328H81.2135V9.396H82.4875V11.328H84.4895V12.378H82.4875ZM93.1115 19.126C92.3928 19.126 91.7395 18.9627 91.1515 18.636C90.5728 18.3093 90.1155 17.8473 89.7795 17.25C89.4528 16.6433 89.2895 15.9433 89.2895 15.15C89.2895 14.366 89.4575 13.6753 89.7935 13.078C90.1388 12.4713 90.6055 12.0093 91.1935 11.692C91.7815 11.3653 92.4395 11.202 93.1675 11.202C93.8955 11.202 94.5535 11.3653 95.1415 11.692C95.7295 12.0093 96.1915 12.4667 96.5275 13.064C96.8728 13.6613 97.0455 14.3567 97.0455 15.15C97.0455 15.9433 96.8682 16.6433 96.5135 17.25C96.1682 17.8473 95.6968 18.3093 95.0995 18.636C94.5022 18.9627 93.8395 19.126 93.1115 19.126ZM93.1115 18.006C93.5688 18.006 93.9982 17.8987 94.3995 17.684C94.8008 17.4693 95.1228 17.1473 95.3655 16.718C95.6175 16.2887 95.7435 15.766 95.7435 15.15C95.7435 14.534 95.6222 14.0113 95.3795 13.582C95.1368 13.1527 94.8195 12.8353 94.4275 12.63C94.0355 12.4153 93.6108 12.308 93.1535 12.308C92.6868 12.308 92.2575 12.4153 91.8655 12.63C91.4828 12.8353 91.1748 13.1527 90.9415 13.582C90.7082 14.0113 90.5915 14.534 90.5915 15.15C90.5915 15.7753 90.7035 16.3027 90.9275 16.732C91.1608 17.1613 91.4688 17.4833 91.8515 17.698C92.2342 17.9033 92.6542 18.006 93.1115 18.006ZM102.459 11.188C103.392 11.188 104.148 11.4727 104.727 12.042C105.305 12.602 105.595 13.414 105.595 14.478V19H104.335V14.66C104.335 13.8947 104.143 13.3113 103.761 12.91C103.378 12.4993 102.855 12.294 102.193 12.294C101.521 12.294 100.984 12.504 100.583 12.924C100.191 13.344 99.9946 13.9553 99.9946 14.758V19H98.7206V11.328H99.9946V12.42C100.247 12.028 100.587 11.7247 101.017 11.51C101.455 11.2953 101.936 11.188 102.459 11.188Z" fill={textFill}/>
+      <path d="M57.88 44.16H52.06L51.06 47H48.68L53.66 33.08H56.3L61.28 47H58.88L57.88 44.16ZM57.24 42.3L54.98 35.84L52.7 42.3H57.24ZM69.0053 35.8C69.872 35.8 70.6453 35.98 71.3253 36.34C72.0186 36.7 72.5586 37.2333 72.9453 37.94C73.332 38.6467 73.5253 39.5 73.5253 40.5V47H71.2653V40.84C71.2653 39.8533 71.0186 39.1 70.5253 38.58C70.032 38.0467 69.3586 37.78 68.5053 37.78C67.652 37.78 66.972 38.0467 66.4653 38.58C65.972 39.1 65.7253 39.8533 65.7253 40.84V47H63.4453V35.98H65.7253V37.24C66.0986 36.7867 66.572 36.4333 67.1453 36.18C67.732 35.9267 68.352 35.8 69.0053 35.8ZM75.6736 41.44C75.6736 40.3333 75.9003 39.3533 76.3536 38.5C76.8203 37.6467 77.4469 36.9867 78.2336 36.52C79.0336 36.04 79.9203 35.8 80.8936 35.8C81.6136 35.8 82.3203 35.96 83.0136 36.28C83.7203 36.5867 84.2803 37 84.6936 37.52V32.2H86.9936V47H84.6936V45.34C84.3203 45.8733 83.8003 46.3133 83.1336 46.66C82.4803 47.0067 81.7269 47.18 80.8736 47.18C79.9136 47.18 79.0336 46.94 78.2336 46.46C77.4469 45.9667 76.8203 45.2867 76.3536 44.42C75.9003 43.54 75.6736 42.5467 75.6736 41.44ZM84.6936 41.48C84.6936 40.72 84.5336 40.06 84.2136 39.5C83.9069 38.94 83.5003 38.5133 82.9936 38.22C82.4869 37.9267 81.9403 37.78 81.3536 37.78C80.7669 37.78 80.2203 37.9267 79.7136 38.22C79.2069 38.5 78.7936 38.92 78.4736 39.48C78.1669 40.0267 78.0136 40.68 78.0136 41.44C78.0136 42.2 78.1669 42.8667 78.4736 43.44C78.7936 44.0133 79.2069 44.4533 79.7136 44.76C80.2336 45.0533 80.7803 45.2 81.3536 45.2C81.9403 45.2 82.4869 45.0533 82.9936 44.76C83.5003 44.4667 83.9069 44.04 84.2136 43.48C84.5336 42.9067 84.6936 42.24 84.6936 41.48ZM92.2683 37.58C92.6016 37.02 93.0416 36.5867 93.5883 36.28C94.1483 35.96 94.8083 35.8 95.5683 35.8V38.16H94.9883C94.0949 38.16 93.4149 38.3867 92.9483 38.84C92.4949 39.2933 92.2683 40.08 92.2683 41.2V47H89.9883V35.98H92.2683V37.58ZM102.444 47.18C101.404 47.18 100.464 46.9467 99.6241 46.48C98.7841 46 98.1241 45.3333 97.6441 44.48C97.1641 43.6133 96.9241 42.6133 96.9241 41.48C96.9241 40.36 97.1707 39.3667 97.6641 38.5C98.1574 37.6333 98.8307 36.9667 99.6841 36.5C100.537 36.0333 101.491 35.8 102.544 35.8C103.597 35.8 104.551 36.0333 105.404 36.5C106.257 36.9667 106.931 37.6333 107.424 38.5C107.917 39.3667 108.164 40.36 108.164 41.48C108.164 42.6 107.911 43.5933 107.404 44.46C106.897 45.3267 106.204 46 105.324 46.48C104.457 46.9467 103.497 47.18 102.444 47.18ZM102.444 45.2C103.031 45.2 103.577 45.06 104.084 44.78C104.604 44.5 105.024 44.08 105.344 43.52C105.664 42.96 105.824 42.28 105.824 41.48C105.824 40.68 105.671 40.0067 105.364 39.46C105.057 38.9 104.651 38.48 104.144 38.2C103.637 37.92 103.091 37.78 102.504 37.78C101.917 37.78 101.371 37.92 100.864 38.2C100.371 38.48 99.9774 38.9 99.6841 39.46C99.3907 40.0067 99.2441 40.68 99.2441 41.48C99.2441 42.6667 99.5441 43.5867 100.144 44.24C100.757 44.88 101.524 45.2 102.444 45.2ZM111.578 34.52C111.165 34.52 110.818 34.38 110.538 34.1C110.258 33.82 110.118 33.4733 110.118 33.06C110.118 32.6467 110.258 32.3 110.538 32.02C110.818 31.74 111.165 31.6 111.578 31.6C111.978 31.6 112.318 31.74 112.598 32.02C112.878 32.3 113.018 32.6467 113.018 33.06C113.018 33.4733 112.878 33.82 112.598 34.1C112.318 34.38 111.978 34.52 111.578 34.52ZM112.698 35.98V47H110.418V35.98H112.698ZM114.931 41.44C114.931 40.3333 115.158 39.3533 115.611 38.5C116.078 37.6467 116.705 36.9867 117.491 36.52C118.291 36.04 119.178 35.8 120.151 35.8C120.871 35.8 121.578 35.96 122.271 36.28C122.978 36.5867 123.538 37 123.951 37.52V32.2H126.251V47H123.951V45.34C123.578 45.8733 123.058 46.3133 122.391 46.66C121.738 47.0067 120.985 47.18 120.131 47.18C119.171 47.18 118.291 46.94 117.491 46.46C116.705 45.9667 116.078 45.2867 115.611 44.42C115.158 43.54 114.931 42.5467 114.931 41.44ZM123.951 41.48C123.951 40.72 123.791 40.06 123.471 39.5C123.165 38.94 122.758 38.5133 122.251 38.22C121.745 37.9267 121.198 37.78 120.611 37.78C120.025 37.78 119.478 37.9267 118.971 38.22C118.465 38.5 118.051 38.92 117.731 39.48C117.425 40.0267 117.271 40.68 117.271 41.44C117.271 42.2 117.425 42.8667 117.731 43.44C118.051 44.0133 118.465 44.4533 118.971 44.76C119.491 45.0533 120.038 45.2 120.611 45.2C121.198 45.2 121.745 45.0533 122.251 44.76C122.758 44.4667 123.165 44.04 123.471 43.48C123.791 42.9067 123.951 42.24 123.951 41.48Z" fill={textFill}/>
+    </svg>);
+};
+export default AndroidIcon;

package/dist/src/components/AppIcons/AppIcon.jsx ADDED Viewed

@@ -0,0 +1,29 @@
+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 React from "react";
+import AppleIcon from "./AppleIcon";
+import PlayStoreIcon from "./PlayStoreIcon";
+import AndroidIcon from "./AndroidIcon";
+var AppIcon = function (_a) {
+    var name = _a.name, props = __rest(_a, ["name"]);
+    switch (name.toLowerCase()) {
+        case "apple":
+            return <AppleIcon {...props}/>;
+        case "playstore":
+            return <PlayStoreIcon {...props}/>;
+        case "android":
+            return <AndroidIcon {...props}/>;
+        default:
+            return null;
+    }
+};
+export default AppIcon;