npm - linkedunion-design-kit - Versions diffs - 1.11.6 → 1.11.8 - Mend

linkedunion-design-kit 1.11.6 → 1.11.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/dist/src/components/Card/MultipleNews/{MultiNews.stories.js → MultiNews.stories.jsx} RENAMED Viewed

@@ -9,7 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, } from "../../../utils/constants";
 import { OrientationEnum } from "../../../utils/enums";
 import Card from "../card";
@@ -61,7 +60,7 @@ var meta = {
                     args.mediaPosition = "top";
                 }
             }
-            return _jsx(Story, {});
+            return <Story />;
         },
     ],
 };

package/dist/src/components/Card/PostByCategory/PostByCategory.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ import { CardInterface } from "../type";
 export interface PostByCategoryProps extends Omit<CardInterface, "href" | "type"> {
     onButtonClick?: () => void;
 }
-export declare const PostByCategory: ({ item, image, btnLabel, onButtonClick, editor, mediaPosition, orientation, }: PostByCategoryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PostByCategory: ({ item, image, btnLabel, onButtonClick, editor, mediaPosition, orientation, }: PostByCategoryProps) => import("react").JSX.Element;

package/dist/src/components/Card/PostByCategory/PostByCategory.jsx ADDED Viewed

@@ -0,0 +1,57 @@
+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 PostByCategory = function (_a) {
+    var item = _a.item, image = _a.image, btnLabel = _a.btnLabel, onButtonClick = _a.onButtonClick, 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={"!rounded-lg ".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="h4-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 (<Button endIcon={"angle-right"} size="sm" className={"w-fit ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn)} onClick={onButtonClick}>
+      {btnLabel}
+    </Button>);
+    };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (<div className={"!p-5 rounded-xl grid grid-cols-1 sm:grid-cols-3 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-last", " w-full aspect-5/4 sm:aspect-square  object-cover")}/>
+        <div className="flex flex-col !gap-2 md:!gap-5 sm:col-span-2   h-full justify-center">
+          <CardContent />
+          <CardButton />
+        </div>
+      </div>);
+    }
+    // Vertical layout
+    return (<div className={"!p-5 sm:p-8 rounded-xl flex flex-col !gap-5 max-w-[480px]  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 ")}>
+        <CardMedia className="w-full h-full aspect-5/4 object-cover"/>
+        <CardContent className="h-20"/>
+      </div>
+      <CardButton />
+    </div>);
+};

package/dist/src/components/Card/PostByCategory/{PostByCategory.stories.js → PostByCategory.stories.jsx} RENAMED Viewed

@@ -9,7 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, } from "../../../utils/constants";
 import { OrientationEnum } from "../../../utils/enums";
 import Card from "../card";
@@ -61,7 +60,7 @@ var meta = {
                     args.mediaPosition = "top";
                 }
             }
-            return _jsx(Story, {});
+            return <Story />;
         },
     ],
 };

