iryx-ui 0.7.0 → 0.8.0

package/README.md

@@ -290,6 +290,7 @@ app.use(createIryxUi({ unstyled: true }))
 | `IFormField` | Label, description, hint, help and error text around a control |
 | `IInput` | Text field with `sm`/`md`/`lg` sizes, `invalid` state, `v-model`, `leading`/`trailing` slots, `clearable`, `loading`, `debounce` |
 | `INumberInput` | Decimal-safe numeric field — the model is a **string**, with `min`/`max`/`step`, `precision` and locale-aware display |
+| `IFileUpload` | Drag-and-drop file field with `accept` / `maxSize` / `maxFiles`, thumbnails and a remove action |
 | `IDatePicker` | Calendar in a popover; the model is an ISO `YYYY-MM-DD` **string** |
 | `IDateRangePicker` | Two-month range calendar; the model is `{ start, end }` ISO strings |
 | `IPasswordInput` | Masked field with a show/hide toggle and an optional strength meter |
@@ -480,6 +481,56 @@ chrome; use `ui` to reach the parts (`root`, `input`, `leading`, `trailing`,
 forwarded to the `<input>` itself. `ref` exposes the element as `.input` for
 focus management.
 
+#### Files
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const logo = ref<File[]>([])
+</script>
+
+<template>
+  <IFileUpload
+    v-model="logo"
+    accept="image/*"
+    :max-size="2 * 1024 * 1024"
+    label="Drag your logo here"
+    browse-label="Browse images"
+    hint="PNG, JPG or SVG up to 2 MB"
+    @reject="onReject"
+  />
+</template>
+```
+
+The model is **always a `File[]`**, even without `multiple` — a `File | File[]`
+union would make every caller narrow the type before touching it, and the
+single case is just an array holding at most one. Without `multiple`, picking
+again replaces rather than appends.
+
+| Prop | Effect |
+| --- | --- |
+| `multiple` | Accept more than one file |
+| `accept` | Native syntax: `image/*`, `.pdf`, `image/png` |
+| `maxSize` | Largest accepted size, in bytes |
+| `maxFiles` | Cap on how many files may be held at once |
+| `label` | Prompt in the zone, above the hint |
+| `browseLabel` | Text on the browse button |
+| `hint` | Fine print under the prompt — the accepted types belong here |
+
+Every string is a prop, including `removeLabel` and the three rejection
+messages, so nothing bakes in English.
+
+`accept` is enforced in the component as well as on the input, because a
+dragged-in file bypasses the native filter entirely. Refused files raise
+`@reject` with `{ file, reason }` — `'type'`, `'size'` or `'count'` — so you
+can word your own message; the built-in text is available through the
+`tooLargeText`, `wrongTypeText` and `tooManyText` props.
+
+Image files get a thumbnail, anything else a placeholder of the same size so
+rows stay aligned. The object URLs behind those thumbnails are revoked as soon
+as a file leaves the list or the component unmounts.
+
 #### Dates
 
 The model is an ISO `YYYY-MM-DD` **string**, never a `Date`.

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", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "Combobox", "ConfirmDialog", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "PasswordInput", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Table", "Tabs", "Textarea", "Toaster", "Tooltip"];
+export declare const componentNames: readonly ["Alert", "App", "Badge", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "Combobox", "ConfirmDialog", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "PasswordInput", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Table", "Tabs", "Textarea", "Toaster", "Tooltip"];
 export type ComponentName = (typeof componentNames)[number];

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

@@ -0,0 +1,64 @@
+/** Why a file was turned away, so the caller can word its own message. */
+export interface FileRejection {
+    file: File;
+    reason: 'type' | 'size' | 'count';
+}
+export interface FileUploadProps {
+    /** Accept more than one file. The model is an array either way. */
+    multiple?: boolean;
+    /** Same syntax as the native attribute: `image/*`, `.pdf`, `image/png`. */
+    accept?: string;
+    /** Largest accepted size, in bytes. */
+    maxSize?: number;
+    /** Cap on how many files may be held at once. */
+    maxFiles?: number;
+    disabled?: boolean;
+    /** Mark the field as invalid — styles the border and ring red. */
+    invalid?: boolean;
+    id?: string;
+    /** Prompt inside the drop zone. */
+    label?: string;
+    /** Secondary line under the prompt — good place for the accepted types. */
+    hint?: string;
+    /** Text on the browse button. */
+    browseLabel?: string;
+    /** Labels and messages — override for non-English apps. */
+    removeLabel?: string;
+    tooLargeText?: string;
+    wrongTypeText?: string;
+    tooManyText?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    /** Applied to the outer wrapper, which stacks the zone above the list. */
+    class?: string;
+    /** Override classes per slot, e.g. `{ dropzone: 'py-10' }`. */
+    ui?: Partial<Record<'root' | 'dropzone' | 'input' | 'icon' | 'label' | 'browse' | 'hint' | 'list' | 'item' | 'thumbnail' | 'placeholder' | 'details' | 'name' | 'meta' | 'remove' | 'error', string>>;
+}
+type __VLS_Props = FileUploadProps;
+type __VLS_ModelProps = {
+    /**
+     * Always an array, even when `multiple` is false — a `File | File[]` union
+     * would make every caller narrow the type before touching it, and the single
+     * case is just an array that holds at most one.
+     */
+    modelValue?: File[];
+};
+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: File[]) => any;
+    reject: (rejections: FileRejection[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+    onReject?: ((rejections: FileRejection[]) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    label: string;
+    invalid: boolean;
+    browseLabel: string;
+    removeLabel: string;
+    tooLargeText: string;
+    wrongTypeText: string;
+    tooManyText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export { default as DateRangePicker } from './DateRangePicker.vue';
 export { default as Dialog } from './Dialog.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as EmptyState } from './EmptyState.vue';
+export { default as FileUpload } from './FileUpload.vue';
 export { default as Form } from './Form.vue';
 export { default as FormField } from './FormField.vue';
 export { default as Input } from './Input.vue';

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export type { DateRange, DateRangePickerProps } from './components/DateRangePick
 export type { DialogProps } from './components/Dialog.vue';
 export type { DropdownMenuProps } from './components/DropdownMenu.vue';
 export type { EmptyStateProps } from './components/EmptyState.vue';
+export type { FileRejection, FileUploadProps } from './components/FileUpload.vue';
 export type { FormProps } from './components/Form.vue';
 export type { FormFieldProps } from './components/FormField.vue';
 export type { InputProps } from './components/Input.vue';

package/dist/index.js

@@ -38,44 +38,46 @@ import { isSeparator as te, isSubmenu as ne } from "./packages/iryx-ui/src/compo
 import re from "./packages/iryx-ui/src/components/DropdownMenu.js";
 import { emptyStateTheme as ie } from "./packages/iryx-ui/src/theme/empty-state.js";
 import ae from "./packages/iryx-ui/src/components/EmptyState.js";
-import oe from "./packages/iryx-ui/src/components/Form.js";
-import { labelTheme as se } from "./packages/iryx-ui/src/theme/label.js";
-import ce from "./packages/iryx-ui/src/components/Label.js";
-import le from "./packages/iryx-ui/src/components/FormField.js";
-import ue from "./packages/iryx-ui/src/components/Input.js";
-import { addDecimals as de, clampDecimal as fe, compareDecimals as pe, formatDecimal as me, formatForLocale as he, isDecimal as ge, localeSeparators as _e, parseDecimal as ve, parseFromLocale as ye, roundDecimal as be, toEditable as xe } from "./packages/iryx-ui/src/composables/decimal.js";
-import { numberInputTheme as Se } from "./packages/iryx-ui/src/theme/number-input.js";
-import Ce from "./packages/iryx-ui/src/components/NumberInput.js";
-import { paginationTheme as we } from "./packages/iryx-ui/src/theme/pagination.js";
-import Te from "./packages/iryx-ui/src/components/Pagination.js";
-import { passwordInputTheme as Ee } from "./packages/iryx-ui/src/theme/password-input.js";
-import De from "./packages/iryx-ui/src/components/PasswordInput.js";
-import { progressTheme as Oe } from "./packages/iryx-ui/src/theme/progress.js";
-import ke from "./packages/iryx-ui/src/components/Progress.js";
-import { radioGroupTheme as Ae } from "./packages/iryx-ui/src/theme/radio-group.js";
-import je from "./packages/iryx-ui/src/components/RadioGroup.js";
-import { selectTheme as Me } from "./packages/iryx-ui/src/theme/select.js";
-import Ne from "./packages/iryx-ui/src/components/Select.js";
-import { separatorTheme as Pe } from "./packages/iryx-ui/src/theme/separator.js";
-import Fe from "./packages/iryx-ui/src/components/Separator.js";
-import { skeletonTheme as Ie } from "./packages/iryx-ui/src/theme/skeleton.js";
-import Le from "./packages/iryx-ui/src/components/Skeleton.js";
-import { statTheme as Re } from "./packages/iryx-ui/src/theme/stat.js";
-import ze from "./packages/iryx-ui/src/components/Stat.js";
-import { stepperTheme as Be } from "./packages/iryx-ui/src/theme/stepper.js";
-import Ve from "./packages/iryx-ui/src/components/Stepper.js";
-import { switchTheme as He } from "./packages/iryx-ui/src/theme/switch.js";
-import Ue from "./packages/iryx-ui/src/components/Switch.js";
-import { getRowValue as We, useDataTable as Ge } from "./packages/iryx-ui/src/composables/data-table.js";
-import { tableTheme as Ke } from "./packages/iryx-ui/src/theme/table.js";
-import qe from "./packages/iryx-ui/src/components/Table.js";
-import { tabsTheme as Je } from "./packages/iryx-ui/src/theme/tabs.js";
-import Ye from "./packages/iryx-ui/src/components/Tabs.js";
-import Xe from "./packages/iryx-ui/src/components/Textarea.js";
-import { useToast as Ze, useToastState as Qe } from "./packages/iryx-ui/src/composables/toast.js";
-import { toastTheme as $e } from "./packages/iryx-ui/src/theme/toast.js";
-import et from "./packages/iryx-ui/src/components/Toaster.js";
-import { tooltipTheme as tt } from "./packages/iryx-ui/src/theme/tooltip.js";
-import nt from "./packages/iryx-ui/src/components/Tooltip.js";
-import { IryxUi as rt, createIryxUi as it } from "./packages/iryx-ui/src/plugin.js";
-export { a as Alert, d as App, p as Badge, h as Banner, _ as Breadcrumb, x as Button, C as ButtonGroup, K as CalendarDate, T as Card, D as Checkbox, z as Combobox, G as ConfirmDialog, Q as DatePicker, $ as DateRangePicker, W as Dialog, re as DropdownMenu, ae as EmptyState, oe as Form, le as FormField, ue as Input, rt as IryxUi, ce as Label, Ce as NumberInput, Te as Pagination, De as PasswordInput, ke as Progress, je as RadioGroup, Ne as Select, Fe as Separator, Le as Skeleton, ze as Stat, Ve as Stepper, Ue as Switch, qe as Table, Ye as Tabs, Xe as Textarea, et as Toaster, nt as Tooltip, de as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as bannerTheme, g as breadcrumbTheme, v as buttonGroupContextKey, S as buttonGroupTheme, b as buttonTheme, w as cardTheme, E as checkboxTheme, fe as clampDecimal, l as clearTheme, R as comboboxTheme, pe as compareDecimals, e as componentNames, it as createIryxUi, Z as datePickerTheme, t as defaultConfig, U as dialogTheme, ee as dropdownMenuTheme, ie as emptyStateTheme, F as fieldBase, O as formContextKey, k as formFieldContextKey, me as formatDecimal, he as formatForLocale, q as formatIsoDate, A as getByPath, We as getRowValue, o as initAppearance, I as inputTheme, n as iryxUiConfigKey, ge as isDecimal, te as isSeparator, j as isStandardSchema, ne as isSubmenu, J as isoToday, M as issuePath, se as labelTheme, _e as localeSeparators, Se as numberInputTheme, we as paginationTheme, ve as parseDecimal, ye as parseFromLocale, Ee as passwordInputTheme, Oe as progressTheme, Ae as radioGroupTheme, B as resolveConfirm, be as roundDecimal, Me as selectTheme, Pe as separatorTheme, Ie as skeletonTheme, Re as statTheme, Be as stepperTheme, He as switchTheme, Ke as tableTheme, Je as tabsTheme, L as textareaTheme, u as themes, Y as toCalendarDate, xe as toEditable, X as toIsoDate, $e as toastTheme, tt as tooltipTheme, s as useAppearance, y as useButtonGroup, V as useConfirm, H as useConfirmState, Ge as useDataTable, N as useForm, P as useFormField, r as useIryxUiConfig, Ze as useToast, Qe as useToastState };
+import { fileUploadTheme as oe } from "./packages/iryx-ui/src/theme/file-upload.js";
+import se from "./packages/iryx-ui/src/components/FileUpload.js";
+import ce from "./packages/iryx-ui/src/components/Form.js";
+import { labelTheme as le } from "./packages/iryx-ui/src/theme/label.js";
+import ue from "./packages/iryx-ui/src/components/Label.js";
+import de from "./packages/iryx-ui/src/components/FormField.js";
+import fe from "./packages/iryx-ui/src/components/Input.js";
+import { addDecimals as pe, clampDecimal as me, compareDecimals as he, formatDecimal as ge, formatForLocale as _e, isDecimal as ve, localeSeparators as ye, parseDecimal as be, parseFromLocale as xe, roundDecimal as Se, toEditable as Ce } from "./packages/iryx-ui/src/composables/decimal.js";
+import { numberInputTheme as we } from "./packages/iryx-ui/src/theme/number-input.js";
+import Te from "./packages/iryx-ui/src/components/NumberInput.js";
+import { paginationTheme as Ee } from "./packages/iryx-ui/src/theme/pagination.js";
+import De from "./packages/iryx-ui/src/components/Pagination.js";
+import { passwordInputTheme as Oe } from "./packages/iryx-ui/src/theme/password-input.js";
+import ke from "./packages/iryx-ui/src/components/PasswordInput.js";
+import { progressTheme as Ae } from "./packages/iryx-ui/src/theme/progress.js";
+import je from "./packages/iryx-ui/src/components/Progress.js";
+import { radioGroupTheme as Me } from "./packages/iryx-ui/src/theme/radio-group.js";
+import Ne from "./packages/iryx-ui/src/components/RadioGroup.js";
+import { selectTheme as Pe } from "./packages/iryx-ui/src/theme/select.js";
+import Fe from "./packages/iryx-ui/src/components/Select.js";
+import { separatorTheme as Ie } from "./packages/iryx-ui/src/theme/separator.js";
+import Le from "./packages/iryx-ui/src/components/Separator.js";
+import { skeletonTheme as Re } from "./packages/iryx-ui/src/theme/skeleton.js";
+import ze from "./packages/iryx-ui/src/components/Skeleton.js";
+import { statTheme as Be } from "./packages/iryx-ui/src/theme/stat.js";
+import Ve from "./packages/iryx-ui/src/components/Stat.js";
+import { stepperTheme as He } from "./packages/iryx-ui/src/theme/stepper.js";
+import Ue from "./packages/iryx-ui/src/components/Stepper.js";
+import { switchTheme as We } from "./packages/iryx-ui/src/theme/switch.js";
+import Ge from "./packages/iryx-ui/src/components/Switch.js";
+import { getRowValue as Ke, useDataTable as qe } from "./packages/iryx-ui/src/composables/data-table.js";
+import { tableTheme as Je } from "./packages/iryx-ui/src/theme/table.js";
+import Ye from "./packages/iryx-ui/src/components/Table.js";
+import { tabsTheme as Xe } from "./packages/iryx-ui/src/theme/tabs.js";
+import Ze from "./packages/iryx-ui/src/components/Tabs.js";
+import Qe from "./packages/iryx-ui/src/components/Textarea.js";
+import { useToast as $e, useToastState as et } from "./packages/iryx-ui/src/composables/toast.js";
+import { toastTheme as tt } from "./packages/iryx-ui/src/theme/toast.js";
+import nt from "./packages/iryx-ui/src/components/Toaster.js";
+import { tooltipTheme as rt } from "./packages/iryx-ui/src/theme/tooltip.js";
+import it from "./packages/iryx-ui/src/components/Tooltip.js";
+import { IryxUi as at, createIryxUi as ot } from "./packages/iryx-ui/src/plugin.js";
+export { a as Alert, d as App, p as Badge, h as Banner, _ as Breadcrumb, x as Button, C as ButtonGroup, K as CalendarDate, T as Card, D as Checkbox, z as Combobox, G as ConfirmDialog, Q as DatePicker, $ as DateRangePicker, W as Dialog, re as DropdownMenu, ae as EmptyState, se as FileUpload, ce as Form, de as FormField, fe as Input, at as IryxUi, ue as Label, Te as NumberInput, De as Pagination, ke as PasswordInput, je as Progress, Ne as RadioGroup, Fe as Select, Le as Separator, ze as Skeleton, Ve as Stat, Ue as Stepper, Ge as Switch, Ye as Table, Ze as Tabs, Qe as Textarea, nt as Toaster, it as Tooltip, pe as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as bannerTheme, g as breadcrumbTheme, v as buttonGroupContextKey, S as buttonGroupTheme, b as buttonTheme, w as cardTheme, E as checkboxTheme, me as clampDecimal, l as clearTheme, R as comboboxTheme, he as compareDecimals, e as componentNames, ot as createIryxUi, Z as datePickerTheme, t as defaultConfig, U as dialogTheme, ee as dropdownMenuTheme, ie as emptyStateTheme, F as fieldBase, oe as fileUploadTheme, O as formContextKey, k as formFieldContextKey, ge as formatDecimal, _e as formatForLocale, q as formatIsoDate, A as getByPath, Ke as getRowValue, o as initAppearance, I as inputTheme, n as iryxUiConfigKey, ve as isDecimal, te as isSeparator, j as isStandardSchema, ne as isSubmenu, J as isoToday, M as issuePath, le as labelTheme, ye as localeSeparators, we as numberInputTheme, Ee as paginationTheme, be as parseDecimal, xe as parseFromLocale, Oe as passwordInputTheme, Ae as progressTheme, Me as radioGroupTheme, B as resolveConfirm, Se as roundDecimal, Pe as selectTheme, Ie as separatorTheme, Re as skeletonTheme, Be as statTheme, He as stepperTheme, We as switchTheme, Je as tableTheme, Xe as tabsTheme, L as textareaTheme, u as themes, Y as toCalendarDate, Ce as toEditable, X as toIsoDate, tt as toastTheme, rt as tooltipTheme, s as useAppearance, y as useButtonGroup, V as useConfirm, H as useConfirmState, qe as useDataTable, N as useForm, P as useFormField, r as useIryxUiConfig, $e as useToast, et as useToastState };

package/dist/node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js

@@ -132,6 +132,60 @@ var e = [
 	strokeWidth: "1.5",
 	key: "1"
 }]], l = [
+	["path", {
+		d: "M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeWidth: "1.5",
+		key: "0"
+	}],
+	["path", {
+		d: "M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeWidth: "1.5",
+		key: "1"
+	}],
+	["path", {
+		d: "M9.5 16.5L9.5 10.5",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeWidth: "1.5",
+		key: "2"
+	}],
+	["path", {
+		d: "M14.5 16.5L14.5 10.5",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeWidth: "1.5",
+		key: "3"
+	}]
+], u = [
+	["path", {
+		d: "M8 7L16 7",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.5",
+		key: "0"
+	}],
+	["path", {
+		d: "M8 11L12 11",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.5",
+		key: "1"
+	}],
+	["path", {
+		d: "M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.5",
+		key: "2"
+	}]
+], d = [
 	["circle", {
 		cx: "12",
 		cy: "12",
@@ -158,7 +212,7 @@ var e = [
 		strokeWidth: "1.5",
 		key: "2"
 	}]
-], u = [
+], f = [
 	["path", {
 		d: "M12 3V6",
 		stroke: "currentColor",
@@ -215,21 +269,21 @@ var e = [
 		strokeWidth: "1.5",
 		key: "7"
 	}]
-], d = [["path", {
+], p = [["path", {
 	d: "M20 12L4 12",
 	stroke: "currentColor",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
 	strokeWidth: "1.5",
 	key: "0"
-}]], f = [["path", {
+}]], m = [["path", {
 	d: "M5 14L8.5 17.5L19 6.5",
 	stroke: "currentColor",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
 	strokeWidth: "1.5",
 	key: "0"
-}]], p = [["path", {
+}]], h = [["path", {
 	d: "M18 14C18 14 13.5811 19 12 19C10.4188 19 6 14 6 14",
 	stroke: "currentColor",
 	strokeLinecap: "round",
@@ -243,7 +297,32 @@ var e = [
 	strokeLinejoin: "round",
 	strokeWidth: "1.5",
 	key: "1"
-}]], m = [
+}]], g = [
+	["path", {
+		d: "M2.50006 13.5V6.5H21.5001V13.5C21.5001 17.2712 21.5001 19.1569 20.3285 20.3284C19.1569 21.5 17.2713 21.5 13.5001 21.5H10.5001C6.72883 21.5 4.84321 21.5 3.67163 20.3284C2.50006 19.1569 2.50006 17.2712 2.50006 13.5Z",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.5",
+		key: "0"
+	}],
+	["path", {
+		d: "M2.50006 6.5L3.10006 5.7C4.27777 4.12972 4.86662 3.34458 5.71121 2.92229C6.55579 2.5 7.53721 2.5 9.50006 2.5H14.5001C16.4629 2.5 17.4443 2.5 18.2889 2.92229C19.1335 3.34458 19.7224 4.12972 20.9001 5.7L21.5001 6.5",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.5",
+		key: "1"
+	}],
+	["path", {
+		d: "M15.0001 13.5C15.0001 13.5 12.7906 10.5 12 10.5C11.2095 10.5 9.00006 13.5 9.00006 13.5M12 11L12.0001 17.5",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.5",
+		key: "2"
+	}]
+], _ = [
 	["path", {
 		d: "M22 8C22 8 18 14 12 14C6 14 2 8 2 8",
 		stroke: "currentColor",
@@ -283,7 +362,7 @@ var e = [
 		strokeWidth: "1.5",
 		key: "4"
 	}]
-], h = [["path", {
+], v = [["path", {
 	d: "M21.544 11.045C21.848 11.4713 22 11.6845 22 12C22 12.3155 21.848 12.5287 21.544 12.955C20.1779 14.8706 16.6892 19 12 19C7.31078 19 3.8221 14.8706 2.45604 12.955C2.15201 12.5287 2 12.3155 2 12C2 11.6845 2.15201 11.4713 2.45604 11.045C3.8221 9.12944 7.31078 5 12 5C16.6892 5 20.1779 9.12944 21.544 11.045Z",
 	stroke: "currentColor",
 	strokeWidth: "1.5",
@@ -295,4 +374,4 @@ var e = [
 	key: "1"
 }]];
 //#endregion
-export { e as Alert02Icon, t as AlertCircleIcon, n as ArrowDown01Icon, r as ArrowLeft01Icon, i as ArrowRight01Icon, a as ArrowUp01Icon, o as Calendar03Icon, s as Cancel01Icon, c as CheckmarkCircle02Icon, l as InformationCircleIcon, u as Loading03Icon, d as MinusSignIcon, f as Tick02Icon, p as UnfoldMoreIcon, h as ViewIcon, m as ViewOffIcon };
+export { e as Alert02Icon, t as AlertCircleIcon, n as ArrowDown01Icon, r as ArrowLeft01Icon, i as ArrowRight01Icon, a as ArrowUp01Icon, o as Calendar03Icon, s as Cancel01Icon, c as CheckmarkCircle02Icon, l as Delete02Icon, u as File01Icon, d as InformationCircleIcon, f as Loading03Icon, p as MinusSignIcon, m as Tick02Icon, h as UnfoldMoreIcon, g as Upload05Icon, v as ViewIcon, _ as ViewOffIcon };

package/dist/packages/iryx-ui/src/component-names.js

@@ -1,4 +1,4 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Alert.App.Badge.Banner.Breadcrumb.Button.ButtonGroup.Card.Checkbox.Combobox.ConfirmDialog.DatePicker.DateRangePicker.Dialog.DropdownMenu.EmptyState.Form.FormField.Input.Label.NumberInput.Pagination.PasswordInput.Progress.RadioGroup.Select.Separator.Skeleton.Stat.Stepper.Switch.Table.Tabs.Textarea.Toaster.Tooltip".split(".");
+var e = /* @__PURE__ */ "Alert.App.Badge.Banner.Breadcrumb.Button.ButtonGroup.Card.Checkbox.Combobox.ConfirmDialog.DatePicker.DateRangePicker.Dialog.DropdownMenu.EmptyState.FileUpload.Form.FormField.Input.Label.NumberInput.Pagination.PasswordInput.Progress.RadioGroup.Select.Separator.Skeleton.Stat.Stepper.Switch.Table.Tabs.Textarea.Toaster.Tooltip".split(".");
 //#endregion
 export { e as componentNames };

package/dist/packages/iryx-ui/src/components/FileUpload.js

@@ -0,0 +1,5 @@
+import e from "./FileUpload.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/FileUpload.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/packages/iryx-ui/src/components/FileUpload.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,209 @@
+import { Delete02Icon as e, File01Icon as t, Upload05Icon as n } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { useIryxUiConfig as r } from "../config.js";
+import i from "./Icon.js";
+import a from "./Button.js";
+import { useFormField as o } from "../composables/form.js";
+import { fileUploadTheme as s } from "../theme/file-upload.js";
+import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, useModel as w, watch as T, withCtx as E, withModifiers as D } from "vue";
+//#region src/components/FileUpload.vue?vue&type=script&setup=true&lang.ts
+var O = [
+	"id",
+	"multiple",
+	"accept",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+], k = ["src"], A = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], j = /*@__PURE__*/ h({
+	__name: "FileUpload",
+	props: /*@__PURE__*/ g({
+		multiple: { type: Boolean },
+		accept: {},
+		maxSize: {},
+		maxFiles: {},
+		disabled: { type: Boolean },
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		label: { default: "Drag and drop a file here" },
+		hint: {},
+		browseLabel: { default: "Browse files" },
+		removeLabel: { default: "Remove" },
+		tooLargeText: { default: "is too large" },
+		wrongTypeText: { default: "is not an accepted type" },
+		tooManyText: { default: "exceeds the file limit" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ g(["reject"], ["update:modelValue"]),
+	setup(h, { emit: g }) {
+		let j = h, ee = g, M = w(h, "modelValue"), N = o(), P = l(() => j.id ?? N?.id.value), F = l(() => j.invalid ?? N?.invalid.value ?? !1), I = r(), L = l(() => j.unstyled ?? I.unstyled), R = b([]);
+		function z(e) {
+			if (!j.accept) return !0;
+			let t = e.name.toLowerCase(), n = e.type.toLowerCase();
+			return j.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean).some((e) => e.startsWith(".") ? t.endsWith(e) : e.endsWith("/*") ? n.startsWith(e.slice(0, -1)) : n === e);
+		}
+		function B(e) {
+			let t = [], n = [], r = j.multiple ? M.value : [];
+			for (let i of e) {
+				if (!z(i)) {
+					n.push({
+						file: i,
+						reason: "type"
+					});
+					continue;
+				}
+				if (j.maxSize != null && i.size > j.maxSize) {
+					n.push({
+						file: i,
+						reason: "size"
+					});
+					continue;
+				}
+				let e = j.multiple ? j.maxFiles : 1;
+				if (e != null && r.length + t.length >= e) {
+					n.push({
+						file: i,
+						reason: "count"
+					});
+					continue;
+				}
+				t.push(i);
+			}
+			R.value = n, n.length && ee("reject", n), t.length && (M.value = [...r, ...t]);
+		}
+		let V = b();
+		function H(e) {
+			let t = e.target;
+			B([...t.files ?? []]), t.value = "";
+		}
+		function U(e) {
+			M.value = M.value.filter((t, n) => n !== e);
+		}
+		let W = b(0), G = l(() => W.value > 0);
+		function K() {
+			j.disabled || W.value++;
+		}
+		function q() {
+			W.value > 0 && W.value--;
+		}
+		function J(e) {
+			W.value = 0, !j.disabled && B([...e.dataTransfer?.files ?? []]);
+		}
+		let Y = b(/* @__PURE__ */ new Map());
+		T(M, (e) => {
+			for (let [t, n] of Y.value) e.includes(t) || (URL.revokeObjectURL(n), Y.value.delete(t));
+			for (let t of e) t.type.startsWith("image/") && !Y.value.has(t) && Y.value.set(t, URL.createObjectURL(t));
+		}, {
+			immediate: !0,
+			deep: !0
+		}), v(() => {
+			for (let e of Y.value.values()) URL.revokeObjectURL(e);
+		});
+		function X(e) {
+			let t = [
+				"B",
+				"kB",
+				"MB",
+				"GB"
+			], n = e, r = 0;
+			for (; n >= 1024 && r < t.length - 1;) n /= 1024, r++;
+			return `${r === 0 ? n : Math.round(n * 10) / 10} ${t[r]}`;
+		}
+		function Z(e) {
+			let t = e.reason === "size" ? j.tooLargeText : e.reason === "type" ? j.wrongTypeText : j.tooManyText;
+			return `${e.file.name} ${t}`;
+		}
+		let Q = l(() => s({
+			dragging: G.value,
+			invalid: F.value,
+			disabled: j.disabled
+		}));
+		function $(e, t) {
+			let n = j.ui?.[e];
+			return L.value ? [n, t] : Q.value[e]({ class: [n, t] });
+		}
+		let te = l(() => L.value ? j.ui?.browse : Q.value.browse({ class: j.ui?.browse }));
+		return (r, o) => (y(), d("div", { class: _($("root", j.class)) }, [
+			f("label", {
+				class: _($("dropzone")),
+				onDragenter: D(K, ["prevent"]),
+				onDragover: o[0] ||= D(() => {}, ["prevent"]),
+				onDragleave: D(q, ["prevent"]),
+				onDrop: D(J, ["prevent"])
+			}, [
+				f("input", {
+					id: P.value,
+					ref_key: "inputEl",
+					ref: V,
+					type: "file",
+					multiple: j.multiple,
+					accept: j.accept,
+					disabled: j.disabled,
+					"aria-invalid": F.value || void 0,
+					"aria-describedby": C(N)?.describedBy.value,
+					class: _($("input")),
+					onChange: H
+				}, null, 42, O),
+				f("span", { class: _($("icon")) }, [m(i, { icon: C(n) }, null, 8, ["icon"])], 2),
+				f("span", { class: _($("label")) }, S(j.label), 3),
+				j.hint ? (y(), d("span", {
+					key: 0,
+					class: _($("hint"))
+				}, S(j.hint), 3)) : u("", !0),
+				m(a, {
+					as: "span",
+					variant: "outline",
+					size: "sm",
+					class: _(te.value)
+				}, {
+					default: E(() => [p(S(j.browseLabel), 1)]),
+					_: 1
+				}, 8, ["class"])
+			], 34),
+			(y(!0), d(c, null, x(R.value, (e) => (y(), d("p", {
+				key: e.file.name,
+				class: _($("error"))
+			}, S(Z(e)), 3))), 128)),
+			M.value.length ? (y(), d("ul", {
+				key: 0,
+				class: _($("list"))
+			}, [(y(!0), d(c, null, x(M.value, (n, r) => (y(), d("li", {
+				key: `${n.name}-${r}`,
+				class: _($("item"))
+			}, [
+				Y.value.get(n) ? (y(), d("img", {
+					key: 0,
+					src: Y.value.get(n),
+					alt: "",
+					class: _($("thumbnail"))
+				}, null, 10, k)) : (y(), d("span", {
+					key: 1,
+					class: _($("placeholder"))
+				}, [m(i, { icon: C(t) }, null, 8, ["icon"])], 2)),
+				f("span", { class: _($("details")) }, [f("span", { class: _($("name")) }, S(n.name), 3), f("span", { class: _($("meta")) }, S(X(n.size)), 3)], 2),
+				f("button", {
+					type: "button",
+					"aria-label": `${j.removeLabel} ${n.name}`,
+					disabled: j.disabled,
+					class: _($("remove")),
+					onClick: (e) => U(r)
+				}, [m(i, { icon: C(e) }, null, 8, ["icon"])], 10, A)
+			], 2))), 128))], 2)) : u("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { j as default };

package/dist/packages/iryx-ui/src/components/PasswordInput.vue_vue_type_script_setup_true_lang.js

@@ -52,12 +52,12 @@ var w = [
 			if (!e) return 0;
 			let t = 0;
 			return e.length >= 8 && t++, e.length >= 12 && t++, /[a-z]/.test(e) && /[A-Z]/.test(e) && t++, /\d/.test(e) && t++, /[^\w\s]/.test(e) && t++, Math.max(1, Math.min(t, 4));
-		}), j = s(() => m.strength && E.value.length > 0), M = s(() => a({ score: A.value }));
-		function N(e, t) {
+		}), j = s(() => m.strength && E.value.length > 0), M = s(() => a({ score: A.value })), N = s(() => O.value ? m.ui?.input : M.value.input({ class: m.ui?.input }));
+		function P(e, t) {
 			let n = m.ui?.[e];
 			return O.value ? [n, t] : M.value[e]({ class: [n, t] });
 		}
-		return (n, a) => (_(), l("div", { class: g(N("root", m.class)) }, [f(i, h({
+		return (n, a) => (_(), l("div", { class: g(P("root", m.class)) }, [f(i, h({
 			id: m.id,
 			modelValue: E.value,
 			"onUpdate:modelValue": a[1] ||= (e) => E.value = e,
@@ -68,7 +68,7 @@ var w = [
 			required: m.required,
 			invalid: m.invalid,
 			unstyled: m.unstyled,
-			ui: { input: m.ui?.input },
+			ui: { input: N.value },
 			autocomplete: "current-password"
 		}, n.$attrs), d({ _: 2 }, [m.toggle ? {
 			name: "trailing",
@@ -78,7 +78,7 @@ var w = [
 				"aria-label": k.value ? m.hideLabel : m.showLabel,
 				"aria-pressed": k.value,
 				disabled: m.disabled,
-				class: g(N("toggle")),
+				class: g(P("toggle")),
 				onClick: a[0] ||= (e) => k.value = !k.value
 			}, [f(r, { icon: k.value ? x(t) : x(e) }, null, 8, ["icon"])], 10, w)]),
 			key: "0"
@@ -95,16 +95,16 @@ var w = [
 			"ui"
 		]), j.value ? (_(), l("div", {
 			key: 0,
-			class: g(N("meter"))
+			class: g(P("meter"))
 		}, [u("div", {
-			class: g(N("track")),
+			class: g(P("track")),
 			"aria-hidden": "true"
 		}, [(_(), l(o, null, y(4, (e) => u("span", {
 			key: e,
 			"data-filled": e <= A.value ? "" : void 0,
-			class: g(N("segment"))
+			class: g(P("segment"))
 		}, null, 10, T)), 64))], 2), u("span", {
-			class: g(N("label")),
+			class: g(P("label")),
 			role: "status"
 		}, b(m.strengthLabels[A.value - 1]), 3)], 2)) : c("", !0)], 2));
 	}

package/dist/packages/iryx-ui/src/components/index.js

@@ -15,28 +15,29 @@ import p from "./DatePicker.js";
 import m from "./DateRangePicker.js";
 import h from "./DropdownMenu.js";
 import g from "./EmptyState.js";
-import _ from "./Form.js";
-import v from "./Label.js";
-import y from "./FormField.js";
-import b from "./Input.js";
-import x from "./NumberInput.js";
-import S from "./Pagination.js";
-import C from "./PasswordInput.js";
-import w from "./Progress.js";
-import T from "./RadioGroup.js";
-import E from "./Select.js";
-import D from "./Separator.js";
-import O from "./Skeleton.js";
-import k from "./Stat.js";
-import A from "./Stepper.js";
-import j from "./Switch.js";
-import M from "./Table.js";
-import N from "./Tabs.js";
-import P from "./Textarea.js";
-import F from "./Toaster.js";
-import I from "./Tooltip.js";
+import _ from "./FileUpload.js";
+import v from "./Form.js";
+import y from "./Label.js";
+import b from "./FormField.js";
+import x from "./Input.js";
+import S from "./NumberInput.js";
+import C from "./Pagination.js";
+import w from "./PasswordInput.js";
+import T from "./Progress.js";
+import E from "./RadioGroup.js";
+import D from "./Select.js";
+import O from "./Separator.js";
+import k from "./Skeleton.js";
+import A from "./Stat.js";
+import j from "./Stepper.js";
+import M from "./Switch.js";
+import N from "./Table.js";
+import P from "./Tabs.js";
+import F from "./Textarea.js";
+import I from "./Toaster.js";
+import L from "./Tooltip.js";
 //#region src/components/index.ts
-var L = /* @__PURE__ */ e({
+var R = /* @__PURE__ */ e({
 	Alert: () => t,
 	App: () => n,
 	Badge: () => r,
@@ -53,26 +54,27 @@ var L = /* @__PURE__ */ e({
 	Dialog: () => d,
 	DropdownMenu: () => h,
 	EmptyState: () => g,
-	Form: () => _,
-	FormField: () => y,
-	Input: () => b,
-	Label: () => v,
-	NumberInput: () => x,
-	Pagination: () => S,
-	PasswordInput: () => C,
-	Progress: () => w,
-	RadioGroup: () => T,
-	Select: () => E,
-	Separator: () => D,
-	Skeleton: () => O,
-	Stat: () => k,
-	Stepper: () => A,
-	Switch: () => j,
-	Table: () => M,
-	Tabs: () => N,
-	Textarea: () => P,
-	Toaster: () => F,
-	Tooltip: () => I
+	FileUpload: () => _,
+	Form: () => v,
+	FormField: () => b,
+	Input: () => x,
+	Label: () => y,
+	NumberInput: () => S,
+	Pagination: () => C,
+	PasswordInput: () => w,
+	Progress: () => T,
+	RadioGroup: () => E,
+	Select: () => D,
+	Separator: () => O,
+	Skeleton: () => k,
+	Stat: () => A,
+	Stepper: () => j,
+	Switch: () => M,
+	Table: () => N,
+	Tabs: () => P,
+	Textarea: () => F,
+	Toaster: () => I,
+	Tooltip: () => L
 });
 //#endregion
-export { L as components_exports };
+export { R as components_exports };

package/dist/packages/iryx-ui/src/theme/file-upload.js

@@ -0,0 +1,29 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/file-upload.ts
+var t = e({
+	slots: {
+		root: "flex w-full flex-col gap-3",
+		dropzone: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-input px-4 py-6 text-center transition-colors focus-within:ring-2 focus-within:ring-primary/50 hover:border-primary/50",
+		input: "sr-only",
+		icon: "flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-5",
+		label: "text-sm text-foreground",
+		browse: "mt-2",
+		hint: "text-xs text-muted-foreground",
+		list: "flex flex-col gap-2",
+		item: "flex items-center gap-3 rounded-xl border border-border bg-input p-2",
+		thumbnail: "size-10 shrink-0 rounded-lg object-cover",
+		placeholder: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-4",
+		details: "flex min-w-0 flex-1 flex-col",
+		name: "truncate text-sm text-foreground",
+		meta: "text-xs text-muted-foreground tabular-nums",
+		remove: "flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
+		error: "text-xs text-danger"
+	},
+	variants: {
+		dragging: { true: { dropzone: "border-primary bg-accent" } },
+		invalid: { true: { dropzone: "border-red-500 focus-within:ring-red-500/40" } },
+		disabled: { true: { dropzone: "pointer-events-none opacity-50" } }
+	}
+});
+//#endregion
+export { t as fileUploadTheme };

package/dist/packages/iryx-ui/src/theme/password-input.js

@@ -3,6 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "flex w-full flex-col gap-2",
+		input: "[&::-ms-clear]:hidden [&::-ms-reveal]:hidden",
 		toggle: "flex items-center rounded-md text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
 		meter: "flex items-center gap-2",
 		track: "flex h-1 flex-1 gap-1",

package/dist/theme/file-upload.d.ts

@@ -0,0 +1,143 @@
+export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
+    /** Held during a drag, so the target is unmistakable while dragging. */
+    dragging: {
+        true: {
+            dropzone: string;
+        };
+    };
+    invalid: {
+        true: {
+            dropzone: string;
+        };
+    };
+    disabled: {
+        true: {
+            dropzone: string;
+        };
+    };
+}, {
+    root: string;
+    /**
+     * A label, so a click anywhere on the zone opens the picker without any
+     * script — the `<input type="file">` inside stays the real control and
+     * keeps its native keyboard and screen-reader behaviour.
+     */
+    dropzone: string;
+    /** Visually hidden rather than `display:none`, which drops it from the tab order. */
+    input: string;
+    /**
+     * A filled disc behind the glyph. A bare icon floating in the middle of a
+     * large dashed box reads as an artefact; the disc gives it enough weight
+     * to be the thing the zone is built around.
+     */
+    icon: string;
+    label: string;
+    /** Spacing only — the look comes from Button, so it tracks the theme. */
+    browse: string;
+    hint: string;
+    list: string;
+    item: string;
+    thumbnail: string;
+    /** Stand-in for anything without a preview, so rows stay the same height. */
+    placeholder: string;
+    details: string;
+    name: string;
+    meta: string;
+    remove: string;
+    error: string;
+}, undefined, {
+    /** Held during a drag, so the target is unmistakable while dragging. */
+    dragging: {
+        true: {
+            dropzone: string;
+        };
+    };
+    invalid: {
+        true: {
+            dropzone: string;
+        };
+    };
+    disabled: {
+        true: {
+            dropzone: string;
+        };
+    };
+}, {
+    root: string;
+    /**
+     * A label, so a click anywhere on the zone opens the picker without any
+     * script — the `<input type="file">` inside stays the real control and
+     * keeps its native keyboard and screen-reader behaviour.
+     */
+    dropzone: string;
+    /** Visually hidden rather than `display:none`, which drops it from the tab order. */
+    input: string;
+    /**
+     * A filled disc behind the glyph. A bare icon floating in the middle of a
+     * large dashed box reads as an artefact; the disc gives it enough weight
+     * to be the thing the zone is built around.
+     */
+    icon: string;
+    label: string;
+    /** Spacing only — the look comes from Button, so it tracks the theme. */
+    browse: string;
+    hint: string;
+    list: string;
+    item: string;
+    thumbnail: string;
+    /** Stand-in for anything without a preview, so rows stay the same height. */
+    placeholder: string;
+    details: string;
+    name: string;
+    meta: string;
+    remove: string;
+    error: string;
+}, import("tailwind-variants").TVReturnType<{
+    /** Held during a drag, so the target is unmistakable while dragging. */
+    dragging: {
+        true: {
+            dropzone: string;
+        };
+    };
+    invalid: {
+        true: {
+            dropzone: string;
+        };
+    };
+    disabled: {
+        true: {
+            dropzone: string;
+        };
+    };
+}, {
+    root: string;
+    /**
+     * A label, so a click anywhere on the zone opens the picker without any
+     * script — the `<input type="file">` inside stays the real control and
+     * keeps its native keyboard and screen-reader behaviour.
+     */
+    dropzone: string;
+    /** Visually hidden rather than `display:none`, which drops it from the tab order. */
+    input: string;
+    /**
+     * A filled disc behind the glyph. A bare icon floating in the middle of a
+     * large dashed box reads as an artefact; the disc gives it enough weight
+     * to be the thing the zone is built around.
+     */
+    icon: string;
+    label: string;
+    /** Spacing only — the look comes from Button, so it tracks the theme. */
+    browse: string;
+    hint: string;
+    list: string;
+    item: string;
+    thumbnail: string;
+    /** Stand-in for anything without a preview, so rows stay the same height. */
+    placeholder: string;
+    details: string;
+    name: string;
+    meta: string;
+    remove: string;
+    error: string;
+}, undefined, unknown, unknown, undefined>>;
+export type FileUploadSlots = keyof ReturnType<typeof fileUploadTheme>;

package/dist/theme/form.d.ts

@@ -5,8 +5,8 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             description?: import("tailwind-variants").ClassValue;
             label?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
             control?: import("tailwind-variants").ClassValue;
             help?: import("tailwind-variants").ClassValue;
         };
@@ -18,8 +18,8 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             description?: import("tailwind-variants").ClassValue;
             label?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
             control?: import("tailwind-variants").ClassValue;
             help?: import("tailwind-variants").ClassValue;
         };
@@ -40,8 +40,8 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             description?: import("tailwind-variants").ClassValue;
             label?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
             control?: import("tailwind-variants").ClassValue;
             help?: import("tailwind-variants").ClassValue;
         };

package/dist/theme/index.d.ts

@@ -11,6 +11,7 @@ export * from './date-picker';
 export * from './dialog';
 export * from './dropdown-menu';
 export * from './empty-state';
+export * from './file-upload';
 export * from './input';
 export * from './label';
 export * from './number-input';

package/dist/theme/password-input.d.ts

@@ -21,6 +21,12 @@ export declare const passwordInputTheme: import("tailwind-variants").TVReturnTyp
     };
 }, {
     root: string;
+    /**
+     * Edge draws its own reveal eye on `input[type=password]`, and its own
+     * clear cross once the field is revealed to `type=text`. Both would sit
+     * beside ours, so the field shows two of each in that browser only.
+     */
+    input: string;
     toggle: string;
     meter: string;
     track: string;
@@ -45,6 +51,12 @@ export declare const passwordInputTheme: import("tailwind-variants").TVReturnTyp
     };
 }, {
     root: string;
+    /**
+     * Edge draws its own reveal eye on `input[type=password]`, and its own
+     * clear cross once the field is revealed to `type=text`. Both would sit
+     * beside ours, so the field shows two of each in that browser only.
+     */
+    input: string;
     toggle: string;
     meter: string;
     track: string;
@@ -69,6 +81,12 @@ export declare const passwordInputTheme: import("tailwind-variants").TVReturnTyp
     };
 }, {
     root: string;
+    /**
+     * Edge draws its own reveal eye on `input[type=password]`, and its own
+     * clear cross once the field is revealed to `type=text`. Both would sit
+     * beside ours, so the field shows two of each in that browser only.
+     */
+    input: string;
     toggle: string;
     meter: string;
     track: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",