@neynar/ui 0.1.1 → 0.1.2

package/dist/components/ui/stack.d.ts

@@ -1,192 +1,333 @@
 import * as React from "react";
 /**
- * Props for the Stack component
+ * Spacing options for Stack component using Tailwind CSS spacing scale
  *
- * @public
+ * Maps to Tailwind spacing utilities:
+ * - 1 = 0.25rem (4px) - Ultra-tight spacing for dense layouts
+ * - 2 = 0.5rem (8px) - Tight spacing for compact components
+ * - 3 = 0.75rem (12px) - Close spacing for related items
+ * - 4 = 1rem (16px) - Default spacing for general layouts
+ * - 6 = 1.5rem (24px) - Loose spacing for section separation
+ * - 8 = 2rem (32px) - Wide spacing for distinct content areas
+ * - 12 = 3rem (48px) - Extra-wide spacing for major layout divisions
  */
-export type StackProps = React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The spacing between stack items using Tailwind CSS spacing scale
-     *
-     * Controls the gap between child elements using Tailwind's space utilities.
-     * Each value corresponds to a Tailwind spacing unit (1 = 0.25rem, 4 = 1rem, etc.)
-     *
-     * @defaultValue 4
-     * @example
-     * ```tsx
-     * // Tight spacing for compact layouts
-     * <Stack spacing={2}>
-     *   <Button>Save</Button>
-     *   <Button>Cancel</Button>
-     * </Stack>
-     *
-     * // Generous spacing for section separation
-     * <Stack spacing={8}>
-     *   <section>First section</section>
-     *   <section>Second section</section>
-     * </Stack>
-     * ```
-     */
-    spacing?: 1 | 2 | 3 | 4 | 6 | 8 | 12;
-    /**
-     * The layout direction of the stack
-     *
-     * - `"vertical"` - Arranges children in a column with vertical spacing
-     * - `"horizontal"` - Arranges children in a row with horizontal spacing
-     *
-     * @defaultValue "vertical"
-     * @example
-     * ```tsx
-     * // Vertical stack (default)
-     * <Stack>
-     *   <Card>Item 1</Card>
-     *   <Card>Item 2</Card>
-     * </Stack>
-     *
-     * // Horizontal stack for action buttons
-     * <Stack direction="horizontal">
-     *   <Button>Primary</Button>
-     *   <Button variant="outline">Secondary</Button>
-     * </Stack>
-     * ```
-     */
-    direction?: "vertical" | "horizontal";
-};
+type StackSpacing = 1 | 2 | 3 | 4 | 6 | 8 | 12;
+/**
+ * Layout direction options for Stack component
+ *
+ * - "vertical" - Flex column layout with space-y-* utilities
+ * - "horizontal" - Flex row layout with space-x-* utilities
+ */
+type StackDirection = "vertical" | "horizontal";
 /**
  * Stack - A flexible layout component for consistent spacing between elements
  *
  * Stack is a fundamental layout primitive that arranges child elements in either
  * vertical or horizontal direction with consistent spacing. Built on flexbox principles,
- * it provides a clean API for common layout patterns without requiring custom CSS.
+ * it provides a clean, declarative API for common layout patterns without requiring
+ * custom CSS or complex flex configurations.
+ *
+ * **Core Features:**
+ * - Consistent spacing using Tailwind's design system
+ * - Flexible direction control (vertical/horizontal)
+ * - Zero-config flexbox layouts with predictable behavior
+ * - Composable with other UI components and layout utilities
+ * - Full accessibility support with semantic HTML structure
+ * - TypeScript-first with comprehensive prop validation
  *
- * This component is particularly useful for:
+ * **Common Use Cases:**
  * - Form layouts with consistent field spacing
  * - Button groups and action bars
  * - Content sections with uniform gaps
- * - Navigation lists and menus
- * - Card layouts and content grids
+ * - Navigation lists and menu structures
+ * - Card layouts and dashboard grids
+ * - Page sections and content hierarchy
+ * - Responsive component layouts
  *
- * @example Basic vertical layout (default)
+ * **Design System Integration:**
+ * Stack integrates seamlessly with design systems by providing consistent
+ * spacing that aligns with Tailwind's spacing scale. This ensures visual
+ * harmony across your application and reduces the need for custom spacing
+ * utilities in most common layout scenarios.
+ *
+ * @example Basic vertical content layout (default behavior)
  * ```tsx
  * <Stack>
- *   <Card>Profile Information</Card>
- *   <Card>Account Settings</Card>
- *   <Card>Privacy Controls</Card>
+ *   <h1>Dashboard</h1>
+ *   <Card>
+ *     <CardHeader>Profile Information</CardHeader>
+ *     <CardContent>User profile details</CardContent>
+ *   </Card>
+ *   <Card>
+ *     <CardHeader>Account Settings</CardHeader>
+ *     <CardContent>Account configuration options</CardContent>
+ *   </Card>
+ *   <Card>
+ *     <CardHeader>Privacy Controls</CardHeader>
+ *     <CardContent>Privacy and security settings</CardContent>
+ *   </Card>
  * </Stack>
  * ```
  *
- * @example Horizontal action bar
+ * @example Horizontal action button bar
  * ```tsx
- * <Stack direction="horizontal" spacing={3}>
- *   <Button>Save Changes</Button>
- *   <Button variant="outline">Cancel</Button>
- *   <Button variant="ghost">Reset</Button>
+ * <Stack direction="horizontal" spacing={3} className="justify-end">
+ *   <Button variant="ghost">Cancel</Button>
+ *   <Button variant="outline">Save Draft</Button>
+ *   <Button>Publish</Button>
  * </Stack>
  * ```
  *
- * @example Form sections with custom spacing
+ * @example Complex form layout with nested stacks
  * ```tsx
- * <Stack spacing={6}>
- *   <fieldset>
- *     <legend>Personal Information</legend>
- *     <Stack spacing={3}>
- *       <Input placeholder="Full Name" />
- *       <Input placeholder="Email Address" />
- *     </Stack>
- *   </fieldset>
- *   <fieldset>
- *     <legend>Preferences</legend>
- *     <Stack spacing={2}>
- *       <Checkbox>Email notifications</Checkbox>
- *       <Checkbox>Marketing updates</Checkbox>
+ * <form>
+ *   <Stack spacing={6}>
+ *     // Personal Information Section
+ *     <fieldset>
+ *       <legend className="text-lg font-semibold mb-4">Personal Information</legend>
+ *       <Stack spacing={3}>
+ *         <Stack spacing={1}>
+ *           <Label htmlFor="fullName">Full Name</Label>
+ *           <Input id="fullName" placeholder="Enter your full name" />
+ *         </Stack>
+ *         <Stack spacing={1}>
+ *           <Label htmlFor="email">Email Address</Label>
+ *           <Input id="email" type="email" placeholder="you@example.com" />
+ *         </Stack>
+ *       </Stack>
+ *     </fieldset>
+ *
+ *     // Preferences Section
+ *     <fieldset>
+ *       <legend className="text-lg font-semibold mb-4">Preferences</legend>
+ *       <Stack spacing={2}>
+ *         <div className="flex items-center space-x-2">
+ *           <Checkbox id="emailNotifications" />
+ *           <Label htmlFor="emailNotifications">Email notifications</Label>
+ *         </div>
+ *         <div className="flex items-center space-x-2">
+ *           <Checkbox id="marketingUpdates" />
+ *           <Label htmlFor="marketingUpdates">Marketing updates</Label>
+ *         </div>
+ *       </Stack>
+ *     </fieldset>
+ *
+ *     // Form Actions
+ *     <Stack direction="horizontal" spacing={2} className="justify-end">
+ *       <Button type="button" variant="outline">Reset</Button>
+ *       <Button type="submit">Save Changes</Button>
  *     </Stack>
- *   </fieldset>
- * </Stack>
+ *   </Stack>
+ * </form>
  * ```
  *
- * @example Responsive layout with additional styling
+ * @example Responsive navigation with adaptive direction
  * ```tsx
  * <Stack
- *   spacing={4}
- *   className="w-full max-w-md mx-auto p-6"
+ *   direction="horizontal"
+ *   spacing={1}
+ *   className="flex-col sm:flex-row overflow-x-auto sm:overflow-visible"
  * >
- *   <h2>User Dashboard</h2>
- *   <Stack direction="horizontal" spacing={2} className="justify-between">
- *     <Badge>Online</Badge>
- *     <Button size="sm">Edit Profile</Button>
- *   </Stack>
+ *   <Button variant="ghost" className="w-full sm:w-auto">Dashboard</Button>
+ *   <Button variant="ghost" className="w-full sm:w-auto">Analytics</Button>
+ *   <Button variant="ghost" className="w-full sm:w-auto">Settings</Button>
+ *   <Button variant="ghost" className="w-full sm:w-auto">Help</Button>
  * </Stack>
  * ```
  *
+ * @example Dashboard layout with mixed content types
+ * ```tsx
+ * <div className="container mx-auto p-6">
+ *   <Stack spacing={8}>
+ *     // Page Header
+ *     <Stack spacing={2}>
+ *       <h1 className="text-3xl font-bold">Analytics Dashboard</h1>
+ *       <p className="text-muted-foreground">Overview of your application metrics</p>
+ *     </Stack>
+ *
+ *     // Stats Cards
+ *     <Stack direction="horizontal" spacing={4} className="grid grid-cols-1 md:grid-cols-3 gap-4">
+ *       <Card>
+ *         <CardHeader>
+ *           <CardTitle>Total Users</CardTitle>
+ *         </CardHeader>
+ *         <CardContent>
+ *           <div className="text-2xl font-bold">2,543</div>
+ *         </CardContent>
+ *       </Card>
+ *       <Card>
+ *         <CardHeader>
+ *           <CardTitle>Revenue</CardTitle>
+ *         </CardHeader>
+ *         <CardContent>
+ *           <div className="text-2xl font-bold">$12,543</div>
+ *         </CardContent>
+ *       </Card>
+ *       <Card>
+ *         <CardHeader>
+ *           <CardTitle>Growth</CardTitle>
+ *         </CardHeader>
+ *         <CardContent>
+ *           <div className="text-2xl font-bold text-green-600">+12.5%</div>
+ *         </CardContent>
+ *       </Card>
+ *     </Stack>
+ *
+ *     // Content Sections
+ *     <Stack spacing={6}>
+ *       <Card>
+ *         <CardHeader>
+ *           <CardTitle>Recent Activity</CardTitle>
+ *         </CardHeader>
+ *         <CardContent>Activity timeline content</CardContent>
+ *       </Card>
+ *       <Card>
+ *         <CardHeader>
+ *           <CardTitle>Performance Metrics</CardTitle>
+ *         </CardHeader>
+ *         <CardContent>Charts and graphs</CardContent>
+ *       </Card>
+ *     </Stack>
+ *   </Stack>
+ * </div>
+ * ```
+ *
+ * @example Advanced usage with custom styling and semantic elements
+ * ```tsx
+ * <article className="prose max-w-none">
+ *   <Stack spacing={6}>
+ *     <header>
+ *       <Stack spacing={2}>
+ *         <h1>The Future of Web Development</h1>
+ *         <Stack direction="horizontal" spacing={4} className="text-sm text-muted-foreground">
+ *           <time dateTime="2024-01-15">January 15, 2024</time>
+ *           <address className="not-italic">By Jane Developer</address>
+ *           <span>5 min read</span>
+ *         </Stack>
+ *       </Stack>
+ *     </header>
+ *
+ *     <main>
+ *       <Stack spacing={4}>
+ *         <p>Introduction paragraph with key concepts...</p>
+ *         <section>
+ *           <h2>Key Technologies</h2>
+ *           <Stack spacing={3}>
+ *             <p>Discussion of modern web technologies...</p>
+ *             <ul>
+ *               <li>React and component architecture</li>
+ *               <li>Server-side rendering with Next.js</li>
+ *               <li>Type-safe development with TypeScript</li>
+ *             </ul>
+ *           </Stack>
+ *         </section>
+ *         <section>
+ *           <h2>Best Practices</h2>
+ *           <p>Guidelines for effective development...</p>
+ *         </section>
+ *       </Stack>
+ *     </main>
+ *
+ *     <footer>
+ *       <Stack direction="horizontal" spacing={2} className="justify-between items-center">
+ *         <Stack direction="horizontal" spacing={1}>
+ *           <Badge variant="secondary">React</Badge>
+ *           <Badge variant="secondary">TypeScript</Badge>
+ *           <Badge variant="secondary">Next.js</Badge>
+ *         </Stack>
+ *         <Stack direction="horizontal" spacing={2}>
+ *           <Button variant="outline" size="sm">Share</Button>
+ *           <Button variant="outline" size="sm">Save</Button>
+ *         </Stack>
+ *       </Stack>
+ *     </footer>
+ *   </Stack>
+ * </article>
+ * ```
+ *
  * @remarks
  * **Design Philosophy:**
- * - Follows the principle of consistent spacing throughout the UI
- * - Uses Tailwind's spacing scale for predictable sizing
- * - Composable with other layout components
- * - Maintains semantic HTML structure
- *
- * **Performance:**
- * - Lightweight wrapper around flexbox CSS
- * - No JavaScript overhead for layout calculations
- * - Leverages Tailwind's JIT compilation for minimal CSS
- *
- * **Accessibility:**
- * - Preserves natural document flow and reading order
- * - Compatible with screen readers and keyboard navigation
- * - Supports semantic HTML elements as children
- * - Does not interfere with focus management
+ * Stack follows the principle of consistent spacing throughout the UI, using Tailwind's
+ * carefully crafted spacing scale to create visual hierarchy and rhythm. The component
+ * prioritizes composability, allowing complex layouts to be built from simple, predictable
+ * building blocks while maintaining semantic HTML structure.
+ *
+ * **Technical Implementation:**
+ * - Uses CSS Flexbox for reliable cross-browser layout behavior
+ * - Leverages Tailwind's space-* utilities for optimal performance
+ * - Applies margins only to children (not first child) for clean edge handling
+ * - Compatible with Tailwind's JIT compilation for minimal bundle size
+ * - Supports all standard HTML div attributes for maximum flexibility
+ *
+ * **Performance Considerations:**
+ * - Zero JavaScript runtime overhead - pure CSS-based layout
+ * - Optimized for Tailwind's purging and JIT compilation
+ * - Efficient rendering with no layout calculation overhead
+ * - Scales well with large numbers of child elements
+ * - Memory-efficient with minimal DOM structure impact
+ *
+ * **Responsive Design Integration:**
+ * Stack works seamlessly with Tailwind's responsive utilities. You can easily
+ * create adaptive layouts that change direction, spacing, or additional styling
+ * based on screen size breakpoints.
+ *
+ * **Common Patterns:**
+ * - **Form Layouts**: Use nested stacks for sections, fields, and actions
+ * - **Content Hierarchies**: Vary spacing to create visual importance levels
+ * - **Component Composition**: Combine with Cards, Buttons, and other components
+ * - **Responsive Grids**: Use with CSS Grid classes for complex layouts
+ * - **Navigation Patterns**: Create horizontal and vertical navigation structures
+ *
+ * @accessibility
+ * **Keyboard Navigation:**
+ * - Preserves natural document flow and tab order
+ * - Does not interfere with focus management of child components
+ * - Maintains logical reading order for screen readers
+ * - Supports all standard keyboard navigation patterns
+ *
+ * **Screen Reader Support:**
+ * - Uses semantic HTML div element with no interference
+ * - Preserves natural content structure and hierarchy
+ * - Compatible with all ARIA attributes on child elements
+ * - Supports landmark roles when used with semantic HTML
+ * - Maintains proper heading structure and content relationships
+ *
+ * **ARIA Compatibility:**
+ * - Accepts all ARIA attributes for enhanced accessibility
+ * - Does not modify or interfere with child component ARIA properties
+ * - Supports role attributes for semantic meaning
+ * - Compatible with aria-label, aria-describedby, and other ARIA properties
+ *
+ * **Focus Management:**
+ * - Transparent to focus behavior - delegates to child components
+ * - Supports tabIndex for custom focus control when needed
+ * - Does not trap or redirect focus automatically
+ * - Maintains predictable focus flow in both directions
+ *
+ * @performance
+ * **Bundle Impact:**
+ * - Minimal JavaScript bundle size (primarily TypeScript types)
+ * - CSS-only layout solution with no runtime calculations
+ * - Leverages Tailwind's tree-shaking for optimal CSS output
+ * - No external dependencies beyond React and utility functions
+ *
+ * **Runtime Performance:**
+ * - Zero-cost abstraction over native flexbox
+ * - No re-renders triggered by prop changes (style-based)
+ * - Efficient DOM structure with single wrapper element
+ * - Compatible with React's concurrent features and optimizations
  *
  * @public
  * @since 1.0.0
+ * @see {@link Button} For action elements commonly used in horizontal stacks
+ * @see {@link Card} For content containers commonly arranged in stacks
  * @see {@link https://tailwindcss.com/docs/space} Tailwind CSS spacing utilities
+ * @see {@link https://tailwindcss.com/docs/flexbox-direction} Tailwind CSS flex direction
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout} MDN CSS Flexbox Guide
  */
 declare const Stack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The spacing between stack items using Tailwind CSS spacing scale
