@whatisboom/boom-ui 0.1.0

package/README.md

@@ -0,0 +1,291 @@
+# @whatisboom/boom-ui
+
+**Accessibility-First React Component Library**
+
+Production-ready React components built from the ground up for accessibility, with comprehensive WCAG 2.1 AA compliance and beautiful theming.
+
+[![npm version](https://img.shields.io/npm/v/@whatisboom/boom-ui.svg)](https://www.npmjs.com/package/@whatisboom/boom-ui)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Why @whatisboom/boom-ui?
+
+- ♿ **Accessibility-First**: Every component tested with vitest-axe, keyboard navigable, and screen reader optimized
+- 🎨 **Theme System**: Built on CSS design tokens with light/dark mode support
+- 📘 **TypeScript Native**: Fully typed with strict mode enabled
+- 🧪 **Thoroughly Tested**: 80%+ code coverage with accessibility regression tests
+- ⚡ **Modern Stack**: React 19, Framer Motion animations, tree-shakeable exports
+
+## Installation
+
+```bash
+npm install @whatisboom/boom-ui
+```
+
+```bash
+yarn add @whatisboom/boom-ui
+```
+
+```bash
+pnpm add @whatisboom/boom-ui
+```
+
+## Quick Start
+
+Wrap your application with `ThemeProvider` and import the styles:
+
+```tsx
+import { ThemeProvider, Button } from '@whatisboom/boom-ui';
+import '@whatisboom/boom-ui/styles';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="system">
+      <Button variant="primary">Get Started</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+## Accessibility Highlights
+
+Every component in @whatisboom/boom-ui is built with accessibility as a core requirement, not an afterthought:
+
+### Automated Testing
+- **vitest-axe integration**: All components pass automated accessibility audits in CI/CD
+- **WCAG 2.1 AA compliance**: Components meet Level AA success criteria
+- **Regression prevention**: Accessibility tests run on every commit
+
+### Keyboard Navigation
+- Full keyboard support for all interactive components
+- Logical tab order and focus management
+- Custom keyboard shortcuts where appropriate (e.g., Cmd+K for search)
+
+### Screen Reader Support
+- Semantic HTML elements used by default
+- ARIA attributes for complex interactions
+- Live regions for dynamic content updates
+- Clear focus indicators for all interactive elements
+
+### Design Tokens
+- Color contrast ratios exceed WCAG AA requirements
+- Configurable focus indicators
+- Respects user preferences (reduced motion, color schemes)
+
+## Components
+
+### Forms
+
+```tsx
+import { Input, Checkbox, Switch, Select, Textarea } from '@whatisboom/boom-ui';
+
+// Input with validation
+<Input
+  label="Email"
+  type="email"
+  required
+  error={errors.email}
+  helperText="We'll never share your email"
+/>
+
+// Checkbox with label
+<Checkbox
+  label="I agree to the terms"
+  checked={agreed}
+  onChange={(e) => setAgreed(e.target.checked)}
+/>
+
+// Switch with accessible states
+<Switch
+  label="Enable notifications"
+  checked={enabled}
+  onChange={setEnabled}
+/>
+
+// Select with options
+<Select
+  label="Country"
+  options={[
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' },
+  ]}
+  value={country}
+  onChange={(e) => setCountry(e.target.value)}
+/>
+```
+
+### Buttons
+
+```tsx
+import { Button } from '@whatisboom/boom-ui';
+
+// Primary action button
+<Button variant="primary" size="md">
+  Save Changes
+</Button>
+
+// Loading state with accessible label
+<Button variant="primary" loading>
+  Submitting...
+</Button>
+
+// With icons
+<Button variant="secondary" leftIcon={<SaveIcon />}>
+  Save Draft
+</Button>
+```
+
+### Feedback
+
+```tsx
+import { Alert, Toast, ToastProvider, useToast, Progress } from '@whatisboom/boom-ui';
+
+// Alert with variants
+<Alert variant="success">
+  Your changes have been saved!
+</Alert>
+
+// Toast notifications
+function MyComponent() {
+  const { toast } = useToast();
+
+  return (
+    <Button onClick={() => toast.success('Profile updated!')}>
+      Update Profile
+    </Button>
+  );
+}
+
+// Wrap your app with ToastProvider
+<ToastProvider position="top-right">
+  <App />
+</ToastProvider>
+
+// Progress indicator
+<Progress value={75} variant="primary" />
+```
+
+### Modals & Overlays
+
+```tsx
+import { Modal, Drawer, Popover, Tooltip } from '@whatisboom/boom-ui';
+
+// Modal with focus trap
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Confirm Action"
+>
+  <p>Are you sure you want to continue?</p>
+  <Button onClick={handleConfirm}>Confirm</Button>
+</Modal>
+
+// Drawer for side panels
+<Drawer
+  isOpen={isDrawerOpen}
+  onClose={() => setIsDrawerOpen(false)}
+  position="right"
+>
+  <Navigation />
+</Drawer>
+
+// Tooltip for additional context
+<Tooltip content="This action cannot be undone">
+  <Button variant="danger">Delete</Button>
+</Tooltip>
+```
+
+### Layout
+
+```tsx
+import { Box, Stack, Card } from '@whatisboom/boom-ui';
+
+// Flexible box primitive
+<Box padding="lg" backgroundColor="surface">
+  <Typography variant="h2">Welcome</Typography>
+</Box>
+
+// Stack for vertical/horizontal layouts
+<Stack direction="vertical" spacing="md">
+  <Card>Content 1</Card>
+  <Card>Content 2</Card>
+</Stack>
+```
+
+## Theming
+
+@whatisboom/boom-ui uses CSS design tokens for consistent theming:
+
+```tsx
+import { ThemeProvider, useTheme } from '@whatisboom/boom-ui';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+
+// Toggle theme programmatically
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+      Toggle Theme
+    </Button>
+  );
+}
+```
+
+### Design Tokens
+
+Customize the look and feel by overriding CSS variables:
+
+```css
+:root {
+  --color-primary: hsl(220, 90%, 56%);
+  --color-primary-hover: hsl(220, 90%, 48%);
+  --spacing-md: 1rem;
+  --border-radius-md: 0.375rem;
+}
+```
+
+See the [theming documentation](./docs/theming.md) for all available tokens.
+
+## TypeScript Support
+
+All components are fully typed with TypeScript:
+
+```tsx
+import type { ButtonProps, InputProps, SelectOption } from '@whatisboom/boom-ui';
+
+const options: SelectOption[] = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+];
+
+const buttonProps: ButtonProps = {
+  variant: 'primary',
+  size: 'md',
+  onClick: () => console.log('clicked'),
+};
+```
+
+## Documentation
+
+- **[Storybook](http://localhost:6006)**: Interactive component gallery with live examples
+- **[Theming Guide](./docs/theming.md)**: Customize colors, spacing, and typography
+- **[Contributing](./CONTRIBUTING.md)**: Guidelines for contributors
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,7 @@
+import { AlertProps } from './Alert.types';
+
+export declare const Alert: {
+    ({ variant, title, children, onClose, icon, className, }: AlertProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAuG3C,eAAO,MAAM,KAAK;8DAOf,UAAU;;CA6BZ,CAAC"}

package/dist/components/Alert/Alert.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Alert } from './Alert';
+
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const AllVariants: Story;
+export declare const WithTitle: Story;
+export declare const Dismissible: Story;
+export declare const CustomIcon: Story;
+export declare const NoIcon: Story;
+export declare const LongContent: Story;
+//# sourceMappingURL=Alert.stories.d.ts.map

package/dist/components/Alert/Alert.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAU5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAiBzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA4CzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA6BxB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC"}

package/dist/components/Alert/Alert.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Alert.test.d.ts.map

package/dist/components/Alert/Alert.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.test.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.test.tsx"],"names":[],"mappings":""}

package/dist/components/Alert/Alert.types.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export interface AlertProps {
+    /**
+     * The visual style variant of the alert
+     * @default 'info'
+     */
+    variant?: AlertVariant;
+    /**
+     * Optional title displayed at the top of the alert
+     */
+    title?: string;
+    /**
+     * The main content of the alert
+     */
+    children: ReactNode;
+    /**
+     * Callback fired when the close button is clicked
+     * If provided, a close button will be displayed
+     */
+    onClose?: () => void;
+    /**
+     * Custom icon to display. If not provided, a default icon based on variant will be used
+     * Pass null to hide the icon completely
+     */
+    icon?: ReactNode | null;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+//# sourceMappingURL=Alert.types.d.ts.map

package/dist/components/Alert/Alert.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,3 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertVariant } from './Alert.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+import { AvatarProps } from './Avatar.types';
+
+export declare const Avatar: {
+    ({ src, alt, size, name, status, showStatus, className, ...imgProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAa7C,eAAO,MAAM,MAAM;2EAShB,WAAW;;CAyCb,CAAC"}

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar } from './Avatar';
+
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const WithImage: Story;
+export declare const WithInitials: Story;
+export declare const Sizes: Story;
+export declare const InitialsSizes: Story;
+export declare const WithStatus: Story;
+export declare const WithStatusAndInitials: Story;
+export declare const StatusSizes: Story;
+export declare const Group: Story;
+export declare const DifferentNames: Story;
+export declare const ImageFallback: Story;
+export declare const AllStatusStates: Story;
+//# sourceMappingURL=Avatar.stories.d.ts.map

package/dist/components/Avatar/Avatar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAIrC,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAS3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAmBnC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAiCzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA4C7B,CAAC"}

package/dist/components/Avatar/Avatar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Avatar.test.d.ts.map

package/dist/components/Avatar/Avatar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.test.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.test.tsx"],"names":[],"mappings":""}

package/dist/components/Avatar/Avatar.types.d.ts

@@ -0,0 +1,37 @@
+import { ImgHTMLAttributes } from 'react';
+
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'size'> {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for image (required for accessibility)
+     */
+    alt: string;
+    /**
+     * Size of the avatar
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Name for initials fallback
+     */
+    name?: string;
+    /**
+     * Status indicator
+     */
+    status?: AvatarStatus;
+    /**
+     * Whether to show status indicator
+     * @default false
+     */
+    showStatus?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+//# sourceMappingURL=Avatar.types.d.ts.map

package/dist/components/Avatar/Avatar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACpF;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarStatus } from './Avatar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import { BadgeProps } from './Badge.types';
+
+export declare const Badge: {
+    ({ children, variant, size, className, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,eAAO,MAAM,KAAK;8CAKf,UAAU;;CAaZ,CAAC"}

package/dist/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from './Badge';
+
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const NumericContent: Story;
+export declare const StringContent: Story;
+export declare const InlineUsage: Story;
+export declare const AllSizesAllVariants: Story;
+//# sourceMappingURL=Badge.stories.d.ts.map

package/dist/components/Badge/Badge.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAc5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAS5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAmEjC,CAAC"}

package/dist/components/Badge/Badge.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Badge.test.d.ts.map

package/dist/components/Badge/Badge.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.test.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.test.tsx"],"names":[],"mappings":""}

package/dist/components/Badge/Badge.types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { Size } from '../../types';
+
+export type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export interface BadgeProps {
+    /**
+     * Badge content (text or number)
+     */
+    children: ReactNode;
+    /**
+     * Visual variant
+     * @default 'primary'
+     */
+    variant?: BadgeVariant;
+    /**
+     * Size of the badge
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+//# sourceMappingURL=Badge.types.d.ts.map

package/dist/components/Badge/Badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5F,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,3 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,8 @@
+import { ElementType } from 'react';
+import { BoxProps } from './Box.types';
+
+export declare function Box<E extends ElementType = 'div'>({ as, display, flexDirection, alignItems, justifyContent, gap, padding, margin, width, height, className, style, children, ...props }: BoxProps<E>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Box {
+    var displayName: string;
+}
+//# sourceMappingURL=Box.d.ts.map

package/dist/components/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,wBAAgB,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EACjD,EAAE,EACF,OAAO,EACP,aAAa,EACb,UAAU,EACV,cAAc,EACd,GAAG,EACH,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,CAAC,CAAC,2CAuBb;yBAtCe,GAAG"}

package/dist/components/Box/Box.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Box } from './Box';
+
+declare const meta: Meta<typeof Box>;
+export default meta;
+type Story = StoryObj<typeof Box>;
+export declare const Default: Story;
+export declare const FlexRow: Story;
+export declare const FlexColumn: Story;
+export declare const CenteredContent: Story;
+export declare const SpaceBetween: Story;
+export declare const WithPadding: Story;
+export declare const WithMargin: Story;
+export declare const CustomDimensions: Story;
+export declare const NestedBoxes: Story;
+export declare const AsSection: Story;
+//# sourceMappingURL=Box.stories.d.ts.map

package/dist/components/Box/Box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CA+B1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAclC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC"}

package/dist/components/Box/Box.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Box.test.d.ts.map

package/dist/components/Box/Box.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.test.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.test.tsx"],"names":[],"mappings":""}

package/dist/components/Box/Box.types.d.ts

@@ -0,0 +1,51 @@
+import { ElementType, CSSProperties } from 'react';
+import { PolymorphicProps } from '../../types';
+
+export interface BoxBaseProps {
+    /**
+     * CSS display property
+     */
+    display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid';
+    /**
+     * Flexbox direction
+     */
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /**
+     * Flexbox align items
+     */
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    /**
+     * Flexbox justify content
+     */
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    /**
+     * Gap between children
+     */
+    gap?: number;
+    /**
+     * Padding (uses spacing scale)
+     */
+    padding?: number;
+    /**
+     * Margin (uses spacing scale)
+     */
+    margin?: number;
+    /**
+     * Width
+     */
+    width?: string | number;
+    /**
+     * Height
+     */
+    height?: string | number;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom inline styles
+     */
+    style?: CSSProperties;
+}
+export type BoxProps<E extends ElementType = 'div'> = BoxBaseProps & PolymorphicProps<E>;
+//# sourceMappingURL=Box.types.d.ts.map

package/dist/components/Box/Box.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.types.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,aAAa,GAAG,MAAM,GAAG,aAAa,CAAC;IACrF;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;IACpE;;OAEG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3E;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;IAC1G;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,YAAY,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Box } from './Box';
+export type { BoxProps } from './Box.types';
+//# sourceMappingURL=index.d.ts.map