linkedunion-design-kit 1.9.6-beta.0 → 1.9.6-beta.1

package/dist/src/components/Card/SinglePost/SinglePost.stories.jsx

@@ -1,63 +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);
-};
-import Card from "../card";
-import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
-var meta = {
-    title: "Components/Cards/SinglePost",
-    component: Card,
-    parameters: {
-        layout: "centered",
-    },
-    argTypes: {
-        type: {
-            control: false,
-            table: {
-                disable: true,
-            },
-        },
-        orientation: {
-            table: {
-                disable: true,
-            },
-        },
-        mediaPosition: {
-            control: "select",
-            options: ["left", "right"],
-            description: "Position of media in horizontal layout",
-        },
-    },
-};
-export default meta;
-var baseCardArgs = {
-    item: {
-        image: Dummy_Image,
-        title: Dummy_Title,
-        description: Dummy_Para,
-        short_description: Dummy_Subtitle,
-    },
-    image: Dummy_Image,
-    href: Dummy_Url,
-    btnLabel: "View More",
-    editor: {
-        card: "",
-        cardImage: "",
-        cardTitle: "",
-        cardText: "",
-        cardBtn: "",
-    },
-};
-export var SinglePostHorizontalLeft = {
-    args: __assign(__assign({ type: "singlePost" }, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
-};
-export var SinglePostHorizontalRight = {
-    args: __assign(__assign({ type: "singlePost" }, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
-};

package/dist/src/components/Card/card.jsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { PostByCategory } from "./PostByCategory/PostByCategory";
-import { MultipleNewsCard } from "./MultipleNews/MultiNews";
-import { SinglePost } from "./SinglePost/SinglePost";
-import { ContactProfile } from "./contactProfile/ContactProfile";
-import { PhotoGallery } from "./photoGallery/PhotoGallery";
-import { PhotoAlbum } from "./photoAlbum/PhotoAlbum";
-var cardComponents = {
-    postByCategory: PostByCategory,
-    contactProfile: ContactProfile,
-    multipleNews: MultipleNewsCard,
-    singlePost: SinglePost,
-    photoGallery: PhotoGallery,
-    photoAlbum: PhotoAlbum,
-};
-var Card = function (props) {
-    var Component = cardComponents[props.type];
-    return Component ? <Component {...props}/> : null;
-};
-export default Card;

package/dist/src/components/Card/contactProfile/ContactProfile.jsx

@@ -1,60 +0,0 @@
-import Link from "next/link";
-import LuImage from "../../Images/LuImage";
-import { Heading } from "../../Typography/Heading/heading";
-import { Body } from "../../Typography/Body/body";
-import { Button } from "../../Button/Button/Button";
-export var ContactProfile = function (_a) {
-    var item = _a.item, image = _a.image, href = _a.href, btnLabel = _a.btnLabel, editor = _a.editor, mediaPosition = _a.mediaPosition, orientation = _a.orientation;
-    // Normalize mediaPosition based on orientation
-    var safeMediaPosition = orientation === "horizontal"
-        ? mediaPosition === "left" || mediaPosition === "right"
-            ? mediaPosition
-            : "right"
-        : mediaPosition === "top" || mediaPosition === "bottom"
-            ? mediaPosition
-            : "top";
-    // Common card media component to avoid duplication
-    var CardMedia = function (_a) {
-        var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (<LuImage src={image} width={240} height={240} className={"w-full h-full rounded-full max-w-40 mx-auto aspect-square object-cover ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>);
-    };
-    // Common content section component
-    var CardContent = function (_a) {
-        var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (<div className={"flex flex-col !gap-1 ".concat(className)}>
-      <Heading variant="h5-600" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize line-clamp-1 !m-0")}>
-        {item === null || item === void 0 ? void 0 : item.title}
-      </Heading>
-      <Body variant="body-md" className={" ".concat(orientation === "horizontal" ? "line-clamp-1" : "line-clamp-2", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
-        {item === null || item === void 0 ? void 0 : item.description}
-      </Body>
-    </div>);
-    };
-    // Common button component
-    var CardButton = function (_a) {
-        var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (<Link href={href || "#"} passHref>
-      <Button endIcon={"angle-right"} size="sm" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, "  ").concat(className)}>
-        {btnLabel}
-      </Button>
-    </Link>);
-    };
-    // Horizontal layout
-    if (orientation === "horizontal") {
-        return (<div className={"!p-5 bg-white rounded-xl flex ".concat(safeMediaPosition === "left" ? "sm:flex-row" : "sm:flex-row-reverse", " max-w-5xl !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
-        <CardMedia className={"".concat(safeMediaPosition === "right" ? "order-3" : "order-1", " w-full max-w-40 aspect-square object-cover")}/>
-        <div className={"flex-1 flex flex-col !gap-1 md:!gap-2.5 text-center sm:!text-left h-full justify-center ".concat(safeMediaPosition === "right" ? "order-1" : "order-2")}>
-          <CardContent />
-          <CardButton />
-        </div>
-      </div>);
-    }
-    // Vertical layout
-    return (<div className={"p-8 bg-white rounded-xl flex flex-col gap-6 max-w-md items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
-      <div className={"flex w-full ".concat(safeMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center !gap-5 text-center")}>
-        <CardMedia className="w-full h-full aspect-5/4 object-cover"/>
-        <CardContent className="h-20"/>
-      </div>
-      <CardButton />
-    </div>);
-};

package/dist/src/components/Card/contactProfile/ContactProfile.stories.jsx

@@ -1,99 +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);
-};
-import { Dummy_Image, Dummy_Para, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
-import { OrientationEnum } from "../../../utils/enums";
-import Card from "../card";
-var meta = {
-    title: "Components/Cards/ContactProfile",
-    component: Card,
-    parameters: {
-        layout: "centered",
-    },
-    argTypes: {
-        type: {
-            control: false,
-            table: {
-                disable: true,
-            },
-        },
-        orientation: {
-            control: "select",
-            options: [OrientationEnum.horizontal, OrientationEnum.vertical],
-        },
-        mediaPosition: {
-            control: "select",
-            options: ["left", "right", "top", "middle", "bottom"],
-            description: "For horizontal: use left/right. For vertical: use top/middle/bottom",
-        },
-    },
-    decorators: [
-        function (Story, context) {
-            // Dynamically update mediaPosition options based on orientation
-            var args = context.args;
-            var orientation = args.orientation;
-            if (orientation === OrientationEnum.horizontal) {
-                if (context.argTypes.mediaPosition) {
-                    context.argTypes.mediaPosition.options = ["left", "right"];
-                }
-                // Reset mediaPosition if it's not valid for horizontal
-                if (args.mediaPosition &&
-                    !["left", "right"].includes(args.mediaPosition)) {
-                    args.mediaPosition = "left";
-                }
-            }
-            else if (orientation === OrientationEnum.vertical) {
-                if (context.argTypes.mediaPosition) {
-                    context.argTypes.mediaPosition.options = ["top", "middle", "bottom"];
-                }
-                // Reset mediaPosition if it's not valid for vertical
-                if (args.mediaPosition &&
-                    !["top", "middle", "bottom"].includes(args.mediaPosition)) {
-                    args.mediaPosition = "top";
-                }
-            }
-            return <Story />;
-        },
-    ],
-};
-export default meta;
-var baseCardArgs = {
-    item: {
-        image: Dummy_Image,
-        title: Dummy_Title,
-        description: Dummy_Para,
-    },
-    image: Dummy_Image,
-    href: Dummy_Url,
-    btnLabel: "View More",
-    editor: {
-        card: "",
-        cardImage: "",
-        cardTitle: "",
-        cardText: "",
-        cardBtn: "",
-    },
-};
-export var ContactProfileHorizontalLeft = {
-    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
-};
-export var ContactProfileHorizontalRight = {
-    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
-};
-export var ContactProfileVerticalTop = {
-    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
-};
-export var ContactProfileVerticalMiddle = {
-    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
-};
-export var ContactProfileVerticalBottom = {
-    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
-};

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

@@ -1,41 +0,0 @@
-import LuImage from "../../../components/Images/LuImage";
-import { Heading } from "../../../components/Typography/Heading/heading";
-import LUIcon from "../../../components/Icons/LUIcon";
-import { AvatarGroup } from "../../Avatar/AvatarGroup/AvatarGroup";
-export var PhotoAlbum = function (_a) {
-    var image = _a.image, item = _a.item, _b = _a.altText, altText = _b === void 0 ? "Photo Album" : _b, editor = _a.editor, _c = _a.theme, theme = _c === void 0 ? "theme1" : _c;
-    var hasImages = Array.isArray(item === null || item === void 0 ? void 0 : item.images) && item.images.length > 0;
-    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 inset-0 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " bg-linear-to-t from-black to-transparent")}></div>
-      {theme === "theme2" ? (<div className="absolute bottom-0 right-0 w-full bg-black/75 !px-5 !py-3 flex items-center justify-between duration-300
-    group-hover:bg-transparent">
-          <Heading variant="h4-700" className={"line-clamp-1 text-white uppercase ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
-            {item === null || item === void 0 ? void 0 : item.title}
-          </Heading>
-          {hasImages && (<div>
-              <AvatarGroup images={((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({
-                    id: img.gallery_id,
-                    image: img.gallery_image,
-                }); })}/>
-            </div>)}
-        </div>) : (<>
-          {hasImages && (<div className="absolute top-0 right-0 !px-5 !py-3">
-              <AvatarGroup images={((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({
-                    id: img.gallery_id,
-                    image: img.gallery_image,
-                }); })}/>
-            </div>)}
-          <div className="absolute !px-5 !py-3 bottom-0">
-            <Heading variant="h4-700" className={"line-clamp-1 text-white uppercase ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
-              {item === null || item === void 0 ? void 0 : item.title}
-            </Heading>
-          </div>
-        </>)}
-
-      {/* Search icon - appears on hover */}
-      <div className={"absolute inset-0 flex items-center justify-center opacity-0 group-hover:!opacity-100 duration-300 ease-out ".concat(theme === "theme2" ? "bg-black/75 origin-bottom scale-y-0 transition-all group-hover:scale-y-100" : "bg-black/30")}>
-        <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/photoAlbum/PhotoAlbum.stories.jsx

@@ -1,51 +0,0 @@
-import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
-import Card from "../card";
-export default {
-    title: "Components/Cards/PhotoAlbum",
-    component: Card,
-    tags: ["autodocs"],
-    argTypes: {
-        theme: {
-            control: "select",
-            options: ["theme1", "theme2"], // Add all valid theme options here
-            description: "Select the card theme",
-        },
-    },
-};
-var Template = function (args) { return <Card {...args}/>; };
-export var Default = Template.bind({});
-Default.args = {
-    type: "photoAlbum",
-    theme: "theme1",
-    altText: "Photo Gallery",
-    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: "Third Gallery",
-                gallery_image: Dummy_Image,
-                gallery_id: 3,
-                description: "This is a third sample image description.",
-            },
-        ],
-    },
-    image: Dummy_Image,
-    editor: {
-        card: "",
-        cardImage: "",
-        cardOverlay: "",
-        cardText: "",
-    },
-};

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

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

@@ -1,34 +0,0 @@
-// import { CardInterface } from "../type";
-import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
-import Card from "../card";
-export default {
-    title: "Components/Cards/PhotoGallery",
-    component: Card,
-    tags: ["autodocs"],
-    argTypes: {
-        altText: {
-            control: { type: "text", disabled: true },
-            description: 'Alternative text for the image (default: "Photo Gallery")',
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "Photo Gallery" },
-            },
-        },
-    },
-};
-var Template = function (args) { return <Card {...args}/>; };
-export var Default = Template.bind({});
-Default.args = {
-    type: "photoGallery",
-    item: {
-        title: Dummy_Title,
-    },
-    image: Dummy_Image,
-    altText: "Photo Gallery",
-    editor: {
-        card: "",
-        cardImage: "",
-        cardOverlay: "",
-        cardText: "",
-    },
-};

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

@@ -1,47 +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 * 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

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

@@ -1,67 +0,0 @@
-"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;