linkedunion-design-kit 1.9.2 → 1.9.3

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,201 @@
+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.d.ts

@@ -1,6 +1,12 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { iconList } from "../../../utils/iconList";
+export type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    startIcon?: keyof typeof iconList;
+    endIcon?: keyof typeof iconList;
+    variant?: "fill" | "link" | "outline" | "ghost";
+};
 export declare const variant: {
     fill: string;
     link: string;
@@ -13,10 +19,5 @@ declare const buttonVariants: (props?: ({
     shape?: "rounded-sm" | "rounded-full" | null | undefined;
     variant?: "link" | "fill" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Button({ className, color, size, shape, variant, asChild, startIcon, endIcon, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-    startIcon?: keyof typeof iconList;
-    endIcon?: keyof typeof iconList;
-    variant?: "fill" | "link" | "outline" | "ghost";
-}): import("react/jsx-runtime").JSX.Element;
+declare function Button({ className, color, size, shape, variant, asChild, startIcon, endIcon, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };

package/dist/src/components/Button/Button/Button.js

@@ -20,6 +20,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
@@ -45,6 +54,28 @@ var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespa
         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"]);
@@ -67,14 +98,6 @@ function Button(_a) {
     // Use the calculated sizes based on button size
     var startIconSizeValue = iconSizes.startIcon;
     var endIconSizeValue = iconSizes.endIcon;
-    // Apply appropriate text color for link variant
-    var extraClasses = variant === "link" && color
-        ? buttonStyles.linkColor[color]
-        : variant === "outline" && color
-            ? buttonStyles.outlineColor[color]
-            : variant === "ghost" && color
-                ? buttonStyles.ghostColor[color]
-                : "";
-    return (_jsxs(Comp, __assign({ "data-slot": "button", className: cn(buttonVariants({ variant: variant, color: color, size: size, shape: shape, className: className }), extraClasses) }, props, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
+    return (_jsxs(Comp, __assign({ "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, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
 }
 export { Button, buttonVariants };

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

@@ -0,0 +1,101 @@
+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 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(__spreadArray([], Object.entries(buttonStyles.linkSize).map(function (_a) {
+        var size = _a[0], cls = _a[1];
+        return ({
+            variant: "link",
+            size: size,
+            class: cls,
+        });
+    }), true), Object.entries(buttonStyles.linkColor).map(function (_a) {
+        var color = _a[0], cls = _a[1];
+        return ({
+            variant: "link",
+            color: color,
+            class: cls,
+        });
+    }), true), Object.entries(buttonStyles.outlineColor).map(function (_a) {
+        var color = _a[0], cls = _a[1];
+        return ({
+            variant: "outline",
+            color: color,
+            class: cls,
+        });
+    }), true), Object.entries(buttonStyles.ghostColor).map(function (_a) {
+        var color = _a[0], cls = _a[1];
+        return ({
+            variant: "ghost",
+            color: color,
+            class: cls,
+        });
+    }), 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();
+    var startIconSizeValue = iconSizes.startIcon;
+    var endIconSizeValue = iconSizes.endIcon;
+    return (<Comp data-slot="button" className={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 };