iryx-ui 0.7.0 → 0.9.0

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

@@ -0,0 +1,110 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { extent as t, linearScale as n } from "../composables/scale.js";
+import { sparklineTheme as r } from "../theme/sparkline.js";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderList as p } from "vue";
+//#region src/components/Sparkline.vue?vue&type=script&setup=true&lang.ts
+var m = [
+	"viewBox",
+	"height",
+	"role",
+	"aria-label",
+	"aria-hidden"
+], h = ["d"], g = ["d"], _ = ["d"], v = ["d"], y = 100, b = /*@__PURE__*/ l({
+	__name: "Sparkline",
+	props: {
+		data: { default: () => [] },
+		variant: { default: "line" },
+		endDot: { type: Boolean },
+		baseline: { default: "min" },
+		min: {},
+		max: {},
+		muted: { type: Boolean },
+		label: {},
+		height: { default: 32 },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(l) {
+		let b = l, x = e(), S = a(() => b.unstyled ?? x.unstyled), C = a(() => b.endDot ? 6 : 1), w = a(() => Math.max(b.height - C.value * 2, 1)), T = a(() => {
+			let e = b.data, r = t(e);
+			if (!r) return [];
+			let [i, a] = r, o = b.min ?? i, s = b.max ?? a, c = n([0, Math.max(e.length - 1, 0)], [0, y]), l = n([o, s], [y, 0]), u = [], d = [];
+			return e.forEach((e, t) => {
+				if (typeof e != "number" || !Number.isFinite(e)) {
+					d.length && u.push(d), d = [];
+					return;
+				}
+				d.push({
+					x: E(c(t)),
+					y: E(l(e))
+				});
+			}), d.length && u.push(d), u;
+		});
+		function E(e) {
+			return Math.round(e * 100) / 100;
+		}
+		function D(e) {
+			return e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x} ${e.y}`).join(" ");
+		}
+		let O = a(() => {
+			let e = t(b.data);
+			if (!e) return y;
+			let r = b.min ?? e[0], i = b.max ?? e[1];
+			return b.baseline === "zero" && r <= 0 && i >= 0 ? E(n([r, i], [y, 0])(0)) : y;
+		});
+		function k(e) {
+			let t = e[0], n = e[e.length - 1];
+			return `${D(e)} L${n.x} ${O.value} L${t.x} ${O.value} Z`;
+		}
+		let A = a(() => {
+			let e = T.value[T.value.length - 1];
+			return e?.[e.length - 1];
+		}), j = a(() => r({ muted: b.muted }));
+		function M(e, t) {
+			let n = b.ui?.[e];
+			return S.value ? [n, t] : j.value[e]({ class: [n, t] });
+		}
+		return (e, t) => (f(), s("span", {
+			class: u(M("root", b.class)),
+			style: d({ padding: `${C.value}px` })
+		}, [(f(), s("svg", {
+			viewBox: `0 0 ${y} ${y}`,
+			preserveAspectRatio: "none",
+			height: w.value,
+			style: d({ height: `${w.value}px` }),
+			role: b.label ? "img" : void 0,
+			"aria-label": b.label,
+			"aria-hidden": b.label ? void 0 : !0,
+			class: u(M("plot"))
+		}, [
+			b.variant === "area" ? (f(!0), s(i, { key: 0 }, p(T.value, (e, t) => (f(), s("path", {
+				key: `area-${t}`,
+				d: k(e),
+				class: u(M("area"))
+			}, null, 10, h))), 128)) : o("", !0),
+			(f(!0), s(i, null, p(T.value, (e, t) => (f(), s("path", {
+				key: `line-${t}`,
+				d: D(e),
+				"vector-effect": "non-scaling-stroke",
+				class: u(M("line"))
+			}, null, 10, g))), 128)),
+			b.endDot && A.value ? (f(), s(i, { key: 1 }, [c("path", {
+				d: `M${A.value.x} ${A.value.y} L${A.value.x} ${A.value.y}`,
+				"stroke-width": "12",
+				"vector-effect": "non-scaling-stroke",
+				class: u(M("ring"))
+			}, null, 10, _), c("path", {
+				d: `M${A.value.x} ${A.value.y} L${A.value.x} ${A.value.y}`,
+				"stroke-width": "8",
+				"vector-effect": "non-scaling-stroke",
+				class: u(M("dot"))
+			}, null, 10, v)], 64)) : o("", !0)
+		], 14, m))], 6));
+	}
+});
+//#endregion
+export { b as default };

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

@@ -3,76 +3,82 @@ import t from "./Alert.js";
 import n from "./App.js";
 import r from "./Badge.js";
 import i from "./Banner.js";
-import a from "./Breadcrumb.js";
-import o from "./Button.js";
-import s from "./ButtonGroup.js";
-import c from "./Card.js";
-import l from "./Checkbox.js";
-import u from "./Combobox.js";
-import d from "./Dialog.js";
-import f from "./ConfirmDialog.js";
-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 a from "./BarChart.js";
+import o from "./Breadcrumb.js";
+import s from "./Button.js";
+import c from "./ButtonGroup.js";
+import l from "./Card.js";
+import u from "./Checkbox.js";
+import d from "./Combobox.js";
+import f from "./Dialog.js";
+import p from "./ConfirmDialog.js";
+import m from "./DatePicker.js";
+import h from "./DateRangePicker.js";
+import g from "./DropdownMenu.js";
+import _ from "./EmptyState.js";
+import v from "./FileUpload.js";
+import y from "./Form.js";
+import b from "./Label.js";
+import x from "./FormField.js";
+import S from "./Input.js";
+import C from "./NumberInput.js";
+import w from "./Pagination.js";
+import T from "./PasswordInput.js";
+import E from "./Progress.js";
+import D from "./RadioGroup.js";
+import O from "./Select.js";
+import k from "./Separator.js";
+import A from "./Skeleton.js";
+import j from "./Sparkline.js";
+import M from "./Stat.js";
+import N from "./Stepper.js";
+import P from "./Switch.js";
+import F from "./Table.js";
+import I from "./Tabs.js";
+import L from "./Textarea.js";
+import R from "./Toaster.js";
+import z from "./Tooltip.js";
 //#region src/components/index.ts
-var L = /* @__PURE__ */ e({
+var B = /* @__PURE__ */ e({
 	Alert: () => t,
 	App: () => n,
 	Badge: () => r,
 	Banner: () => i,
-	Breadcrumb: () => a,
-	Button: () => o,
-	ButtonGroup: () => s,
-	Card: () => c,
-	Checkbox: () => l,
-	Combobox: () => u,
-	ConfirmDialog: () => f,
-	DatePicker: () => p,
-	DateRangePicker: () => m,
-	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
+	BarChart: () => a,
+	Breadcrumb: () => o,
+	Button: () => s,
+	ButtonGroup: () => c,
+	Card: () => l,
+	Checkbox: () => u,
+	Combobox: () => d,
+	ConfirmDialog: () => p,
+	DatePicker: () => m,
+	DateRangePicker: () => h,
+	Dialog: () => f,
+	DropdownMenu: () => g,
+	EmptyState: () => _,
+	FileUpload: () => v,
+	Form: () => y,
+	FormField: () => x,
+	Input: () => S,
+	Label: () => b,
+	NumberInput: () => C,
+	Pagination: () => w,
+	PasswordInput: () => T,
+	Progress: () => E,
+	RadioGroup: () => D,
+	Select: () => O,
+	Separator: () => k,
+	Skeleton: () => A,
+	Sparkline: () => j,
+	Stat: () => M,
+	Stepper: () => N,
+	Switch: () => P,
+	Table: () => F,
+	Tabs: () => I,
+	Textarea: () => L,
+	Toaster: () => R,
+	Tooltip: () => z
 });
 //#endregion
-export { L as components_exports };
+export { B as components_exports };

package/dist/packages/iryx-ui/src/composables/element-size.js

@@ -0,0 +1,22 @@
+import { onBeforeUnmount as e, ref as t, watch as n } from "vue";
+//#region src/composables/element-size.ts
+function r(r) {
+	let i = t(0), a = t(0), o;
+	function s() {
+		o?.disconnect(), o = void 0;
+	}
+	return n(r, (e) => {
+		s(), e && (i.value = e.clientWidth, a.value = e.clientHeight, !(typeof ResizeObserver > "u") && (o = new ResizeObserver((e) => {
+			let t = e[0];
+			t && (i.value = t.contentRect.width, a.value = t.contentRect.height);
+		}), o.observe(e)));
+	}, {
+		immediate: !0,
+		flush: "post"
+	}), e(s), {
+		width: i,
+		height: a
+	};
+}
+//#endregion
+export { r as useElementSize };

package/dist/packages/iryx-ui/src/composables/scale.js

@@ -0,0 +1,43 @@
+//#region src/composables/scale.ts
+function e(e) {
+	return e.filter((e) => typeof e == "number" && Number.isFinite(e));
+}
+function t(t) {
+	let n = e(t);
+	if (n.length) return [Math.min(...n), Math.max(...n)];
+}
+function n(e, t) {
+	let [n, r] = e, [i, a] = t, o = r - n;
+	if (o === 0) return () => (i + a) / 2;
+	let s = (a - i) / o;
+	return (e) => i + (e - n) * s;
+}
+function r(e, t) {
+	let n = 10 ** Math.floor(Math.log10(e)), r = e / n, i;
+	return i = t ? r < 1.5 ? 1 : r < 3 ? 2 : r < 7 ? 5 : 10 : r <= 1 ? 1 : r <= 2 ? 2 : r <= 5 ? 5 : 10, i * n;
+}
+function i(e, t, n = 5) {
+	if (!Number.isFinite(e) || !Number.isFinite(t)) return {
+		ticks: [0, 1],
+		min: 0,
+		max: 1
+	};
+	if (e === t) {
+		if (e === 0) return {
+			ticks: [0, 1],
+			min: 0,
+			max: 1
+		};
+		let n = Math.abs(e);
+		e -= n / 2, t += n / 2;
+	}
+	let i = r(r(t - e, !1) / Math.max(n - 1, 1), !0), a = Math.floor(e / i) * i, o = Math.ceil(t / i) * i, s = Math.max(0, -Math.floor(Math.log10(i))), c = [], l = Math.round((o - a) / i);
+	for (let e = 0; e <= l; e++) c.push(Number((a + e * i).toFixed(s)));
+	return {
+		ticks: c,
+		min: c[0],
+		max: c[c.length - 1]
+	};
+}
+//#endregion
+export { t as extent, e as finiteValues, n as linearScale, i as niceTicks };

package/dist/packages/iryx-ui/src/theme/bar-chart.js

@@ -0,0 +1,18 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/bar-chart.ts
+var t = e({ slots: {
+	root: "relative w-full text-primary",
+	svg: "block w-full overflow-visible",
+	grid: "stroke-border",
+	tick: "fill-muted-foreground text-xs [font-variant-numeric:tabular-nums]",
+	category: "fill-muted-foreground text-xs",
+	bar: "fill-current transition-opacity",
+	hit: "fill-transparent",
+	faded: "opacity-30",
+	tooltip: "pointer-events-none absolute z-10 flex items-baseline gap-1.5 rounded-lg border border-border bg-background px-2 py-1 text-xs whitespace-nowrap text-foreground shadow-md",
+	tooltipLabel: "text-muted-foreground",
+	tooltipValue: "font-medium [font-variant-numeric:tabular-nums]",
+	table: "sr-only"
+} });
+//#endregion
+export { t as barChartTheme };

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/packages/iryx-ui/src/theme/sparkline.js

@@ -0,0 +1,15 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/sparkline.ts
+var t = e({
+	slots: {
+		root: "block w-full text-primary",
+		plot: "block w-full overflow-visible",
+		line: "fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]",
+		area: "fill-current stroke-none opacity-10",
+		dot: "stroke-current [stroke-linecap:round]",
+		ring: "[stroke:var(--iryx-background)] [stroke-linecap:round]"
+	},
+	variants: { muted: { true: { root: "text-muted-foreground" } } }
+});
+//#endregion
+export { t as sparklineTheme };

package/dist/theme/bar-chart.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Everything recessive except the bars. Grid and axis text sit one step off
+ * the surface; the data is the only thing allowed to be loud.
+ */
+export declare const barChartTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
+            table?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            tick?: import("tailwind-variants").ClassValue;
+            category?: import("tailwind-variants").ClassValue;
+            bar?: import("tailwind-variants").ClassValue;
+            hit?: import("tailwind-variants").ClassValue;
+            faded?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            tooltipLabel?: import("tailwind-variants").ClassValue;
+            tooltipValue?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
+            table?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            tick?: import("tailwind-variants").ClassValue;
+            category?: import("tailwind-variants").ClassValue;
+            bar?: import("tailwind-variants").ClassValue;
+            hit?: import("tailwind-variants").ClassValue;
+            faded?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            tooltipLabel?: import("tailwind-variants").ClassValue;
+            tooltipValue?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    svg: string;
+    /** Hairline and solid — a dashed grid competes with the marks. */
+    grid: string;
+    /** Text never wears the series colour; identity comes from the mark. */
+    tick: string;
+    category: string;
+    bar: string;
+    /** Hit target, deliberately wider than the mark it selects. */
+    hit: string;
+    /** Dims the rest of the series so the hovered bar reads as selected. */
+    faded: string;
+    tooltip: string;
+    tooltipLabel: string;
+    tooltipValue: string;
+    /** Reachable by screen readers and by nobody's eyes. */
+    table: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
+            table?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            tick?: import("tailwind-variants").ClassValue;
+            category?: import("tailwind-variants").ClassValue;
+            bar?: import("tailwind-variants").ClassValue;
+            hit?: import("tailwind-variants").ClassValue;
+            faded?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            tooltipLabel?: import("tailwind-variants").ClassValue;
+            tooltipValue?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    svg: string;
+    /** Hairline and solid — a dashed grid competes with the marks. */
+    grid: string;
+    /** Text never wears the series colour; identity comes from the mark. */
+    tick: string;
+    category: string;
+    bar: string;
+    /** Hit target, deliberately wider than the mark it selects. */
+    hit: string;
+    /** Dims the rest of the series so the hovered bar reads as selected. */
+    faded: string;
+    tooltip: string;
+    tooltipLabel: string;
+    tooltipValue: string;
+    /** Reachable by screen readers and by nobody's eyes. */
+    table: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    svg: string;
+    /** Hairline and solid — a dashed grid competes with the marks. */
+    grid: string;
+    /** Text never wears the series colour; identity comes from the mark. */
+    tick: string;
+    category: string;
+    bar: string;
+    /** Hit target, deliberately wider than the mark it selects. */
+    hit: string;
+    /** Dims the rest of the series so the hovered bar reads as selected. */
+    faded: string;
+    tooltip: string;
+    tooltipLabel: string;
+    tooltipValue: string;
+    /** Reachable by screen readers and by nobody's eyes. */
+    table: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BarChartSlots = keyof ReturnType<typeof barChartTheme>;

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>;