linkedunion-design-kit 1.9.1 → 1.9.2

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

@@ -1,64 +0,0 @@
-// Button style types
-export var buttonStyles = {
-    fillColor: {
-        blue: "bg-blue-600 text-blue-50 border-blue-600 hover:bg-blue-700 hover:border-blue-700 active:bg-blue-800 active:border-blue-800",
-        "light-blue": "bg-blue-100 text-blue-600 border-blue-100 hover:bg-blue-700 hover:text-blue-50 hover:border-blue-700 active:bg-blue-800 active:text-blue-50 active:border-blue-800",
-        green: "bg-green-600 text-green-50 border-green-600 hover:bg-green-700 hover:border-green-700 active:bg-green-800 active:border-green-800",
-        "light-green": "bg-green-100 text-green-600 border-green-100 hover:bg-green-700 hover:text-green-50 hover:border-green-700 active:bg-green-800 active:text-green-50 active:border-green-800",
-        yellow: "bg-yellow-500 text-yellow-950 border-yellow-500 hover:bg-yellow-600 hover:border-yellow-600 active:bg-yellow-700 active:border-yellow-700",
-        "light-yellow": "bg-yellow-100 text-yellow-950 border-yellow-100 hover:bg-yellow-600 hover:border-yellow-600 active:bg-yellow-700 active:border-yellow-700",
-        red: "bg-red-600 text-red-50 border-red-600 hover:bg-red-700 hover:border-red-700 active:bg-red-800 active:border-red-800",
-        "light-red": "bg-red-100 text-red-600 border-red-100 hover:bg-red-700 hover:text-red-50 hover:border-red-700 active:bg-red-800 active:text-red-50 active:border-red-800",
-        indigo: "bg-indigo-600 text-indigo-50 border-indigo-600 hover:bg-indigo-700 hover:border-indigo-700 active:bg-indigo-800 active:border-indigo-800",
-        "light-indigo": "bg-indigo-100 text-indigo-600 border-indigo-100 hover:bg-indigo-700 hover:text-indigo-50 hover:border-indigo-700 active:bg-indigo-800 active:text-indigo-50 active:border-indigo-800",
-        gray: "bg-gray-900 text-gray-50 border-gray-900 hover:bg-gray-100 hover:text-gray-950 hover:border-gray-100 active:bg-gray-300 active:text-gray-950 active:border-gray-300",
-        "light-gray": "bg-gray-50 text-gray-950 border-gray-50 hover:bg-gray-100 hover:border-gray-100 active:bg-gray-300 active:border-gray-300",
-        disabled: "bg-gray-100 text-gray-300 border-gray-100",
-    },
-    size: {
-        xl: "h-13 !py-3.5 !px-6 !text-base !font-normal !leading-normal",
-        lg: "h-12 !py-3 !px-5 !text-base !font-normal !leading-normal",
-        md: "h-10 !py-2.5 !px-5 !text-sm !font-normal !leading-5",
-        sm: "h-9 !py-2 !px-3 !text-sm !font-normal !leading-5",
-    },
-    shape: {
-        "rounded-sm": "!rounded-sm",
-        "rounded-full": "!rounded-full",
-    },
-    linkColor: {
-        blue: "text-blue-600 hover:text-blue-700 active:text-blue-800",
-        green: "text-green-600 hover:text-green-700 active:text-green-800",
-        yellow: "text-yellow-500 hover:text-yellow-600 active:text-yellow-700",
-        red: "text-red-600 hover:text-red-700 active:text-red-800",
-        indigo: "text-indigo-600 hover:text-indigo-700 active:text-indigo-800",
-        gray: "text-gray-500 hover:text-gray-600 active:text-gray-700",
-        disabled: "text-gray-300 hover:no-underline",
-    },
-    linkSize: {
-        lg: "!text-base !font-normal !leading-normal",
-        md: "!text-sm !font-normal !leading-5",
-    },
-    outlineColor: {
-        blue: "text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",
-        "light-blue": "bg-blue-100 text-blue-600 border-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",
-        green: "text-green-600 hover:bg-green-700 hover:text-green-50 active:bg-green-800 active:text-green-50",
-        "light-green": "bg-green-100 text-green-600 border-green-600 hover:bg-green-700 hover:text-green-50 active:bg-green-800 active:text-green-50",
-        yellow: "text-yellow-500 hover:bg-yellow-600 hover:text-yellow-950 active:bg-yellow-700 active:text-yellow-950",
-        "light-yellow": "bg-yellow-100 text-yellow-950 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-700",
-        red: "text-red-600 hover:bg-red-700 hover:text-red-50 active:bg-red-800 active:text-red-50",
-        "light-red": "bg-red-100 text-red-600 border-red-600 hover:bg-red-700 hover:text-red-50 active:bg-red-800 active:text-red-50",
-        indigo: "text-indigo-600 hover:bg-indigo-700 hover:text-indigo-50 active:bg-indigo-800 active:text-indigo-50",
-        "light-indigo": "bg-indigo-100 text-indigo-600 border-indigo-600 hover:bg-indigo-700 hover:text-indigo-50 active:bg-indigo-800 active:text-indigo-50",
-        gray: "bg-gray-100 text-gray-950 border-gray-900 hover:bg-gray-100 hover:text-gray-950 active:bg-gray-300 active:text-gray-950",
-        "light-gray": "text-gray-950 border-gray-100 hover:bg-gray-100 hover:text-gray-950 active:bg-gray-300",
-        disabled: "text-gray-300",
-    },
-    ghostColor: {
-        blue: "text-blue-600 hover:bg-blue-100 active:bg-blue-600 active:text-blue-50",
-        green: "text-green-600 hover:bg-green-100 active:bg-green-600 active:text-green-50",
-        yellow: "text-yellow-500 hover:bg-yellow-600 hover:text-yellow-950 active:bg-yellow-500 active:text-yellow-950",
-        red: "text-red-600 hover:bg-red-100 active:bg-red-600 active:text-red-50",
-        indigo: "text-indigo-600 hover:bg-indigo-100 active:bg-indigo-600 active:text-indigo-50",
-        gray: "text-gray-950 hover:bg-gray-50 active:bg-gray-950 active:text-gray-950",
-    },
-};

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

