@szum-tech/design-system 3.21.2 → 3.21.3

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Button } from '../button/index.js';
+import '../../color-picker.types-GI7dq2Ig.js';
+import { Input } from '../input/index.js';
+import { Textarea } from '../textarea/index.js';
+
+type InputGroupProps = React.ComponentProps<"div"> & {
+    invalid?: boolean;
+};
+declare function InputGroup({ className, invalid, ...props }: InputGroupProps): react_jsx_runtime.JSX.Element;
+
+declare const inputGroupAddonVariants: (props?: {
+    align?: "inline-start" | "inline-end" | "block-end" | "block-start";
+} & class_variance_authority_types.ClassProp) => string;
+
+declare const inputGroupButtonVariants: (props?: {
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm";
+} & class_variance_authority_types.ClassProp) => string;
+
+type InputGroupAddonVariantsProps = VariantProps<typeof inputGroupAddonVariants>;
+type InputGroupAddonAlignType = NonNullable<InputGroupAddonVariantsProps["align"]>;
+type InputGroupButtonVariantsProps = VariantProps<typeof inputGroupButtonVariants>;
+type InputGroupButtonSizeType = NonNullable<InputGroupButtonVariantsProps["size"]>;
+
+type InputGroupAddonProps = React.ComponentProps<"div"> & {
+    align?: InputGroupAddonAlignType;
+};
+declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): react_jsx_runtime.JSX.Element;
+
+type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size"> & {
+    size?: InputGroupButtonSizeType;
+};
+declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): react_jsx_runtime.JSX.Element;
+
+type InputGroupInputProps = React.ComponentProps<typeof Input>;
+declare function InputGroupInput({ className, ...props }: InputGroupInputProps): react_jsx_runtime.JSX.Element;
+
+type InputGroupTextProps = React.ComponentProps<"span">;
+declare function InputGroupText({ className, ...props }: InputGroupTextProps): react_jsx_runtime.JSX.Element;
+
+type InputGroupTextareaProps = React.ComponentProps<typeof Textarea>;
+declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): react_jsx_runtime.JSX.Element;
+
+export { InputGroup, InputGroupAddon, type InputGroupAddonAlignType, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupButtonSizeType, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps };

package/dist/components/input-group/index.js

@@ -0,0 +1,3 @@
+"use client";
+
+export{w as InputGroup,x as InputGroupAddon,y as InputGroupButton,z as InputGroupInput,A as InputGroupText,B as InputGroupTextarea}from'../../chunk-5NM76GZC.js';import'../../chunk-JJSNMSDN.js';import'../../chunk-67GWWN7I.js';import'../../chunk-MGZN4ZZO.js';import'../../chunk-UDPDQIUS.js';import'../../chunk-TKQZPNBC.js';import'../../chunk-NLG2SYHK.js';import'../../chunk-X3NAZA44.js';import'../../chunk-2JMM4NLZ.js';import'../../chunk-AVJKAASP.js';import'../../chunk-ES2TETW4.js';import'../../chunk-NIEMIU4R.js';import'../../chunk-TGXACNQG.js';import'../../chunk-PX2ODQJ5.js';import'../../chunk-NCYJMBQ4.js';import'../../chunk-RLQVCUZA.js';import'../../chunk-G7AVPKVK.js';import'../../chunk-UR3YFSC4.js';import'../../chunk-2C332B6Y.js';import'../../chunk-Z3EMAPPK.js';import'../../chunk-HQ5NRJNW.js';import'../../chunk-LFLKBQME.js';import'../../chunk-ICTWPCCZ.js';import'../../chunk-MYAWR6XV.js';import'../../chunk-RGM4EGHK.js';import'../../chunk-JQ6RITJD.js';import'../../chunk-HCZZVUIL.js';import'../../chunk-WIJQKN43.js';import'../../chunk-X3G5BCY6.js';import'../../chunk-7BQ6EL6M.js';import'../../chunk-QEOKSP3L.js';import'../../chunk-XKHU627O.js';import'../../chunk-B2ZOXJNN.js';import'../../chunk-RHSJDTHB.js';import'../../chunk-6WS6H4C4.js';import'../../chunk-I34YETHP.js';import'../../chunk-23A6WFUV.js';import'../../chunk-DPQJSMYF.js';import'../../chunk-RLIRZKVF.js';import'../../chunk-RX2UDFWI.js';import'../../chunk-4UKYFAUY.js';import'../../chunk-ZGZS5I45.js';import'../../chunk-LINRYPF6.js';import'../../chunk-2AH7SOV6.js';import'../../chunk-KK77ZUTM.js';import'../../chunk-4HJVF7MU.js';import'../../chunk-4P7FA4TE.js';import'../../chunk-W5V46XEQ.js';import'../../chunk-AKN26JEV.js';import'../../chunk-JUNHRB4B.js';

