@myghf/ui 0.1.0 → 0.3.0

package/README.md

@@ -1,6 +1,24 @@
 # @myghf/ui
 
-The MYGHF shared Vue 3 design system — Tailwind-based, app-agnostic components.
+[![npm version](https://img.shields.io/npm/v/@myghf/ui.svg)](https://www.npmjs.com/package/@myghf/ui)
+[![license](https://img.shields.io/npm/l/@myghf/ui.svg)](./LICENSE)
+
+The **Magdi Yacoub Global Heart Foundation (MYGHF)** shared Vue 3 design system — Tailwind-based,
+app-agnostic, accessible components for MYGHF / Aswan Heart Centre applications.
+
+- **Built on** [Vue 3](https://vuejs.org) + [Reka UI](https://reka-ui.com) primitives, styled with
+  [Tailwind CSS](https://tailwindcss.com).
+- **Brand-aligned** to the MYGHF palette, typography, and spacing (see [DESIGN.md](./DESIGN.md)).
+- **Bilingual-ready**: English and Arabic, with RTL support.
+- **Tree-shakeable** ESM output with bundled TypeScript types.
+- **Accessible**: keyboard-operable primitives, focus-visible states, and WCAG-minded contrast.
+
+## Requirements
+
+| Dependency | Version |
+| --- | --- |
+| `vue` | `^3.5.0` (peer) |
+| `tailwindcss` | `^3.4.0` (peer) |
 
 ## Install
 
@@ -8,24 +26,242 @@ The MYGHF shared Vue 3 design system — Tailwind-based, app-agnostic components
 npm install @myghf/ui
 ```
 
-## Use
+## Setup
+
+Import the design tokens once, in your app entry stylesheet:
 
 ```css
-/* once, in your app entry styles */
+/* app.css */
 @import '@myghf/ui/tokens.css';
 ```
 
+Then load the Tailwind preset and make sure your `content` globs include the library's output so its
+utility classes are generated:
+
 ```js
 // tailwind.config.js
 import myghfPreset from '@myghf/ui/tailwind-preset'
+
 export default {
   presets: [myghfPreset],
   content: [/* your globs */, './node_modules/@myghf/ui/dist/**/*.js'],
 }
 ```
 
+The preset provides the brand colour scale (`primary`, `secondary`, `success`, `warning`, `error`,
+`info`), semantic colours (`background`, `foreground`, `surface`, `surface-muted`, `border`,
+`muted`), and the font families (`font-sans`, `font-serif`, `font-ar`).
+
+## Usage
+
 ```ts
-import { Button } from '@myghf/ui'
+import { Button, Input, DataTable } from '@myghf/ui'
+```
+
+```vue
+<template>
+  <form @submit.prevent="submit">
+    <Input v-model="email" type="email" placeholder="you@example.com" />
+    <Button type="submit" variant="primary">Continue</Button>
+  </form>
+</template>
+```
+
+### Components
+
+| Area | Exports |
+| --- | --- |
+| Actions & display | `Button`, `Tag`, `Icon`, `ThemeToggle`, `Alert`, `Message` |
+| Feedback | `Toaster`, `useToast`, `createToastStore` |
+| Form controls | `Input`, `InputNumber`, `Textarea`, `Password`, `Checkbox`, `Select`, `SelectButton`, `DatePicker`, `TreeSelect` |
+| Navigation & overlays | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `Dialog`, `Drawer`, `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem` |
+| Data | `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`, `TableEmpty`, `TablePagination`, `DataTable`, `TreeTable`, `TransferList` |
+| Utilities & types | `cn`, date and locale helpers, `toNumberOrNull`, `mergeFormatOptions`, `toPascalCase`, `resolveIconName`, `toneClasses`, `useTheme`, `createTheme`, `toastKey`, `TagTone`, `Tone`, `AlertVariant`, `DatePickerLabels`, `DrawerPosition`, `DrawerSize`, `ThemeMode`, `ToastSeverity`, `ToastPosition`, `DataTableFeatures`, `TreeTableColumn`, `TreeNode`, `FlatTreeRow`, `CheckedState` |
+
+### Component examples
+
+**Toasts** — mount one `<Toaster>` near the root and call `useToast()` from a descendant setup:
+
+```vue
+<!-- App.vue -->
+<template>
+  <Toaster position="top-end" :max="4" />
+  <SaveButton />
+</template>
+```
+
+```vue
+<!-- SaveButton.vue -->
+<script setup lang="ts">
+import { useToast } from '@myghf/ui'
+
+const toast = useToast() // setup-only; requires an ancestor <Toaster />
+toast.success('Saved', 'Your changes were saved.')
+toast.add({ title: 'Uploading…', severity: 'info', duration: 0 }) // 0 = persistent
+</script>
+```
+
+`useToast()` throws unless a `<Toaster>` is mounted above the calling component. Positions are
+logical (`top-start`…`bottom-end`, default `top-end`); severities are `info`, `success`, `warning`,
+`danger`, `secondary`. For tests or a pre-seeded queue, build a store with `createToastStore()` and
+pass it via `<Toaster :store="store">`.
+
+**Alert / Message** — the same component under two names, sharing Tag's tones:
+
+```vue
+<Alert tone="success" title="Payment received" description="Receipt sent by email." show-icon />
+<Message tone="danger" variant="outline" closable @close="dismissed = true">Something failed.</Message>
 ```
 
-Override any `--ahc-*` token after importing `tokens.css` to re-theme.
+Tones: `info` (default), `success`, `warning`, `danger`, `secondary`; `variant` is `soft` (default)
+or `outline`. Pass `duration` (ms) to auto-dismiss, pausable on hover/focus; `0`/omitted is
+persistent.
+
+**InputNumber** — numeric `v-model` that emits `number | null`:
+
+```vue
+<InputNumber v-model="amount" :min="0" :max="100" :step="5" integer show-buttons />
+<InputNumber v-model="price" currency="USD" locale="en-US" prefix="$" />
+```
+
+Empty input emits `null`. Supports `min`/`max`/`step`/`stepSnapping`/`integer`, `locale`,
+`formatOptions`/`currency`, `prefix`/`suffix`, `showButtons`, and `size`; reka's input renders
+`role="spinbutton"` with `aria-roledescription`, `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`
+(via the underlying `NumberFieldInput`).
+
+**Drawer** — controlled via `v-model:open`:
+
+```vue
+<Drawer v-model:open="open" position="end" size="md" title="Filters">
+  <p>Drawer body</p>
+  <template #footer><Button @click="open = false">Done</Button></template>
+</Drawer>
+```
+
+Positions: `left`, `right` (default), `top`, `bottom`, plus logical `start`/`end` that mirror them
+and flip in RTL. Sizes: `sm`, `md`, `lg`, `full`. Also supports `backdrop`, `closeOnEscape`,
+`closeOnOutside`, `showClose`, and `preventScroll`.
+
+> **Drawer caveat:** `preventScroll: false` only takes effect with `backdrop: false`; when a
+> backdrop is shown, reka's overlay owns the body scroll lock.
+
+**DatePicker i18n/time** — `DatePicker` accepts `hourFormat` (`'12' | '24'`, default `'24'`),
+`minuteStep` (default `1`), `locale` (BCP-47, default runtime locale), `labels` (partial overrides
+for `placeholder`, `previousMonth`, `nextMonth`, `clear`, `apply`, `today`, `time`, `hour`,
+`minute`, `am`, `pm`), `weekStartsOn`, and `defaultOpen`. Month and weekday headers and the display
+text are locale-formatted, and the nav chevrons flip in RTL. Override individual labels with
+`label-<key>` slots.
+
+### Entry points
+
+| Import | Contents |
+| --- | --- |
+| `@myghf/ui` | Components, utilities, and types |
+| `@myghf/ui/tokens.css` | CSS custom properties (`--myghf-*`) |
+| `@myghf/ui/tailwind-preset` | Tailwind preset |
+
+## Theming
+
+Tokens are space-separated RGB channels so Tailwind's `<alpha-value>` opacity modifiers keep working.
+Override any `--myghf-*` variable after importing `tokens.css`:
+
+```css
+:root {
+  --myghf-primary-500: 0 130 177; /* custom brand blue */
+  --myghf-background: 255 255 255; /* brand-white page background */
+}
+```
+
+Do not hard-code hex values in component code — use the tokens or the Tailwind classes. See
+[DESIGN.md](./DESIGN.md) for the full palette and rules.
+
+### Dark mode
+
+The preset sets `darkMode: ['class', '.dark']`, and importing `@myghf/ui/tokens.css` ships a dark
+token block under both `[data-theme='dark']` and `.dark`. It overrides **only** the six semantic
+variables; the brand colour scales are unchanged, so your own `--myghf-*` overrides still apply in
+dark mode:
+
+```css
+/* shipped by tokens.css */
+[data-theme='dark'],
+.dark {
+  color-scheme: dark;
+  --myghf-background: 15 18 23;
+  --myghf-foreground: 243 244 246;
+  --myghf-surface: 26 30 37;
+  --myghf-surface-muted: 39 44 53;
+  --myghf-border: 55 61 71;
+  --myghf-muted: 156 163 175;
+}
+```
+
+Use `useTheme()` — a shared singleton — or `createTheme()` for an independent controller:
+
+```ts
+import { useTheme } from '@myghf/ui'
+
+const { mode, resolved, isDark, setMode, toggle, enable, disable, reset } = useTheme()
+// defaults: storageKey 'myghf-theme', attribute 'both', defaultMode 'system'
+```
+
+```vue
+<ThemeToggle />
+```
+
+`useTheme` follows the OS preference when `mode` is `'system'`, persists explicit choices to
+`localStorage`, and writes **both** `.dark` and `data-theme="dark"` on `<html>` (`attribute: 'both'`).
+`createTheme()` accepts the same options and returns an isolated instance.
+
+> **Caveat:** Tailwind `dark:` utilities only activate under the `.dark` class. Setting
+> `data-theme="dark"` by hand drives the token block but **not** `dark:` utilities. `useTheme` sets
+> both so they always agree — if you apply the theme yourself, add `class="dark"` as well.
+
+## Bilingual & RTL
+
+Wrap RTL content with `dir="rtl"` and the Arabic font:
+
+```vue
+<div dir="rtl" class="font-ar">
+  <!-- Arabic content -->
+</div>
+```
+
+Prefer logical utilities (`ps-*`, `pe-*`, `ms-*`, `me-*`, `text-start`, `text-end`) over physical
+ones, and use the `rtl:` variant for directional icons.
+
+## Design system
+
+Brand rules, the colour/token reference, typography, and logo usage live in
+[DESIGN.md](./DESIGN.md). It is written for both developers and AI agents — follow it when building
+MYGHF UI.
+
+## Development
+
+```bash
+npm ci             # install from the lockfile
+npm run typecheck  # vue-tsc --noEmit
+npm test           # vitest run
+npm run build      # vite build + copy tokens/preset into dist/
+```
+
+Contributor and release conventions are documented in [AGENTS.md](./AGENTS.md).
+
+## Releasing
+
+This package uses [Changesets](https://changesets.dev) for versioning and publishing, and ships
+from CI via npm Trusted Publishing (OIDC) — there is no `NPM_TOKEN`.
+
+1. Add a changeset describing your change and commit it with your work:
+   ```bash
+   npx changeset
+   ```
+2. Open a pull request into `main` as usual.
+3. When it merges, CI opens (or updates) a **Version Packages** pull request that bumps `version`
+   and updates `CHANGELOG.md`.
+4. Merge that pull request to publish to npm. CI creates the git tag and GitHub Release
+   automatically, with provenance.
+
+## License
+
+[MIT](./LICENSE) © Magdi Yacoub Global Heart Foundation

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

@@ -0,0 +1,46 @@
+import { Tone } from '../../lib/tones';
+export type AlertVariant = 'soft' | 'outline';
+type __VLS_Props = {
+    tone?: Tone;
+    title?: string;
+    description?: string;
+    icon?: string;
+    showIcon?: boolean;
+    closable?: boolean;
+    duration?: number;
+    closeLabel?: string;
+    variant?: AlertVariant;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        title?(_: {}): any;
+        description?(_: {}): any;
+        default?(_: {}): any;
+        actions?(_: {}): any;
+        close?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    variant: AlertVariant;
+    tone: Tone;
+    showIcon: boolean;
+    closable: boolean;
+    closeLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Alert.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/alert/Alert.vue"],"names":[],"mappings":"AA0KA,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAGxD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,CAAA;AAE7C,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAC;AA+GJ,iBAAS,cAAc;WA8FT,OAAO,IAA6B;;sBAfxB,GAAG;uBACF,GAAG;6BACG,GAAG;yBACP,GAAG;yBACH,GAAG;uBACJ,GAAG;;;;EAe9B;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;aAxOP,YAAY;UARf,IAAI;cAIA,OAAO;cACP,OAAO;gBAEL,MAAM;6EAiPrB,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/button/Button.vue.d.ts

@@ -14,7 +14,7 @@ declare const buttonVariants: import('tailwind-variants').TVReturnType<{
         icon: string;
         'icon-sm': string;
     };
-}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 data-[loading=true]:cursor-not-allowed", {
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 data-[loading=true]:cursor-not-allowed", {
     variant: {
         default: string;
         secondary: string;
@@ -44,7 +44,7 @@ declare const buttonVariants: import('tailwind-variants').TVReturnType<{
         icon: string;
         'icon-sm': string;
     };
-}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 data-[loading=true]:cursor-not-allowed", unknown, unknown, undefined>>;
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 data-[loading=true]:cursor-not-allowed", unknown, unknown, undefined>>;
 type __VLS_Props = {
     variant?: VariantProps<typeof buttonVariants>['variant'];
     size?: VariantProps<typeof buttonVariants>['size'];
@@ -64,9 +64,9 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: "default" | "sm" | "lg" | "icon" | "icon-sm";
+    size: "sm" | "default" | "lg" | "icon" | "icon-sm";
     type: "button" | "submit" | "reset";
-    variant: "default" | "secondary" | "destructive" | "outline" | "ghost";
+    variant: "secondary" | "default" | "destructive" | "outline" | "ghost";
     disabled: boolean;
     loading: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.vue"],"names":[],"mappings":"AAyDA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEzD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iXAmBlB,CAAA;AAEF,KAAK,WAAW,GAAG;IACf,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;IAClD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAYJ,iBAAS,cAAc;WAqCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;UAxEV,QAAQ,GAAG,QAAQ,GAAG,OAAO;;cACzB,OAAO;aACR,OAAO;2FA8EnB,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/button/Button.vue"],"names":[],"mappings":"AAyDA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEzD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2ZAmBlB,CAAA;AAEF,KAAK,WAAW,GAAG;IACf,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;IAClD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAYJ,iBAAS,cAAc;WAqCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;UAxEV,QAAQ,GAAG,QAAQ,GAAG,OAAO;;cACzB,OAAO;aACR,OAAO;2FA8EnB,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/date-picker/DatePicker.vue.d.ts

@@ -1,12 +1,32 @@
+export interface DatePickerLabels {
+    placeholder: string;
+    previousMonth: string;
+    nextMonth: string;
+    clear: string;
+    apply: string;
+    today: string;
+    time: string;
+    hour: string;
+    minute: string;
+    am: string;
+    pm: string;
+}
 type __VLS_Props = {
     mode?: 'date' | 'range' | 'datetime';
     modelValue?: Date | [Date, Date] | null;
+    /** @deprecated Prefer `labels.placeholder`; kept for the existing trigger API. */
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'default';
     /** Applied to the trigger button so an external <label for> still matches. */
     inputId?: string;
+    hourFormat?: '12' | '24';
+    minuteStep?: number;
+    locale?: string;
+    labels?: Partial<DatePickerLabels>;
+    weekStartsOn?: number;
+    defaultOpen?: boolean;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: Date | [Date, Date] | null) => any;
@@ -15,7 +35,10 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     size: "sm" | "default";
     mode: "date" | "range" | "datetime";
-    placeholder: string;
+    locale: string;
+    defaultOpen: boolean;
+    hourFormat: "12" | "24";
+    minuteStep: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=DatePicker.vue.d.ts.map

package/dist/components/date-picker/DatePicker.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.vue"],"names":[],"mappings":"AAqOA,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAA;IACpC,UAAU,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAC;;;;;;UAHO,IAAI,GAAG,SAAS;UALhB,MAAM,GAAG,OAAO,GAAG,UAAU;iBAEtB,MAAM;;AAmWxB,wBASG"}
+{"version":3,"file":"DatePicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.vue"],"names":[],"mappings":"AAwdA,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;CACX;AA2ED,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAA;IACpC,UAAU,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;IACvC,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;;;;;;UATO,IAAI,GAAG,SAAS;UANhB,MAAM,GAAG,OAAO,GAAG,UAAU;YAW3B,MAAM;iBAGD,OAAO;gBALR,IAAI,GAAG,IAAI;gBACX,MAAM;;AAmgBvB,wBASG"}

package/dist/components/drawer/Drawer.vue.d.ts

@@ -0,0 +1,54 @@
+export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom' | 'start' | 'end';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+type __VLS_Props = {
+    open?: boolean;
+    position?: DrawerPosition;
+    size?: DrawerSize;
+    backdrop?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOutside?: boolean;
+    title?: string;
+    description?: string;
+    showClose?: boolean;
+    preventScroll?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+        header?(_: {}): any;
+        description?(_: {}): any;
+        close?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: DrawerSize;
+    position: DrawerPosition;
+    open: boolean;
+    backdrop: boolean;
+    closeOnEscape: boolean;
+    closeOnOutside: boolean;
+    showClose: boolean;
+    preventScroll: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Drawer.vue.d.ts.map

package/dist/components/drawer/Drawer.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.vue"],"names":[],"mappings":"AAmLA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAA;AAClF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AAEpD,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAC;AAiFJ,iBAAS,cAAc;WAmNT,OAAO,IAA6B;;yBAfpB,GAAG;wBACJ,GAAG;6BACE,GAAG;uBACT,GAAG;yBACD,GAAG;wBACJ,GAAG;;;;EAe/B;AA0BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;UA5UV,UAAU;cADN,cAAc;UADlB,OAAO;cAGH,OAAO;mBACF,OAAO;oBACN,OAAO;eAGZ,OAAO;mBACH,OAAO;6EA8UzB,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/input-number/InputNumber.vue.d.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    modelValue?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    stepSnapping?: boolean;
+    integer?: boolean;
+    locale?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    currency?: string;
+    prefix?: string;
+    suffix?: string;
+    showButtons?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'default' | 'lg';
+    id?: string;
+    name?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+}>, {
+    size: "sm" | "default" | "lg";
+    step: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=InputNumber.vue.d.ts.map

package/dist/components/input-number/InputNumber.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumber.vue.d.ts","sourceRoot":"","sources":["../../../src/components/input-number/InputNumber.vue"],"names":[],"mappings":"AAgIA,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAA;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC;;;;;;UAHO,IAAI,GAAG,SAAS,GAAG,IAAI;UAbvB,MAAM;;AA+NjB,wBAQG"}

package/dist/components/tag/Tag.vue.d.ts

@@ -1,36 +1,11 @@
-import { VariantProps } from 'tailwind-variants';
-declare const tagVariants: import('tailwind-variants').TVReturnType<{
-    tone: {
-        info: string;
-        success: string;
-        warning: string;
-        danger: string;
-        secondary: string;
-    };
-}, undefined, "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", {
-    tone: {
-        info: string;
-        success: string;
-        warning: string;
-        danger: string;
-        secondary: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    tone: {
-        info: string;
-        success: string;
-        warning: string;
-        danger: string;
-        secondary: string;
-    };
-}, undefined, "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", unknown, unknown, undefined>>;
+import { Tone } from '../../lib/tones';
 type __VLS_Props = {
-    tone?: VariantProps<typeof tagVariants>['tone'];
+    tone?: Tone;
     icon?: string;
     removable?: boolean;
     removeLabel?: string;
 };
-export type TagTone = NonNullable<VariantProps<typeof tagVariants>['tone']>;
+export type TagTone = Tone;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -45,6 +20,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRemove?: (() => any) | undefined;
 }>, {
+    tone: Tone;
     removeLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/tag/Tag.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.vue.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.vue"],"names":[],"mappings":"AAmDA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIzD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;0HAYf,CAAA;AAEF,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAC;AASJ,MAAM,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,CAC1E;AAID,iBAAS,cAAc;WAyDT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;iBA5FH,MAAM;yFAqGtB,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":"Tag.vue.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.vue"],"names":[],"mappings":"AA2CA,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAGxD,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAC;AASJ,MAAM,MAAM,OAAO,GAAG,IAAI,CACzB;AAID,iBAAS,cAAc;WA4DT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;UAlGV,IAAI;iBAGG,MAAM;yFAwGtB,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/theme-toggle/ThemeToggle.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    size?: 'sm' | 'default' | 'lg';
+    label?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "default" | "lg";
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+export default _default;
+//# sourceMappingURL=ThemeToggle.vue.d.ts.map

package/dist/components/theme-toggle/ThemeToggle.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/theme-toggle/ThemeToggle.vue"],"names":[],"mappings":"AAiDA,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;;UAFO,IAAI,GAAG,SAAS,GAAG,IAAI;WACtB,MAAM;;AA2FlB,wBAQG"}

package/dist/components/toast/Toast.vue.d.ts

@@ -0,0 +1,12 @@
+import { ToastItem } from './useToast';
+type __VLS_Props = {
+    item: ToastItem;
+    duration: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=Toast.vue.d.ts.map

package/dist/components/toast/Toast.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.vue.d.ts","sourceRoot":"","sources":["../../../src/components/toast/Toast.vue"],"names":[],"mappings":"AAqGA,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,YAAY,CAAA;AAE1D,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAC;;;;;;AAuMF,wBAQG"}

package/dist/components/toast/Toaster.vue.d.ts

@@ -0,0 +1,33 @@
+import { ToastPosition, ToastStore } from './useToast';
+type __VLS_Props = {
+    position?: ToastPosition;
+    max?: number;
+    duration?: number;
+    gap?: string;
+    label?: string;
+    store?: ToastStore;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    max: number;
+    duration: number;
+    position: ToastPosition;
+    gap: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Toaster.vue.d.ts.map

package/dist/components/toast/Toaster.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.vue.d.ts","sourceRoot":"","sources":["../../../src/components/toast/Toaster.vue"],"names":[],"mappings":"AA+EA,OAAO,EAA8B,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAG5F,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAC;AA+CJ,iBAAS,cAAc;WAsFT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;WA7JT,MAAM;SAHR,MAAM;cACD,MAAM;cAFN,aAAa;SAGlB,MAAM;6EAsKd,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"}