linkedunion-design-kit 1.9.0 → 1.9.2

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

@@ -1,32 +1,80 @@
 export var avatarSize = {
-    sm: "w-[30px] h-[30px]", //TODO: Change to hand coded values
-    md: "w-8 h-8",
-    lg: "w-[42px] h-[42px]",
-    xl: "w-[52px] h-[52px]",
-    "2xl": "w-16 h-16",
-    "3xl": "w-[76px] h-[76px]",
-    "4xl": "w-24 h-24",
-    "5xl": "w-[116px] h-[116px]",
-    "6xl": "w-32 h-32",
-    "7xl": "w-36 h-36",
-    huge: "w-40 h-40",
-    massive: "w-[200px] h-[200px]",
-};
-export var avatarPadding = {
-    sm: "!p-2",
-    md: "!p-2",
-    lg: "!p-3",
-    xl: "!p-4",
-    "2xl": "!p-5",
-    "3xl": "p-6",
-    "4xl": "p-8",
-    "5xl": "p-10",
-    "6xl": "p-10",
-    "7xl": "p-10",
-    huge: "p-10",
-    massive: "p-10",
+    massive: "h-40 w-40 text-5xl",
+    huge: "h-36 w-36 text-5xl",
+    "5xl": "h-20 w-20 text-4xl",
+    "4xl": "h-16 w-16 text-4xl",
+    "3xl": "h-14 w-14 text-3xl",
+    "2xl": "h-12 w-12 text-2xl",
+    xl: "h-11 w-11 text-2xl",
+    lg: "h-10 w-10 text-2xl",
+    md: "h-9 w-9 text-xl",
+    sm: "h-8 w-8 text-sm",
+    xs: "h-6 w-6 text-sm",
+    "2xs": "h-5 w-5 text-xs",
+    "3xs": "h-4.5 w-4.5 text-tiny",
+    "4xs": "h-4 w-4 text-tiny",
 };
 export var avatarShape = {
-    square: "rounded-none",
-    circle: "rounded-full",
+    square: {
+        massive: "rounded-2xl",
+        huge: "rounded-2xl",
+        "5xl": "rounded-xl",
+        "4xl": "rounded-xl",
+        "3xl": "rounded-lg",
+        "2xl": "rounded-md",
+        xl: "rounded-sm",
+        lg: "rounded-sm",
+        md: "rounded-sm",
+        sm: "rounded-sm",
+        xs: "rounded-xs",
+        "2xs": "rounded-xs",
+        "3xs": "rounded-xs",
+        "4xs": "rounded-xs",
+    },
+    rounded: "rounded-full",
+};
+export var statusIndicatorSize = {
+    massive: "xl",
+    huge: "xl",
+    "5xl": "lg",
+    "4xl": "md",
+    "3xl": "md",
+    "2xl": "sm",
+    xl: "sm",
+    lg: "sm",
+    md: "sm",
+    sm: "sm",
+    xs: "xs",
+    "2xs": "xs",
+    "3xs": "xs",
+    "4xs": "xs",
 };
+function buildOffsetMap(groups) {
+    var map = Object.create(null);
+    for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+        var _a = groups_1[_i], sizes = _a[0], offset = _a[1];
+        for (var _b = 0, sizes_1 = sizes; _b < sizes_1.length; _b++) {
+            var size = sizes_1[_b];
+            map[size] = offset;
+        }
+    }
+    return Object.freeze(map);
+}
+// Status Indicator for rectangular avatars
+var groups = [
+    [["massive", "huge", "5xl", "4xl", "3xl", "2xl"], "top-2 right-2"],
+    [["xl", "lg"], "top-1.5 right-1.5"],
+    [["md", "sm", "xs"], "top-1 right-1"],
+    [["2xs", "3xs", "4xs"], "top-0.5 right-0.5"],
+];
+export var statusIndicatorOffset = buildOffsetMap(groups);
+// Status Indicator for rounded avatars
+var roundedGroups = [
+    [["massive"], "top-4 right-2"],
+    [["huge"], "top-3 right-2"],
+    [["5xl", "4xl", "3xl", "2xl"], "top-0 right-2"],
+    [["xl", "lg"], "top-0 right-1.5"],
+    [["md", "sm", "xs"], "top-0 right-1"],
+    [["2xs", "3xs", "4xs"], "top-0 right-0.5"],
+];
+export var roundedStatusIndicatorOffset = buildOffsetMap(roundedGroups);