package/dist/components/item/index.cjs

@@ -0,0 +1,3 @@
+"use client";
+
+'use strict';var chunkBW4UM36V_cjs=require('../../chunk-BW4UM36V.cjs');require('../../chunk-DGPWM6UM.cjs'),require('../../chunk-D5PAWOAZ.cjs');Object.defineProperty(exports,"Item",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.a}});Object.defineProperty(exports,"ItemActions",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.d}});Object.defineProperty(exports,"ItemContent",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.e}});Object.defineProperty(exports,"ItemDescription",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.f}});Object.defineProperty(exports,"ItemFooter",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.g}});Object.defineProperty(exports,"ItemGroup",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.c}});Object.defineProperty(exports,"ItemHeader",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.h}});Object.defineProperty(exports,"ItemMedia",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.b}});Object.defineProperty(exports,"ItemSeparator",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.j}});Object.defineProperty(exports,"ItemTitle",{enumerable:true,get:function(){return chunkBW4UM36V_cjs.i}});

package/dist/components/item/index.d.cts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import '../../color-picker.types-GI7dq2Ig.js';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Separator } from '../separator/index.js';
+import 'radix-ui';
+
+type ItemProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    variant?: ItemVariantType;
+    size?: ItemSizeType;
+};
+declare function Item({ className, variant, size, asChild, ...props }: ItemProps): react_jsx_runtime.JSX.Element;
+
+declare const itemVariants: (props?: {
+    variant?: "default" | "outline" | "muted";
+    size?: "default" | "sm";
+} & class_variance_authority_types.ClassProp) => string;
+
+type ItemVariantsProps = VariantProps<typeof itemVariants>;
+type ItemVariantType = NonNullable<ItemVariantsProps["variant"]>;
+type ItemSizeType = NonNullable<ItemVariantsProps["size"]>;
+
+declare const itemMediaVariants: (props?: {
+    variant?: "image" | "default" | "icon";
+} & class_variance_authority_types.ClassProp) => string;
+
+type ItemMediaVariantsProps = VariantProps<typeof itemMediaVariants>;
+type ItemMediaVariantType = NonNullable<ItemMediaVariantsProps["variant"]>;
+
+type ItemMediaProps = React.ComponentProps<"div"> & {
+    variant?: ItemMediaVariantType;
+};
+declare function ItemMedia({ className, variant, ...props }: ItemMediaProps): react_jsx_runtime.JSX.Element;
+
+type ItemGroupProps = React.ComponentProps<"div">;
+declare function ItemGroup({ className, ...props }: ItemGroupProps): react_jsx_runtime.JSX.Element;
+
+type ItemActionsProps = React.ComponentProps<"div">;
+declare function ItemActions({ className, ...props }: ItemActionsProps): react_jsx_runtime.JSX.Element;
+
+type ItemContentProps = React.ComponentProps<"div">;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+type ItemDescriptionProps = React.ComponentProps<"p">;
+declare function ItemDescription({ className, ...props }: ItemDescriptionProps): react_jsx_runtime.JSX.Element;
+
+type ItemFooterProps = React.ComponentProps<"div">;
+declare function ItemFooter({ className, ...props }: ItemFooterProps): react_jsx_runtime.JSX.Element;
+
+type ItemHeaderProps = React.ComponentProps<"div">;
+declare function ItemHeader({ className, ...props }: ItemHeaderProps): react_jsx_runtime.JSX.Element;
+
+type ItemTitleProps = React.ComponentProps<"div">;
+declare function ItemTitle({ className, ...props }: ItemTitleProps): react_jsx_runtime.JSX.Element;
+
+type ItemSeparatorProps = React.ComponentProps<typeof Separator>;
+declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): react_jsx_runtime.JSX.Element;
+
+export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemMediaVariantType, type ItemProps, ItemSeparator, type ItemSeparatorProps, type ItemSizeType, ItemTitle, type ItemTitleProps, type ItemVariantType };