@@ -1,20 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-export declare const variant: {
-    default: string;
-    link: string;
-    outline: string;
-};
-declare const buttonVariants: (props?: ({
-    color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    shape?: "rounded-full" | "rounded-sm" | null | undefined;
-    variant?: "link" | "default" | "outline" | 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?: string;
-    endIcon?: string;
-    variant?: "default" | "link" | "outline";
-}): import("react/jsx-runtime").JSX.Element;
-export { Button, buttonVariants };

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

@@ -1,83 +0,0 @@
-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)
-        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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import LUIcon from "../Icons/LUIcon";
-import { color, linkColor, outlineColor, shape, size } from ".";
-export var variant = {
-    default: "",
-    link: "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent !p-0 underline-offset-4 hover:underline border-none",
-    outline: "bg-transparent",
-};
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md 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-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border", {
-    variants: {
-        color: color,
-        size: size,
-        shape: shape,
-        variant: variant,
-    },
-    defaultVariants: {
-        color: "blue",
-        size: "md",
-        shape: "rounded-sm",
-        variant: "default",
-    },
-    // compoundVariants: [
-    //   {
-    //     variant: "outline",
-    //     class: "box-border", // ✅ add only when outline
-    //   },
-    // ],
-});
-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 ? "default" : _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;
-    // Apply appropriate text color for link variant
-    var extraClasses = variant === "link" && color
-        ? linkColor[color]
-        : variant === "outline" && color
-            ? outlineColor[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 }))] })));
-}
-export { Button, buttonVariants };