linkedunion-design-kit 1.9.6-beta.0 → 1.9.6-beta.1

package/dist/src/components/Badge/Badge.jsx

@@ -1,54 +0,0 @@
-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 LUIcon from "../Icons/LUIcon";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { badgeStyles, badgeLeftIconSize, badgeRightIconSize } from ".";
-var badgeVariants = cva("inline-flex items-center justify-center font-normal w-fit whitespace-nowrap shrink-0 gap-2 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
-    variants: {
-        color: badgeStyles.fillColor,
-        size: badgeStyles.size,
-        type: badgeStyles.type,
-        shape: badgeStyles.shape,
-    },
-    defaultVariants: {
-        color: "blue",
-        size: "md",
-        type: "fill",
-        shape: "rounded",
-    },
-});
-function Badge(_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.type, type = _d === void 0 ? "fill" : _d, _e = _a.asChild, asChild = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.shape, shape = _g === void 0 ? "rounded" : _g, onRemove = _a.onRemove, props = __rest(_a, ["className", "color", "size", "type", "asChild", "disabled", "shape", "onRemove"]);
-    var colorClass = type === "fill"
-        ? badgeStyles.fillColor[color]
-        : badgeStyles.outlineColor.hasOwnProperty(color)
-            ? badgeStyles.outlineColor[color]
-            : badgeStyles.outlineColor["blue"];
-    var Comp = asChild ? Slot : "span";
-    var handleRemove = function (e) {
-        if (onRemove && !disabled) {
-            e.stopPropagation();
-            onRemove();
-        }
-    };
-    return (<Comp data-slot="badge" className={cn(badgeVariants({ color: color, size: size, type: type, shape: shape }), colorClass, className, disabled && "opacity-50 pointer-events-none cursor-not-allowed")} aria-disabled={disabled} tabIndex={disabled ? -1 : undefined} {...props}>
-      {props.startIcon && (<LUIcon icon={props.startIcon} size={badgeLeftIconSize[size]}/>)}
-      {props.children}
-      {onRemove ? (<div onClick={handleRemove} className="cursor-pointer ml-1 pointer-events-auto">
-          <LUIcon icon="xMark" size={badgeRightIconSize[size]}/>
-        </div>) : (props.endIcon && (<LUIcon icon={props.endIcon} size={badgeRightIconSize[size]}/>))}
-    </Comp>);
-}
-export { Badge, badgeVariants };

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

