@0xsquid/ui 2.5.1-beta.0 → 2.6.0

package/dist/cjs/index.js

@@ -3016,6 +3016,19 @@ const backgrounds = {
     rgba(180, 143, 233, 1) 100%
   )`,
 };
+// Format animation durations object to Tailwind config
+// This way Tailwind can generate utility classes for each duration
+// i.e tw-duration-hide-modal, tw-duration-show-route, etc...
+//
+// {
+//  HIDE_MODAL: 400
+//  SHOW_ROUTE: 300
+// }
+// ->
+// {
+//  hide-modal: "400"
+//  show-route: "300"
+// }
 const transitionDuration = Object.entries(ANIMATION_DURATIONS).reduce((finalObj, [key, value]) => {
     finalObj[key.toLowerCase().replaceAll("_", "-")] = String(value);
     return finalObj;
@@ -4364,21 +4377,19 @@ const extraPaddingMap = {
     "outline-lg": "3px",
 };
 function ImageStack(_a) {
-    var { imageUrls, spacing, stackOnTop = true, addExtraPadding, removeDuplicates = false } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop", "addExtraPadding", "removeDuplicates"]);
+    var { imageUrls, spacing, stackOnTop = true, addExtraPadding, removeDuplicates = false, containerProps } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop", "addExtraPadding", "removeDuplicates", "containerProps"]);
     const imagesToRender = removeDuplicates ? [...new Set(imageUrls)] : imageUrls;
-    return (jsxRuntime.jsx("div", { style: {
+    return (jsxRuntime.jsx("div", Object.assign({}, containerProps, { style: Object.assign(Object.assign({}, containerProps === null || containerProps === void 0 ? void 0 : containerProps.style), { 
             // @ts-expect-error Custom CSS property
-            "--image-stack-spacing": spacing,
-            padding: addExtraPadding && imageProps.border
+            "--image-stack-spacing": spacing, padding: addExtraPadding && imageProps.border
                 ? extraPaddingMap[imageProps.border]
-                : undefined,
-        }, className: "tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", children: imagesToRender.map((url, index, self) => (jsxRuntime.jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
+                : undefined }), className: cn("tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: imagesToRender.map((url, index, self) => (jsxRuntime.jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
                 ? {
                     style: {
                         zIndex: self.length - index,
                     },
                 }
-                : undefined }, imageProps), index))) }));
+                : undefined }, imageProps), index))) })));
 }
 
 function Chip(_a) {

package/dist/cjs/types/components/layout/ImageStack.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ImageProps } from "../badges";
 interface ImageStackProps extends ImageProps {
     imageUrls: string[];
@@ -8,6 +9,7 @@ interface ImageStackProps extends ImageProps {
     stackOnTop?: boolean;
     addExtraPadding?: boolean;
     removeDuplicates?: boolean;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
-export declare function ImageStack({ imageUrls, spacing, stackOnTop, addExtraPadding, removeDuplicates, ...imageProps }: ImageStackProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageStack({ imageUrls, spacing, stackOnTop, addExtraPadding, removeDuplicates, containerProps, ...imageProps }: ImageStackProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/index.js

@@ -2996,6 +2996,19 @@ const backgrounds = {
     rgba(180, 143, 233, 1) 100%
   )`,
 };
+// Format animation durations object to Tailwind config
+// This way Tailwind can generate utility classes for each duration
+// i.e tw-duration-hide-modal, tw-duration-show-route, etc...
+//
+// {
+//  HIDE_MODAL: 400
+//  SHOW_ROUTE: 300
+// }
+// ->
+// {
+//  hide-modal: "400"
+//  show-route: "300"
+// }
 const transitionDuration = Object.entries(ANIMATION_DURATIONS).reduce((finalObj, [key, value]) => {
     finalObj[key.toLowerCase().replaceAll("_", "-")] = String(value);
     return finalObj;
@@ -4344,21 +4357,19 @@ const extraPaddingMap = {
     "outline-lg": "3px",
 };
 function ImageStack(_a) {
-    var { imageUrls, spacing, stackOnTop = true, addExtraPadding, removeDuplicates = false } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop", "addExtraPadding", "removeDuplicates"]);
+    var { imageUrls, spacing, stackOnTop = true, addExtraPadding, removeDuplicates = false, containerProps } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop", "addExtraPadding", "removeDuplicates", "containerProps"]);
     const imagesToRender = removeDuplicates ? [...new Set(imageUrls)] : imageUrls;
-    return (jsx("div", { style: {
+    return (jsx("div", Object.assign({}, containerProps, { style: Object.assign(Object.assign({}, containerProps === null || containerProps === void 0 ? void 0 : containerProps.style), { 
             // @ts-expect-error Custom CSS property
-            "--image-stack-spacing": spacing,
-            padding: addExtraPadding && imageProps.border
+            "--image-stack-spacing": spacing, padding: addExtraPadding && imageProps.border
                 ? extraPaddingMap[imageProps.border]
-                : undefined,
-        }, className: "tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", children: imagesToRender.map((url, index, self) => (jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
+                : undefined }), className: cn("tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: imagesToRender.map((url, index, self) => (jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
                 ? {
                     style: {
                         zIndex: self.length - index,
                     },
                 }
-                : undefined }, imageProps), index))) }));
+                : undefined }, imageProps), index))) })));
 }
 
 function Chip(_a) {

package/dist/esm/types/components/layout/ImageStack.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ImageProps } from "../badges";
 interface ImageStackProps extends ImageProps {
     imageUrls: string[];
@@ -8,6 +9,7 @@ interface ImageStackProps extends ImageProps {
     stackOnTop?: boolean;
     addExtraPadding?: boolean;
     removeDuplicates?: boolean;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
-export declare function ImageStack({ imageUrls, spacing, stackOnTop, addExtraPadding, removeDuplicates, ...imageProps }: ImageStackProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageStack({ imageUrls, spacing, stackOnTop, addExtraPadding, removeDuplicates, containerProps, ...imageProps }: ImageStackProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -1574,8 +1574,9 @@ interface ImageStackProps extends ImageProps {
     stackOnTop?: boolean;
     addExtraPadding?: boolean;
     removeDuplicates?: boolean;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
-declare function ImageStack({ imageUrls, spacing, stackOnTop, addExtraPadding, removeDuplicates, ...imageProps }: ImageStackProps): react_jsx_runtime.JSX.Element;
+declare function ImageStack({ imageUrls, spacing, stackOnTop, addExtraPadding, removeDuplicates, containerProps, ...imageProps }: ImageStackProps): react_jsx_runtime.JSX.Element;
 
 interface InfoBoxProps {
     title: string;

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "2.5.1-beta.0",
+  "version": "2.6.0",
   "author": "",
   "license": "MIT",
   "resolutions": {