package/dist/components/item/index.d.ts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import '../../color-picker.types-GI7dq2Ig.js';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Separator } from '../separator/index.js';
+import 'radix-ui';
+
+type ItemProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    variant?: ItemVariantType;
+    size?: ItemSizeType;
+};
+declare function Item({ className, variant, size, asChild, ...props }: ItemProps): react_jsx_runtime.JSX.Element;
+
+declare const itemVariants: (props?: {
+    variant?: "default" | "outline" | "muted";
+    size?: "default" | "sm";
+} & class_variance_authority_types.ClassProp) => string;
+
+type ItemVariantsProps = VariantProps<typeof itemVariants>;
+type ItemVariantType = NonNullable<ItemVariantsProps["variant"]>;
+type ItemSizeType = NonNullable<ItemVariantsProps["size"]>;
+
+declare const itemMediaVariants: (props?: {
+    variant?: "image" | "default" | "icon";
+} & class_variance_authority_types.ClassProp) => string;
+
+type ItemMediaVariantsProps = VariantProps<typeof itemMediaVariants>;
+type ItemMediaVariantType = NonNullable<ItemMediaVariantsProps["variant"]>;
+
+type ItemMediaProps = React.ComponentProps<"div"> & {
+    variant?: ItemMediaVariantType;
+};
+declare function ItemMedia({ className, variant, ...props }: ItemMediaProps): react_jsx_runtime.JSX.Element;
+
+type ItemGroupProps = React.ComponentProps<"div">;
+declare function ItemGroup({ className, ...props }: ItemGroupProps): react_jsx_runtime.JSX.Element;
+
+type ItemActionsProps = React.ComponentProps<"div">;
+declare function ItemActions({ className, ...props }: ItemActionsProps): react_jsx_runtime.JSX.Element;
+
+type ItemContentProps = React.ComponentProps<"div">;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+type ItemDescriptionProps = React.ComponentProps<"p">;
+declare function ItemDescription({ className, ...props }: ItemDescriptionProps): react_jsx_runtime.JSX.Element;
+
+type ItemFooterProps = React.ComponentProps<"div">;
+declare function ItemFooter({ className, ...props }: ItemFooterProps): react_jsx_runtime.JSX.Element;
+
+type ItemHeaderProps = React.ComponentProps<"div">;
+declare function ItemHeader({ className, ...props }: ItemHeaderProps): react_jsx_runtime.JSX.Element;
+
+type ItemTitleProps = React.ComponentProps<"div">;
+declare function ItemTitle({ className, ...props }: ItemTitleProps): react_jsx_runtime.JSX.Element;
+
+type ItemSeparatorProps = React.ComponentProps<typeof Separator>;
+declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): react_jsx_runtime.JSX.Element;
+
+export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemMediaVariantType, type ItemProps, ItemSeparator, type ItemSeparatorProps, type ItemSizeType, ItemTitle, type ItemTitleProps, type ItemVariantType };

package/dist/components/item/index.js