@@ -1,201 +0,0 @@
-import React from "react";
-import { Badge } from "./Badge";
-import { badgeStyles } from ".";
-import { iconList } from "../../utils/iconList";
-var meta = {
-    title: "Components/Badge",
-    component: Badge,
-    tags: ["autodocs"],
-    argTypes: {
-        type: {
-            control: {
-                type: "select",
-                options: Object.keys(badgeStyles.type),
-            },
-            description: "The type of the badge.",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "fill" },
-            },
-        },
-        color: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(badgeStyles.fillColor),
-            description: "The color of the badge.",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "blue" },
-            },
-        },
-        size: {
-            control: {
-                type: "select",
-                options: Object.keys(badgeStyles.size),
-            },
-            description: "The size of the badge.",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "md" },
-            },
-        },
-        shape: {
-            control: {
-                type: "select",
-                options: Object.keys(badgeStyles.shape),
-            },
-            description: "The shape of the badge.",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "rounded" },
-            },
-        },
-        startIcon: {
-            control: {
-                type: "select",
-                options: Object.keys(iconList),
-            },
-            description: "The icon to display at the start of the badge.",
-            table: {
-                type: { summary: "string" },
-            },
-        },
-        endIcon: {
-            control: {
-                type: "select",
-                options: Object.keys(iconList),
-            },
-            description: "The icon to display at the end of the badge.",
-            table: {
-                type: { summary: "string" },
-            },
-        },
-        disabled: {
-            control: {
-                type: "boolean",
-            },
-            description: "Whether the badge is disabled.",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: "false" },
-            },
-        },
-        onRemove: {
-            description: "When provided, displays a close icon that calls this function when clicked. The close icon is only shown when this prop is present.",
-            table: {
-                type: { summary: "() => void" },
-                defaultValue: { summary: "undefined" },
-            },
-            control: false,
-        },
-    },
-    decorators: [
-        function (Story, context) {
-            // Use type, not color, to determine color options
-            var currentType = context.args.type;
-            if (context.argTypes && context.argTypes.color) {
-                context.argTypes.color.options =
-                    currentType === "fill"
-                        ? Object.keys(badgeStyles.fillColor)
-                        : Object.keys(badgeStyles.outlineColor);
-            }
-            return <Story {...context}/>;
-        },
-    ],
-};
-export default meta;
-export var Default = {
-    args: {
-        children: "Default Badge",
-        onRemove: undefined,
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: "Default badge without a close icon. The close icon is only shown when the onRemove prop is provided.",
-            },
-        },
-    },
-};
-export var BadgeSize = function () { return (<div className="flex flex-col space-y-2">
-    <Badge size="sm">Small Badge</Badge>
-    <Badge size="md">Medium Badge</Badge>
-    <Badge size="lg">Large Badge</Badge>
-  </div>); };
-export var WithIcons = function () { return (<div className="flex flex-col space-y-2">
-    <Badge startIcon="check">Left Icon Only</Badge>
-    <Badge endIcon="check">Right Icon Only</Badge>
-    <Badge startIcon="check" endIcon="star">
-      Both Icons
-    </Badge>
-    <p className="text-sm mt-2 text-gray-500">
-      Note: None of these have an onRemove handler, so no close icon is shown
-    </p>
-  </div>); };
-export var BadgeType = function () { return (<div className="flex flex-col space-y-2">
-    <Badge type="fill">Fill Badge</Badge>
-    <Badge type="outline">Outline Badge</Badge>
-  </div>); };
-export var BadgeShape = function () { return (<div className="flex flex-col space-y-2">
-    <Badge shape="rounded">Rounded Badge</Badge>
-    <Badge shape="square">Square Badge</Badge>
-  </div>); };
-export var BadgeFillColors = function () { return (<div className="flex flex-row space-x-2">
-    <Badge color="blue">Blue</Badge>
-    <Badge color="light-blue">Light Blue</Badge>
-    <Badge color="red">Red</Badge>
-    <Badge color="light-red">Light Red</Badge>
-    <Badge color="indigo">Indigo</Badge>
-    <Badge color="light-indigo">Light Indigo</Badge>
-    <Badge color="green">Green</Badge>
-    <Badge color="light-green">Light Green</Badge>
-    <Badge color="yellow">Yellow</Badge>
-    <Badge color="light-yellow">Light Yellow</Badge>
-    <Badge color="gray">Gray</Badge>
-    <Badge color="light-gray">Light Gray</Badge>
-  </div>); };
-export var BadgeOutlineColors = function () { return (<div className="flex flex-row space-x-2">
-    <Badge color="blue" type="outline">
-      Blue
-    </Badge>
-    <Badge color="red" type="outline">
-      Red
-    </Badge>
-    <Badge color="indigo" type="outline">
-      Indigo
-    </Badge>
-    <Badge color="green" type="outline">
-      Green
-    </Badge>
-    <Badge color="yellow" type="outline">
-      Yellow
-    </Badge>
-    <Badge color="gray" type="outline">
-      Gray
-    </Badge>
-  </div>); };
-export var DisabledBadge = function () { return (<div className="flex flex-col space-y-2">
-    <Badge disabled>Disabled Badge</Badge>
-  </div>); };
-export var BadgeWithCounter = function () { return (<div className="flex flex-col space-y-2">
-    <Badge>3</Badge>
-    <Badge color="red">+3</Badge>
-  </div>); };
-export var BadgeWithRemoveHandler = function () {
-    var handleRemove = function () {
-        alert("Badge removed!");
-    };
-    return (<div className="flex flex-col space-y-2">
-      <Badge startIcon="plus" onRemove={handleRemove} color="green">
-        Badge with Close Icon
-      </Badge>
-      <Badge onRemove={handleRemove}>Removable Badge</Badge>
-      <Badge startIcon="check" onRemove={handleRemove}>
-        Check with Remove
-      </Badge>
-      <Badge type="outline" onRemove={handleRemove}>
-        Outline Removable
-      </Badge>
-    </div>);
-};

package/dist/src/components/Button/Button/Button.jsx

