@ctlyst.id/voila-ui 1.0.0

package/dist/types/layouts/grid/grid.d.ts

@@ -0,0 +1,666 @@
+import type { ClassValue } from 'clsx';
+import type { ElementType, HTMLAttributes } from 'react';
+export type GridProperties = Omit<HTMLAttributes<HTMLElement>, 'as' | 'height' | 'width' | 'size' | 'ref' | 'disabled' | 'wrap' | 'sizes'>;
+declare const Grid: import("react").ForwardRefExoticComponent<import("rainbow-sprinkles/dist/declarations/src/types").ChildSprinkles<{
+    gap: {
+        values: {
+            auto: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            0: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            1: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            "100vh": {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            "100vw": {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            10: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            2: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            16: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            20: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            24: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            32: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            40: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            48: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            56: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            full: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            4: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            6: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            8: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            12: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            14: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            18: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            22: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            64: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            72: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            80: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            88: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            96: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            104: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            112: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            fitContent: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            maxContent: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            minContent: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            gapX: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            gapY: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+        };
+        staticScale: {
+            0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            14: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            16: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            18: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            20: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            22: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            24: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            32: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            40: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            48: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            56: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            64: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            72: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            88: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            96: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            104: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            112: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            auto: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fitContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            maxContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            minContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '100vh': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '100vw': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gapX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gapY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        name: "gap";
+    };
+    rowGap: {
+        values: {
+            auto: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            0: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            1: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            "100vh": {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            "100vw": {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            10: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            2: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            16: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            20: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            24: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            32: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            40: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            48: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            56: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            full: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            4: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            6: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            8: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            12: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            14: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            18: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            22: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            64: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            72: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            80: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            88: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            96: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            104: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            112: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            fitContent: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            maxContent: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            minContent: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            gapX: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            gapY: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+        };
+        staticScale: {
+            0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            14: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            16: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            18: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            20: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            22: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            24: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            32: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            40: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            48: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            56: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            64: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            72: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            88: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            96: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            104: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            112: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            auto: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fitContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            maxContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            minContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '100vh': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '100vw': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gapX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gapY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        name: "rowGap";
+    };
+    columnGap: {
+        values: {
+            auto: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            0: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            1: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            "100vh": {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            "100vw": {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            10: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            2: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            16: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            20: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            24: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            32: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            40: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            48: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            56: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            full: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            4: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            6: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            8: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            12: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            14: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            18: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            22: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            64: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            72: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            80: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            88: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            96: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            104: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            112: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            fitContent: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            maxContent: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            minContent: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            gapX: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            gapY: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+        };
+        staticScale: {
+            0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            14: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            16: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            18: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            20: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            22: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            24: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            32: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            40: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            48: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            56: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            64: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            72: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            88: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            96: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            104: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            112: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            auto: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fitContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            maxContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            minContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '100vh': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '100vw': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gapX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gapY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        name: "columnGap";
+    };
+} & {
+    display: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "display";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+    grid: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "grid";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+    gridRow: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "gridRow";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+    gridColumn: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "gridColumn";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+    gridAutoFlow: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "gridAutoFlow";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+    gridAutoRows: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "gridAutoRows";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+    gridAutoColumns: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "gridAutoColumns";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+    gridTemplateAreas: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "gridTemplateAreas";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+    gridTemplateColumns: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "gridTemplateColumns";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+    gridTemplateRows: {
+        dynamic: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+        dynamicScale: true;
+        name: "gridTemplateRows";
+        vars: {
+            default: string;
+            conditions: Record<string | number, string>;
+        };
+    };
+} & {}> & GridProperties & {
+    as?: ElementType<any> | undefined;
+    className?: ClassValue;
+    id?: string | undefined;
+    'data-test-id'?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<GridProperties>>;
+export type GridProps = Parameters<typeof Grid>[0];
+export default Grid;

package/dist/types/layouts/grid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Grid } from './grid';
+export * from './grid';

package/dist/types/layouts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './box';
+export * from './flex';
+export * from './grid';
+export * from './stack';
+export * from './text';

package/dist/types/layouts/stack/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stack } from './stack';
+export * from './stack';

package/dist/types/layouts/stack/stack.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+import type { FlexProps } from '../flex';
+declare const validStackComponents: readonly ["a", "article", "div", "form", "header", "label", "li", "main", "section", "span"];
+type BaseStackProps = {
+    as?: (typeof validStackComponents)[number];
+    alignItems?: FlexProps['alignItems'];
+    direction?: 'horizontal' | 'vertical';
+    justifyContent?: FlexProps['justifyContent'];
+    gap?: FlexProps['gap'];
+    wrap?: boolean;
+    'data-test-id'?: string;
+};
+declare const Stack: import("react").ForwardRefExoticComponent<BaseStackProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLAttributes<HTMLElement>>>;
+export type StackProps = Parameters<typeof Stack>[0];
+export default Stack;