@vkzstudio/muza-ui 1.0.1 → 1.0.2

package/CLAUDE_CONSUMER.md

@@ -1,238 +1,238 @@
-# Muza UI Library Integration
-
-This project uses the `@vkzstudio/muza-ui` component library. Follow these guidelines when working with Muza UI components.
-
-## Quick Reference
-
-```tsx
-// Import styles (required - should already be in main entry file)
-// Alternative: import '@vkzstudio/muza-ui/dist/muza-ui.css'
-// Import components
-import { Alert, Button, Input, Select } from '@vkzstudio/muza-ui'
-import '@vkzstudio/muza-ui/styles'
-```
-
-## Component Usage Rules
-
-### 1. Always Use Library Components
-
-NEVER create new UI components that duplicate Muza UI functionality. Check available components first:
-
-**Complete Component List (42 components)**
-
-**Form & Input Components (13)**:
-Button, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleGroup, Select, MultiSelect, Searchbar, FileUpload
-
-**Layout & Structure (5)**:
-Accordion, Flex, Typography, Dialog, ExpandableTable
-
-**Feedback & Status (7)**:
-Alert, Tag, Loader, EmptyState, Snackbar, PinIndicator, SliderIndicators
-
-**Navigation (8)**:
-Breadcrumb, DropdownMenu, SegmentedControl, SegmentedIconControl, Stepper, SwipeButton, EdgeButton, LanguageSwitcher
-
-**Media & Display (3)**:
-Avatar, Lightbox, Tooltip
-
-**Date & Time (3)**:
-Calendar, DatePicker, TimePicker
-
-**Specialized (3)**:
-Popover, LoginScreen, Icons
-
-### 2. Component Variants
-
-Use consistent variants across the app:
-
-```tsx
-// Button variants
-variant: "primary" | "secondary" | "tertiary" | "invert" | "dashed" | "link" | "linkInvert"
-size: "xs" | "sm" | "md" | "lg"
-
-// Button modifiers (can combine with any variant)
-ghost: boolean  // Ghost styling overlay
-danger: boolean // Danger styling overlay
-
-// Examples of combinations
-<Button variant="primary" ghost>Ghost Primary</Button>
-<Button variant="secondary" danger>Danger Secondary</Button>
-<Button variant="tertiary" ghost danger>Ghost Danger Tertiary</Button>
-
-// Other Button props
-loading, fullWidth, icon, iconPosition
-
-// Input states
-<Input error={hasError} disabled={isDisabled} />
-<Input mask="(000) 000-0000" placeholder="Phone" /> // With masking
-
-// Alert types (use 'type' not 'variant')
-<Alert type="info" | "success" | "warning" | "error" />
-```
-
-### 3. Styling Guidelines
-
-- **DO NOT** recreate Muza UI components with custom CSS
-- **DO** use the `className` prop to add utility classes when needed
-- **DO** use design tokens for custom components that extend Muza UI
-
-```tsx
-// Good - extending with utilities
-<Button className="w-full mt-4" variant="primary">
-  Submit
-</Button>
-
-// Bad - recreating component styles
-<button className="bg-purple-500 hover:bg-purple-600 px-4 py-2 rounded">
-  Submit
-</button>
-```
-
-### 4. Form Patterns
-
-Always use Muza UI form components:
-
-```tsx
-// Good - using library components
-import { Input, Button, Checkbox, Radio } from '@vkzstudio/muza-ui'
-
-function Form() {
-  return (
-    <form>
-      <Input name="email" type="email" required />
-      <Checkbox id="terms" label="I agree to terms" />
-      <Radio value="option1" label="Option 1" />
-      <Button type="submit" variant="primary">
-        Submit
-      </Button>
-    </form>
-  )
-}
-
-// Bad - using native HTML elements
-function Form() {
-  return (
-    <form>
-      <input type="email" />
-      <input type="checkbox" />
-      <button>Submit</button>
-    </form>
-  )
-}
-```
-
-### 5. Icons
-
-Use Muza UI icons from the Solar Icons integration:
-
-```tsx
-import { Button } from '@vkzstudio/muza-ui'
-
-// Icons are integrated with @solar-icons/react-perf
-// Import from Solar Icons directly in your project
-// Muza UI components support icon props where applicable
-
-;<Button icon={<SearchIcon />} iconPosition="start">
-  Search
-</Button>
-```
-
-### 7. Accessibility
-
-All Muza UI components include proper ARIA attributes. Maintain accessibility when extending:
-
-```tsx
-<Button aria-label="Save document" aria-busy={isLoading} disabled={isLoading}>
-  {isLoading ? 'Saving...' : 'Save'}
-</Button>
-```
-
-## TypeScript Integration
-
-The library is fully typed. Use the exported types:
-
-```tsx
-import type { ButtonProps, InputProps } from '@vkzstudio/muza-ui'
-
-interface CustomButtonProps extends ButtonProps {
-  customProp?: boolean
-}
-```
-
-## Performance Guidelines
-
-1. **Import only needed components** - Tree shaking is supported
-2. **Use lazy loading for large components** like Calendar or DatePicker
-3. **Memoize complex forms** when using many Muza UI inputs
-
-## DO NOT
-
-- Create custom Button, Input, or other basic components
-- Use native HTML form elements when Muza UI equivalents exist
-- Override core component styles with !important
-- Mix different UI libraries (Material-UI, Ant Design, etc.) with Muza UI
-- Create custom toast/notification systems
-
-## DO
-
-- Use Muza UI components consistently throughout the app
-- Extend components with className for spacing/layout
-- Follow the established variant patterns
-- Maintain accessibility standards
-- Report any missing components or features needed
-
-## Package Exports
-
-The library supports multiple export paths for flexibility:
-
-```tsx
-// Main components export
-import { Button, Input } from '@vkzstudio/muza-ui'
-
-// Styles
-import '@vkzstudio/muza-ui/styles'
-
-// Individual component exports (tree-shaking friendly)
-import { Button } from '@vkzstudio/muza-ui/components/Button'
-
-// Utilities
-import { cn } from '@vkzstudio/muza-ui/utils'
-
-// Global styles
-import '@vkzstudio/muza-ui/globals.css'
-
-// Third-party library styles (required for components like Lightbox)
-import '@vkzstudio/muza-ui/3rd-parties.css'
-
-// 3D Models (for LoginScreen)
-import modelPath from '@vkzstudio/muza-ui/models/Login3D.glb'
-
-// Individual style tokens (granular imports)
-import '@vkzstudio/muza-ui/styles/token-colors.css'
-import '@vkzstudio/muza-ui/styles/typography.css'
-```
-
-## Troubleshooting
-
-If a component isn't rendering:
-
-1. Check that `@vkzstudio/muza-ui/styles` is imported in your entry file
-2. Verify React 18+ is installed
-3. Ensure all required peer dependencies are installed (see package.json)
-4. Verify the component is properly imported
-5. Check browser console for errors
-6. Ensure Tailwind CSS is properly configured if using custom utilities
-
-**For LoginScreen 3D issues:**
-
-- Ensure the GLB file is copied to `public/models/Login3D.glb`
-- Check that `@react-three/fiber`, `@react-three/drei`, and `three` are installed
-- The 3D scene only renders on desktop (screen width > 1024px)
-
-**For Lightbox image gallery issues:**
-
-- **REQUIRED:** Import third-party styles: `import '@vkzstudio/muza-ui/3rd-parties.css'` in your entry file
-- Check that `photoswipe` and `react-photoswipe-gallery` peer dependencies are installed
-- Ensure images have proper `width` and `height` props for the lightbox to display correctly
-
-Remember: The goal is consistency. Use Muza UI components as designed to maintain a unified design system across the application.
+# Muza UI Library Integration
+
+This project uses the `@vkzstudio/muza-ui` component library. Follow these guidelines when working with Muza UI components.
+
+## Quick Reference
+
+```tsx
+// Import styles (required - should already be in main entry file)
+// Alternative: import '@vkzstudio/muza-ui/dist/muza-ui.css'
+// Import components
+import { Alert, Button, Input, Select } from '@vkzstudio/muza-ui'
+import '@vkzstudio/muza-ui/styles'
+```
+
+## Component Usage Rules
+
+### 1. Always Use Library Components
+
+NEVER create new UI components that duplicate Muza UI functionality. Check available components first:
+
+**Complete Component List (42 components)**
+
+**Form & Input Components (13)**:
+Button, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleGroup, Select, MultiSelect, Searchbar, FileUpload
+
+**Layout & Structure (5)**:
+Accordion, Flex, Typography, Dialog, ExpandableTable
+
+**Feedback & Status (7)**:
+Alert, Tag, Loader, EmptyState, Snackbar, PinIndicator, SliderIndicators
+
+**Navigation (8)**:
+Breadcrumb, DropdownMenu, SegmentedControl, SegmentedIconControl, Stepper, SwipeButton, EdgeButton, LanguageSwitcher
+
+**Media & Display (3)**:
+Avatar, Lightbox, Tooltip
+
+**Date & Time (3)**:
+Calendar, DatePicker, TimePicker
+
+**Specialized (3)**:
+Popover, LoginScreen, Icons
+
+### 2. Component Variants
+
+Use consistent variants across the app:
+
+```tsx
+// Button variants
+variant: "primary" | "secondary" | "tertiary" | "invert" | "dashed" | "link" | "linkInvert"
+size: "xs" | "sm" | "md" | "lg"
+
+// Button modifiers (can combine with any variant)
+ghost: boolean  // Ghost styling overlay
+danger: boolean // Danger styling overlay
+
+// Examples of combinations
+<Button variant="primary" ghost>Ghost Primary</Button>
+<Button variant="secondary" danger>Danger Secondary</Button>
+<Button variant="tertiary" ghost danger>Ghost Danger Tertiary</Button>
+
+// Other Button props
+loading, fullWidth, icon, iconPosition
+
+// Input states
+<Input error={hasError} disabled={isDisabled} />
+<Input mask="(000) 000-0000" placeholder="Phone" /> // With masking
+
+// Alert types (use 'type' not 'variant')
+<Alert type="info" | "success" | "warning" | "error" />
+```
+
+### 3. Styling Guidelines
+
+- **DO NOT** recreate Muza UI components with custom CSS
+- **DO** use the `className` prop to add utility classes when needed
+- **DO** use design tokens for custom components that extend Muza UI
+
+```tsx
+// Good - extending with utilities
+<Button className="w-full mt-4" variant="primary">
+  Submit
+</Button>
+
+// Bad - recreating component styles
+<button className="bg-purple-500 hover:bg-purple-600 px-4 py-2 rounded">
+  Submit
+</button>
+```
+
+### 4. Form Patterns
+
+Always use Muza UI form components:
+
+```tsx
+// Good - using library components
+import { Input, Button, Checkbox, Radio } from '@vkzstudio/muza-ui'
+
+function Form() {
+  return (
+    <form>
+      <Input name="email" type="email" required />
+      <Checkbox id="terms" label="I agree to terms" />
+      <Radio value="option1" label="Option 1" />
+      <Button type="submit" variant="primary">
+        Submit
+      </Button>
+    </form>
+  )
+}
+
+// Bad - using native HTML elements
+function Form() {
+  return (
+    <form>
+      <input type="email" />
+      <input type="checkbox" />
+      <button>Submit</button>
+    </form>
+  )
+}
+```
+
+### 5. Icons
+
+Use Muza UI icons from the Solar Icons integration:
+
+```tsx
+import { Button } from '@vkzstudio/muza-ui'
+
+// Icons are integrated with @solar-icons/react-perf
+// Import from Solar Icons directly in your project
+// Muza UI components support icon props where applicable
+
+;<Button icon={<SearchIcon />} iconPosition="start">
+  Search
+</Button>
+```
+
+### 7. Accessibility
+
+All Muza UI components include proper ARIA attributes. Maintain accessibility when extending:
+
+```tsx
+<Button aria-label="Save document" aria-busy={isLoading} disabled={isLoading}>
+  {isLoading ? 'Saving...' : 'Save'}
+</Button>
+```
+
+## TypeScript Integration
+
+The library is fully typed. Use the exported types:
+
+```tsx
+import type { ButtonProps, InputProps } from '@vkzstudio/muza-ui'
+
+interface CustomButtonProps extends ButtonProps {
+  customProp?: boolean
+}
+```
+
+## Performance Guidelines
+
+1. **Import only needed components** - Tree shaking is supported
+2. **Use lazy loading for large components** like Calendar or DatePicker
+3. **Memoize complex forms** when using many Muza UI inputs
+
+## DO NOT
+
+- Create custom Button, Input, or other basic components
+- Use native HTML form elements when Muza UI equivalents exist
+- Override core component styles with !important
+- Mix different UI libraries (Material-UI, Ant Design, etc.) with Muza UI
+- Create custom toast/notification systems
+
+## DO
+
+- Use Muza UI components consistently throughout the app
+- Extend components with className for spacing/layout
+- Follow the established variant patterns
+- Maintain accessibility standards
+- Report any missing components or features needed
+
+## Package Exports
+
+The library supports multiple export paths for flexibility:
+
+```tsx
+// Main components export
+import { Button, Input } from '@vkzstudio/muza-ui'
+
+// Styles
+import '@vkzstudio/muza-ui/styles'
+
+// Individual component exports (tree-shaking friendly)
+import { Button } from '@vkzstudio/muza-ui/components/Button'
+
+// Utilities
+import { cn } from '@vkzstudio/muza-ui/utils'
+
+// Global styles
+import '@vkzstudio/muza-ui/globals.css'
+
+// Third-party library styles (required for components like Lightbox)
+import '@vkzstudio/muza-ui/3rd-parties.css'
+
+// 3D Models (for LoginScreen)
+import modelPath from '@vkzstudio/muza-ui/models/Login3D.glb'
+
+// Individual style tokens (granular imports)
+import '@vkzstudio/muza-ui/styles/token-colors.css'
+import '@vkzstudio/muza-ui/styles/typography.css'
+```
+
+## Troubleshooting
+
+If a component isn't rendering:
+
+1. Check that `@vkzstudio/muza-ui/styles` is imported in your entry file
+2. Verify React 18+ is installed
+3. Ensure all required peer dependencies are installed (see package.json)
+4. Verify the component is properly imported
+5. Check browser console for errors
+6. Ensure Tailwind CSS is properly configured if using custom utilities
+
+**For LoginScreen 3D issues:**
+
+- Ensure the GLB file is copied to `public/models/Login3D.glb`
+- Check that `@react-three/fiber`, `@react-three/drei`, and `three` are installed
+- The 3D scene only renders on desktop (screen width > 1024px)
+
+**For Lightbox image gallery issues:**
+
+- **REQUIRED:** Import third-party styles: `import '@vkzstudio/muza-ui/3rd-parties.css'` in your entry file
+- Check that `photoswipe` and `react-photoswipe-gallery` peer dependencies are installed
+- Ensure images have proper `width` and `height` props for the lightbox to display correctly
+
+Remember: The goal is consistency. Use Muza UI components as designed to maintain a unified design system across the application.