@@ -1,96 +0,0 @@
-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;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { cn } from "../../../lib/utils";
-import LUIcon from "../../Icons/LUIcon";
-import { buttonStyles } from "..";
-export var variant = {
-    fill: "",
-    link: "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent !p-0 underline-offset-4 hover:underline border-none",
-    outline: "border bg-transparent",
-    ghost: "bg-transparent border-none",
-};
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
-    variants: {
-        color: buttonStyles.fillColor,
-        size: buttonStyles.size,
-        shape: buttonStyles.shape,
-        variant: variant,
-    },
-    defaultVariants: {
-        color: "blue",
-        size: "md",
-        shape: "rounded-sm",
-        variant: "fill",
-    },
-    compoundVariants: __spreadArray(__spreadArray(__spreadArray([], Object.entries(buttonStyles.linkColor).map(function (_a) {
-        var color = _a[0], className = _a[1];
-        return ({
-            color: color,
-            variant: "link",
-            class: className,
-        });
-    }), true), Object.entries(buttonStyles.outlineColor).map(function (_a) {
-        var color = _a[0], className = _a[1];
-        return ({
-            color: color,
-            variant: "outline",
-            class: className,
-        });
-    }), true), Object.entries(buttonStyles.ghostColor).map(function (_a) {
-        var color = _a[0], className = _a[1];
-        return ({
-            color: color,
-            variant: "ghost",
-            class: className,
-        });
-    }), true),
-});
-function Button(_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, size = _a.size, shape = _a.shape, _c = _a.variant, variant = _c === void 0 ? "fill" : _c, _d = _a.asChild, asChild = _d === void 0 ? false : _d, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
-    var Comp = asChild ? Slot : "button";
-    // Map button size to appropriate icon sizes for start and end icons
-    var getIconSizes = function () {
-        if (size === "xl" || size === "lg" || size === "md") {
-            return {
-                startIcon: "md", // 16px (size-6) - matches iconSize.xl
-                endIcon: "xs", // 12px (size-3.5)
-            };
-        }
-        return {
-            startIcon: "sm", // 14px (size-4)
-            endIcon: "xs", // 12px (size-3.5)
-        };
-    };
-    // Get icon sizes based on button size
-    var iconSizes = getIconSizes();
-    // Use the calculated sizes based on button size
-    var startIconSizeValue = iconSizes.startIcon;
-    var endIconSizeValue = iconSizes.endIcon;
-    return (<Comp data-slot="button" data-size={size} data-variant={variant} data-color={color} className={cn(buttonVariants({ variant: variant, color: color, size: size, shape: shape, className: className }))} {...props}>
-      {startIcon && (<LUIcon size={startIconSizeValue} data-testid="start-icon" icon={startIcon}/>)}
-      {props.children}
-      {endIcon && (<LUIcon size={endIconSizeValue} data-testid="end-icon" icon={endIcon}/>)}
-    </Comp>);
-}
-export { Button, buttonVariants };

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

