linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/Card/photoAlbum/PhotoAlbum.stories.jsx

@@ -0,0 +1,69 @@
+import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
+import Card from "../card";
+import { PhotoAlbum } from "./PhotoAlbum";
+export default {
+    title: "Components/Cards/PhotoAlbum",
+    component: PhotoAlbum,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return <Card {...args}/>; };
+export var Default = Template.bind({});
+Default.args = {
+    type: "photoAlbum",
+    theme: "theme1",
+    item: {
+        title: Dummy_Title,
+        images: [
+            {
+                gallery_name: "Sample Gallery",
+                gallery_image: "https://randomuser.me/api/portraits/men/32.jpg",
+                gallery_id: 1,
+                description: "This is a sample image description.",
+            },
+            {
+                gallery_name: "Another Gallery",
+                gallery_image: "https://randomuser.me/api/portraits/women/44.jpg",
+                gallery_id: 2,
+                description: "This is another sample image description.",
+            },
+            {
+                gallery_name: "Another Gallery",
+                gallery_image: Dummy_Image,
+                gallery_id: 2,
+                description: "https://randomuser.me/api/portraits/men/45.jpg",
+            },
+        ],
+    },
+    image: Dummy_Image,
+    editor: {
+        card: "",
+        cardImage: "",
+        cardOverlay: "",
+        cardText: "",
+    },
+};
+Default.argTypes = {
+    type: {
+        control: false,
+        table: {
+            type: { summary: "string" },
+            defaultValue: {
+                summary: "photoAlbum",
+            },
+        },
+    },
+    theme: {
+        control: {
+            type: "select",
+            labels: ["theme1", "theme2"],
+        },
+        options: ["theme1", "theme2"],
+        defaultValue: {
+            summary: "theme1",
+        },
+    },
+    href: { control: false },
+    btnLabel: { control: false },
+    mediaPosition: { control: false },
+    orientation: { control: false },
+};

package/dist/src/components/Card/photoGallery/PhotoGallery.jsx

@@ -0,0 +1,17 @@
+import LuImage from "../../../components/Images/LuImage";
+import { Heading } from "../../../components/Typography/Heading/heading";
+import LUIcon from "../../../components/Icons/LUIcon";
+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 (<div className={"group relative max-w-md cursor-pointer ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)}>
+      <LuImage src={image} width={448} height={448} alt={altText} className={"aspect-square object-cover transition-transform"}/>
+      <div className={"absolute ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " inset-0 bg-linear-to-t from-black to-transparent")}></div>
+      <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)}>
+        {item === null || item === void 0 ? void 0 : item.title}
+      </Heading>
+      {/* Search icon - appears on hover */}
+      <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:!opacity-100 transition-opacity duration-300 ease-out">
+        <LUIcon icon="magnifying-glass" size="4xl" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " text-gray-100")}/>
+      </div>
+    </div>);
+};

package/dist/src/components/Card/photoGallery/PhotoGallery.stories.jsx

@@ -0,0 +1,39 @@
+import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
+import Card from "../card";
+import { PhotoGallery } from "./PhotoGallery";
+export default {
+    title: "Components/Cards/PhotoGallery",
+    component: PhotoGallery,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return <Card {...args}/>; };
+export var Default = Template.bind({});
+Default.args = {
+    type: "photoGallery",
+    item: {
+        title: Dummy_Title,
+    },
+    image: Dummy_Image,
+    editor: {
+        card: "",
+        cardImage: "",
+        cardOverlay: "",
+        cardText: "",
+    },
+};
+Default.argTypes = {
+    type: {
+        control: false,
+        table: {
+            type: { summary: "string" },
+            defaultValue: {
+                summary: "photoGallery",
+            },
+        },
+    },
+    href: { control: false },
+    btnLabel: { control: false },
+    mediaPosition: { control: false },
+    orientation: { control: false },
+    theme: { control: false },
+};

package/dist/src/components/Checkbox/checkbox.jsx