-     *
-     * Controls the gap between child elements using Tailwind's space utilities.
-     * Each value corresponds to a Tailwind spacing unit (1 = 0.25rem, 4 = 1rem, etc.)
-     *
-     * @defaultValue 4
-     * @example
-     * ```tsx
-     * // Tight spacing for compact layouts
-     * <Stack spacing={2}>
-     *   <Button>Save</Button>
-     *   <Button>Cancel</Button>
-     * </Stack>
-     *
-     * // Generous spacing for section separation
-     * <Stack spacing={8}>
-     *   <section>First section</section>
-     *   <section>Second section</section>
-     * </Stack>
-     * ```
-     */
-    spacing?: 1 | 2 | 3 | 4 | 6 | 8 | 12;
-    /**
-     * The layout direction of the stack
-     *
-     * - `"vertical"` - Arranges children in a column with vertical spacing
-     * - `"horizontal"` - Arranges children in a row with horizontal spacing
-     *
-     * @defaultValue "vertical"
-     * @example
-     * ```tsx
-     * // Vertical stack (default)
-     * <Stack>
-     *   <Card>Item 1</Card>
-     *   <Card>Item 2</Card>
-     * </Stack>
-     *
-     * // Horizontal stack for action buttons
-     * <Stack direction="horizontal">
-     *   <Button>Primary</Button>
-     *   <Button variant="outline">Secondary</Button>
-     * </Stack>
-     * ```
-     */
-    direction?: "vertical" | "horizontal";
+    spacing?: StackSpacing;
+    direction?: StackDirection;
 } & React.RefAttributes<HTMLDivElement>>;
 export { Stack };
 //# sourceMappingURL=stack.d.ts.map