@@ -1,283 +0,0 @@
-import { Button, variant } from "./Button";
-import { buttonStyles } from "..";
-var meta = {
-    title: "Components/Button",
-    component: Button,
-    tags: ["autodocs"],
-    parameters: {
-        docs: {
-            description: {
-                component: "Button component with default variants: color: blue, size: md, shape: rounded-sm, variant: default",
-            },
-        },
-        controls: {
-            expanded: true,
-            sort: "requiredFirst",
-            hideNoControlsWarning: true,
-            exclude: [],
-        },
-    },
-    args: {
-        // Default values for all stories
-        color: "blue",
-        size: "md",
-        shape: "rounded-sm",
-        variant: "fill",
-    },
-    argTypes: {
-        color: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(buttonStyles.fillColor),
-            description: "The color and visual style of the button",
-            defaultValue: "blue",
-            table: {
-                defaultValue: { summary: "blue" },
-            },
-        },
-        size: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(buttonStyles.size),
-            description: "The size of the button",
-            defaultValue: "md",
-            table: {
-                defaultValue: { summary: "md" },
-            },
-        },
-        shape: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(buttonStyles.shape),
-            description: "The shape of the button",
-            defaultValue: "rounded-sm",
-            table: {
-                defaultValue: { summary: "rounded-sm" },
-            },
-        },
-        variant: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(variant),
-            description: "The variant of the button (default or link)",
-            defaultValue: "fill",
-            table: {
-                defaultValue: { summary: "fill" },
-            },
-        },
-        startIcon: {
-            control: "text",
-            description: "Icon to display at the start of the button",
-        },
-        endIcon: {
-            control: "text",
-            description: "Icon to display at the end of the button",
-        },
-        disabled: {
-            control: "boolean",
-            description: "Whether the button is disabled",
-        },
-        asChild: {
-            control: "boolean",
-            description: "Whether to render as a child component",
-        },
-        onClick: {
-            action: "clicked",
-            description: "Function called when button is clicked",
-        },
-    },
-    decorators: [
-        function (Story, context) {
-            var currentVariant = context.args.variant;
-            var isLink = currentVariant === "link";
-            var isOutline = currentVariant === "outline";
-            var isGhost = currentVariant === "ghost";
-            var isFill = currentVariant === "fill";
-            if (context.argTypes) {
-                // ✅ Update Link color and size options
-                if (context.argTypes.color) {
-                    context.argTypes.color.options = isLink
-                        ? Object.keys(buttonStyles.linkColor)
-                        : isOutline
-                            ? Object.keys(buttonStyles.outlineColor)
-                            : isGhost
-                                ? Object.keys(buttonStyles.ghostColor)
-                                : isFill
-                                    ? Object.keys(buttonStyles.fillColor)
-                                    : undefined;
-                }
-                if (context.argTypes.size) {
-                    context.argTypes.size.options = isLink
-                        ? Object.keys(buttonStyles.linkSize)
-                        : Object.keys(buttonStyles.size);
-                }
-                // ✅ Hide shape control if variant is link
-                if (context.argTypes.shape) {
-                    context.argTypes.shape.table = context.argTypes.shape.table || {};
-                    context.argTypes.shape.table.disable = isLink;
-                }
-            }
-            return <Story {...context}/>;
-        },
-    ],
-};
-export default meta;
-// Display Default button with explicit default values
-export var Default = {
-    args: {
-        children: "Button Text",
-        color: "blue",
-        size: "md",
-        shape: "rounded-sm",
-        variant: "fill",
-        onClick: function () {
-            alert("Button clicked!");
-        },
-    },
-};
-export var Blue = {
-    args: {
-        children: "Blue Button",
-        color: "blue",
-        size: "md",
-    },
-};
-export var Red = {
-    args: {
-        children: "Red Button",
-        color: "red",
-        size: "md",
-    },
-};
-export var Green = {
-    args: {
-        children: "Green Button",
-        color: "green",
-        size: "md",
-    },
-};
-export var Yellow = {
-    args: {
-        children: "Yellow Button",
-        color: "yellow",
-        size: "md",
-    },
-};
-export var Indigo = {
-    args: {
-        children: "Indigo Button",
-        color: "indigo",
-        size: "md",
-    },
-};
-export var Gray = {
-    args: {
-        children: "Gray Button",
-        color: "gray",
-        size: "md",
-    },
-};
-export var WithStartIcon = {
-    args: {
-        children: "Button with Start Icon",
-        startIcon: "arrow-right",
-        size: "md",
-    },
-};
-export var WithEndIcon = {
-    args: {
-        children: "Button with End Icon",
-        endIcon: "arrow-right",
-        size: "md",
-    },
-};
-export var WithBothIcons = {
-    args: {
-        children: "Button with Icons",
-        startIcon: "plus",
-        endIcon: "arrow-right",
-        size: "md",
-    },
-};
-export var Small = {
-    args: {
-        children: "Small Button",
-        size: "sm",
-    },
-};
-export var Medium = {
-    args: {
-        children: "Medium Button",
-        size: "md",
-    },
-};
-export var Large = {
-    args: {
-        children: "Large Button",
-        size: "lg",
-    },
-};
-export var ExtraLarge = {
-    args: {
-        children: "Extra Large Button",
-        size: "xl",
-    },
-};
-export var DefaultVariant = {
-    args: {
-        children: "Default Variant Button",
-        variant: "fill",
-    },
-};
-export var LinkVariant = {
-    args: {
-        children: "Link Style Button",
-        variant: "link",
-        color: "blue",
-    },
-};
-export var LinkVariantRed = {
-    args: {
-        children: "Red Link Button",
-        variant: "link",
-        color: "red",
-    },
-};
-export var LinkVariantGreen = {
-    args: {
-        children: "Green Link Button",
-        variant: "link",
-        color: "green",
-    },
-};
-export var RoundedSmall = {
-    args: {
-        children: "Rounded Small",
-        shape: "rounded-sm",
-    },
-};
-export var RoundedFull = {
-    args: {
-        children: "Rounded Full",
-        shape: "rounded-full",
-    },
-};
-export var Disabled = {
-    args: {
-        children: "Disabled Button",
-        disabled: true,
-    },
-};
-// Color variants
-// Example of color with different button states
-export var DisabledButton = {
-    args: {
-        children: "Disabled Button",
-        color: "blue",
-        disabled: true,
-    },
-};