iryx-ui 0.3.0 → 0.5.0

package/README.md

@@ -104,7 +104,7 @@ and every component updates.
 
 ```vue
 <template>
-  <IApp theme="emerald" appearance="system" dir="ltr">
+  <IApp theme="rose" appearance="system" dir="ltr">
     <RouterView />
   </IApp>
 </template>
@@ -165,14 +165,14 @@ utilities (shadcn-style `@custom-variant dark`).
 
 ## Theming
 
-Pick a built-in color preset — `violet` (default), `emerald`, `rose`,
-`amber`, `sky` — at startup or at runtime:
+Pick a built-in color preset — `violet` (default) or `rose` — at startup or at
+runtime:
 
 ```ts
 import { applyTheme } from 'iryx-ui'
 
-app.use(createIryxUi({ theme: 'emerald' }))
-// nuxt.config.ts → iryxUi: { theme: 'emerald' }
+app.use(createIryxUi({ theme: 'rose' }))
+// nuxt.config.ts → iryxUi: { theme: 'rose' }
 
 applyTheme('rose') // runtime, e.g. from a theme picker
 ```
@@ -202,10 +202,19 @@ Available tokens, each usable as a Tailwind color (`bg-primary`,
 
 | Group | Tokens |
 | --- | --- |
-| Surfaces | `background`, `foreground`, `accent`, `accent-foreground`, `muted`, `muted-foreground`, `border` |
+| Surfaces | `background`, `foreground`, `accent`, `accent-foreground`, `muted`, `muted-foreground`, `border`, `input` |
 | Brand | `primary`, `primary-foreground`, `primary-from`, `primary-to` |
 | Status | `success`, `warning`, `danger`, `info` — each with `-foreground`, `-muted`, `-muted-foreground` and `-border` |
 
+`input` is the fill behind the fields — `IInput`, `ITextarea`, `INumberInput`,
+the `ISelect` trigger, the `ICombobox` anchor — and behind `IButton`'s
+`outline` variant, so the two read as the same kind of surface. It's a token
+of its own rather than a reused `muted`, so how raised a control looks can be
+tuned without moving every muted surface with it. It matches the page
+background in light mode and lifts off it in dark, where the difference is
+legible; that split lives in the token values, so no component needs a `dark:`
+class for it.
+
 `primary-from` / `primary-to` are the stops of the solid button's vertical
 gradient. The status tokens carry their own dark-mode values, so components
 never need a `dark:` class for them: `success` is the solid fill,
@@ -262,10 +271,12 @@ app.use(createIryxUi({ unstyled: true }))
 | `IForm` | Validating form wrapper — any Standard Schema validator, or your own function |
 | `IFormField` | Label, description, hint, help and error text around a control |
 | `IInput` | Text field with `sm`/`md`/`lg` sizes, `invalid` state, `v-model` |
+| `INumberInput` | Decimal-safe numeric field — the model is a **string**, with `min`/`max`/`step`, `precision` and locale-aware display |
 | `ITextarea` | Multi-line field with matching sizes and `invalid` state |
-| `ILabel` | Field label with optional `required` asterisk, indented to line up with the control's text |
+| `ILabel` | Field label with optional `required` asterisk |
 | `ICheckbox` | Tri-state checkbox (`true` / `false` / `'indeterminate'`), optional `label` + `description` |
-| `ISelect` | Listbox with keyboard nav and typeahead, driven by an `items` array |
+| `ISelect` | Listbox with keyboard nav and typeahead, driven by an `items` array, with optional groups |
+| `ICombobox` | Searchable select — filters as you type, with optional groups, virtualized rows and a "create from query" row |
 | `IRadioGroup` | Radio list with labels wired up automatically; items take a `description` |
 | `ISwitch` | Accessible toggle, optional `label` + `description` |
 
@@ -405,6 +416,116 @@ const framework = ref('vue')
 
 `ISelect` and `IRadioGroup` accept plain strings or `{ label, value, disabled }` objects. Both also take a default slot if you'd rather compose the Reka primitives yourself.
 
+`ISelect` also takes groups — an entry with its own `items` becomes a labelled
+heading, the same shape `ICombobox` uses:
+
+```vue
+<ISelect
+  v-model="framework"
+  :items="[
+    { label: 'Virtual DOM', items: ['Vue', 'React'] },
+    { label: 'Compiled', items: [{ label: 'Svelte', value: 'svelte' }] },
+  ]"
+/>
+```
+
+### Searchable selects
+
+`ICombobox` takes the same `items` as `ISelect` and filters them against what
+the user types, which is what you want once a list runs to hundreds of entries.
+The field shows the selected option's **label** while the model holds its value.
+
+```vue
+<ICombobox
+  v-model="clientId"
+  :items="clients"
+  placeholder="Search clients"
+  empty-text="No clients found."
+/>
+```
+
+Set `create` to offer a row for whatever the user typed when nothing matches.
+Choosing it emits `create` with the query and does **not** change the model —
+the option doesn't exist yet, so you add it and select it yourself:
+
+```vue
+<ICombobox
+  v-model="clientId"
+  :items="clients"
+  create
+  :create-label="query => `Add ${query}`"
+  @create="query => clients.push({ label: query, value: addClient(query) })"
+/>
+```
+
+Both `empty-text` and `create-label` are props precisely so a non-English app
+never inherits an English string; `empty` and `create` slots take over the
+markup entirely if you need more than text.
+
+An entry with its own `items` becomes a labelled group. A group disappears on
+its own once nothing inside it matches:
+
+```vue
+<ICombobox
+  v-model="clientId"
+  :items="[
+    { label: 'Recent', items: ['Acme Industries', 'Bolt Logistics'] },
+    { label: 'Archived', items: [{ label: 'Cirrus Systems', value: 'cirrus' }] },
+  ]"
+/>
+```
+
+For lists in the thousands, `virtual` renders only the rows on screen:
+
+```vue
+<ICombobox v-model="sku" virtual :items="fiveThousandItems" :estimate-size="32" />
+```
+
+`virtual` and grouped items are **mutually exclusive** — the underlying
+virtualizer is a flat window with no notion of group headings, so groups are
+flattened and their labels dropped (with a warning in dev). `estimate-size` is
+the assumed row height in px, used to size the scrollbar before rows are
+measured; set it if you have restyled rows to a different height.
+
+### Numbers and money
+
+`INumberInput` never turns your value into a `number`. The model is a decimal
+**string**, because binary floating point cannot represent decimal money —
+`0.1 + 0.2` is `0.30000000000000004`, and `10.00` becomes `10`. Values are
+added, compared and rounded with `BigInt` internally, so precision survives
+regardless of magnitude.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// A string, and it stays one.
+const amount = ref('1234.56')
+</script>
+
+<template>
+  <INumberInput v-model="amount" locale="sl" :precision="2" step="0.01" min="0" />
+</template>
+```
+
+`locale` affects the **display only** — `sl` shows `1.234,56` while the model
+stays `"1234.56"`. Typing in the locale's own format works too. While the field
+is focused it shows the canonical value so separators can't fight your typing.
+
+`precision` fixes the number of decimal places, rounding half-up, and preserves
+trailing zeros (`"10.00"` stays `"10.00"`). `min`, `max` and `step` are decimal
+strings as well, and stepping is exact: `0.1 + 0.2` gives `"0.3"`.
+
+The underlying helpers are exported if you need them elsewhere:
+
+```ts
+import { addDecimals, compareDecimals, roundDecimal } from 'iryx-ui'
+
+addDecimals('0.1', '0.2') // '0.3'
+roundDecimal('1.005', 2) // '1.01'
+compareDecimals('1.10', '1.1') // 0
+```
+
 ### Validated forms
 
 `IForm` handles client-side validation. It accepts any [Standard Schema](https://standardschema.dev) validator — Zod 3.24+, Valibot, ArkType — so Iryx doesn't depend on a validation library. Wrap each control in an `IFormField` with a `name` matching the schema path and errors wire themselves up.
@@ -456,25 +577,6 @@ The control inside a field automatically inherits its `id`, invalid styling and
 
 **Server errors and manual control** — grab a template ref to the form and call `validate()`, `clear(name?)` or `setErrors()`. `IFormField` also takes a plain `error` prop that bypasses validation entirely.
 
-### Label alignment
-
-`ILabel` and `IFormField` indent their text so it lines up with the control's
-text rather than its outer edge, putting the label directly above the
-placeholder. The offset matches the input's horizontal padding — `sm` 10px,
-`md` 12px, `lg` 16px — so pass the same size you gave the control:
-
-```vue
-<template>
-  <ILabel for="amount" indent="lg">
-    Amount
-  </ILabel>
-  <IInput id="amount" size="lg" />
-</template>
-```
-
-Use `indent="none"` when the label wraps its control, as with a checkbox, since
-there is no text to line up with.
-
 ### Labels and descriptions
 
 `ICheckbox` and `ISwitch` render bare by default. Give them a `label` and/or `description` and they render a wired-up layout instead — the text is clickable, and the description is linked with `aria-describedby`. `IRadioGroup` items take a `description` too.

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Alert", "App", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Tabs", "Textarea", "Toaster", "Tooltip"];
+export declare const componentNames: readonly ["Alert", "App", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "Combobox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Tabs", "Textarea", "Toaster", "Tooltip"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/components/App.vue.d.ts

@@ -7,7 +7,7 @@ export interface AppProps extends /* @vue-ignore */ ConfigProviderProps {
      * below. Reactive, unlike the install-time plugin option.
      */
     unstyled?: boolean;
-    /** Colour theme: a preset name (`'emerald'`…) or a custom theme. */
+    /** Colour theme: a preset name (`'violet'`, `'rose'`) or a custom theme. */
     theme?: Theme | ThemePresetName;
     /** Startup appearance. A preference the user already stored wins over this. */
     appearance?: Appearance;

package/dist/components/Combobox.vue.d.ts

@@ -0,0 +1,112 @@
+import type { AcceptableValue, ComboboxRootProps } from 'reka-ui';
+export interface ComboboxItemOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+/** A labelled run of options. Reka hides the whole group once nothing in it matches. */
+export interface ComboboxItemGroup {
+    label: string;
+    items: (ComboboxItemOption | string)[];
+}
+export type ComboboxItems = (ComboboxItemOption | ComboboxItemGroup | string)[];
+export interface ComboboxProps extends ComboboxRootProps {
+    /**
+     * Options to render. Strings are expanded to `{ label, value }`, and an
+     * entry with its own `items` becomes a labelled group.
+     */
+    items?: ComboboxItems;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Mark the field as invalid — styles the border and ring red. */
+    invalid?: boolean;
+    id?: string;
+    /** Shown when the query matches nothing. Override for non-English apps. */
+    emptyText?: string;
+    /**
+     * Offer a "create" row when the query matches no option's label, for
+     * adding a client or item without leaving the field. Selecting it emits
+     * `create` with the query — the value is *not* set, since the option
+     * doesn't exist yet; add it to `items` and set the model yourself.
+     */
+    create?: boolean;
+    /** Label for that row. Receives the current query. */
+    createLabel?: (query: string) => string;
+    /**
+     * Render only the rows in view. Worth it in the thousands, not the hundreds.
+     * Groups are flattened — Reka's virtualizer is a flat window — so `virtual`
+     * and grouped `items` are mutually exclusive.
+     */
+    virtual?: boolean;
+    /** Row height in px, used to size the scrollbar before rows are measured. */
+    estimateSize?: number;
+    /** Rows rendered beyond the viewport on each side. */
+    overscan?: number;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: {
+        anchor?: string;
+        input?: string;
+        trigger?: string;
+        content?: string;
+        viewport?: string;
+        item?: string;
+        empty?: string;
+        group?: string;
+        groupLabel?: string;
+    };
+}
+declare var __VLS_50: {
+    query: string;
+}, __VLS_58: {
+    query: string;
+}, __VLS_60: {}, __VLS_139: {
+    query: string;
+};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_50) => any;
+} & {
+    empty?: (props: typeof __VLS_58) => any;
+} & {
+    default?: (props: typeof __VLS_60) => any;
+} & {
+    create?: (props: typeof __VLS_139) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: AcceptableValue) => any;
+    create: (query: string) => any;
+    highlight: (payload: {
+        ref: HTMLElement;
+        value: AcceptableValue;
+    } | undefined) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ComboboxProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: AcceptableValue) => any) | undefined;
+    onCreate?: ((query: string) => any) | undefined;
+    onHighlight?: ((payload: {
+        ref: HTMLElement;
+        value: AcceptableValue;
+    } | undefined) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    emptyText: string;
+    create: boolean;
+    createLabel: (query: string) => string;
+    virtual: boolean;
+    estimateSize: number;
+    overscan: number;
+    open: boolean;
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/DropdownMenu.vue.d.ts

@@ -36,8 +36,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     unstyled: boolean;
-    align: "start" | "center" | "end";
     sideOffset: number;
+    align: "start" | "center" | "end";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/FormField.vue.d.ts

@@ -11,15 +11,6 @@ export interface FormFieldProps {
     required?: boolean;
     /** Force an error message, bypassing the form's validation. */
     error?: string;
-    /**
-     * Indent the label, description, error and help text so they line up with
-     * the control's own text rather than its outer edge.
-     *
-     * The values match the input's horizontal padding, so pass the same size you
-     * gave the control. Use `none` for controls that draw their own label, like
-     * a checkbox or switch.
-     */
-    indent?: 'none' | 'sm' | 'md' | 'lg';
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;

package/dist/components/Label.vue.d.ts

@@ -2,12 +2,6 @@ import type { LabelProps as RekaLabelProps } from 'reka-ui';
 export interface LabelProps extends RekaLabelProps {
     /** Append a red asterisk to mark the associated field as required. */
     required?: boolean;
-    /**
-     * Indent the label to line up with the control's text rather than its outer
-     * edge. Match it to the control's size; use `none` when the label wraps its
-     * control, as with a checkbox.
-     */
-    indent?: 'none' | 'sm' | 'md' | 'lg';
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;

package/dist/components/NumberInput.vue.d.ts

@@ -0,0 +1,63 @@
+export interface NumberInputProps {
+    /** Smallest allowed value, as a decimal string. */
+    min?: string;
+    /** Largest allowed value, as a decimal string. */
+    max?: string;
+    /** Amount the stepper adds or subtracts, as a decimal string. */
+    step?: string;
+    /** Fixed decimal places. Values are rounded half-up to this scale. */
+    precision?: number;
+    /**
+     * Locale used for the *display* only — `sl` shows `1.234,56`. The model
+     * stays canonical (`"1234.56"`) whatever the locale.
+     */
+    locale?: string;
+    /** Show the stacked increment/decrement controls. */
+    stepper?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    /** Mark the field as invalid — styles the border and ring red. */
+    invalid?: boolean;
+    id?: string;
+    /** Accessible names for the stepper controls — override for non-English apps. */
+    incrementLabel?: string;
+    decrementLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ step: 'px-2' }`. */
+    ui?: {
+        root?: string;
+        input?: string;
+        stepper?: string;
+        step?: string;
+    };
+}
+type __VLS_Props = NumberInputProps;
+type __VLS_ModelProps = {
+    /**
+     * The model is a decimal **string**, never a number.
+     *
+     * Money in a finance app is computed with decimal arithmetic; coercing to a
+     * float here would silently lose precision before the value ever reached the
+     * caller. An empty string means "no value".
+     */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    step: string;
+    invalid: boolean;
+    stepper: boolean;
+    incrementLabel: string;
+    decrementLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Select.vue.d.ts

@@ -4,9 +4,18 @@ export interface SelectItemOption {
     value: string;
     disabled?: boolean;
 }
+/** A labelled run of options, rendered under a heading. */
+export interface SelectItemGroup {
+    label: string;
+    items: (SelectItemOption | string)[];
+}
+export type SelectItems = (SelectItemOption | SelectItemGroup | string)[];
 export interface SelectProps extends SelectRootProps {
-    /** Options to render. Strings are expanded to `{ label, value }`. */
-    items?: (SelectItemOption | string)[];
+    /**
+     * Options to render. Strings are expanded to `{ label, value }`, and an
+     * entry with its own `items` becomes a labelled group.
+     */
+    items?: SelectItems;
     placeholder?: string;
     size?: 'sm' | 'md' | 'lg';
     /** Skip built-in classes; you take over styling entirely. */
@@ -17,6 +26,8 @@ export interface SelectProps extends SelectRootProps {
         content?: string;
         viewport?: string;
         item?: string;
+        group?: string;
+        groupLabel?: string;
     };
 }
 declare var __VLS_48: {};

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export { default as Button } from './Button.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
 export { default as Card } from './Card.vue';
 export { default as Checkbox } from './Checkbox.vue';
+export { default as Combobox } from './Combobox.vue';
 export { default as ConfirmDialog } from './ConfirmDialog.vue';
 export { default as Dialog } from './Dialog.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
@@ -14,6 +15,7 @@ export { default as Form } from './Form.vue';
 export { default as FormField } from './FormField.vue';
 export { default as Input } from './Input.vue';
 export { default as Label } from './Label.vue';
+export { default as NumberInput } from './NumberInput.vue';
 export { default as Pagination } from './Pagination.vue';
 export { default as Progress } from './Progress.vue';
 export { default as RadioGroup } from './RadioGroup.vue';

package/dist/composables/decimal.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Decimal-string arithmetic, exact by construction.
+ *
+ * Money is stored and computed as decimal strings — `0.1 + 0.2` in binary
+ * floating point is `0.30000000000000004`, which silently corrupts a total.
+ * Everything here scales to integers and uses `BigInt`, so a value only ever
+ * round-trips through `Number` if the caller asks for it.
+ */
+interface Decimal {
+    /** Unscaled value: `1234.56` at scale 2 is `123456n`. */
+    units: bigint;
+    /** Number of decimal places. */
+    scale: number;
+}
+/** Parse a canonical decimal string (`-1234.56`). Returns undefined if invalid. */
+export declare function parseDecimal(value: string): Decimal | undefined;
+/** Render a Decimal back to a canonical string. */
+export declare function formatDecimal({ units, scale }: Decimal): string;
+/** `-1` if a < b, `0` if equal, `1` if a > b. */
+export declare function compareDecimals(a: string, b: string): number;
+/** Exact addition. `addDecimals('0.1', '0.2')` is `'0.3'`, not `'0.30000000000000004'`. */
+export declare function addDecimals(a: string, b: string): string | undefined;
+/** Round half-up to a fixed number of decimal places. */
+export declare function roundDecimal(value: string, precision: number): string | undefined;
+/** Constrain a value to a range, comparing exactly. */
+export declare function clampDecimal(value: string, min?: string, max?: string): string;
+/** Whether a string is a well-formed decimal. */
+export declare function isDecimal(value: string): boolean;
+/** The separators a locale uses, e.g. `.`/`,` for `en`, `,`/`.` for `sl`. */
+export declare function localeSeparators(locale: string): {
+    decimal: string;
+    group: string;
+};
+/**
+ * Render a canonical decimal for display, e.g. `"1234.56"` as `1.234,56` in
+ * `sl`. Formatting goes through the digits, never `Number`, so a value too
+ * large for a float still displays exactly.
+ */
+export declare function formatForLocale(value: string, locale: string, precision?: number): string;
+/**
+ * Render a canonical decimal for *editing*: the locale's decimal separator,
+ * but no grouping.
+ *
+ * Editing must not show the canonical `1234.56` in a locale where `.` groups
+ * digits — parsing that back would read it as `123456`.
+ */
+export declare function toEditable(value: string, locale?: string): string;
+/**
+ * Turn typed input into a canonical decimal, accepting the locale's
+ * separators. `1.234,56` in `sl` becomes `1234.56`.
+ */
+export declare function parseFromLocale(input: string, locale: string): string | undefined;
+export {};

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export type { ButtonProps } from './components/Button.vue';
 export type { ButtonGroupProps } from './components/ButtonGroup.vue';
 export type { CardProps } from './components/Card.vue';
 export type { CheckboxProps } from './components/Checkbox.vue';
+export type { ComboboxItemGroup, ComboboxItemOption, ComboboxItems, ComboboxProps } from './components/Combobox.vue';
 export type { ConfirmDialogProps } from './components/ConfirmDialog.vue';
 export type { DialogProps } from './components/Dialog.vue';
 export type { DropdownMenuProps } from './components/DropdownMenu.vue';
@@ -17,10 +18,11 @@ export type { FormProps } from './components/Form.vue';
 export type { FormFieldProps } from './components/FormField.vue';
 export type { InputProps } from './components/Input.vue';
 export type { LabelProps } from './components/Label.vue';
+export type { NumberInputProps } from './components/NumberInput.vue';
 export type { PaginationProps } from './components/Pagination.vue';
 export type { ProgressProps } from './components/Progress.vue';
 export type { RadioGroupItemOption, RadioGroupProps } from './components/RadioGroup.vue';
-export type { SelectItemOption, SelectProps } from './components/Select.vue';
+export type { SelectItemGroup, SelectItemOption, SelectItems, SelectProps } from './components/Select.vue';
 export type { SeparatorProps } from './components/Separator.vue';
 export type { SkeletonProps } from './components/Skeleton.vue';
 export type { StatProps } from './components/Stat.vue';
@@ -33,6 +35,7 @@ export type { TooltipProps } from './components/Tooltip.vue';
 export * from './composables/appearance';
 export * from './composables/button-group';
 export * from './composables/confirm';
+export * from './composables/decimal';
 export * from './composables/dropdown-menu';
 export * from './composables/form';
 export * from './composables/toast';