package/dist/src/components/Avatar/AvatarGroup/AvatarGroup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, AvatarImage, AvatarFallback } from "../../../components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "../Avatar/Avatar";
 export var AvatarGroup = function (_a) {
     var images = _a.images;
     var visibleImages = images.slice(0, 2);

package/dist/src/components/Avatar/AvatarGroup/AvatarGroup.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, AvatarImage, AvatarFallback } from "../../../components/ui/avatar";
 import { avatars } from ".";
+import { Avatar, AvatarFallback, AvatarImage } from "../Avatar/Avatar";
 export default {
     title: "Components/Avatar/AvatarGroup",
     component: Avatar,

package/dist/src/components/Avatar/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { StatusIndicatorProps } from "./type";
+export declare const StatusIndicator: React.FC<StatusIndicatorProps>;

package/dist/src/components/Avatar/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { statusIndicatorOuterSize, awayIndicatorInnerSize, statusIndicatorBorder, } from ".";
+export var StatusIndicator = function (_a) {
+    var status = _a.status, _b = _a.size, size = _b === void 0 ? "md" : _b, className = _a.className;
+    var baseClasses = cn("relative inline-flex items-center justify-center rounded-full", statusIndicatorOuterSize[size], className);
+    if (status === "online") {
+        return (_jsx("span", { className: cn(baseClasses, "border-green-100 bg-green-600", statusIndicatorBorder[size]) }));
+    }
+    if (status === "offline") {
+        return (_jsx("span", { className: cn(baseClasses, "bg-gray-100 border-gray-300", statusIndicatorBorder[size]) }));
+    }
+    if (status === "busy") {
+        return (_jsx("span", { className: cn(baseClasses, "bg-red-100 border-red-600", statusIndicatorBorder[size]) }));
+    }
+    // away
+    return (_jsx("span", { className: cn(baseClasses, "bg-yellow-500"), children: _jsx("span", { className: cn(awayIndicatorInnerSize[size], "rounded-full bg-yellow-100 block", "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2") }) }));
+};

package/dist/src/components/Avatar/StatusIndicator/StatusIndicator.stories.d.ts

@@ -0,0 +1,44 @@
+import { StoryObj } from "@storybook/react";
+import { StatusIndicator } from "./StatusIndicator";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./type").StatusIndicatorProps>;
+    tags: string[];
+    argTypes: {
+        status: {
+            control: {
+                type: "select";
+                options: string[];
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            control: {
+                type: "select";
+                options: string[];
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof StatusIndicator>;
+export declare const Default: Story;
+export declare const AllStatuses: () => import("react/jsx-runtime").JSX.Element;
+export declare const StatusIndicatorSizes: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Avatar/StatusIndicator/StatusIndicator.stories.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StatusIndicator } from "./StatusIndicator";
+import { statusIndicatorOuterSize } from ".";
+var meta = {
+    title: "Components/StatusIndicator",
+    component: StatusIndicator,
+    tags: ["autodocs"],
+    argTypes: {
+        status: {
+            control: {
+                type: "select",
+                options: ["online", "offline", "busy", "away"],
+            },
+            description: "The status to display.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "online" },
+            },
+        },
+        size: {
+            control: {
+                type: "select",
+                options: Object.keys(statusIndicatorOuterSize),
+            },
+            description: "The size of the status indicator.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "md" },
+            },
+        },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        status: "online",
+        size: "md",
+    },
+};
+export var AllStatuses = function () { return (_jsxs("div", { className: "flex flex-row space-x-2", children: [_jsx(StatusIndicator, { status: "online", size: "lg" }), _jsx(StatusIndicator, { status: "offline", size: "lg" }), _jsx(StatusIndicator, { status: "busy", size: "lg" }), _jsx(StatusIndicator, { status: "away", size: "lg" })] })); };
+export var StatusIndicatorSizes = function () { return (_jsx("div", { className: "flex flex-row space-x-2 items-center", children: Object.keys(statusIndicatorOuterSize).map(function (size) { return (_jsxs("div", { className: "flex flex-col items-center space-y-1", children: [_jsx(StatusIndicator, { status: "online", size: size }), _jsx("span", { className: "text-xs", children: size })] }, size)); }) })); };

package/dist/src/components/Avatar/StatusIndicator/index.d.ts

@@ -0,0 +1,27 @@
+export declare const statusIndicatorOuterSize: {
+    readonly xs: "w-1 h-1";
+    readonly sm: "w-1.5 h-1.5";
+    readonly md: "w-2.5 h-2.5";
+    readonly lg: "w-3.5 h-3.5";
+    readonly xl: "w-4.5 h-4.5";
+};
+export declare const statusIndicatorBorder: {
+    readonly xs: "border-1";
+    readonly sm: "border-1";
+    readonly md: "border-2";
+    readonly lg: "border-2";
+    readonly xl: "border-2";
+};
+export declare const awayIndicatorInnerSize: {
+    readonly xl: "w-3 h-0.5";
+    readonly lg: "w-2 h-0.5";
+    readonly md: "w-1.5 h-0.5";
+    readonly sm: "w-1 h-px";
+    readonly xs: "w-0.5 h-px";
+};
+export declare const statusIndicator: {
+    online: string;
+    offline: string;
+    busy: string;
+    away: string;
+};

package/dist/src/components/Avatar/StatusIndicator/index.js

@@ -0,0 +1,29 @@
+// Outer circle/shape sizes
+export var statusIndicatorOuterSize = {
+    xs: "w-1 h-1",
+    sm: "w-1.5 h-1.5",
+    md: "w-2.5 h-2.5",
+    lg: "w-3.5 h-3.5",
+    xl: "w-4.5 h-4.5",
+};
+export var statusIndicatorBorder = {
+    xs: "border-1",
+    sm: "border-1",
+    md: "border-2",
+    lg: "border-2",
+    xl: "border-2",
+};
+// Inner glyph sizes (used for away indicator horizontal bar)
+export var awayIndicatorInnerSize = {
+    xl: "w-3 h-0.5",
+    lg: "w-2 h-0.5",
+    md: "w-1.5 h-0.5",
+    sm: "w-1 h-px",
+    xs: "w-0.5 h-px",
+};
+export var statusIndicator = {
+    online: "online",
+    offline: "offline",
+    busy: "busy",
+    away: "away",
+};

package/dist/src/components/Avatar/StatusIndicator/type.d.ts

@@ -0,0 +1,6 @@
+import { statusIndicator, statusIndicatorOuterSize } from ".";
+export interface StatusIndicatorProps {
+    status: keyof typeof statusIndicator;
+    size?: keyof typeof statusIndicatorOuterSize;
+    className?: string;
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { badgeStyles } from ".";
+import { iconList } from "../../utils/iconList";
+declare const badgeVariants: (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" | null | undefined;
+    type?: "fill" | "outline" | null | undefined;
+    shape?: "square" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, color, size, type, asChild, disabled, shape, onRemove, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+    size?: "sm" | "md" | "lg";
+    type?: "fill" | "outline";
+    startIcon?: keyof typeof iconList;
+    endIcon?: keyof typeof iconList;
+    disabled?: boolean;
+    shape?: keyof typeof badgeStyles.shape;
+    onRemove?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/src/components/Badge/Badge.js

@@ -0,0 +1,59 @@
+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 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 (_jsxs(Comp, __assign({ "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, { children: [props.startIcon && (_jsx(LUIcon, { icon: props.startIcon, size: badgeLeftIconSize[size] })), props.children, onRemove ? (_jsx("div", { onClick: handleRemove, className: "cursor-pointer ml-1 pointer-events-auto", children: _jsx(LUIcon, { icon: "xMark", size: badgeRightIconSize[size] }) })) : (props.endIcon && (_jsx(LUIcon, { icon: props.endIcon, size: badgeRightIconSize[size] })))] })));
+}
+export { Badge, badgeVariants };