@a-type/ui 1.0.14 → 1.1.1

package/dist/cjs/components/card/Card.d.ts

@@ -1,4 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
+import { MasonryProps } from '../masonry/masonry.js';
 export declare const CardRoot: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>;
@@ -29,9 +30,11 @@ export declare const CardActions: import("react").FunctionComponent<Omit<import(
 export declare const CardMenu: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>;
-export declare const CardGrid: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>;
+export declare const cardGridColumns: {
+    default: (size: number) => 2 | 1 | 3;
+    small: (size: number) => 2 | 1 | 4 | 3;
+};
+export declare const CardGrid: ({ children, className, columns, gap, }: MasonryProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Card: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }> & {
@@ -62,7 +65,5 @@ export declare const Card: import("react").FunctionComponent<Omit<import("react"
     Menu: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }>;
-    Grid: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>;
+    Grid: ({ children, className, columns, gap, }: MasonryProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/cjs/components/card/Card.js

@@ -15,13 +15,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = exports.CardGrid = exports.CardMenu = exports.CardActions = exports.CardFooter = exports.CardImage = exports.CardContent = exports.CardTitle = exports.CardMain = exports.CardRoot = void 0;
+exports.Card = exports.CardGrid = exports.cardGridColumns = exports.CardMenu = exports.CardActions = exports.CardFooter = exports.CardImage = exports.CardContent = exports.CardTitle = exports.CardMain = exports.CardRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const hooks_js_1 = require("../../hooks.js");
 const react_slot_1 = require("@radix-ui/react-slot");
 const clsx_1 = __importDefault(require("clsx"));
 const SlotDiv_js_1 = require("../utility/SlotDiv.js");
+const masonry_js_1 = require("../masonry/masonry.js");
 exports.CardRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:border-light layer-components:rounded-lg layer-components:text-lg layer-components:overflow-hidden layer-components:h-max-content layer-components:relative layer-components:bg-gray-1 layer-components:text-black layer-components:shadow-sm');
 exports.CardMain = (0, react_1.forwardRef)(function CardMain(_a, ref) {
     var { asChild, className, compact, nonInteractive } = _a, rest = __rest(_a, ["asChild", "className", "compact", "nonInteractive"]);
@@ -36,7 +37,14 @@ exports.CardImage = (0, hooks_js_1.withClassName)(SlotDiv_js_1.SlotDiv, 'layer-c
 exports.CardFooter = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-row layer-components:flex-shrink-0 layer-components:p-1 layer-components:relative layer-components:z-1');
 exports.CardActions = (0, hooks_js_1.withClassName)('div', 'layer-components:ml-0 layer-components:mr-auto layer-components:flex layer-components:flex-row layer-components:gap-2 layer-components:items-center layer-components:bg-white layer-components:rounded-full layer-components:p-0 layer-components:border layer-components:border-solid layer-components:border-grayDarkBlend');
 exports.CardMenu = (0, hooks_js_1.withClassName)('div', 'layer-components:mr-0 layer-components:ml-auto layer-components:my-auto layer-components:flex layer-components:flex-row layer-components:gap-1 layer-components:items-center layer-components:bg-overlay layer-components:rounded-full layer-components:p-0');
-exports.CardGrid = (0, hooks_js_1.withClassName)('div', 'layer-components:grid layer-components:grid-cols-[1fr] layer-components:[grid-auto-rows:auto] layer-components:gap-4 layer-components:p-0 layer-components:m-0', 'layer-components:md:grid-cols-[repeat(2,1fr)] layer-components:md:[grid-auto-rows:1fr] layer-components:md:items-end');
+exports.cardGridColumns = {
+    default: (size) => (size < 480 ? 1 : size < 800 ? 2 : 3),
+    small: (size) => size < 320 ? 1 : size < 480 ? 2 : size < 800 ? 3 : 4,
+};
+const CardGrid = ({ children, className, columns = exports.cardGridColumns.default, gap, }) => {
+    return ((0, jsx_runtime_1.jsx)(masonry_js_1.Masonry, Object.assign({ className: className, columns: columns, gap: gap }, { children: children })));
+};
+exports.CardGrid = CardGrid;
 exports.Card = Object.assign(exports.CardRoot, {
     Main: exports.CardMain,
     Title: exports.CardTitle,

package/dist/cjs/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAAqE;AACrE,6CAA+C;AAC/C,qDAA4C;AAC5C,gDAA8B;AAC9B,sDAAgD;AAEnC,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,wIAAwI,CACxI,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAWhC,SAAS,QAAQ,CAClB,EAAwD,EACxD,GAAG;QADH,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,OAAW,EAAN,IAAI,cAAtD,qDAAwD,CAAF;IAGtD,MAAM,aAAa,GAAG,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/D,OAAO,CACN,uBAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB,yLAAyL,EACzL,CAAC,CAAC,OAAO,IAAI,uBAAuB,EACpC,aAAa;YACZ,wNAAwN,EACzN,SAAS,CACT,kBACa,OAAO,IACjB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEU,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,KAAK,EACL,oPAAoP,EACpP,yDAAyD,CACzD,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,KAAK,EACL,oJAAoJ,EACpJ,iEAAiE,CACjE,CAAC;AAEW,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,oBAAO,EACP,6FAA6F,CAC7F,CAAC;AAEW,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,KAAK,EACL,iEAAiE,CACjE,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,KAAK,EACL,qIAAqI,CACrI,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,sGAAsG,CACtG,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,6EAA6E,EAC7E,gFAAgF,CAChF,CAAC;AAEW,QAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAQ,EAAE;IAC3C,IAAI,EAAE,gBAAQ;IACd,KAAK,EAAE,iBAAS;IAChB,OAAO,EAAE,mBAAW;IACpB,KAAK,EAAE,iBAAS;IAChB,MAAM,EAAE,kBAAU;IAClB,OAAO,EAAE,mBAAW;IACpB,IAAI,EAAE,gBAAQ;IACd,IAAI,EAAE,gBAAQ;CACd,CAAC,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/card/Card.stories.d.ts

@@ -20,3 +20,5 @@ export declare const Compact: Story;
 export declare const NonInteractive: Story;
 export declare const AsChild: Story;
 export declare const AsChildNonInteractive: Story;
+export declare const Grid: Story;
+export declare const GridCompact: Story;

package/dist/cjs/components/card/Card.stories.js

@@ -1,11 +1,12 @@
 // @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AsChildNonInteractive = exports.AsChild = exports.NonInteractive = exports.Compact = exports.Default = void 0;
+exports.GridCompact = exports.Grid = exports.AsChildNonInteractive = exports.AsChild = exports.NonInteractive = exports.Compact = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Card_js_1 = require("./Card.js");
 const button_js_1 = require("../button.js");
 const icon_js_1 = require("../icon.js");
+const react_1 = require("react");
 const meta = {
     title: 'Card',
     component: Card_js_1.CardRoot,
@@ -30,4 +31,21 @@ exports.AsChild = {
 exports.AsChildNonInteractive = {
     render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, Object.assign({ asChild: true, nonInteractive: true }, { children: (0, jsx_runtime_1.jsxs)("button", { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }), (0, jsx_runtime_1.jsx)(Card_js_1.CardContent, { children: "Other stuff" })] }) })), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
 };
+exports.Grid = {
+    render: () => {
+        const [sizes, setSizes] = (0, react_1.useState)(() => Array.from({ length: 40 }, (_, i) => 50 + Math.floor(Math.random() * 300)));
+        const remove = (index) => setSizes((v) => v.filter((_, i) => i !== index));
+        return ((0, jsx_runtime_1.jsx)(Card_js_1.Card.Grid, { children: sizes.map((size, i) => ((0, jsx_runtime_1.jsx)(GridCard, { size: size, remove: () => remove(i) }, i))) }));
+    },
+};
+exports.GridCompact = {
+    render: () => {
+        const [sizes, setSizes] = (0, react_1.useState)(() => Array.from({ length: 40 }, (_, i) => 50 + Math.floor(Math.random() * 300)));
+        const remove = (index) => setSizes((v) => v.filter((_, i) => i !== index));
+        return ((0, jsx_runtime_1.jsx)(Card_js_1.Card.Grid, Object.assign({ columns: Card_js_1.cardGridColumns.small }, { children: sizes.map((size, i) => ((0, jsx_runtime_1.jsx)(GridCard, { size: size, remove: () => remove(i) }, i))) })));
+    },
+};
+function GridCard({ size, remove }) {
+    return ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, Object.assign({ style: { height: size } }, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: size }) }), (0, jsx_runtime_1.jsx)(Card_js_1.CardActions, { children: (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small", onClick: remove }, { children: "Delete" })) })] })));
+}
 //# sourceMappingURL=Card.stories.js.map

package/dist/cjs/components/card/Card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/masonry/masonry.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface MasonryProps {
+    children: ReactNode;
+    className?: string;
+    columns?: number | ((containerWidth: number) => number);
+    gap?: number;
+}
+export declare function Masonry({ className, children, columns, gap, }: MasonryProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/masonry/masonry.js

@@ -0,0 +1,137 @@
+// @unocss-include
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Masonry = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+class MasonryLayout {
+    constructor(config) {
+        this.config = config;
+        this.containerResizeObserver = null;
+        this.containerMutationObserver = null;
+        this.container = null;
+        this.columns = 0;
+        this.attach = (container) => {
+            var _a, _b;
+            (_a = this.containerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            (_b = this.containerMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+            this.container = container;
+            this.containerResizeObserver = new ResizeObserver(this.handleContainerResize);
+            this.containerMutationObserver = new MutationObserver(this.handleContainerMutation);
+            this.containerResizeObserver.observe(container);
+            this.containerMutationObserver.observe(container, { childList: true });
+            container.style.setProperty('position', 'relative');
+            container.style.setProperty('overflow', 'hidden');
+            container.style.setProperty('visibility', 'visible');
+            container.childNodes.forEach((node) => {
+                if (node instanceof HTMLElement) {
+                    node.style.setProperty('position', 'absolute');
+                    // hide until laid out
+                    node.style.setProperty('visibility', 'hidden');
+                }
+            });
+            this.updateFromContainerSize(container.offsetWidth);
+            this.relayout();
+            return () => {
+                var _a, _b;
+                (_a = this.containerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                (_b = this.containerMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+                container.style.removeProperty('position');
+                container.style.removeProperty('overflow');
+                this.container = null;
+            };
+        };
+        this.updateConfig = (config) => {
+            var _a, _b;
+            const gapChanged = config.gap !== this.config.gap;
+            this.config = config;
+            // hacky way to avoid updating twice...
+            if (!this.updateFromContainerSize((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) &&
+                gapChanged) {
+                this.relayout();
+            }
+        };
+        this.handleContainerResize = (entries) => {
+            const containerWidth = entries[0].contentRect.width;
+            this.updateFromContainerSize(containerWidth);
+        };
+        this.updateFromContainerSize = (containerWidth) => {
+            if (typeof this.config.columns === 'function') {
+                const newValue = this.config.columns(containerWidth);
+                if (newValue !== this.columns) {
+                    this.columns = newValue;
+                    this.relayout();
+                    return true;
+                }
+            }
+            return false;
+        };
+        this.handleContainerMutation = (entries) => {
+            for (const entry of entries) {
+                entry.addedNodes.forEach((node) => {
+                    if (node instanceof HTMLElement) {
+                        node.style.setProperty('position', 'absolute');
+                        // hide until laid out
+                        node.style.setProperty('visibility', 'hidden');
+                    }
+                });
+            }
+            // TODO: why is this timeout necessary?
+            setTimeout(this.relayout, 100);
+        };
+        this.relayout = () => {
+            if (!this.container) {
+                return;
+            }
+            console.log('relayout');
+            const tracks = new Array(this.columns).fill(0);
+            const gap = this.config.gap;
+            // percentage-based width and x position so that items automatically
+            // layout correctly when the container is resized (as long as columns
+            // are the same)
+            const pixelColumnWidthMinusGap = (this.container.offsetWidth - gap * (this.columns - 1)) / this.columns;
+            const columnPercentageWidth = (pixelColumnWidthMinusGap / this.container.offsetWidth) * 100;
+            const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
+            const children = Array.from(this.container.children);
+            children.forEach((child) => {
+                const trackIndex = tracks.indexOf(Math.min(...tracks));
+                const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
+                const y = tracks[trackIndex];
+                const width = columnPercentageWidth;
+                child.style.setProperty('position', 'absolute');
+                child.style.setProperty('visibility', 'visible');
+                child.style.setProperty('width', `${width}%`);
+                child.style.setProperty('left', `${x}%`);
+                child.style.setProperty('top', `${y}px`);
+                requestAnimationFrame(() => {
+                    child.classList.add('transition-all');
+                });
+                tracks[trackIndex] += child.offsetHeight + gap;
+            });
+            this.container.style.setProperty('height', `${Math.max(...tracks) - gap}px`);
+        };
+        this.columns =
+            typeof config.columns === 'function' ? config.columns(0) : config.columns;
+    }
+}
+const initialStyle = {
+    height: 0,
+    position: 'relative',
+    overflow: 'hidden',
+    visibility: 'hidden',
+};
+function Masonry({ className, children, columns = 3, gap = 16, }) {
+    const [layout] = (0, react_1.useState)(() => new MasonryLayout({ columns, gap }));
+    (0, react_1.useEffect)(() => {
+        layout.updateConfig({ columns, gap });
+    }, [layout, columns, gap]);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            return layout.attach(ref.current);
+        }
+    }, [layout, ref]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: initialStyle, className: className }, { children: children })));
+}
+exports.Masonry = Masonry;
+//# sourceMappingURL=masonry.js.map

package/dist/cjs/components/masonry/masonry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/masonry/masonry.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { Masonry } from './masonry.js';
+declare const meta: {
+    title: string;
+    component: typeof Masonry;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Masonry>;
+export declare const Default: Story;

package/dist/cjs/components/masonry/masonry.stories.js

@@ -0,0 +1,25 @@
+// @unocss-include
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const masonry_js_1 = require("./masonry.js");
+const meta = {
+    title: 'Masonry',
+    component: masonry_js_1.Masonry,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+const sizes = Array.from({ length: 100 }, (_, i) => {
+    const size = 100 + Math.floor(Math.random() * 100);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "bg-gray-5 rounded-lg", style: { height: size } }, { children: size }), i));
+});
+exports.Default = {
+    render(props) {
+        return (0, jsx_runtime_1.jsx)(masonry_js_1.Masonry, Object.assign({}, props, { children: sizes }));
+    },
+};
+//# sourceMappingURL=masonry.stories.js.map

package/dist/cjs/components/masonry/masonry.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.stories.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.stories.tsx"],"names":[],"mappings":";;;;AACA,6CAAuC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,oBAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC8B,CAAC;AAEjC,kBAAe,IAAI,CAAC;AAIpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAClD,MAAM,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IACnD,OAAO,CACN,8CAAa,SAAS,EAAC,sBAAsB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,gBACnE,IAAI,KADI,CAAC,CAEL,CACN,CAAC;AACH,CAAC,CAAC,CAAC;AAEU,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,KAAK;QACX,OAAO,uBAAC,oBAAO,oBAAK,KAAK,cAAG,KAAK,IAAW,CAAC;IAC9C,CAAC;CACD,CAAC"}

package/dist/cjs/components/masonry.d.ts

@@ -0,0 +1 @@
+export * from './masonry/masonry.js';

package/dist/cjs/components/masonry.js

@@ -0,0 +1,19 @@
+// @unocss-include
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./masonry/masonry.js"), exports);
+//# sourceMappingURL=masonry.js.map

package/dist/cjs/components/masonry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../src/components/masonry.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC"}