linkedunion-design-kit 1.7.4 → 1.7.6

package/dist/src/components/Card/PhotoGallery.css

@@ -0,0 +1,11 @@
+.photo-gallery-img {
+  position: relative;
+}
+.photo-gallery-img::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, black, transparent);
+  z-index: 1;
+  pointer-events: none;
+}

package/dist/src/components/Card/PhotoGallery.js

@@ -4,5 +4,5 @@ import LuImage from "../Images/LuImage";
 import { Heading } from "../Typography/Heading/heading";
 export var PhotoGallery = function (_a) {
     var image = _a.image, item = _a.item, _b = _a.altText, altText = _b === void 0 ? "Photo Gallery" : _b, editor = _a.editor;
-    return (_jsxs("div", { className: "group relative max-w-md max-h-md ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), children: [_jsx(LuImage, { src: image, width: 448, height: 448, alt: altText, className: "aspect-square object-cover transition-transform" }), _jsx("div", { className: "absolute ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " inset-0 bg-linear-to-t from-black to-transparent") }), _jsx(Heading, { variant: "h4-700", className: "absolute line-clamp-1 text-white bottom-4 uppercase !px-5 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:!opacity-100 transition-opacity duration-300 ease-out", children: _jsx(LUIcon, { icon: "magnifying-glass", size: "4xl", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " text-gray-100") }) })] }));
+    return (_jsxs("div", { className: "group relative max-w-md ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), children: [_jsx(LuImage, { src: image, width: 448, height: 448, alt: altText, className: "aspect-square object-cover transition-transform" }), _jsx("div", { className: "absolute ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " inset-0 bg-linear-to-t from-black to-transparent") }), _jsx(Heading, { variant: "h4-700", className: "absolute line-clamp-1 text-white bottom-4 uppercase !px-5 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:!opacity-100 transition-opacity duration-300 ease-out", children: _jsx(LUIcon, { icon: "magnifying-glass", size: "4xl", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " text-gray-100") }) })] }));
 };

package/dist/src/components/Label/Label.js

@@ -25,12 +25,12 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 export var variant = {
-    "label-xl": "!text-xl",
-    "label-lg": "!text-lg",
-    "label-md": "!text-base",
-    "label-sm": "!text-sm !font-normal",
+    "label-xl": "!text-xl !leading-normal",
+    "label-lg": "!text-lg !leading-normal",
+    "label-md": "!text-base !leading-normal",
+    "label-sm": "!text-sm !leading-normal",
 };