package/dist/src/components/Card/SinglePost/SinglePost.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import { CardInterface } from "../type";
-export declare const SinglePost: ({ item, image, href, btnLabel, editor, mediaPosition, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const SinglePost: ({ item, image, href, btnLabel, editor, mediaPosition, }: CardInterface) => import("react").JSX.Element;

package/dist/src/components/Card/SinglePost/SinglePost.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+import LuImage from "../../Images/LuImage";
+import Link from "next/link";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+import { Button } from "../../Button/Button/Button";
+export var SinglePost = function (_a) {
+    var item = _a.item, image = _a.image, _b = _a.href, href = _b === void 0 ? "https://www.google.com/" : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "right" : _d;
+    return (<div className={" bg-white rounded-3xl grid grid-cols-1 sm:grid-cols-2 overflow-hidden  items-stretch shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <LuImage src={image} width={240} height={240} className={"w-full h-full ".concat(mediaPosition === "right" ? "order-1" : "", "  aspect-5/4  object-cover ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>
+      <div className="p-9 grid grid-rows-[1fr] items-center !gap-2 ">
+        <div className="flex flex-col !gap-3 ">
+          <Heading variant="h2-500" className={"line-clamp-1 md:line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle)}>
+            {item === null || item === void 0 ? void 0 : item.title}
+          </Heading>
+          <Body variant="body-xl" className={"line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " ")}>
+            {item === null || item === void 0 ? void 0 : item.description}
+          </Body>
+        </div>
+        <Link href={href} passHref>
+          <Button endIcon={"angle-right"} size="lg" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn)}>
+            {btnLabel}
+          </Button>
+        </Link>
+      </div>
+    </div>);
+};

package/dist/src/components/Card/card.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from "react";
 import type { MultiNewsProps } from "./MultipleNews/MultiNews";
 import type { CardInterface } from "./type";
 import { PostByCategoryProps } from "./PostByCategory/PostByCategory";
@@ -17,5 +18,5 @@ export type CardProps = ({
         type: K;
     } & CardInterface;
 }[CardTypesWithCardInterface];
-declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Card: (props: CardProps) => React.JSX.Element | null;
 export default Card;

package/dist/src/components/Card/{card.js → card.jsx} RENAMED Viewed

@@ -1,15 +1,4 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { PostByCategory, } from "./PostByCategory/PostByCategory";
 import { MultipleNewsCard } from "./MultipleNews/MultiNews";
 import { SinglePost } from "./SinglePost/SinglePost";
@@ -26,6 +15,6 @@ var cardComponents = {
 };
 var Card = function (props) {
     var Component = cardComponents[props.type];
-    return Component ? _jsx(Component, __assign({}, props)) : null;
+    return Component ? <Component {...props}/> : null;
 };
 export default Card;

package/dist/src/components/Card/contactProfile/ContactProfile.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import { CardInterface } from "../type";
-export declare const ContactProfile: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactProfile: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react").JSX.Element;

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

@@ -0,0 +1,76 @@
+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";
+import LUIcon from "../../../components/Icons/LUIcon";
+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, " min-w-0")}>
+      {(item === null || item === void 0 ? void 0 : item.designation) && (<Body variant="body-md" className="text-gray-600 capitalize truncate min-w-0">
+          {item === null || item === void 0 ? void 0 : item.designation}
+        </Body>)}
+      <Heading variant="h5-600" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize truncate min-w-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>
+      {(item === null || item === void 0 ? void 0 : item.email) && (<div className="flex items-center gap-2 min-w-0">
+          <LUIcon icon="envelope" size="lg"/>
+          <Body variant="body-md" className="text-gray-600 truncate min-w-0">
+            {item === null || item === void 0 ? void 0 : item.email}
+          </Body>
+        </div>)}
+      {(item === null || item === void 0 ? void 0 : item.phone) && (<div className="flex items-center gap-2 min-w-0">
+          <LUIcon icon="phone" size="lg"/>
+          <Body variant="body-md" className="text-gray-600 truncate min-w-0">
+            {item === null || item === void 0 ? void 0 : item.phone}
+          </Body>
+        </div>)}
+    </div>);
+    };
+    // Common button component
+    var CardButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return btnLabel ? (<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>) : null;
+    };
+    // 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 sm:!text-left h-full justify-center min-w-0 ".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.js → ContactProfile.stories.jsx} RENAMED Viewed

@@ -9,7 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import { DUMMY_designation, DUMMY_email, Dummy_Image, Dummy_Para, DUMMY_phone, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
 import { OrientationEnum } from "../../../utils/enums";
 import Card from "../card";
@@ -61,7 +60,7 @@ var meta = {
                     args.mediaPosition = "top";
                 }
             }
-            return _jsx(Story, {});
+            return <Story />;
         },
     ],
 };

package/dist/src/components/Card/photoAlbum/PhotoAlbum.d.ts CHANGED Viewed

@@ -4,4 +4,4 @@ export interface PhotoAlbumProps extends Omit<CardInterface, "href" | "orientati
     altText?: string;
     theme?: (typeof Themes)[number];
 }
-export declare const PhotoAlbum: ({ image, item, altText, editor, theme, }: PhotoAlbumProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhotoAlbum: ({ image, item, altText, editor, theme, }: PhotoAlbumProps) => import("react").JSX.Element;

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

@@ -0,0 +1,41 @@
+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.js → PhotoAlbum.stories.jsx} RENAMED Viewed