package/README.md

@@ -1,168 +1,168 @@
-# Muza UI
-
-A modern React component library built with Vite, shadcn/ui, and Tailwind CSS 4.
-
-## Prerequisites
-
-- Node.js 22 or higher
-- npm or yarn
-
-## Quick Start
-
-1. **Clone and install dependencies:**
-
-   ```bash
-   npm install
-   ```
-
-2. **Start development server:**
-   ```bash
-   npm run dev
-   ```
-   This starts Storybook at [http://localhost:6006](http://localhost:6006)
-
-## Development
-
-### Node.js Version Management
-
-This project requires Node.js 22+. If you're using nvm:
-
-```bash
-nvm use
-```
-
-### Available Scripts
-
-| Script                             | Description                                     |
-| ---------------------------------- | ----------------------------------------------- |
-| `npm run dev`                      | Start Storybook development server on port 6006 |
-| `npm run build`                    | Build the component library for production      |
-| `npm run build-storybook`          | Build Storybook for deployment                  |
-| `npm run typecheck`                | Run TypeScript type checking                    |
-| `npm run lint`                     | Run ESLint                                      |
-| `npm run lint:fix`                 | Run ESLint with auto-fix                        |
-| `npm run add-component <name>`     | Add shadcn/ui component (macOS/Linux)           |
-| `npm run add-component:win <name>` | Add shadcn/ui component (Windows)               |
-| `npm run format`                   | Run prettier                                    |
-
-### Project Structure
-
-```
-src/
-├── components/          # React components
-│   ├── Button/         # Example component
-│   │   ├── Button.tsx
-│   │   ├── Button.stories.tsx
-│   │   └── index.ts
-│   └── index.ts        # Component exports
-├── utils/              # Utility functions
-│   ├── cn.ts          # Class name utility
-│   └── index.ts       # Utility exports
-├── globals.css        # Global Tailwind styles
-└── index.ts          # Main library export
-```
-
-### Adding Components
-
-For automated component installation using shadcn/ui, see: **[Component Installation Guide](docs/components.md)**
-
-#### Manual Component Creation
-
-1. **Create component directory:**
-
-   ```bash
-   mkdir src/components/YourComponent
-   ```
-
-2. **Create component files:**
-   - `YourComponent.tsx` - Main component
-   - `YourComponent.stories.tsx` - Storybook stories
-   - `index.ts` - Export file
-
-3. **Export from main index:**
-   Add to `src/components/index.ts`:
-   ```typescript
-   export * from './YourComponent'
-   ```
-
-### Storybook Development
-
-Components are showcased and developed using Storybook:
-
-- **View components:** `npm run dev` → [http://localhost:6006](http://localhost:6006)
-- **Create stories:** Follow the pattern in `Button.stories.tsx`
-- **Auto-docs:** Stories are automatically documented
-
-## Build Process
-
-### Library Build
-
-```bash
-npm run build
-```
-
-This creates:
-
-- `dist/index.js` - ES module bundle
-- `dist/index.d.ts` - TypeScript declarations
-- `dist/muza-ui.css` - Compiled CSS with all design tokens
-- `dist/components/` - Individual component modules
-- `dist/styles/` - Design system token files
-
-### Storybook Build
-
-```bash
-npm run build-storybook
-```
-
-Creates `storybook-static/` directory for deployment.
-
-## Technologies
-
-- **React 18** - UI framework
-- **Vite** - Build tool and dev server
-- **TypeScript** - Type safety
-- **Tailwind CSS 4** - Utility-first CSS framework
-- **shadcn/ui** - Component patterns and utilities
-- **Storybook** - Component development and documentation
-- **class-variance-authority** - Component variant management
-
-## Library Usage
-
-Install the package:
-
-```bash
-npm install @vkzstudio/muza-ui
-```
-
-**Important:** This library requires Tailwind CSS 4 to be configured in your project.
-
-```typescript
-import { Button } from '@vkzstudio/muza-ui'
-import '@vkzstudio/muza-ui/styles'
-
-function App() {
-  return <Button variant="primary">Click me</Button>
-}
-```
-
-## Styling
-
-- Uses Tailwind CSS 4 with CSS variables
-- Follows shadcn/ui design system patterns
-- Custom utility function `cn()` for class merging
-- Dark mode support built-in
-
-## Quality Assurance
-
-- **TypeScript** - Static type checking
-- **ESLint** - Code linting
-- **Prettier** - Code formating
-- **Storybook** - Visual testing and documentation
-
-## Contributing
-
-1. Create components following the established patterns
-2. Include comprehensive Storybook stories
-3. Run type checking and linting before committing
-4. Test components in Storybook
+# Muza UI
+
+A modern React component library built with Vite, shadcn/ui, and Tailwind CSS 4.
+
+## Prerequisites
+
+- Node.js 22 or higher
+- npm or yarn
+
+## Quick Start
+
+1. **Clone and install dependencies:**
+
+   ```bash
+   npm install
+   ```
+
+2. **Start development server:**
+   ```bash
+   npm run dev
+   ```
+   This starts Storybook at [http://localhost:6006](http://localhost:6006)
+
+## Development
+
+### Node.js Version Management
+
+This project requires Node.js 22+. If you're using nvm:
+
+```bash
+nvm use
+```
+
+### Available Scripts
+
+| Script                             | Description                                     |
+| ---------------------------------- | ----------------------------------------------- |
+| `npm run dev`                      | Start Storybook development server on port 6006 |
+| `npm run build`                    | Build the component library for production      |
+| `npm run build-storybook`          | Build Storybook for deployment                  |
+| `npm run typecheck`                | Run TypeScript type checking                    |
+| `npm run lint`                     | Run ESLint                                      |
+| `npm run lint:fix`                 | Run ESLint with auto-fix                        |
+| `npm run add-component <name>`     | Add shadcn/ui component (macOS/Linux)           |
+| `npm run add-component:win <name>` | Add shadcn/ui component (Windows)               |
+| `npm run format`                   | Run prettier                                    |
+
+### Project Structure
+
+```
+src/
+├── components/          # React components
+│   ├── Button/         # Example component
+│   │   ├── Button.tsx
+│   │   ├── Button.stories.tsx
+│   │   └── index.ts
+│   └── index.ts        # Component exports
+├── utils/              # Utility functions
+│   ├── cn.ts          # Class name utility
+│   └── index.ts       # Utility exports
+├── globals.css        # Global Tailwind styles
+└── index.ts          # Main library export
+```
+
+### Adding Components
+
+For automated component installation using shadcn/ui, see: **[Component Installation Guide](docs/components.md)**
+
+#### Manual Component Creation
+
+1. **Create component directory:**
+
+   ```bash
+   mkdir src/components/YourComponent
+   ```
+
+2. **Create component files:**
+   - `YourComponent.tsx` - Main component
+   - `YourComponent.stories.tsx` - Storybook stories
+   - `index.ts` - Export file
+
+3. **Export from main index:**
+   Add to `src/components/index.ts`:
+   ```typescript
+   export * from './YourComponent'
+   ```
+
+### Storybook Development
+
+Components are showcased and developed using Storybook:
+
+- **View components:** `npm run dev` → [http://localhost:6006](http://localhost:6006)
+- **Create stories:** Follow the pattern in `Button.stories.tsx`
+- **Auto-docs:** Stories are automatically documented
+
+## Build Process
+
+### Library Build
+
+```bash
+npm run build
+```
+
+This creates:
+
+- `dist/index.js` - ES module bundle
+- `dist/index.d.ts` - TypeScript declarations
+- `dist/muza-ui.css` - Compiled CSS with all design tokens
+- `dist/components/` - Individual component modules
+- `dist/styles/` - Design system token files
+
+### Storybook Build
+
+```bash
+npm run build-storybook
+```
+
+Creates `storybook-static/` directory for deployment.
+
+## Technologies
+
+- **React 18** - UI framework
+- **Vite** - Build tool and dev server
+- **TypeScript** - Type safety
+- **Tailwind CSS 4** - Utility-first CSS framework
+- **shadcn/ui** - Component patterns and utilities
+- **Storybook** - Component development and documentation
+- **class-variance-authority** - Component variant management
+
+## Library Usage
+
+Install the package:
+
+```bash
+npm install @vkzstudio/muza-ui
+```
+
+**Important:** This library requires Tailwind CSS 4 to be configured in your project.
+
+```typescript
+import { Button } from '@vkzstudio/muza-ui'
+import '@vkzstudio/muza-ui/styles'
+
+function App() {
+  return <Button variant="primary">Click me</Button>
+}
+```
+
+## Styling
+
+- Uses Tailwind CSS 4 with CSS variables
+- Follows shadcn/ui design system patterns
+- Custom utility function `cn()` for class merging
+- Dark mode support built-in
+
+## Quality Assurance
+
+- **TypeScript** - Static type checking
+- **ESLint** - Code linting
+- **Prettier** - Code formating
+- **Storybook** - Visual testing and documentation
+
+## Contributing
+
+1. Create components following the established patterns
+2. Include comprehensive Storybook stories
+3. Run type checking and linting before committing
+4. Test components in Storybook

package/dist/components/DatePicker/DatePicker.d.ts

@@ -25,6 +25,7 @@ export type DatePickerProps = {
     avoidCollisions?: boolean;
     renderCustomTrigger?: () => ReactNode;
     shouldResetToDefaultValue?: boolean;
+    required?: boolean;
 } & Omit<CalendarBaseProps, 'numberOfMonths' | 'onConfirm' | 'onReset' | 'isExpanded' | 'leftPanelChildren' | 'bottomTextDefault' | 'dateFormatter' | 'dateRangeFormatter'> & (Range | Single);
 type Range = {
     mode: 'range';

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAmC,MAAM,OAAO,CAAA;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIjD,OAAO,EAEL,KAAK,iBAAiB,EAGvB,MAAM,aAAa,CAAA;AAKpB,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,sBAAsB,CAAA;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA;IAC1C,cAAc,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;KAAE,EAAE,CAAA;IACnE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,MAAM,CAAA;QACtB,cAAc,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;QACb,eAAe,EAAE,MAAM,CAAA;KACxB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAA;IACrC,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,GAAG,IAAI,CACN,iBAAiB,EACf,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,YAAY,GACZ,mBAAmB,GACnB,mBAAmB,GACnB,eAAe,GACf,oBAAoB,CACvB,GACC,CAAC,KAAK,GAAG,MAAM,CAAC,CAAA;AAElB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAA;CAC5C,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;CACvC,CAAA;AAED,eAAO,MAAM,UAAU,8GAmLtB,CAAA"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAmC,MAAM,OAAO,CAAA;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIjD,OAAO,EAEL,KAAK,iBAAiB,EAGvB,MAAM,aAAa,CAAA;AAKpB,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,sBAAsB,CAAA;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA;IAC1C,cAAc,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;KAAE,EAAE,CAAA;IACnE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,MAAM,CAAA;QACtB,cAAc,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;QACb,eAAe,EAAE,MAAM,CAAA;KACxB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAA;IACrC,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CACN,iBAAiB,EACf,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,YAAY,GACZ,mBAAmB,GACnB,mBAAmB,GACnB,eAAe,GACf,oBAAoB,CACvB,GACC,CAAC,KAAK,GAAG,MAAM,CAAC,CAAA;AAElB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAA;CAC5C,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;CACvC,CAAA;AAED,eAAO,MAAM,UAAU,8GAqLtB,CAAA"}

package/dist/components/DatePicker/DatePicker.js

@@ -1,17 +1,17 @@
-import { jsx as e, jsxs as U } from "react/jsx-runtime";
-import { forwardRef as W, useState as S, useEffect as X } from "react";
-import { useIsDesktop as Z } from "../../hooks/use-is-desktop.js";
-import { useIsMobile as _ } from "../../hooks/use-is-mobile.js";
-import { Popover as $, PopoverTrigger as g, PopoverContent as w } from "../Popover/Popover.js";
-import { getDateRange as T } from "./utils/getDateRange.js";
-import { typographyVariants as a } from "../Typography/Typography.js";
-import { Input as V } from "../Input/Input.js";
-import { formatDate as s } from "../Calendar/utils/formatDate.js";
-import { formatDateRange as O } from "../Calendar/utils/formatDateRange.js";
+import { jsx as e, jsxs as W } from "react/jsx-runtime";
+import { forwardRef as X, useState as S, useEffect as Z } from "react";
+import { useIsDesktop as _ } from "../../hooks/use-is-desktop.js";
+import { useIsMobile as $ } from "../../hooks/use-is-mobile.js";
+import { Popover as g, PopoverTrigger as w, PopoverContent as T } from "../Popover/Popover.js";
+import { getDateRange as a } from "./utils/getDateRange.js";
+import { typographyVariants as V } from "../Typography/Typography.js";
+import { Input as s } from "../Input/Input.js";
+import { formatDate as O } from "../Calendar/utils/formatDate.js";
+import { formatDateRange as h } from "../Calendar/utils/formatDateRange.js";
 import { Calendar as R } from "../Calendar/Calendar.js";
 import { cn as u } from "../../utils/cn.js";
-import { CalendarBold as h } from "@solar-icons/react-perf";
-const C = W(
+import { CalendarBold as C } from "@solar-icons/react-perf";
+const N = X(
   ({
     alignCalendar: j,
     mode: v,
@@ -32,19 +32,20 @@ const C = W(
     side: q = "bottom",
     renderCustomTrigger: I,
     shouldResetToDefaultValue: c,
+    required: G,
     ...M
-  }, G) => {
-    const F = Z(), H = _(), [J, y] = S(!1), K = typeof d == "boolean" ? d : J, [b, D] = S(
+  }, H) => {
+    const F = _(), J = $(), [K, y] = S(!1), L = typeof d == "boolean" ? d : K, [b, D] = S(
       f ?? p
     ), [o, n] = S(f ?? p);
-    X(() => {
+    Z(() => {
       f !== void 0 && (D(f), n(f));
     }, [f]);
-    const L = x == null ? void 0 : x.map((i) => /* @__PURE__ */ e(
+    const Q = x == null ? void 0 : x.map((i) => /* @__PURE__ */ e(
       "button",
       {
         className: u(
-          a({
+          V({
             variant: "cta",
             weight: "medium",
             size: "sm",
@@ -57,23 +58,23 @@ const C = W(
           t == null ? void 0 : t.leftPanelButton
         ),
         onClick: () => {
-          const Q = T(i.type);
-          n(Q);
+          const U = a(i.type);
+          n(U);
         },
         children: i.name
       },
       i.type
-    )), k = z ?? (v === "single" ? s : O);
-    return /* @__PURE__ */ U(
-      $,
+    )), k = z ?? (v === "single" ? O : h);
+    return /* @__PURE__ */ W(
+      g,
       {
-        open: K,
+        open: L,
         onOpenChange: (i) => {
           d === void 0 && y(i), r == null || r(i);
         },
         children: [
           /* @__PURE__ */ e(
-            g,
+            w,
             {
               className: u(
                 "group cursor-pointer rounded-full text-left focus-visible-default",
@@ -81,9 +82,9 @@ const C = W(
               ),
               disabled: l,
               children: I ? I() : /* @__PURE__ */ e(
-                V,
+                s,
                 {
-                  ref: G,
+                  ref: H,
                   value: b ? k(b) : "",
                   placeholder: P,
                   error: B,
@@ -91,18 +92,19 @@ const C = W(
                   label: E,
                   hint: A,
                   tabIndex: -1,
+                  required: G,
                   className: u(
                     "pointer-events-none",
                     t == null ? void 0 : t.input,
                     "group-hover:border-comp-input-stroke-hover"
                   ),
-                  suffix: /* @__PURE__ */ e(h, { className: "size-icon-medium text-icon-dark-secondary-def" })
+                  suffix: /* @__PURE__ */ e(C, { className: "size-icon-medium text-icon-dark-secondary-def" })
                 }
               )
             }
           ),
           /* @__PURE__ */ e(
-            w,
+            T,
             {
               className: u("flex w-auto p-0", t == null ? void 0 : t.popoverContent),
               align: j,
@@ -139,7 +141,7 @@ const C = W(
                     (o !== void 0 || c) && (D(o), m == null || m(o)), d === void 0 && y(!1), r == null || r(!1);
                   },
                   numberOfMonths: F ? 2 : 1,
-                  leftPanelChildren: v === "range" && !H && L,
+                  leftPanelChildren: v === "range" && !J && Q,
                   dateRangeFormatter: k
                 }
               )
@@ -150,7 +152,7 @@ const C = W(
     );
   }
 );
-C.displayName = "DatePicker";
+N.displayName = "DatePicker";
 export {
-  C as DatePicker
+  N as DatePicker
 };

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

@@ -14,4 +14,5 @@ export declare const DatePickerWithDisabledDates: Story;
 export declare const ControlledDatePickerWithCustomTrigger: Story;
 export declare const ResetButtonResetsToUndefined: Story;
 export declare const ResetButtonResetsToStoryDate: Story;
+export declare const Required: Story;
 //# sourceMappingURL=DatePicker.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAkBjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,iBAAiB,EAAE,KAmC/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAqB9B,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAqBxC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAyB7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAsBnB,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAuBxC,CAAA;AAED,eAAO,MAAM,2BAA2B,EAAE,KAkCzC,CAAA;AAED,eAAO,MAAM,qCAAqC,EAAE,KA6CnD,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAwB1C,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAwB1C,CAAA"}
+{"version":3,"file":"DatePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAkBjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,iBAAiB,EAAE,KAmC/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAqB9B,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAqBxC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAyB7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAsBnB,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAuBxC,CAAA;AAED,eAAO,MAAM,2BAA2B,EAAE,KAkCzC,CAAA;AAED,eAAO,MAAM,qCAAqC,EAAE,KA6CnD,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAwB1C,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAwB1C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAyBtB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAEjD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,UAAU,EACR,MAAM,GACN,MAAM,GACN,UAAU,GACV,OAAO,GACP,cAAc,GACd,QAAQ,GACR,OAAO,GACP,cAAc,CACjB;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;CACzD;AAED,QAAA,MAAM,SAAS,GAAI,gKAchB,cAAc,4CA0FhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAEjD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,UAAU,EACR,MAAM,GACN,MAAM,GACN,UAAU,GACV,OAAO,GACP,cAAc,GACd,QAAQ,GACR,OAAO,GACP,cAAc,CACjB;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;CACzD;AAED,QAAA,MAAM,SAAS,GAAI,gKAchB,cAAc,4CAiGhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/Searchbar/Searchbar.js

@@ -1,80 +1,80 @@
-import { jsxs as C, jsx as e } from "react/jsx-runtime";
-import * as c from "react";
-import { MagnifyingGlass as R } from "../Icons/CustomIcons.js";
+import { jsxs as R, jsx as r } from "react/jsx-runtime";
+import * as n from "react";
+import { MagnifyingGlass as j } from "../Icons/CustomIcons.js";
 import { cn as a } from "../../utils/cn.js";
-import { CloseCircleBold as S } from "@solar-icons/react-perf";
-import { Input as j } from "../Input/Input.js";
+import { CloseCircleBold as w } from "@solar-icons/react-perf";
+import { Input as I } from "../Input/Input.js";
 const E = ({
-  className: u,
-  error: m = !1,
-  showButtons: p = !0,
-  clearButtonAriaLabel: x,
-  searchButtonAriaLabel: d,
-  disabled: t = !1,
+  className: m,
+  error: p = !1,
+  showButtons: x = !0,
+  clearButtonAriaLabel: d,
+  searchButtonAriaLabel: y,
+  disabled: e = !1,
   value: o,
-  defaultValue: y,
-  name: h,
-  placeholder: k,
+  defaultValue: h,
+  name: k,
+  placeholder: v,
   onChange: s,
-  onSubmit: v,
+  onSubmit: i,
   ...g
 }) => {
-  const n = c.useRef(null), [l, i] = c.useState(
-    o ?? y ?? ""
+  const f = n.useRef(null), [c, l] = n.useState(
+    o ?? h ?? ""
   );
-  c.useEffect(() => {
-    o !== void 0 && i(o);
+  n.useEffect(() => {
+    o !== void 0 && l(o);
   }, [o]);
-  const N = (r) => {
-    i(r.target.value), s && s(r);
-  }, b = () => {
-    var r, f;
-    i(""), (f = (r = n.current) == null ? void 0 : r.querySelector("input")) == null || f.focus(), s && s({
+  const N = (t) => {
+    l(t.target.value), s && s(t);
+  }, z = () => {
+    var t, u;
+    l(""), (u = (t = f.current) == null ? void 0 : t.querySelector("input")) == null || u.focus(), s && s({
       target: { value: "" }
     });
-  }, z = p ? /* @__PURE__ */ C("div", { className: "flex gap-sm", children: [
-    /* @__PURE__ */ e(
+  }, C = x ? /* @__PURE__ */ R("div", { className: "flex gap-sm", children: [
+    /* @__PURE__ */ r(
       "button",
       {
         className: a(
           "flex shrink-0 cursor-pointer items-center focus-visible-default transition-opacity",
           {
-            "opacity-0": !l,
-            "cursor-not-allowed": t
+            "opacity-0": !c,
+            "cursor-not-allowed": e
           }
         ),
-        "aria-label": x,
+        "aria-label": d,
         type: "button",
-        onClick: b,
-        children: /* @__PURE__ */ e(
-          S,
+        onClick: z,
+        children: /* @__PURE__ */ r(
+          w,
           {
             className: a("size-icon-small text-icon-dark-secondary-def", {
-              "text-text-dark-tertiary": t
+              "text-text-dark-tertiary": e
             })
           }
         )
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
       "button",
       {
         className: a(
           "flex shrink-0 cursor-pointer items-center focus-visible-default",
           {
-            "cursor-not-allowed": t
+            "cursor-not-allowed": e
           }
         ),
-        "aria-label": d,
+        "aria-label": y,
         type: "submit",
-        children: /* @__PURE__ */ e(
-          R,
+        children: /* @__PURE__ */ r(
+          j,
           {
             className: a(
               "size-icon-small text-icon-dark-primary-def transition-colors",
               {
-                "text-text-dark-tertiary": t,
-                "group-hover:text-icon-dark-primary-hover": !t
+                "text-text-dark-tertiary": e,
+                "group-hover:text-icon-dark-primary-hover": !e
               }
             )
           }
@@ -82,22 +82,32 @@ const E = ({
       }
     )
   ] }) : void 0;
-  return /* @__PURE__ */ e("form", { ref: n, onSubmit: v, className: u, children: /* @__PURE__ */ e(
-    j,
+  return /* @__PURE__ */ r(
+    "form",
     {
-      suffix: z,
-      type: "text",
-      size: "sm",
-      error: m,
-      disabled: t,
-      value: l,
-      name: h,
-      onChange: N,
-      placeholder: k,
-      className: "group",
-      ...g
+      ref: f,
+      onSubmit: (t) => {
+        t.preventDefault(), c.length > 0 && (i == null || i(t));
+      },
+      className: m,
+      children: /* @__PURE__ */ r(
+        I,
+        {
+          suffix: C,
+          type: "text",
+          size: "sm",
+          error: p,
+          disabled: e,
+          value: c,
+          name: k,
+          onChange: N,
+          placeholder: v,
+          className: "group",
+          ...g
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   E as Searchbar

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

@@ -1 +1 @@
-{"version":3,"file":"Searchbar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiEhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAmBpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAoBnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAA"}
+{"version":3,"file":"Searchbar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiEhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkBpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAmBnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkzstudio/muza-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React component library built with Vite, shadcn/ui, and Tailwind CSS",
   "type": "module",
   "main": "./dist/index.js",
@@ -47,7 +47,8 @@
     "add-component": "chmod +x scripts/add-component.sh && ./scripts/add-component.sh",
     "add-component:win": "powershell -ExecutionPolicy Bypass -File scripts/add-component.ps1",
     "format": "prettier --write .",
-    "chromatic": "npx chromatic --project-token=chpt_23ce248b589dbff"
+    "chromatic": "npx chromatic --project-token=chpt_23ce248b589dbff",
+    "local-publish": "npm run build && npx shx rm -rf ../internal-benefits-frontend/node_modules/@vkzstudio/muza-ui/dist && npx shx cp -r dist ../internal-benefits-frontend/node_modules/@vkzstudio/muza-ui/dist"
   },
   "dependencies": {
     "react-day-picker": "^9.9.0",