@surgeui/ds-vue 2.3.0 → 3.0.1

package/README.md

@@ -1,373 +1,268 @@
 # SurgeUI Vue Design System
 
-A modern **Vue.js 3** component library with Composition API, designed to create beautiful and consistent user interfaces.
+An accessible **Vue 3** component library: components, layouts and composables built with the Composition API and TypeScript, themable through CSS custom properties.
 
 [![npm](https://img.shields.io/npm/v/@surgeui/ds-vue)](https://www.npmjs.com/package/@surgeui/ds-vue)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Vue 3](https://img.shields.io/badge/Vue-3.x-4FC08D.svg)](https://vuejs.org/)
+[![Vue 3](https://img.shields.io/badge/Vue-3.5+-4FC08D.svg)](https://vuejs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6.svg)](https://www.typescriptlang.org/)
 
-
 ## ✨ Features
 
-- 🎨 **Modern Design** - Polished and professional components
-- 🎯 **Composition API** - Built with Vue 3 Composition API
-- 🔧 **TypeScript** - Full TypeScript support for better developer experience
-- 🎨 **Customizable** - Global configuration and theming support
-- 📱 **Responsive** - Components adapted to all screen sizes
-- ♿ **Accessible** - WCAG 2.1 AA compliant with complete accessibility support
-- 🌙 **Dark Mode** - Native dark mode support
-- ⚡ **Performance** - Optimized for best performance
-
+- 🧩 **50+ components** - Display, actions, forms and 9 mobile-first layouts
+- ♿ **Accessible** - WAI-ARIA patterns (combobox, menu button, tabs, accordion, dialog), full keyboard support, screen reader announcements
+- 🎨 **Themable** - 4 built-in themes × light / dark mode, CSS custom properties (`--su-*`)
+- 🌍 **Translatable** - Default texts in French and English, customizable messages
+- 🔧 **TypeScript** - Typed props, emits and composables
+- 📱 **Responsive** - Mobile first; layouts adapt to their **container** width (container queries)
+- 🔄 **RTL & LTR** - Right-to-left support, including keyboard navigation
 
 ## Quick Start
 
+### Requirements
+
+- Vue **3.5+**
+
 ### Installation
 
 ```bash
 npm install @surgeui/ds-vue
 ```
 
-### Basic Usage
-
-```vue
-<script setup lang="ts" >
-import '@surgeui/ds-vue/style.css'
-import { SuButton } from '@surgeui/ds-vue'
-import type { ButtonProps } from '@surgeui/ds-vue/types'
-</script>
-
-<template>
-  <SuButton variant="primary">
-    My first button
-  </SuButton>
-</template>
-```
+### Global installation (recommended)
 
-### Global Installation
+Registers every component with the `Su` prefix (`SuButton`, `SuInputField`, …):
 
 ```ts
-// main.js
+// main.ts
 import { createApp } from 'vue'
-import SurgeUpDS from '@surgeui/ds-vue'
+import SurgeUI from '@surgeui/ds-vue'
 import '@surgeui/ds-vue/style.css'
 import App from './App.vue'
 
-const app = createApp(App)
-app.use(SurgeUpDS)
-app.mount('#app')
+createApp(App)
+  .use(SurgeUI)
+  .mount('#app')
 ```
 
-## 🎨 Customization & Theming
+```vue
+<template>
+  <SuButton variant="primary">My first button</SuButton>
+</template>
+```
 
-SurgeUI provides a **declarative, CSS-based theming system** that allows you to customize colors and styles by defining custom CSS variables.
+### Selective import
 
-### How It Works
+Components are exported **without** the prefix:
 
-The customization system automatically converts theme properties into CSS variables with the `--su-custom-` prefix. These variables can override the default theme tokens when defined.
+```vue
+<script setup lang="ts">
+import '@surgeui/ds-vue/style.css'
+import { Button as SuButton, InputField as SuInputField } from '@surgeui/ds-vue'
+import type { ButtonProps } from '@surgeui/ds-vue'
+</script>
 
-### Global Configuration
+<template>
+  <SuInputField label="Email" type="email" />
+  <SuButton variant="primary">Subscribe</SuButton>
+</template>
+```
 
-Configure the design system when installing:
+### Plugin options
 
 ```ts
-import { createApp } from 'vue'
-import SurgeUpDS from '@surgeui/ds-vue'
-import '@surgeui/ds-vue/style.css'
-import App from './App.vue'
-
-const app = createApp(App)
-
-const themeConfig = {
-  // Component prefix (default: 'Su')
-  prefix: 'My', // Components become MyButton, MyInput, etc.
+import SurgeUI, { locales } from '@surgeui/ds-vue'
 
-  // Theme customization via CSS variables
-  theme: {
-    // Text colors
-    textPrimary: '#1f2937',
-    textSecondary: '#6b7280',
-    textTertiary: '#9ca3af',
-    textDisabled: '#d1d5db',
-    
-    // Background colors
-    bgCanvas: '#ffffff',
-    bgSurface: '#f9fafb',
-    bgOverlay: 'rgba(0, 0, 0, 0.5)',
-    
-    // Border colors
-    borderDefault: '#e5e7eb',
-    borderFocus: '#3b82f6',
-    
-    // Action colors
-    primaryDefault: '#3b82f6',
-    primaryHover: '#2563eb',
-    primaryText: '#ffffff',
-    
-    // State colors
-    stateSuccess: '#10b981',
-    stateWarning: '#f59e0b',
-    stateError: '#ef4444',
+app.use(SurgeUI, {
+  prefix: 'Su',           // Component prefix: SuButton, SuDialog…
+  locale: locales.en,     // Default texts language (French by default)
+  theme: {                // Theme overrides (see Customization)
+    primaryDefault: '#2563eb'
   }
-}
-
-app.use(SurgeUpDS, themeConfig)
-app.mount('#app')
+})
 ```
 
-### CSS Variable Generation
+## 🧩 What's inside
 
-All theme properties are automatically converted to CSS custom properties with the `--su-custom-` prefix:
+| Category | Components |
+|----------|------------|
+| Display | Heading, Panel, Icon, Image, Avatar, AvatarGroup, Badge, Card, Alert, Tabs, Accordion, Dialog, Popover, Progress, Spinner, Price |
+| Actions | Button, ButtonGroup, Link, LinkGroup, Toggle, ToggleGroup, Dropdown, FloatButton |
+| Forms | Input, Textarea, Password, SelectBox, RadioGroup, CheckboxGroup, Switch, Slider, FileUpload, OtpInput, FormField, FormFieldGroup, and a `*Field` version of each control (label + message) |
+| Layouts | SingleColumnLayout, SidebarLayout, SplitLayout, HolyGrailLayout, MagazineLayout, GridLayout, MasonryLayout, HeroLayout, FullScreenLayout |
 
-```ts
-theme: {
-  textPrimary: '#1f2937'        // → --su-custom-text-primary
-  bgSurface: '#f9fafb'          // → --su-custom-bg-surface
-  primaryDefault: '#3b82f6'     // → --su-custom-primary-default
-  stateSuccessBg: '#d1fae5'     // → --su-custom-state-success-bg
-}
-```
+### Composables
 
-### Using Custom Variables in CSS
+| Composable | Purpose |
+|------------|---------|
+| `useTheme` | Theme and light / dark mode, system preference, persistence |
+| `useCustomTheme` | Runtime CSS variable overrides |
+| `useBreakpoint` | Reactive breakpoints |
+| `usePrice` | Localized price formatting |
+| `useLocale` | Default component texts (`provideLocale`, `defineLocale`) |
+| `useFormField` | Links a custom control to `SuFormField` (id, label, message, states) |
+| `useAnnouncer` | Screen reader announcements through persistent live regions |
+| `useFocusTrap` | Stacked focus traps for panels and modal popovers |
+| `useDismiss` | Layered dismissal: Escape, pointer down outside, focus loss |
+| `useListNavigation` / `useTypeahead` | Arrow keys, Home / End and typeahead for lists, menus and tabs |
+| `useFloatingPosition` | Positions a floating element against its trigger (flip, shift, arrow) |
 
-Define custom variables in your CSS and they will automatically take precedence over default theme tokens:
+## 📝 Forms
 
-```css
-/* In your global CSS file */
-:root {
-  /* Text customization */
-  --su-custom-text-primary: #1f2937;
-  --su-custom-text-secondary: #6b7280;
-  
-  /* Background customization */
-  --su-custom-bg-canvas: #ffffff;
-  --su-custom-bg-surface: #f9fafb;
-  
-  /* Button customization */
-  --su-custom-primary-default: #3b82f6;
-  --su-custom-primary-hover: #2563eb;
-  --su-custom-primary-text: #ffffff;
-  
-  /* State customization */
-  --su-custom-state-success: #10b981;
-  --su-custom-state-error: #ef4444;
-}
-
-/* Dark mode example */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --su-custom-text-primary: #f3f4f6;
-    --su-custom-bg-canvas: #111827;
-    --su-custom-bg-surface: #1f2937;
-  }
-}
-```
-
-### Available Theme Tokens
-
-#### Text Tokens
-- `textPrimary` - Primary text color
-- `textSecondary` - Secondary text color
-- `textTertiary` - Tertiary text color
-- `textDisabled` - Disabled text color
-- `textInverse` - Inverse text color (for contrast backgrounds)
-
-#### Background Tokens
-- `bgCanvas` - Canvas/page background
-- `bgSurface` - Card and modal backgrounds
-- `bgSurfaceElevated` - Elevated surface backgrounds
-- `bgHover` - Hover state background
-- `bgActive` - Active state background
-- `bgSelected` - Selected state background
-- `bgOverlay` - Overlay/backdrop background
-
-#### Border Tokens
-- `borderDefault` - Default border color
-- `borderSubtle` - Subtle border color
-- `borderStrong` - Strong border color
-- `borderFocus` - Focus state border
-- `borderDisabled` - Disabled border
-
-#### Action Tokens
-- `primaryDefault` - Primary action default
-- `primaryHover` - Primary action hover
-- `primaryActive` - Primary action active
-- `primaryDisabled` - Primary action disabled
-- `primaryText` - Primary action text
-- `secondaryDefault` - Secondary action default
-- `secondaryHover` - Secondary action hover
-- `secondaryText` - Secondary action text
-
-#### State Tokens
-- `stateSuccess` - Success state color
-- `stateSuccessBg` - Success background
-- `stateWarning` - Warning state color
-- `stateWarningBg` - Warning background
-- `stateError` - Error state color
-- `stateErrorBg` - Error background
-- `stateInfo` - Info state color
-- `stateInfoBg` - Info background
-
-#### Link Tokens (legacy configuration)
-- `linkVariant` - Default link variant
-- `linkSize` - Default link size
-- `linkUnderline` - Default underline style
-- `dialogDisplay` - Default dialog display mode
-
-### Variable Priority & Fallback
-
-Variables follow this priority order:
-
-1. **Custom CSS variables** (`--su-custom-*`) - Highest priority
-2. **Theme configuration** - Applied during plugin initialization
-3. **Default theme tokens** - Fallbacks from theme definitions
-
-This means:
-- CSS variables defined in `:root` or element styles always take precedence
-- Variables not defined in the theme config fall back to default tokens
-- You can override specific tokens without defining the entire theme
-
-### Scoped Customization
-
-Apply different themes to different parts of your application:
+A control placed in `SuFormField` links itself to the field: label, help message, `aria-describedby`, error state, `required` and `disabled`. No slot props needed:
 
 ```vue
-<template>
-  <!-- Light theme section -->
-  <section class="light-section">
-    <SuButton>Light Button</SuButton>
-  </section>
-
-  <!-- Dark theme section -->
-  <section class="dark-section">
-    <SuButton>Dark Button</SuButton>
-  </section>
-</template>
-
-<style scoped>
-.light-section {
-  --su-custom-text-primary: #1f2937;
-  --su-custom-bg-surface: #ffffff;
-}
-
-.dark-section {
-  --su-custom-text-primary: #f3f4f6;
-  --su-custom-bg-surface: #1f2937;
-}
-</style>
+<SuFormField label="Country" message="Country of residence" state="error" required>
+  <SuSelectBox :options="countries" v-model="country" />
+</SuFormField>
 ```
 
-### With Icons
+The `*Field` components (`SuInputField`, `SuSelectBoxField`…) bundle the field and the control in one component.
+
+## 🎨 Themes and dark mode
 
-SurgeUI use **Heroicons** for add and display icons
+Four themes (`default`, `ocean`, `forest`, `sunset`), each in light and dark mode. They are applied through the `data-theme` and `data-theme-mode` attributes on the root element; `useTheme` sets them for you, follows the system preference and remembers the user's choice:
 
 ```vue
 <script setup>
-import { informationCircleIcon, HeartIcon } from '@heroicons/vue/24/outline'
+import { useTheme } from '@surgeui/ds-vue'
+
+const { setTheme, setThemeMode, toggleMode, isDarkMode } = useTheme()
 </script>
 
 <template>
-  <SuHeading>
-    <informationCircleIcon /> User informations
-  </SuHeading>
-  <SuButton variant="primary" :icon="HeartIcon" iconDisplay="left">
-    I like it
-  </SuButton>
+  <SuButton @click="toggleMode">{{ isDarkMode ? 'Light' : 'Dark' }} mode</SuButton>
+  <SuButton @click="setTheme('ocean')">Ocean theme</SuButton>
 </template>
 ```
 
-## ♿ Accessibility
+`setThemeMode` accepts `'light'`, `'dark'` or `'system'`. Without `useTheme`, set the attributes yourself:
 
-All components follow WCAG 2.1 AA standards:
+```html
+<html data-theme="default" data-theme-mode="dark">
+```
 
-- **Focus Management** - Clear focus indicators and logical tab order
-- **Keyboard Navigation** - Full keyboard support
-- **Screen Readers** - Proper ARIA attributes and announcements
-- **Color Contrast** - WCAG AA compliant contrast ratios (4.5:1 minimum)
-- **Touch Targets** - Minimum 44px touch targets
-- **Reduced Motion** - Respects `prefers-reduced-motion`
-- **High Contrast** - Supports `prefers-contrast: high`
-- **RTL Support** - Right-to-left language support
+## 🎨 Customization
 
-## 🌙 Dark Mode
+### Theme configuration
 
-Dark mode is automatically supported through CSS media queries:
+Theme properties passed to the plugin become CSS variables with the `--su-custom-` prefix, which override the default tokens:
+
+```ts
+app.use(SurgeUI, {
+  theme: {
+    textPrimary: '#1f2937',      // → --su-custom-text-primary
+    bgSurface: '#f9fafb',        // → --su-custom-bg-surface
+    primaryDefault: '#3b82f6',   // → --su-custom-primary-default
+    primaryHover: '#2563eb',
+    stateError: '#ef4444'
+  }
+})
+```
+
+### CSS variables
+
+You can also define the variables directly, globally or on a section of the page:
 
 ```css
-@media (prefers-color-scheme: dark) {
-  /* Dark mode styles are automatically applied */
+:root {
+  --su-custom-primary-default: #3b82f6;
+  --su-custom-primary-hover: #2563eb;
+  --su-custom-primary-text: #ffffff;
+}
+
+/* Values for the dark mode */
+[data-theme-mode='dark'] {
+  --su-custom-bg-canvas: #111827;
+  --su-custom-bg-surface: #1f2937;
 }
 
-.dark, [theme="dark"] * {
-  /* Dark mode styles are automatically applied */
+/* A section with its own colors */
+.promo {
+  --su-custom-primary-default: #db2777;
 }
 ```
 
-## 📱 Responsive Design
+Priority: `--su-custom-*` variables (CSS or plugin `theme` option) → theme tokens.
 
-All components are responsive by default:
+### Available theme keys
 
-- **Mobile-first** approach
-- **Flexible layouts** that adapt to screen size
-- **Touch-friendly** interactions
-- **Automatic responsive behavior** (e.g., FormFields switches to vertical on mobile)
+- **Text** - `textPrimary`, `textSecondary`, `textTertiary`, `textDisabled`, `textInverse`
+- **Links** - `linkDefault`, `linkHover`, `linkVisited`, `linkMuted`
+- **Backgrounds** - `bgCanvas`, `bgSurface`, `bgSurfaceElevated`, `bgOverlay`, `bgDisabled`, `bgHover`, `bgActive`, `bgSelected`
+- **Borders** - `borderDefault`, `borderSubtle`, `borderStrong`, `borderFocus`, `borderDisabled`
+- **Primary actions** - `primaryDefault`, `primaryHover`, `primaryActive`, `primaryDisabled`, `primaryText`
+- **Secondary actions** - `secondaryDefault`, `secondaryHover`, `secondaryActive`, `secondaryDisabled`, `secondaryText`
+- **States** - `stateSuccess`, `stateWarning`, `stateError`, `stateInfo` and their `…Bg` variants
+- **Shadow** - `shadowColor`
 
-## 🎭 Storybook
+## 🌍 Languages
 
-Explore all components interactively in Storybook:
+Default component texts (accessible labels, placeholders, error messages, announcements) are in French; English is provided. An explicit prop always wins.
 
-```bash
-npm run storybook
+```ts
+import SurgeUI, { defineLocale, locales } from '@surgeui/ds-vue'
+
+app.use(SurgeUI, {
+  locale: defineLocale(locales.en, {
+    messages: { selectBox: { placeholder: 'Pick one…' } }
+  })
+})
 ```
 
-## 🛠️ Development
+The `locale` option also accepts a ref, and `provideLocale()` switches the language of a subtree at runtime.
 
-### Prerequisites
+## 🖼️ Icons
 
-- Node.js 16+
-- Vue.js 3.3+
+Components accept any Vue component as an icon; the examples use [Heroicons](https://heroicons.com/):
 
-### Build the library
+```vue
+<script setup>
+import { HeartIcon } from '@heroicons/vue/24/outline'
+</script>
 
-```bash
-npm run build
+<template>
+  <SuButton variant="primary" :icon="HeartIcon" icon-display="left">I like it</SuButton>
+</template>
 ```
 
-### Development mode
+## ♿ Accessibility
 
-```bash
-npm run dev
-```
+Components are built to meet **WCAG 2.1 AA**:
 
-### Run Storybook
+- **WAI-ARIA patterns** - combobox + listbox (SelectBox), menu button (Dropdown), tabs, accordion, modal dialog (native `<dialog>`)
+- **Keyboard** - arrow keys, Home / End, typeahead, Escape; RTL-aware arrows
+- **Focus** - visible focus rings, focus returned to the trigger, focus trap for modal popovers
+- **Forms** - labels, messages and states linked automatically to the control
+- **Screen readers** - persistent live regions for announcements, named landmarks (HolyGrailLayout, with skip link)
+- **Preferences** - `prefers-reduced-motion`, `prefers-contrast: more`, minimum touch targets
 
-```bash
-npm run storybook
-```
+## ⬆️ Upgrading to 3.0
 
-## 📖 Documentation
+Version 3.0 contains breaking changes:
 
-Visit our [complete documentation](https://surgeui.com/) for:
+- `SuButton` has `type="button"` by default: pass `type="submit"` to submit a form.
+- `SuSwitch` renders a `<button>` instead of a `<div>`.
+- `SuDialog` uses the native `<dialog>` element: the `zIndex` prop has no effect and the backdrop is `::backdrop`.
+- Vue **3.5+** is required.
+- `accessibility.announceToScreenReader()` and `accessibility.trapFocus()` are deprecated in favor of `announce()` / `useAnnouncer()` and `useFocusTrap()`.
 
-- **Component API** - Detailed props, events, and slots
-- **Usage examples** - Real-world implementation examples
-- **Accessibility guide** - Best practices for inclusive design
-- **Customization** - Theming and configuration options
+See the [CHANGELOG](https://github.com/mahmoud-nb/surge.ui/blob/main/CHANGELOG.md) for the full list.
 
-## 🤝 Contributing
+## 📖 Documentation
 
-We welcome contributions! Please see our [Contributing Guide](https://github.com/mahmoud-nb/surge.ui/blob/main/package/CONTRIBUTING.md) for details.
+- [Documentation](https://surgeui.com/) - Guides, component API, live examples (French and English)
+- [Storybook](https://surgeui.com/storybook/) - Interactive examples and accessibility checks
+- [GitHub Repository](https://github.com/mahmoud-nb/surge.ui)
 
-## 📄 License
+## 🤝 Contributing
 
-MIT License - see the [LICENSE](https://github.com/mahmoud-nb/surge.ui/blob/main/package/LICENSE.md) file for details.
+Contributions are welcome! See the [Contributing Guide](https://github.com/mahmoud-nb/surge.ui/blob/main/package/CONTRIBUTING.md).
 
-## 🔗 Links
+## 📄 License
 
-- [Documentation](https://surgeui.com/)
-- [Storybook](https://surgeui.com/storybook/)
-- [GitHub Repository](https://github.com/mahmoud-nb/surge.ui)
+MIT - see the [LICENSE](https://github.com/mahmoud-nb/surge.ui/blob/main/package/LICENSE.md) file.
 
 ---
 
-Made with ❤️ by the SurgeUp team
+Made with ❤️ by the SurgeUI team

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

@@ -14,7 +14,6 @@ declare const _default: import('vue').DefineComponent<AvatarProps, {
     size: import('../../types').AvatarSize;
     variant: import('../../types').AvatarVariant;
     loading: boolean;
-    loadingLabel: string;
     clickable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     avatarRef: HTMLDivElement;

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/Avatar.vue"],"names":[],"mappings":"AA+cA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;;;;;;;;;;;;;;;;;;;;;AA6S1C,wBAWG"}
+{"version":3,"file":"Avatar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/Avatar.vue"],"names":[],"mappings":"AA2YA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;;;;;;;;;;;;;;;;;;;;AA+T1C,wBAWG"}

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/Badge.vue"],"names":[],"mappings":"AAoRA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAwFzC,iBAAS,cAAc;WA0CT,OAAO,IAA6B;;oBAvHpC,GAAG;;oBAAH,GAAG;;;;EA4HhB;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;yFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Badge.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/Badge.vue"],"names":[],"mappings":"AAyPA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAwFzC,iBAAS,cAAc;WA0CT,OAAO,IAA6B;;oBAvHpC,GAAG;;oBAAH,GAAG;;;;EA4HhB;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;yFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/atoms/Button.vue.d.ts

@@ -22,9 +22,8 @@ declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}
     size: import('../../types').ButtonSize;
     variant: import('../../types').ButtonVariant;
     loading: boolean;
-    loadingLabel: string;
-    radius: import('../../types').ButtonRadius;
     iconDisplay: "left" | "right" | "only";
+    type: import('../../types').ButtonType;
     disabled: boolean;
     block: boolean;
     tabIndex: number;

package/dist/components/atoms/Button.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/Button.vue"],"names":[],"mappings":"AA0VA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AA8G1C,iBAAS,cAAc;WA+DT,OAAO,IAA6B;;yBAVpB,GAAG;;;;EAehC;AAkBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;2FASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/Button.vue"],"names":[],"mappings":"AAwNA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AA0G1C,iBAAS,cAAc;WAoET,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAmBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;2FASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/atoms/CheckboxGroup.vue.d.ts

@@ -16,13 +16,13 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     focus: (event: FocusEvent) => any;
     blur: (event: FocusEvent) => any;
-    change: (value: (string | number)[]) => any;
     "update:modelValue": (value: (string | number)[]) => any;
+    change: (value: (string | number)[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onFocus?: ((event: FocusEvent) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
-    onChange?: ((value: (string | number)[]) => any) | undefined;
     "onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
+    onChange?: ((value: (string | number)[]) => any) | undefined;
 }>, {
     size: import('../../types').Size;
     disabled: boolean;

package/dist/components/atoms/CheckboxGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/CheckboxGroup.vue"],"names":[],"mappings":"AAqpBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIjD,KAAK,WAAW,GAAG,kBAAkB,CAAC;AAqItC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAChC,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WA2GT,OAAO,IAA6B;;wBAXtB,GAAG;uBACH,GAAG;;;;EAe9B;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;6EAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CheckboxGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/CheckboxGroup.vue"],"names":[],"mappings":"AA0TA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAOjD,KAAK,WAAW,GAAG,kBAAkB,CAAC;AA6ItC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAChC,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAkHT,OAAO,IAA6B;;wBAXtB,GAAG;uBACH,GAAG;;;;EAe9B;AAsBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;6EAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/atoms/FileUpload.vue.d.ts

@@ -11,19 +11,19 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     error: (error: string, file?: File | undefined) => any;
     focus: (event: FocusEvent) => any;
+    remove: (file: UploadedFile) => any;
     blur: (event: FocusEvent) => any;
-    change: (files: UploadedFile[]) => any;
     "update:modelValue": (value: UploadedFile[]) => any;
+    change: (files: UploadedFile[]) => any;
     upload: (file: UploadedFile) => any;
-    remove: (file: UploadedFile) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onError?: ((error: string, file?: File | undefined) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
+    onRemove?: ((file: UploadedFile) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
-    onChange?: ((files: UploadedFile[]) => any) | undefined;
     "onUpdate:modelValue"?: ((value: UploadedFile[]) => any) | undefined;
+    onChange?: ((files: UploadedFile[]) => any) | undefined;
     onUpload?: ((file: UploadedFile) => any) | undefined;
-    onRemove?: ((file: UploadedFile) => any) | undefined;
 }>, {
     size: import('../../types').FileUploadSize;
     variant: import('../../types').FileUploadVariant;
@@ -35,11 +35,6 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     maxSize: number;
     maxFiles: number;
     readonly: boolean;
-    placeholder: string;
-    dragText: string;
-    browseText: string;
-    loadingText: string;
-    loadingSubText: string;
     allowPreview: boolean;
     showFileList: boolean;
     showProgress: boolean;

package/dist/components/atoms/FileUpload.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/FileUpload.vue"],"names":[],"mappings":"AAkgCA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGhE,KAAK,WAAW,GAAG,mBAAmB,CAAC;AAwWvC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+ThB,wBAWG"}
+{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/FileUpload.vue"],"names":[],"mappings":"AAi3BA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAKhE,KAAK,WAAW,GAAG,mBAAmB,CAAC;AA8VvC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqUhB,wBAWG"}