@@ -0,0 +1,47 @@
+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 * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { cva } from "class-variance-authority";
+export var checkboxSize = {
+    sm: "size-3.5", // ~14px
+    md: "size-4", // ~16px
+    lg: "size-5", // ~20px
+};
+var iconSize = {
+    sm: "size-3", // ~12px
+    md: "size-3.5", // ~14px
+    lg: "size-4", // ~16px
+};
+var checkboxCva = cva("peer !border border-input !rounded-xs dark:bg-input/30 data-[state=checked]:bg-blue-600 data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shrink-0 hover:border-blue-600 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        size: {
+            sm: "size-3.5",
+            md: "size-4",
+            lg: "size-5",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+function Checkbox(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
+    return (<CheckboxPrimitive.Root data-slot="checkbox" className={cn(checkboxCva({ size: size }), className)} {...props}>
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="flex items-center justify-center text-current transition-none">
+        <CheckIcon className={iconSize[size]}/>
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>);
+}
+export { Checkbox };

package/dist/src/components/Checkbox/checkbox.stories.jsx

@@ -0,0 +1,113 @@
+import { Checkbox, checkboxSize } from "./checkbox";
+import { Label } from "../Label/Label";
+import { Button } from "../Button/Button/Button";
+var meta = {
+    title: "components/Checkbox",
+    component: Checkbox,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        checked: { control: "boolean" },
+        defaultChecked: { control: "boolean" },
+        disabled: { control: "boolean" },
+        onCheckedChange: { action: "checked changed" },
+        size: {
+            control: { type: "select" },
+            options: Object.keys(checkboxSize),
+            description: "Checkbox size",
+            table: {
+                defaultValue: { summary: "md" },
+                type: { summary: Object.keys(checkboxSize).join(" | ") },
+            },
+        },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        id: "default",
+    },
+    render: function (args) { return (<div className="flex items-center space-x-2">
+      <Checkbox {...args}/>
+      <Label htmlFor="default" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Accept terms and conditions
+      </Label>
+    </div>); },
+};
+export var Checked = {
+    args: {
+        id: "checked",
+        defaultChecked: true,
+    },
+    render: function (args) { return (<div className="flex items-center space-x-2">
+      <Checkbox {...args}/>
+      <Label htmlFor="checked" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Checked option
+      </Label>
+    </div>); },
+};
+export var Disabled = {
+    args: {
+        id: "disabled",
+        disabled: true,
+    },
+    render: function (args) { return (<div className="flex items-center space-x-2">
+      <Checkbox {...args}/>
+      <Label htmlFor="disabled" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Disabled option
+      </Label>
+    </div>); },
+};
+export var DisabledChecked = {
+    args: {
+        id: "disabled-checked",
+        disabled: true,
+        defaultChecked: true,
+    },
+    render: function (args) { return (<div className="flex items-center space-x-2">
+      <Checkbox {...args}/>
+      <Label htmlFor="disabled-checked" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Disabled checked option
+      </Label>
+    </div>); },
+};
+export var Form = {
+    render: function () { return (<div className="space-y-4">
+      <h3 className="text-lg font-medium">Terms of Service</h3>
+      <p className="text-sm text-muted-foreground">
+        Please read and accept our terms of service to continue.
+      </p>
+      <form className="space-y-2">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="terms1"/>
+          <label htmlFor="terms1" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+            I accept the terms and conditions
+          </label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="terms2"/>
+          <Label htmlFor="terms2" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+            I agree to receive marketing emails
+          </Label>
+        </div>
+        <Button type="submit" className="mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
+          Submit
+        </Button>
+      </form>
+    </div>); },
+};
+export var WithAlert = {
+    args: {
+        id: "alert-checkbox",
+    },
+    render: function (args) { return (<div className="flex items-center space-x-2">
+      <Checkbox {...args} onCheckedChange={function (checked) {
+            window.alert("Checkbox is now ".concat(checked ? "checked" : "unchecked"));
+        }}/>
+      <Label htmlFor="alert-checkbox" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Click to show alert
+      </Label>
+    </div>); },
+};

package/dist/src/components/ColorPicker/ColorPicker.jsx