@@ -0,0 +1,3 @@
+"use client";
+
+export{a as Item,d as ItemActions,e as ItemContent,f as ItemDescription,g as ItemFooter,c as ItemGroup,h as ItemHeader,b as ItemMedia,j as ItemSeparator,i as ItemTitle}from'../../chunk-7BQ6EL6M.js';import'../../chunk-ZGZS5I45.js';import'../../chunk-JUNHRB4B.js';

package/dist/components/kbd/index.cjs

@@ -0,0 +1,3 @@
+"use client";
+
+'use strict';var chunkOGXLOWOW_cjs=require('../../chunk-OGXLOWOW.cjs');require('../../chunk-D5PAWOAZ.cjs');Object.defineProperty(exports,"Kbd",{enumerable:true,get:function(){return chunkOGXLOWOW_cjs.a}});Object.defineProperty(exports,"KbdGroup",{enumerable:true,get:function(){return chunkOGXLOWOW_cjs.b}});

package/dist/components/kbd/index.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type KbdProps = React.ComponentProps<"kbd">;
+declare function Kbd({ className, ...props }: KbdProps): react_jsx_runtime.JSX.Element;
+
+type KbdGroup = React.ComponentProps<"div">;
+declare function KbdGroup({ className, ...props }: KbdGroup): react_jsx_runtime.JSX.Element;
+
+export { Kbd, KbdGroup, type KbdProps };

package/dist/components/kbd/index.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type KbdProps = React.ComponentProps<"kbd">;
+declare function Kbd({ className, ...props }: KbdProps): react_jsx_runtime.JSX.Element;
+
+type KbdGroup = React.ComponentProps<"div">;
+declare function KbdGroup({ className, ...props }: KbdGroup): react_jsx_runtime.JSX.Element;
+
+export { Kbd, KbdGroup, type KbdProps };

package/dist/components/kbd/index.js

@@ -0,0 +1,3 @@
+"use client";
+
+export{a as Kbd,b as KbdGroup}from'../../chunk-QEOKSP3L.js';import'../../chunk-JUNHRB4B.js';

package/dist/components/label/index.cjs

@@ -0,0 +1,3 @@
+"use client";
+
+'use strict';var chunkFQARF7UI_cjs=require('../../chunk-FQARF7UI.cjs');require('../../chunk-D5PAWOAZ.cjs');Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunkFQARF7UI_cjs.a}});

