@sudobility/components 2.0.34 → 3.0.0

package/dist/primitives/layout/box.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+export interface BoxProps {
+    /** Box content */
+    children: React.ReactNode;
+    /** HTML element to render */
+    as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav';
+    /** Padding */
+    p?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Padding X-axis */
+    px?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Padding Y-axis */
+    py?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Margin */
+    m?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
+    /** Margin X-axis */
+    mx?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
+    /** Margin Y-axis */
+    my?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
+    /** Background color */
+    bg?: 'transparent' | 'white' | 'gray' | 'primary' | 'success' | 'warning' | 'danger';
+    /** Border */
+    border?: boolean;
+    /** Border radius */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Shadow */
+    shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Width */
+    w?: 'auto' | 'full' | 'screen' | 'min' | 'max';
+    /** Height */
+    h?: 'auto' | 'full' | 'screen' | 'min' | 'max';
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Box Component
+ *
+ * Fundamental layout primitive with spacing, sizing, and styling props.
+ * Acts as a building block for creating layouts and containers.
+ *
+ * @example
+ * ```tsx
+ * <Box p="md" bg="white" rounded="lg" shadow="md">
+ *   <h2>Card Content</h2>
+ * </Box>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Box as="section" py="xl" px="md">
+ *   <Text>Section content</Text>
+ * </Box>
+ * ```
+ */
+export declare const Box: React.FC<BoxProps>;
+export default Box;
+//# sourceMappingURL=box.d.ts.map

package/dist/primitives/layout/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,QAAQ;IACvB,kBAAkB;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,EAAE,CAAC,EACC,KAAK,GACL,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,KAAK,CAAC;IACV,cAAc;IACd,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACtD,qBAAqB;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACvD,qBAAqB;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACvD,aAAa;IACb,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/D,oBAAoB;IACpB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAChE,oBAAoB;IACpB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAChE,uBAAuB;IACvB,EAAE,CAAC,EACC,aAAa,GACb,OAAO,GACP,MAAM,GACN,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;IACb,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACtD,aAAa;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5C,YAAY;IACZ,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAC/C,aAAa;IACb,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAC/C,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAoHlC,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/primitives/layout/center.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+export interface CenterProps {
+    /** Content to center */
+    children: React.ReactNode;
+    /** Axis to center on */
+    axis?: 'horizontal' | 'vertical' | 'both';
+    /** Use inline-flex instead of flex */
+    inline?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Center Component
+ *
+ * Centers content horizontally, vertically, or both using flexbox.
+ * Useful for centering loading states, empty states, and modal content.
+ *
+ * @example
+ * ```tsx
+ * <Center>
+ *   <Spinner />
+ * </Center>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Center axis="horizontal">
+ *   <Button>Centered Button</Button>
+ * </Center>
+ * ```
+ */
+export declare const Center: React.FC<CenterProps>;
+export default Center;
+//# sourceMappingURL=center.d.ts.map

package/dist/primitives/layout/center.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"center.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/center.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,WAAW;IAC1B,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1C,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6BxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/primitives/layout/container.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export interface ContainerProps {
+    /** Container content */
+    children: React.ReactNode;
+    /** Max width variant */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /** Center container horizontally */
+    center?: boolean;
+    /** Padding */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Container Component
+ *
+ * Responsive container with max-width constraints and horizontal centering.
+ * Useful for creating consistent page layouts and content areas.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   <h1>Page Content</h1>
+ * </Container>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Container size="lg" padding="lg">
+ *   <Text>Centered content with large max-width</Text>
+ * </Container>
+ * ```
+ */
+export declare const Container: React.FC<ContainerProps>;
+export default Container;
+//# sourceMappingURL=container.d.ts.map

package/dist/primitives/layout/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,cAAc;IAC7B,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAClD,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsC9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/primitives/layout/divider.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+export interface DividerProps {
+    /** Optional text label */
+    label?: string;
+    /** Label position */
+    labelPosition?: 'left' | 'center' | 'right';
+    /** Orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Spacing around the divider */
+    spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Line thickness */
+    thickness?: 'thin' | 'medium' | 'thick';
+    /** Color variant */
+    variant?: 'light' | 'medium' | 'dark';
+    /** Additional className for the container */
+    className?: string;
+    /** Additional className for the line */
+    lineClassName?: string;
+}
+/**
+ * Divider Component
+ *
+ * A visual separator for content sections with optional label support.
+ * Can be used horizontally or vertically to divide content areas.
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider label="OR" labelPosition="center" />
+ * <Divider spacing="lg" variant="medium" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Vertical divider
+ * <div className="flex gap-4">
+ *   <div>Content 1</div>
+ *   <Divider orientation="vertical" />
+ *   <div>Content 2</div>
+ * </div>
+ * ```
+ */
+export declare const Divider: React.FC<DividerProps>;
+export default Divider;
+//# sourceMappingURL=divider.d.ts.map

package/dist/primitives/layout/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C,kBAAkB;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmI1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/primitives/layout/flex-container.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+/**
+ * @deprecated Use Tailwind flex utilities instead. This component will be removed in v2.0.
+ */
+interface FlexContainerProps {
+    children: React.ReactNode;
+    direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    wrap?: 'wrap' | 'wrap-reverse' | 'nowrap';
+    gap?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12';
+    className?: string;
+}
+/**
+ * @deprecated Use Tailwind flex utilities instead. This component will be removed in v2.0.
+ * See migration guide in file header.
+ */
+export declare const FlexContainer: React.FC<FlexContainerProps>;
+export default FlexContainer;
+//# sourceMappingURL=flex-container.d.ts.map

package/dist/primitives/layout/flex-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-container.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/flex-container.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,KAAK,GAAG,aAAa,CAAC;IAC1D,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC1C,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6CD;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwBtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/primitives/layout/flex.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { BoxProps } from './box';
+export interface FlexProps extends Omit<BoxProps, 'className'> {
+    /** Flex direction */
+    direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
+    /** Align items */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /** Justify content */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    /** Wrap items */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** Gap between items */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Inline flex */
+    inline?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Flex Component
+ *
+ * Flexbox layout component extending Box with flex-specific properties.
+ * Provides convenient props for common flexbox patterns.
+ *
+ * @example
+ * ```tsx
+ * <Flex justify="between" align="center" p="md">
+ *   <Text>Left</Text>
+ *   <Button>Right</Button>
+ * </Flex>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Flex direction="col" gap="md" p="lg">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ * </Flex>
+ * ```
+ */
+export declare const Flex: React.FC<FlexProps>;
+export default Flex;
+//# sourceMappingURL=flex.d.ts.map

package/dist/primitives/layout/flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC;IAC5D,qBAAqB;IACrB,SAAS,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,KAAK,GAAG,aAAa,CAAC;IAC1D,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,iBAAiB;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAC;IAC1C,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2EpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/primitives/layout/floating-panel.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+export interface FloatingPanelProps {
+    /** Panel content */
+    children: React.ReactNode;
+    /** Panel title */
+    title?: string;
+    /** Initial position */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Collapsible */
+    collapsible?: boolean;
+    /** Initially collapsed */
+    defaultCollapsed?: boolean;
+    /** Close button */
+    closeable?: boolean;
+    /** Close handler */
+    onClose?: () => void;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * FloatingPanel Component
+ *
+ * Floating panel that stays fixed on screen.
+ * Useful for chat widgets, help panels, or notifications.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel
+ *   title="Help & Support"
+ *   position="bottom-right"
+ *   collapsible
+ * >
+ *   <ChatWidget />
+ * </FloatingPanel>
+ * ```
+ */
+export declare const FloatingPanel: React.FC<FloatingPanelProps>;
+export default FloatingPanel;
+//# sourceMappingURL=floating-panel.d.ts.map

package/dist/primitives/layout/floating-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/floating-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,kBAAkB;IACjC,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8FtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/primitives/layout/grid.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+export interface GridProps {
+    /** Grid content */
+    children: React.ReactNode;
+    /** Number of columns (responsive object or number) */
+    cols?: number | {
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+    };
+    /** Gap between items */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Auto-fit columns with minimum width */
+    autoFit?: string;
+    /** Auto-fill columns with minimum width */
+    autoFill?: string;
+    /** Align items */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Justify items */
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Grid Component
+ *
+ * CSS Grid layout component with responsive columns and flexible configurations.
+ * Supports auto-fit, auto-fill, and explicit column counts.
+ *
+ * @example
+ * ```tsx
+ * <Grid cols={3} gap="md">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Grid
+ *   cols={{ sm: 1, md: 2, lg: 3, xl: 4 }}
+ *   gap="lg"
+ * >
+ *   {items.map(item => <Card key={item.id}>{item.content}</Card>)}
+ * </Grid>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Grid autoFit="250px" gap="md">
+ *   <Card>Dynamic Item</Card>
+ * </Grid>
+ * ```
+ */
+export declare const Grid: React.FC<GridProps>;
+export default Grid;
+//# sourceMappingURL=grid.d.ts.map

package/dist/primitives/layout/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,SAAS;IACxB,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvE,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpD,oBAAoB;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACtD,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2FpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/primitives/layout/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Layout Primitives
+ *
+ * Basic layout building blocks for structuring UI
+ */
+export * from './box';
+export * from './flex';
+export * from './flex-container';
+export * from './container';
+export * from './grid';
+export * from './stack';
+export * from './center';
+export * from './spacer';
+export * from './section';
+export * from './page-container';
+export * from './aspect-ratio';
+export * from './divider';
+export * from './separator';
+export * from './border-accent';
+export * from './floating-panel';
+export * from './split-pane';
+export * from './resizable';
+export * from './resizable-panels';
+export * from './scroll-area';
+export * from './masonry';
+export * from './portal';
+export * from './overlay';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}

package/dist/primitives/layout/masonry.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export interface MasonryProps {
+    /** Children elements */
+    children: React.ReactNode;
+    /** Number of columns */
+    columns?: number;
+    /** Gap between items */
+    gap?: number;
+    /** Responsive breakpoints */
+    breakpoints?: {
+        [key: number]: number;
+    };
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Masonry Component
+ *
+ * Pinterest-style masonry grid layout.
+ * Automatically arranges items in columns with optimal spacing.
+ *
+ * @example
+ * ```tsx
+ * <Masonry columns={3} gap={16}>
+ *   {items.map(item => <Card key={item.id}>{item.content}</Card>)}
+ * </Masonry>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Masonry
+ *   breakpoints={{ 768: 2, 1024: 3, 1280: 4 }}
+ *   gap={20}
+ * >
+ *   {photos.map(photo => <Image key={photo.id} src={photo.url} />)}
+ * </Masonry>
+ * ```
+ */
+export declare const Masonry: React.FC<MasonryProps>;
+export default Masonry;
+//# sourceMappingURL=masonry.d.ts.map

package/dist/primitives/layout/masonry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/masonry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,WAAW,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACxC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA+D1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/primitives/layout/overlay.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface OverlayProps {
+    /** Whether overlay is visible */
+    isOpen: boolean;
+    /** Click handler for overlay backdrop */
+    onClose?: () => void;
+    /** Overlay content */
+    children?: React.ReactNode;
+    /** Blur backdrop */
+    blur?: boolean;
+    /** Opacity level */
+    opacity?: 'light' | 'medium' | 'dark';
+    /** Z-index level */
+    zIndex?: number;
+    /** Prevent body scroll when open */
+    lockScroll?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Overlay Component
+ *
+ * Full-screen backdrop overlay with optional blur and click-to-close.
+ * Typically used with modals, drawers, and popups.
+ *
+ * @example
+ * ```tsx
+ * <Overlay isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+ *   <Modal>Content</Modal>
+ * </Overlay>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Overlay isOpen={true} blur opacity="dark" />
+ * ```
+ */
+export declare const Overlay: React.FC<OverlayProps>;
+export default Overlay;
+//# sourceMappingURL=overlay.d.ts.map

package/dist/primitives/layout/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtC,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgE1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/primitives/layout/page-container.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const pageContainerVariants: (props?: ({
+    background?: "transparent" | "default" | "surface" | "gradient" | null | undefined;
+    overflow?: "hidden" | "visible" | "scroll" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface PageContainerProps extends VariantProps<typeof pageContainerVariants> {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const PageContainer: React.FC<PageContainerProps>;
+export default PageContainer;
+//# sourceMappingURL=page-container.d.ts.map

package/dist/primitives/layout/page-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-container.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/page-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,qBAAqB;;;8EAmBzB,CAAC;AAEH,UAAU,kBACR,SAAQ,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAClD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAatD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/primitives/layout/portal.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export interface PortalProps {
+    /** Content to portal */
+    children: React.ReactNode;
+    /** Target container (defaults to document.body) */
+    container?: Element | null;
+}
+/**
+ * Portal Component
+ *
+ * Renders children into a DOM node outside the parent component's hierarchy.
+ * Useful for modals, tooltips, and overlays that need to break out of z-index stacking.
+ *
+ * @example
+ * ```tsx
+ * <Portal>
+ *   <Modal>Content</Modal>
+ * </Portal>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Portal container={customElement}>
+ *   <Tooltip>Tooltip content</Tooltip>
+ * </Portal>
+ * ```
+ */
+export declare const Portal: React.FC<PortalProps>;
+export default Portal;
+//# sourceMappingURL=portal.d.ts.map

package/dist/primitives/layout/portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,WAAW;IAC1B,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAaxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/primitives/layout/resizable-panels.d.ts

@@ -0,0 +1,34 @@
+/**
+ * UresizableUpanels Component
+ *
+ * A reusable UresizableUpanels component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UresizableUpanels className="custom-class" />
+ * ```
+ *
+ * @remarks
+ * This component supports:
+ * - Light and dark themes automatically
+ * - Responsive design
+ * - Accessibility features
+ * - TypeScript type safety
+ *
+ * @see {@link https://docs.example.com/components/resizable-panels}
+ */
+export interface UresizableUpanelsProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Component children */
+    children?: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Callback when component is interacted with */
+    onClick?: () => void;
+}
+export declare const UresizableUpanels: ({ className, children, disabled, onClick, }: UresizableUpanelsProps) => import("react/jsx-runtime").JSX.Element;
+export default UresizableUpanels;
+//# sourceMappingURL=resizable-panels.d.ts.map

package/dist/primitives/layout/resizable-panels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-panels.d.ts","sourceRoot":"","sources":["../../../src/primitives/layout/resizable-panels.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,WAAW,sBAAsB;IACrC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,GAAI,6CAK/B,sBAAsB,4CAmBxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/primitives/layout/resizable.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+export type ResizeDirection = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface ResizableProps {
+    /** Children content */
+    children: React.ReactNode;
+    /** Initial width */
+    defaultWidth?: number;
+    /** Initial height */
+    defaultHeight?: number;
+    /** Minimum width */
+    minWidth?: number;
+    /** Minimum height */
+    minHeight?: number;
+    /** Maximum width */
+    maxWidth?: number;
+    /** Maximum height */
+    maxHeight?: number;
+    /** Enabled resize directions */
+    directions?: ResizeDirection[];
+    /** Resize callback */
+    onResize?: (width: number, height: number) => void;
+    /** Resize end callback */
+    onResizeEnd?: (width: number, height: number) => void;
+    /** Show resize handles */
+    showHandles?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Resizable Component
+ *
+ * Resizable container with draggable handles.
+ * Supports all 8 resize directions with constraints.
+ *
+ * @example
+ * ```tsx
+ * <Resizable
+ *   defaultWidth={400}
+ *   defaultHeight={300}
+ *   minWidth={200}
+ *   minHeight={150}
+ *   directions={['right', 'bottom', 'bottom-right']}
+ *   onResize={(w, h) => console.log(w, h)}
+ * >
+ *   <div>Resizable content</div>
+ * </Resizable>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Resizable
+ *   defaultWidth={600}
+ *   defaultHeight={400}
+ *   maxWidth={800}
+ *   maxHeight={600}
+ * >
+ *   <Panel />
+ * </Resizable>
+ * ```
+ */
+export declare const Resizable: React.FC<ResizableProps>;
+export default Resizable;
+//# sourceMappingURL=resizable.d.ts.map