-var labelVariants = cva("flex items-center !gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 !font-medium !leading-normal m-0", {
+var labelVariants = cva("select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 !font-normal m-0", {
     variants: { variant: variant },
     defaultVariants: {
         variant: "label-sm",

package/dist/src/components/Typography/Heading/heading.js

@@ -24,23 +24,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
 export var variant = {
-    h1: "text-5xl font-normal",
+    h1: "!text-5xl !font-normal",
     "h1-500": "!text-5xl !font-medium",
     "h1-600": "!text-5xl !font-semibold",
     "h1-700": "!text-5xl !font-bold",
-    h2: "text-4xl font-normal",
+    h2: "!text-4xl !font-normal",
     "h2-500": "!text-4xl !font-medium",
     "h2-600": "!text-4xl !font-semibold",
     "h2-700": "!text-4xl !font-bold",
-    h3: "text-3xl font-normal",
+    h3: "!text-3xl !font-normal",
     "h3-500": "!text-3xl !font-medium",
     "h3-600": "!text-3xl !font-semibold",
     "h3-700": "!text-3xl !font-bold",
-    h4: "text-2xl font-normal",
+    h4: "!text-2xl !font-normal",
     "h4-500": "!text-2xl !font-medium",
     "h4-600": "!text-2xl !font-semibold",
     "h4-700": "!text-2xl !font-bold",
-    h5: "text-xl font-normal",
+    h5: "!text-xl !font-normal",
     "h5-500": "!text-xl !font-medium",
     "h5-600": "!text-xl !font-semibold",
     "h5-700": "!text-xl !font-bold",
@@ -64,6 +64,6 @@ function Heading(_a) {
     if (variant === null || variant === void 0 ? void 0 : variant.startsWith("h")) {
         Tag = variant.split("-")[0];
     }
-    return (_jsx(Tag, __assign({ className: cn(headingVariants({ variant: variant, className: className }), "m-0") }, props, { children: children })));
+    return (_jsx(Tag, __assign({ className: cn(headingVariants({ variant: variant, className: className }), "m-0 !leading-normal") }, props, { children: children })));
 }
 export { Heading, headingVariants };

package/dist/src/components/ui/caption.js

@@ -29,6 +29,6 @@ export var variantClasses = {
 };
 function Caption(_a) {
     var className = _a.className, children = _a.children, _b = _a.variant, variant = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "children", "variant"]);
-    return (_jsx("p", __assign({ className: cn("font-normal leading-normal inline", variantClasses[variant], className) }, props, { children: children })));
+    return (_jsx("p", __assign({ className: cn("!font-normal !leading-normal inline", variantClasses[variant], className) }, props, { children: children })));
 }
 export { Caption };

package/dist/styles/global.css

@@ -1221,10 +1221,6 @@
     --tw-leading: 1;
     line-height: 1;
   }
-  .leading-normal {
-    --tw-leading: var(--leading-normal);
-    line-height: var(--leading-normal);
-  }
   .\!font-bold {
     --tw-font-weight: var(--font-weight-bold) !important;
     font-weight: var(--font-weight-bold) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "private": false,
   "files": [
     "dist",

package/dist/app/layout.jsx

@@ -1,13 +0,0 @@
-import { Inter } from "next/font/google";
-import "@/styles/globals.css";
-var inter = Inter({ subsets: ["latin"] });
-export var metadata = {
-    title: "Create Next App",
-    description: "Generated by create next app",
-};
-export default function RootLayout(_a) {
-    var children = _a.children;
-    return (<html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>);
-}

package/dist/app/page.jsx

@@ -1,5 +0,0 @@
-export default function Home() {
-    return (<div className="text-center flex flex-col items-center justify-center min-h-screen p-24 gap-5">
-      <h1> Welcome to Linkedunion Design kit</h1>
-    </div>);
-}

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

@@ -1,25 +0,0 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "../ui/accordion";
-import ColorPicker from "../ColorPicker/ColorPicker";
-export default {
-    title: "Components/Accordion",
-    component: Accordion,
-    tags: ["autodocs"],
-};
-var Template = function (args) { return (<Accordion type="single" collapsible defaultValue="menus" {...args}></Accordion>); };
-export var _Accordion = Template.bind({});
-_Accordion.args = {
-    children: (<AccordionItem value="menus">
-      <AccordionTrigger>Menus</AccordionTrigger>
-      <AccordionContent>
-        <ColorPicker value="#000000" onChange={function () { return console.log("color"); }}/>
-      </AccordionContent>
-    </AccordionItem>),
-};
-_Accordion.argTypes = {
-    children: {
-        description: "Pass `AccordionItem` components as children. Each item includes an `AccordionTrigger` (the clickable label) and `AccordionContent` (collapsible body). You can customize both with any valid React nodes \n\nFor more details and usage examples, refer to the [ShadCN Accordion documentation](https://ui.shadcn.com/docs/components/accordion).",
-        table: {
-            type: { summary: "React.ReactNode" },
-        },
-    },
-};

package/dist/src/components/Avatar/Avatar.jsx

@@ -1,17 +0,0 @@
-import LUIcon from "../Icons/LUIcon";
-import Image from "next/image";
-import { avatarPadding, avatarShape, avatarSize } from ".";
-var Avatar = function (_a) {
-    var image = _a.image, _b = _a.icon, icon = _b === void 0 ? "user" : _b, _c = _a.shape, shape = _c === void 0 ? "square" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, className = _a.className;
-    var sizeClasses = avatarSize[size];
-    var paddingClass = avatarPadding[size];
-    return (<>
-      {image ? (<div className={"relative overflow-hidden bg-blue-200 ".concat(avatarShape[shape], " ").concat(className, " ").concat(sizeClasses)} data-testid="lu-avatar">
-          <Image src={image} alt="avatar" className={"object-cover w-full h-full"} width={0} height={0} sizes="100%" //Image takes 100% of the parent container
-        />
-        </div>) : (<div className={"bg-gray-100 ".concat(paddingClass, " ").concat(avatarShape[shape], " ").concat(className, " ").concat(sizeClasses)} data-testid="lu-icon">
-          <LUIcon data-testid="lu-icon" size={size} icon={icon} className={"text-gray-950 w-full h-full"}/>
-        </div>)}
-    </>);
-};
-export default Avatar;

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

@@ -1,31 +0,0 @@
-import Avatar from "./Avatar";
-import { avatarShape, avatarSize } from ".";
-export default {
-    title: "Components/Avatar",
-    component: Avatar,
-};
-var Template = function (args) { return <Avatar {...args}/>; };
-export var _Avatar = Template.bind({});
-_Avatar.args = {
-    image: "/images/avatar.png",
-    shape: "square",
-    size: "md",
-    className: "",
-    icon: "user",
-};
-_Avatar.argTypes = {
-    shape: {
-        control: {
-            type: "select",
-            labels: Object.keys(avatarShape),
-        },
-        options: Object.keys(avatarShape),
-    },
-    size: {
-        control: {
-            type: "select",
-            labels: Object.keys(avatarSize),
-        },
-        options: Object.keys(avatarSize),
-    },
-};

package/dist/src/components/Avatar/Avatar.test.jsx

@@ -1,51 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import Avatar from "./Avatar";
-jest.mock("../Icons/LUIcon", function () { return ({
-    __esModule: true,
-    default: jest.fn(function (_a) {
-        var icon = _a.icon, className = _a.className;
-        return (<div data-testid="mock-luIcon" className={className}>
-      {icon || "user"}
-    </div>);
-    }),
-}); });
-// Mock Next.js Image component
-jest.mock("next/image", function () { return ({
-    __esModule: true,
-    default: function (_a) {
-        var src = _a.src, alt = _a.alt;
-        return (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img src={src} alt={alt}/>);
-    },
-}); });
-describe("Avatar Component", function () {
-    it("renders image when image prop is provided", function () {
-        render(<Avatar image="/images/avatar.png"/>);
-        var avatarImage = screen.getByRole("img", { name: /avatar/i });
-        expect(avatarImage).toBeInTheDocument();
-        expect(avatarImage).toHaveAttribute("src", "/images/avatar.png");
-    });
-});
-it("renders icon when no image is provided", function () {
-    render(<Avatar />);
-    var icon = screen.getByTestId("lu-icon");
-    expect(icon).toBeInTheDocument();
-});
-it("applies shape and size class names correctly", function () {
-    render(<Avatar image="/images/avatar.png" shape="square" size="lg"/>);
-    var avatarWrapper = screen.getByTestId("lu-avatar");
-    expect(avatarWrapper).toHaveClass("rounded-none");
-    expect(avatarWrapper).toHaveClass("w-[42px]");
-    expect(avatarWrapper).toHaveClass("h-[42px]");
-});
-it("applies additional class names", function () {
-    render(<Avatar image="/images/avatar.png" className="custom-class"/>);
-    var avatarWrapper = screen.getByTestId("lu-avatar");
-    expect(avatarWrapper).toHaveClass("custom-class");
-});
-it("renders the correct icon when image is not provided", function () {
-    render(<Avatar icon="user"/>);
-    var icon = screen.getByTestId("lu-icon");
-    expect(icon).toBeInTheDocument();
-});

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

@@ -1,93 +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 * 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";
-export var color = {
-    blue: "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-300 active:bg-blue-800 disabled:bg-gray-100 disabled:text-gray-400",
-    red: "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-300 active:bg-red-800 disabled:bg-gray-100 disabled:text-gray-400",
-    green: "bg-green-600 text-white hover:bg-green-700 focus-visible:ring-green-300 active:bg-green-800 disabled:bg-gray-100 disabled:text-gray-400",
-    yellow: "bg-yellow-500 text-white hover:bg-yellow-600 focus-visible:ring-yellow-200 active:bg-yellow-700 disabled:bg-gray-100 disabled:text-gray-400",
-    indigo: "bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:ring-indigo-300 active:bg-indigo-800 disabled:bg-gray-100 disabled:text-gray-400",
-    gray: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-300 active:bg-gray-800 disabled:bg-gray-100 disabled:text-gray-400",
-};
-export var size = {
-    xl: "!py-3.5 !px-6 text-base font-normal leading-normal",
-    lg: "!py-3 !px-5 text-base font-normal leading-normal",
-    md: "!py-2.5 !px-5 text-sm font-normal leading-5",
-    sm: "!py-2 !px-3 text-sm font-normal leading-5",
-};
-export var shape = {
-    "rounded-sm": "!rounded-sm",
-    "rounded-full": "!rounded-full",
-};
-export var variant = {
-    default: "",
-    link: "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent !p-0 underline-offset-4 hover:underline",
-};
-// Link variant text colors based on the color prop
-export var linkColor = {
-    blue: "text-blue-600 hover:text-blue-700",
-    red: "text-red-600 hover:text-red-700",
-    green: "text-green-600 hover:text-green-700",
-    yellow: "text-yellow-500 hover:text-yellow-600",
-    indigo: "text-indigo-600 hover:text-indigo-700",
-    gray: "text-gray-600 hover:text-gray-700",
-};
-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", {
-    variants: {
-        color: color,
-        size: size,
-        shape: shape,
-        variant: variant,
-    },
-    defaultVariants: {
-        color: "blue",
-        size: "md",
-        shape: "rounded-sm",
-        variant: "default",
-    },
-});
-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]
-        : "";
-    return (<Comp data-slot="button" className={cn(buttonVariants({ variant: variant, color: color, size: size, shape: shape, className: className }), extraClasses)} {...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.stories.jsx

@@ -1,248 +0,0 @@
-import { Button, size, color, shape, variant } from "./Button";
-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: "default",
-    },
-    argTypes: {
-        color: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(color),
-            description: "The color and visual style of the button",
-            defaultValue: "blue",
-            table: {
-                defaultValue: { summary: "blue" },
-            },
-        },
-        size: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(size),
-            description: "The size of the button",
-            defaultValue: "md",
-            table: {
-                defaultValue: { summary: "md" },
-            },
-        },
-        shape: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(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: "default",
-            table: {
-                defaultValue: { summary: "default" },
-            },
-        },
-        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",
-        },
-    },
-};
-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: "default",
-        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: "default",
-    },
-};
-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,
-    },
-};