package/dist/components/label/index.d.cts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Label as Label$1 } from 'radix-ui';
+
+type LabelProps = React.ComponentProps<typeof Label$1.Root>;
+declare function Label({ className, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
+
+export { Label, type LabelProps };

package/dist/components/label/index.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Label as Label$1 } from 'radix-ui';
+
+type LabelProps = React.ComponentProps<typeof Label$1.Root>;
+declare function Label({ className, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
+
+export { Label, type LabelProps };

package/dist/components/label/index.js

@@ -0,0 +1,3 @@
+"use client";
+
+export{a as Label}from'../../chunk-XKHU627O.js';import'../../chunk-JUNHRB4B.js';

package/dist/components/marquee/index.cjs

@@ -0,0 +1,3 @@
+"use client";
+
+'use strict';var chunkNDNN5OPT_cjs=require('../../chunk-NDNN5OPT.cjs');require('../../chunk-D5PAWOAZ.cjs');Object.defineProperty(exports,"Marquee",{enumerable:true,get:function(){return chunkNDNN5OPT_cjs.a}});

package/dist/components/marquee/index.d.cts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type MarqueeProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Optional CSS class name to apply custom styles
+     */
+    className?: string;
+    /**
+     * Whether to reverse the animation direction
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Whether to pause the animation on hover
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Content to be displayed in the marquee
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to animate vertically instead of horizontally
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Number of times to repeat the content
+     * @default 4
+     */
+    repeat?: number;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA live region politeness
+     */
+    ariaLive?: "off" | "polite" | "assertive";
+    /**
+     * ARIA role
+     */
+    ariaRole?: string;
+};
+declare function Marquee({ className, reverse, pauseOnHover, children, vertical, repeat, ariaLabel, ariaLive, ariaRole, ...props }: MarqueeProps): react_jsx_runtime.JSX.Element;
+
+export { Marquee, type MarqueeProps };

package/dist/components/marquee/index.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type MarqueeProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Optional CSS class name to apply custom styles
+     */
+    className?: string;
+    /**
+     * Whether to reverse the animation direction
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Whether to pause the animation on hover
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Content to be displayed in the marquee
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to animate vertically instead of horizontally
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Number of times to repeat the content
+     * @default 4
+     */
+    repeat?: number;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA live region politeness
+     */
+    ariaLive?: "off" | "polite" | "assertive";
+    /**
+     * ARIA role
+     */
+    ariaRole?: string;
+};
+declare function Marquee({ className, reverse, pauseOnHover, children, vertical, repeat, ariaLabel, ariaLive, ariaRole, ...props }: MarqueeProps): react_jsx_runtime.JSX.Element;
+
+export { Marquee, type MarqueeProps };

package/dist/components/marquee/index.js

@@ -0,0 +1,3 @@
+"use client";
+
+export{a as Marquee}from'../../chunk-UR3YFSC4.js';import'../../chunk-JUNHRB4B.js';

package/dist/components/masonry/index.cjs

@@ -0,0 +1,3 @@
+"use client";
+
+'use strict';var chunkORBKSP3P_cjs=require('../../chunk-ORBKSP3P.cjs');require('../../chunk-ZGDGO7ES.cjs'),require('../../chunk-ERFTRXVE.cjs');Object.defineProperty(exports,"Masonry",{enumerable:true,get:function(){return chunkORBKSP3P_cjs.b}});Object.defineProperty(exports,"MasonryItem",{enumerable:true,get:function(){return chunkORBKSP3P_cjs.a}});

package/dist/components/masonry/index.d.cts

@@ -0,0 +1,181 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+
+/**
+ * Props for the Masonry component
+ */
+type MasonryProps = React.ComponentProps<"div"> & {
+    /**
+     * The width of each column in pixels.
+     * @default 200
+     */
+    columnWidth?: number;
+    /**
+     * Fixed number of columns. Takes precedence over `columnWidth` if provided.
+     */
+    columnCount?: number;
+    /**
+     * Maximum number of columns allowed. Useful for responsive layouts.
+     */
+    maxColumnCount?: number;
+    /**
+     * Gap between items. Can be a single number for uniform spacing or an object
+     * with separate `column` and `row` gaps.
+     * @default 16
+     * @example
+     * gap={20}
+     * gap={{ column: 16, row: 24 }}
+     */
+    gap?: number | {
+        column: number;
+        row: number;
+    };
+    /**
+     * Default height for items before they are measured. Used for initial layout calculations.
+     * @default 300
+     */
+    itemHeight?: number;
+    /**
+     * Default container width used during SSR or before first measurement.
+     */
+    defaultWidth?: number;
+    /**
+     * Default container height used during SSR or before first measurement.
+     */
+    defaultHeight?: number;
+    /**
+     * Number of pixels to render outside the visible viewport for smoother scrolling.
+     * @default 200
+     */
+    overscan?: number;
+    /**
+     * Scroll event sampling rate in frames per second. Higher values provide smoother
+     * updates but may impact performance.
+     * @default 12
+     */
+    scrollFps?: number;
+    /**
+     * Content to display while items are being measured or loaded.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * When `true`, items are positioned linearly (left-to-right, top-to-bottom)
+     * instead of using the default masonry algorithm that fills shortest columns first.
+     * @default false
+     */
+    linear?: boolean;
+    /**
+     * When `true`, renders the component as its child element using Radix UI's Slot.
+     * @default false
+     */
+    asChild?: boolean;
+};
+type MasonryElement = React.ComponentRef<"div">;
+/**
+ * A performant masonry layout component that efficiently arranges items of varying heights
+ * into columns. Features virtualization, resize observation, and smooth scrolling performance.
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Masonry>
+ *   {items.map((item, index) => (
+ *     <Masonry.Item key={index}>
+ *       <img src={item.url} alt={item.title} />
+ *     </Masonry.Item>
+ *   ))}
+ * </Masonry>
+ *
+ * @example
+ * // Custom column width and gap
+ * <Masonry columnWidth={250} gap={{ column: 20, row: 30 }}>
+ *   {items.map((item, index) => (
+ *     <Masonry.Item key={index}>
+ *       <Card>{item.content}</Card>
+ *     </Masonry.Item>
+ *   ))}
+ * </Masonry>
+ *
+ * @example
+ * // Fixed number of columns with linear positioning
+ * <Masonry columnCount={3} linear>
+ *   {items.map((item, index) => (
+ *     <Masonry.Item key={index}>
+ *       {item.content}
+ *     </Masonry.Item>
+ *   ))}
+ * </Masonry>
+ *
+ * @example
+ * // With fallback content
+ * <Masonry fallback={<Spinner />}>
+ *   {items.map((item, index) => (
+ *     <Masonry.Item key={index}>
+ *       <LazyImage src={item.url} />
+ *     </Masonry.Item>
+ *   ))}
+ * </Masonry>
+ */
+declare function Masonry(props: MasonryProps): react_jsx_runtime.JSX.Element;
+
+type MasonryItemProps = React__default.ComponentProps<"div"> & {
+    asChild?: boolean;
+};
+type MasonryItemElement = HTMLDivElement;
+declare function MasonryItem({ asChild, ref, ...props }: MasonryItemProps): react_jsx_runtime.JSX.Element;
+
+type NodeColor = 0 | 1 | 2;
+type NodeOperation = 0 | 1;
+type ItemElement = HTMLDivElement;
+type MasonryListNode = {
+    index: number;
+    high: number;
+    next: MasonryListNode | null;
+};
+type MasonryTreeNode = {
+    max: number;
+    low: number;
+    high: number;
+    color: NodeColor;
+    parent: MasonryTreeNode;
+    right: MasonryTreeNode;
+    left: MasonryTreeNode;
+    list: MasonryListNode;
+};
+type MasonryTree = {
+    root: MasonryTreeNode;
+    size: number;
+};
+type MasonryIntervalTree = {
+    insert(low: number, high: number, index: number): void;
+    remove(index: number): void;
+    search(low: number, high: number, onCallback: (index: number, low: number) => void): void;
+    size: number;
+};
+type MasonryCacheKey = string | number | symbol;
+type MasonryCacheConstructor = (new () => MasonryCache) | Record<MasonryCacheKey, unknown>;
+type MasonryCache<K = MasonryCacheKey, V = unknown> = {
+    set: (k: K, v: V) => V;
+    get: (k: K) => V | undefined;
+};
+type MasonryPositioner = {
+    columnCount: number;
+    columnWidth: number;
+    set: (index: number, height: number) => void;
+    get: (index: number) => MasonryPositionerItem | undefined;
+    update: (updates: number[]) => void;
+    range: (low: number, high: number, onItemRender: (index: number, left: number, top: number) => void) => void;
+    size: () => number;
+    estimateHeight: (itemCount: number, defaultItemHeight: number) => number;
+    shortestColumn: () => number;
+    all: () => Array<MasonryPositionerItem>;
+};
+type MasonryPositionerItem = {
+    top: number;
+    left: number;
+    height: number;
+    columnIndex: number;
+};
+
+export { type ItemElement, Masonry, type MasonryCache, type MasonryCacheConstructor, type MasonryCacheKey, type MasonryElement, type MasonryIntervalTree, MasonryItem, type MasonryItemElement, type MasonryItemProps, type MasonryListNode, type MasonryPositioner, type MasonryPositionerItem, type MasonryProps, type MasonryTree, type MasonryTreeNode, type NodeColor, type NodeOperation };