linkedunion-design-kit 1.8.2 → 1.8.4

package/dist/index.d.ts

@@ -17,7 +17,6 @@ export { Display } from "./src/components/Typography/Display/display";
 export { Caption } from "./src/components/ui/caption";
 export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
 export { Button } from "./src/components/Button/Button";
-export { AppIcon } from "./src/components/AppIcons";
 export { Label } from "./src/components/Label/Label";
 export { Slider } from "./src/components/Slider/slider";
 export { RadioButton } from "./src/components/RadioButton/radio-button";

package/dist/index.js

@@ -17,7 +17,6 @@ export { Display } from "./src/components/Typography/Display/display";
 export { Caption } from "./src/components/ui/caption";
 export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
 export { Button } from "./src/components/Button/Button";
-export { AppIcon } from "./src/components/AppIcons";
 export { Label } from "./src/components/Label/Label";
 export { Slider } from "./src/components/Slider/slider";
 export { RadioButton } from "./src/components/RadioButton/radio-button";

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

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "../ui/accordion";
 import ColorPicker from "../ColorPicker/ColorPicker";
 export default {
@@ -20,7 +20,7 @@ export default {
 var Template = function (args) { return (_jsx(Accordion, __assign({ type: "single", collapsible: true, defaultValue: "menus" }, args))); };
 export var _Accordion = Template.bind({});
 _Accordion.args = {
-    children: (_jsxs(AccordionItem, { value: "menus", children: [_jsx(AccordionTrigger, { children: "Menus" }), _jsx(AccordionContent, { children: _jsx(ColorPicker, { value: "#000000", onChange: function () { return console.log("color"); } }) })] })),
+    children: (_jsxs(_Fragment, { children: [_jsxs(AccordionItem, { value: "menus", children: [_jsx(AccordionTrigger, { children: "Menus" }), _jsx(AccordionContent, { children: _jsx(ColorPicker, { value: "#000000", onChange: function () { return console.log("color"); } }) })] }), _jsxs(AccordionItem, { value: "second", children: [_jsx(AccordionTrigger, { children: "Menus" }), _jsx(AccordionContent, { children: _jsx(ColorPicker, { value: "#000000", onChange: function () { return console.log("color"); } }) })] })] })),
 };
 _Accordion.argTypes = {
     children: {

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

@@ -4,5 +4,5 @@ export var AvatarGroup = function (_a) {
     var images = _a.images;
     var visibleImages = images.slice(0, 2);
     var remainingCount = images.length - visibleImages.length;
-    return (_jsxs("div", { className: "flex -space-x-5", children: [visibleImages.map(function (img) { return (_jsx(Avatar, { className: "size-9 !border !border-white !bg-black !shadow-sm", children: _jsx(AvatarImage, { src: img.image, alt: img.name || "Avatar image" }) }, img.id)); }), remainingCount > 0 && (_jsx(Avatar, { className: "size-9 !border !border-white", children: _jsxs(AvatarFallback, { className: "!text-white text-xs font-normal !bg-black !shadow-sm", children: ["+", remainingCount] }) }))] }));
+    return (_jsxs("div", { className: "flex -space-x-5", children: [visibleImages.map(function (img) { return (_jsx(Avatar, { className: "size-9 !border !border-white !bg-black !shadow-sm", children: _jsx(AvatarImage, { src: img.image, alt: img.name || "Avatar image" }) }, img.id)); }), remainingCount > 0 && (_jsx(Avatar, { className: "size-9 !border !border-white", children: _jsxs(AvatarFallback, { className: "!text-black text-xs font-semibold !bg-white !shadow-sm", children: ["+", remainingCount] }) }))] }));
 };

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

@@ -6,7 +6,7 @@ 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, theme = _a.theme;
     var hasImages = Array.isArray(item === null || item === void 0 ? void 0 : item.images) && item.images.length > 0;
-    return (_jsxs("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), children: [_jsx(LuImage, { src: image, width: 448, height: 448, alt: altText, className: "aspect-square object-cover transition-transform" }), _jsx("div", { className: "absolute inset-0 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " ").concat(theme === "theme1" && "bg-linear-to-t from-black to-transparent") }), theme === "theme2" ? (_jsxs("div", { className: "absolute bottom-0 right-0 w-full bg-black/75 !px-5 !py-3 flex items-center justify-between duration-300\n    group-hover:bg-transparent", children: [_jsx(Heading, { variant: "h4-700", className: "line-clamp-1 text-white uppercase ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }), hasImages && (_jsx("div", { children: _jsx(AvatarGroup, { images: ((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({
+    return (_jsxs("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), children: [_jsx(LuImage, { src: image, width: 448, height: 448, alt: altText, className: "aspect-square object-cover transition-transform" }), _jsx("div", { className: "absolute inset-0 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " bg-linear-to-t from-black to-transparent") }), theme === "theme2" ? (_jsxs("div", { className: "absolute bottom-0 right-0 w-full bg-black/75 !px-5 !py-3 flex items-center justify-between duration-300\n    group-hover:bg-transparent", children: [_jsx(Heading, { variant: "h4-700", className: "line-clamp-1 text-white uppercase ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }), hasImages && (_jsx("div", { children: _jsx(AvatarGroup, { images: ((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({
                                 id: img.gallery_id,
                                 image: img.gallery_image,
                             }); }) }) }))] })) : (_jsxs(_Fragment, { children: [hasImages && (_jsx("div", { className: "absolute top-0 right-0 !px-5 !py-3", children: _jsx(AvatarGroup, { images: ((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({

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

@@ -21,20 +21,41 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cn } from "../../lib/utils";
-import { IconButton } from "../Button/IconButton";
+import LUIcon from "../Icons/LUIcon";
 function Accordion(_a) {
     var props = __rest(_a, []);
     return _jsx(AccordionPrimitive.Root, __assign({ "data-slot": "accordion" }, props));
 }
 function AccordionItem(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AccordionPrimitive.Item, __assign({ "data-slot": "accordion-item", className: cn("!border-b last:!border-b-0", className) }, props)));
+    return (_jsx(AccordionPrimitive.Item, __assign({ "data-slot": "accordion-item", className: cn("!py-4 !border-b last:!border-b !border-gray-100", className) }, props)));
 }
 function AccordionTrigger(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, __assign({ "data-slot": "accordion-trigger", className: cn("focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between !rounded-md !text-left !text-sm !font-normal transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>.luIcon-wrapper]:rotate-180", className) }, props, { children: [children, _jsx(IconButton, { color: "blue-light", icon: "angle-down", size: "sm", className: "luIcon-wrapper pointer-events-none shrink-0 transition-transform duration-200" })] })) }));
+    var ref = React.useRef(null);
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    React.useEffect(function () {
+        var updateOpenState = function () {
+            if (ref.current) {
+                var state = ref.current.getAttribute("data-state");
+                setIsOpen(state === "open");
+            }
+        };
+        updateOpenState();
+        // Create a mutation observer to watch for attribute changes
+        var observer = new MutationObserver(updateOpenState);
+        if (ref.current) {
+            observer.observe(ref.current, {
+                attributes: true,
+                attributeFilter: ["data-state"],
+            });
+        }
+        return function () { return observer.disconnect(); };
+    }, []);
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, __assign({ ref: ref, "data-slot": "accordion-trigger", className: cn("flex items-center gap-2 cursor-pointer !text-sm !font-normal !leading-normal grow", className) }, props, { children: [_jsx(LUIcon, { color: "dark-gray", icon: isOpen ? "minus" : "plus", size: "md", className: "pointer-events-none shrink-0" }), children] })) }));
 }
 function AccordionContent(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);

package/dist/styles/global.css

@@ -663,9 +663,6 @@
   .items-center {
     align-items: center;
   }
-  .items-start {
-    align-items: flex-start;
-  }
   .items-stretch {
     align-items: stretch;
   }
@@ -817,6 +814,9 @@
     --tw-border-style: dashed !important;
     border-style: dashed !important;
   }
+  .\!border-gray-100 {
+    border-color: #ecedee !important;
+  }
   .\!border-gray-300 {
     border-color: #b7babd !important;
   }
@@ -844,6 +844,9 @@
   .\!bg-primary {
     background-color: var(--primary) !important;
   }
+  .\!bg-white {
+    background-color: #fefefe !important;
+  }
   .bg-background {
     background-color: var(--background);
   }
@@ -1165,15 +1168,15 @@
   .\!py-3\.5 {
     padding-block: calc(var(--spacing) * 3.5) !important;
   }
+  .\!py-4 {
+    padding-block: calc(var(--spacing) * 4) !important;
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
   .\!ps-12 {
     padding-inline-start: calc(var(--spacing) * 12) !important;
   }
-  .\!text-left {
-    text-align: left !important;
-  }
   .text-center {
     text-align: center;
   }
@@ -1319,12 +1322,12 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .\!text-black {
+    color: #0f0f0f !important;
+  }
   .\!text-primary-foreground {
     color: var(--primary-foreground) !important;
   }
-  .\!text-white {
-    color: #fefefe !important;
-  }
   .text-blue-50 {
     color: #fbfcfe;
   }
@@ -1632,10 +1635,6 @@
     --tw-duration: 150ms;
     transition-duration: 150ms;
   }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
   .duration-300 {
     --tw-duration: 300ms;
     transition-duration: 300ms;
@@ -1773,10 +1772,10 @@
       color: var(--muted-foreground);
     }
   }
-  .last\:\!border-b-0 {
+  .last\:\!border-b {
     &:last-child {
       border-bottom-style: var(--tw-border-style) !important;
-      border-bottom-width: 0px !important;
+      border-bottom-width: 1px !important;
     }
   }
   .checked\:border-blue-600 {
@@ -3301,11 +3300,6 @@
       flex-shrink: 0;
     }
   }
-  .\[\&\[data-state\=open\]\>\.luIcon-wrapper\]\:rotate-180 {
-    &[data-state=open]>.luIcon-wrapper {
-      rotate: 180deg;
-    }
-  }
 }
 @property --tw-animation-delay {
   syntax: "*";

package/package.json

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