@@ -0,0 +1,67 @@
+"use client";
+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 { useState, useEffect } from "react";
+import { Input } from "../Input/input";
+import { getColorPickerSizes, getShapeClass } from ".";
+var useDebounce = function (value, delay) {
+    var _a = useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    useEffect(function () {
+        var handler = setTimeout(function () {
+            setDebouncedValue(value);
+        }, delay);
+        return function () {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+};
+var ColorPicker = function (_a) {
+    var onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? "#000000" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "filled" : _d, _e = _a.color, color = _e === void 0 ? "default" : _e, _f = _a.shape, shape = _f === void 0 ? "square" : _f, className = _a.className, props = __rest(_a, ["onChange", "value", "size", "variant", "color", "shape", "className"]);
+    var _g = useState(value), hexColor = _g[0], setHexColor = _g[1];
+    var debouncedHexColor = useDebounce(hexColor, 200); // Use prop or default
+    var sizes = getColorPickerSizes(size || "md");
+    // Handle input changes (color picker or text field)
+    var handleColorChange = function (newColor) {
+        var formattedColor = newColor.startsWith("#") ? newColor : "#".concat(newColor);
+        setHexColor(formattedColor); // Set the local state immediately
+    };
+    useEffect(function () {
+        if (value !== hexColor) {
+            setHexColor(value);
+        }
+    }, [value]);
+    // Trigger onChange callback only when debounced value updates
+    useEffect(function () {
+        onChange(debouncedHexColor); // Trigger onChange with debounced value
+    }, [debouncedHexColor]);
+    // Handle hex input change
+    var handleHexChange = function (e) {
+        var inputValue = e.target.value;
+        // Ensure it starts with #
+        if (inputValue.length > 7) {
+            inputValue = inputValue.slice(0, 7); // Limit the input to 7 characters
+        }
+        handleColorChange(inputValue);
+    };
+    // Handle color input change (from native color picker)
+    var handleColorInputChange = function (e) {
+        handleColorChange(e.target.value);
+    };
+    return (<div className="relative">
+      <div className={"".concat(sizes.colorBox, " ").concat(sizes.left, " !border border-gray-200 ").concat(getShapeClass(shape), " top-1/2 -translate-y-1/2 absolute z-10 overflow-hidden")} style={{ backgroundColor: hexColor }}>
+        <Input type="color" value={hexColor} onChange={handleColorInputChange} className="h-full w-full opacity-0 cursor-pointer" aria-label="Select color" variant={variant} color={color} shape={shape}/>
+      </div>
+      <Input type="text" value={hexColor} onChange={handleHexChange} maxLength={7} aria-label="Hex color input" className={"p-1.5 border ".concat(sizes.minWidth, " ").concat(sizes.paddingStart, " ").concat(className || "")} size={size} variant={variant} color={color} shape={shape} {...props}/>
+    </div>);
+};
+export default ColorPicker;

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

@@ -0,0 +1,138 @@
+import ColorPicker from "./ColorPicker";
+import { Label } from "../Label/Label";
+import { inputVariantConfig } from "../Input/input";
+export default {
+    title: "Components/ColorPicker",
+    component: ColorPicker,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: "select",
+            options: Object.keys(inputVariantConfig.size),
+        },
+        variant: {
+            control: "select",
+            options: Object.keys(inputVariantConfig.variant),
+        },
+        color: {
+            control: "select",
+            options: Object.keys(inputVariantConfig.color),
+        },
+        shape: {
+            control: "select",
+            options: Object.keys(inputVariantConfig.shape),
+        },
+        value: {
+            control: "color",
+        },
+    },
+};
+var Template = function (args) { return <ColorPicker {...args}/>; };
+export var Default = Template.bind({});
+Default.args = {
+    // Blue color
+    onChange: function (color) {
+        console.log("Selected color:", color);
+    },
+};
+export var Sizes = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant="label-sm">Small</Label>
+      <ColorPicker size="sm" value="#ef4444" onChange={function (color) { return console.log("Small:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Medium</Label>
+      <ColorPicker size="md" value="#10b981" onChange={function (color) { return console.log("Medium:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Large</Label>
+      <ColorPicker size="lg" value="#8b5cf6" onChange={function (color) { return console.log("Large:", color); }}/>
+    </div>
+  </div>); };
+export var Variants = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant="label-sm">Filled</Label>
+      <ColorPicker variant="filled" value="#f59e0b" onChange={function (color) { return console.log("Filled:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Outlined</Label>
+      <ColorPicker variant="outlined" value="#06b6d4" onChange={function (color) { return console.log("Outlined:", color); }}/>
+    </div>
+  </div>); };
+export var Colors = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant="label-sm">Default</Label>
+      <ColorPicker color="default" value="#6366f1" onChange={function (color) { return console.log("Default:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Danger</Label>
+      <ColorPicker color="danger" value="#dc2626" onChange={function (color) { return console.log("Danger:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Warning</Label>
+      <ColorPicker color="warning" value="#d97706" onChange={function (color) { return console.log("Warning:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Success</Label>
+      <ColorPicker color="success" value="#059669" onChange={function (color) { return console.log("Success:", color); }}/>
+    </div>
+  </div>); };
+export var Shapes = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant="label-sm">Square</Label>
+      <ColorPicker shape="square" value="#ec4899" onChange={function (color) { return console.log("Square:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Rounded</Label>
+      <ColorPicker shape="rounded" value="#14b8a6" onChange={function (color) { return console.log("Rounded:", color); }}/>
+    </div>
+  </div>); };
+export var AllCombinations = function () { return (<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div>
+      <Label variant="label-sm">Small + Filled + Danger + Rounded</Label>
+      <ColorPicker size="sm" variant="filled" color="danger" shape="rounded" value="#ef4444" onChange={function (color) { return console.log("Combo 1:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Medium + Outlined + Success + Square</Label>
+      <ColorPicker size="md" variant="outlined" color="success" shape="square" value="#10b981" onChange={function (color) { return console.log("Combo 2:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Large + Filled + Warning + Rounded</Label>
+      <ColorPicker size="lg" variant="filled" color="warning" shape="rounded" value="#f59e0b" onChange={function (color) { return console.log("Combo 3:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Small + Outlined + Default + Square</Label>
+      <ColorPicker size="sm" variant="outlined" color="default" shape="square" value="#6366f1" onChange={function (color) { return console.log("Combo 4:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Large + Outlined + Danger + Rounded</Label>
+      <ColorPicker size="lg" variant="outlined" color="danger" shape="rounded" value="#dc2626" onChange={function (color) { return console.log("Combo 5:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Medium + Filled + Success + Square</Label>
+      <ColorPicker size="md" variant="filled" color="success" shape="square" value="#059669" onChange={function (color) { return console.log("Combo 6:", color); }}/>
+    </div>
+  </div>); };
+export var WithCustomClassName = Template.bind({});
+WithCustomClassName.args = {
+    value: "#8b5cf6",
+    className: "border-2 border-purple-500 shadow-lg",
+    onChange: function (color) { return console.log("Custom styled:", color); },
+};
+export var Disabled = Template.bind({});
+Disabled.args = {
+    value: "#6b7280",
+    disabled: true,
+    onChange: function (color) { return console.log("Disabled:", color); },
+};
+export var Playground = Template.bind({});
+Playground.args = {
+    value: "#3b82f6",
+    size: "md",
+    variant: "filled",
+    color: "default",
+    shape: "square",
+    onChange: function (color) {
+        alert("onChange: ".concat(color));
+    },
+};

package/dist/src/components/Colors/color.jsx

@@ -0,0 +1,5 @@
+import { colors } from "../../utils/colors";
+export var Color = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "black" : _b;
+    return <div style={{ color: colors[color] || colors.black }}>{color}</div>;
+};

package/dist/src/components/Colors/color.stories.jsx

@@ -0,0 +1,20 @@
+import { colors } from "../../utils/colors";
+import { Color } from "./color";
+export default {
+    title: "Components/Color",
+    component: Color,
+};
+var Template = function (args) { return (<Color {...args}/>); };
+export var _Color = Template.bind({});
+_Color.args = {
+    color: "black", // Default color
+};
+_Color.argTypes = {
+    color: {
+        control: {
+            type: "select",
+            labels: Object.keys(colors),
+        },
+        options: Object.keys(colors),
+    },
+};

package/dist/src/components/Colors/color.test.jsx

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import { colors } from "../../utils/colors";
+import { Color } from "./color";
+describe("TextColor Component", function () {
+    it("renders with default color (black)", function () {
+        render(<Color />);
+        var textElement = screen.getByText("black");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors.black });
+    });
+    it("renders with a specified color", function () {
+        render(<Color color="blue-500"/>);
+        var textElement = screen.getByText("blue-500");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors["blue-500"] });
+    });
+    it("handles invalid color gracefully", function () {
+        render(<Color color={"invalid-color"}/>);
+        var textElement = screen.getByText("invalid-color");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors.black }); // It should default to black
+    });
+});