package/dist/components/ui/stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../src/components/ui/stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IAErC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,QAAA,MAAM,KAAK;IAzIT;;;;;;;;;;;;;;;;;;;;;OAqBG;cACO,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE;IAEpC;;;;;;;;;;;;;;;;;;;;;OAqBG;gBACS,UAAU,GAAG,YAAY;wCAwHtC,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../src/components/ui/stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;GAWG;AACH,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAE/C;;;;;GAKG;AACH,KAAK,cAAc,GAAG,UAAU,GAAG,YAAY,CAAC;AAuIhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiTG;AACH,QAAA,MAAM,KAAK;cAGG,YAAY;gBACV,cAAc;wCA6B5B,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/ui/stories/aspect-ratio.stories.d.ts

@@ -1,8 +1,7 @@
 import type { StoryObj } from "@storybook/react-vite";
-import { AspectRatio } from "../aspect-ratio";
 declare const meta: {
     title: string;
-    component: typeof AspectRatio;
+    component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-aspect-ratio").AspectRatioProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
         docs: {

package/dist/components/ui/stories/aspect-ratio.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aspect-ratio.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/aspect-ratio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAgDtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiFvB,CAAC"}
+{"version":3,"file":"aspect-ratio.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/aspect-ratio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAgDtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiFvB,CAAC"}

package/dist/components/ui/stories/container.stories.d.ts

@@ -1,9 +1,8 @@
 import type { StoryObj } from "@storybook/react-vite";
+import { Container } from "../container";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
-        size?: "sm" | "md" | "lg" | "xl" | "full";
-    } & import("react").RefAttributes<HTMLDivElement>>;
+    component: typeof Container;
     parameters: {
         layout: string;
         docs: {

package/dist/components/ui/stories/container.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/container.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA+DtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAmHvB,CAAC"}
+{"version":3,"file":"container.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/container.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA+DtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAmHvB,CAAC"}

package/dist/components/ui/stories/empty-state.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from "@storybook/react-vite";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
         title: string;
         description?: string;
         icon?: React.ReactNode;
@@ -9,7 +9,7 @@ declare const meta: {
             label: string;
             onClick: () => void;
         };
-    } & import("react").RefAttributes<HTMLDivElement>>;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
         docs: {

package/dist/components/ui/stories/scroll-area.stories.d.ts

@@ -1,8 +1,7 @@
 import type { StoryObj } from "@storybook/react-vite";
-import { ScrollArea } from "../scroll-area";
 declare const meta: {
     title: string;
-    component: typeof ScrollArea;
+    component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
         docs: {

package/dist/components/ui/stories/scroll-area.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/scroll-area.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAa,MAAM,gBAAgB,CAAC;AAEvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAuByB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW,EAAE,KA8BzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoDtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA8DvB,CAAC"}
+{"version":3,"file":"scroll-area.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/scroll-area.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAuByB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW,EAAE,KA8BzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoDtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA8DvB,CAAC"}

package/dist/components/ui/stories/stack.stories.d.ts

@@ -3,7 +3,7 @@ declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
         spacing?: 1 | 2 | 3 | 4 | 6 | 8 | 12;
-        direction?: "vertical" | "horizontal";
+        direction?: "horizontal" | "vertical";
     } & import("react").RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;

package/dist/components/ui/stories/text-field.stories.d.ts

@@ -2,7 +2,13 @@ import type { StoryObj } from "@storybook/react-vite";
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import("../text-field").TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: React.ForwardRefExoticComponent<Omit<{
+        label?: string;
+        helperText?: string;
+        error?: string;
+        required?: boolean;
+        className?: string;
+    } & Omit<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>, "className">, "ref"> & React.RefAttributes<HTMLInputElement>>;
     parameters: {
         layout: string;
         docs: {

package/dist/components/ui/stories/text-field.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/text-field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAiFtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiHvB,CAAC"}
+{"version":3,"file":"text-field.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/text-field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAiFtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiHvB,CAAC"}