@@ -1,15 +1,3 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
 import Card from "../card";
 export var Themes = ["theme1", "theme2"];
@@ -25,7 +13,7 @@ export default {
         },
     },
 };
-var Template = function (args) { return _jsx(Card, __assign({}, args)); };
+var Template = function (args) { return <Card {...args}/>; };
 export var Default = Template.bind({});
 Default.args = {
     type: "photoAlbum",

package/dist/src/components/Card/photoGallery/PhotoGallery.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ import { CardInterface } from "../type";
 export interface PhotoGalleryProps extends Omit<CardInterface, "href" | "orientation" | "mediaPosition" | "btnLabel"> {
     altText?: string;
 }
-export declare const PhotoGallery: ({ image, item, altText, editor, }: PhotoGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhotoGallery: ({ image, item, altText, editor, }: PhotoGalleryProps) => import("react").JSX.Element;

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

@@ -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.js → PhotoGallery.stories.jsx} RENAMED Viewed

@@ -1,15 +1,3 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 // import { CardInterface } from "../type";
 import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
 import Card from "../card";
@@ -28,7 +16,7 @@ export default {
         },
     },
 };
-var Template = function (args) { return _jsx(Card, __assign({}, args)); };
+var Template = function (args) { return <Card {...args}/>; };
 export var Default = Template.bind({});
 Default.args = {
     type: "photoGallery",

package/dist/src/components/Checkbox/checkbox.d.ts CHANGED Viewed

@@ -8,5 +8,5 @@ export declare const checkboxSize: {
 type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> & {
     size?: keyof typeof checkboxSize;
 };
-declare function Checkbox({ className, size, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Checkbox({ className, size, ...props }: CheckboxProps): React.JSX.Element;
 export { Checkbox };

package/dist/src/components/Checkbox/{checkbox.js → checkbox.jsx} RENAMED Viewed

@@ -1,14 +1,3 @@
-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)
@@ -20,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
 import { cn } from "../../lib/utils";
@@ -49,6 +38,10 @@ var checkboxCva = cva("peer !border border-input !rounded-xs dark:bg-input/30 da
 });
 function Checkbox(_a) {
     var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
-    return (_jsx(CheckboxPrimitive.Root, __assign({ "data-slot": "checkbox", className: cn(checkboxCva({ size: size }), className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: _jsx(CheckIcon, { className: iconSize[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 ADDED Viewed

@@ -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.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import { ColorPickerProps } from "./type";
-declare const ColorPicker: ({ onChange, value, size, variant, color, shape, className, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ColorPicker: ({ onChange, value, size, variant, color, shape, className, ...props }: ColorPickerProps) => import("react").JSX.Element;
 export default ColorPicker;

package/dist/src/components/ColorPicker/{ColorPicker.js → ColorPicker.jsx} RENAMED Viewed

@@ -1,15 +1,4 @@
 "use client";
-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)
@@ -21,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Input } from "../Input/input";
 import { getColorPickerSizes, getShapeClass } from ".";
@@ -69,6 +57,11 @@ var ColorPicker = function (_a) {
     var handleColorInputChange = function (e) {
         handleColorChange(e.target.value);
     };
-    return (_jsxs("div", { className: "relative", children: [_jsx("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 }, children: _jsx(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 }) }), _jsx(Input, __assign({ 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))] }));
+    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.d.ts CHANGED Viewed

@@ -3,11 +3,11 @@ import { ColorPickerProps } from "./type";
 declare const _default: Meta;
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorPickerProps>;
-export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
-export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
-export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
-export declare const Shapes: () => import("react/jsx-runtime").JSX.Element;
-export declare const AllCombinations: () => import("react/jsx-runtime").JSX.Element;
+export declare const Sizes: () => import("react").JSX.Element;
+export declare const Variants: () => import("react").JSX.Element;
+export declare const Colors: () => import("react").JSX.Element;
+export declare const Shapes: () => import("react").JSX.Element;
+export declare const AllCombinations: () => import("react").JSX.Element;
 export declare const WithCustomClassName: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorPickerProps>;
 export declare const Disabled: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorPickerProps>;
 export declare const Playground: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorPickerProps>;