iryx-ui 0.7.0 → 0.9.0

package/README.md

@@ -199,21 +199,20 @@ For a static re-brand, plain CSS works too — tokens are just variables:
 
 ### Typeface
 
-The library ships **no webfont** — that would put font files, a licence and a
-network request into every app whether it wanted them or not. It reads one
-variable, defaulting to the system stack. Point it at your own family and
-everything follows, including Tailwind's `font-sans`:
+Set `--iryx-font-sans` and everything follows, including Tailwind's
+`font-sans`. Load the family however you like — a package, a `<link>`, or
+self-hosted:
 
 ```css
-@import "@fontsource-variable/instrument-sans"; /* or a <link>, or self-hosted */
+@import "@fontsource-variable/instrument-sans";
 
 :root {
   --iryx-font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
 }
 ```
 
-Unlike the colour tokens, this one is not mode-specific — there is no `.dark`
-counterpart to keep in sync.
+Leave it unset to use the system stack. There is no `.dark` counterpart for
+this one.
 
 Available tokens, each usable as a Tailwind color (`bg-primary`,
 `text-muted-foreground`, …):
@@ -290,6 +289,9 @@ 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 |
+| `ISparkline` | Tiny inline trend chart — pure SVG, no charting dependency |
+| `IBarChart` | Categorical bar chart with a round-number axis, hover tooltip and a table view |
+| `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 +482,152 @@ 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.
 
+#### Bar charts
+
+```vue
+<IBarChart
+  :data="[
+    { label: 'Jan', value: 4200 },
+    { label: 'Feb', value: 5600 },
+    { label: 'Mar', value: null },
+  ]"
+  label="Revenue by month"
+  locale="de-DE"
+  :format="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
+/>
+```
+
+| Prop | Effect |
+| --- | --- |
+| `data` | `{ label, value }[]`. `value: null` is a **missing reading** — no bar, which is not a zero |
+| `height` | Rendered height in px (default 240). Width fills the container |
+| `ticks` | Target tick count. A hint — the axis lands on round numbers first |
+| `axis` | Set `false` to drop the value axis and gridlines |
+| `locale` / `format` | `Intl.NumberFormat` settings, applied to ticks and tooltip alike |
+| `label` | Accessible name for the figure |
+
+**The axis picks the domain, not the data.** Values are snapped outwards to a
+1/2/5 step, so an axis reads `0 / 2,000 / 4,000` rather than `0 / 1,726.8`.
+Zero is always included, because bars are compared by length and a truncated
+baseline makes that comparison a lie.
+
+Bars are capped at 24px and never fill their slot — the gap between them is
+what separates them. They're rounded at the data end and square at the
+baseline, so the rounding reads as the tip of the value.
+
+Hovering a bar dims the rest and shows a tooltip; hit targets span the full
+band and plot height, so a short bar is no harder to hit than a tall one.
+
+**Accessibility:** the SVG is `aria-hidden` and the data is exposed as a
+visually-hidden table instead, so a screen reader gets the actual numbers
+rather than a blank graphic. That table renders even before the container has
+been measured — the data is never gated behind layout.
+
+Long category labels thin out to every *n*th rather than rotating or
+colliding. For many categories or long names, that's the honest limit of this
+chart — reach for a table.
+
+#### Sparklines
+
+A trend at a glance, for a stat tile or a table cell. Plain SVG — no charting
+library, no canvas, nothing to install.
+
+```vue
+<ISparkline
+  :data="[4200, 4600, 4100, 5200, 5800, 6300]"
+  variant="area"
+  end-dot
+  label="Revenue over six months, trending up"
+/>
+```
+
+Because it is SVG, colour comes from `currentColor`: recolour it with a text
+utility, and it follows your theme preset and light/dark automatically with no
+JavaScript. A canvas chart cannot read CSS variables, so it would need a
+re-render on every theme change.
+
+| Prop | Effect |
+| --- | --- |
+| `data` | Values, oldest first. `null` is a **gap**, not a zero — the line breaks |
+| `variant` | `line` (default) or `area`, which adds a wash beneath the line |
+| `endDot` | Marks the most recent point |
+| `baseline` | Lower edge of the `area` wash: `min` (default) or `zero` |
+| `min` / `max` | Pin the domain — set both to put several sparklines on one scale |
+| `muted` | Draw in muted ink, for a de-emphasised trend |
+| `height` | Rendered height in px (default 32). Width always fills the container |
+
+Width is fluid and the stroke never distorts: the drawing stretches via
+`preserveAspectRatio="none"`, while every stroke carries
+`vector-effect="non-scaling-stroke"`, so a 2px line stays 2px and the end dot
+stays circular at any aspect ratio.
+
+`label` sets an accessible description. **Without one the sparkline is hidden
+from assistive tech as decorative** — which is correct when it sits beside a
+value that already states the number, and wrong if it is the only thing
+carrying the information.
+
+Edge cases behave: an empty series draws nothing, a flat series draws through
+the middle rather than collapsing to an edge, and a single reading is a dot.
+
+The scale helpers are exported for building your own marks:
+
+```ts
+import { extent, linearScale } from 'iryx-ui'
+
+extent([3, null, 9, 1]) // [1, 9] — gaps ignored
+linearScale([0, 10], [100, 0])(10) // 0 — ranges may be inverted for SVG's y-axis
+```
+
+#### 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", "BarChart", "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", "Sparkline", "Stat", "Stepper", "Switch", "Table", "Tabs", "Textarea", "Toaster", "Tooltip"];
 export type ComponentName = (typeof componentNames)[number];

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

@@ -0,0 +1,36 @@
+import type { SparseValue } from '../composables/scale';
+export interface BarChartDatum {
+    label: string;
+    /** `null` is a missing reading — no bar is drawn, which is not the same as 0. */
+    value: SparseValue;
+}
+export interface BarChartProps {
+    data?: readonly BarChartDatum[];
+    /** Rendered height in px. Width always fills the container. */
+    height?: number;
+    /** Target tick count. The axis lands on round numbers, so this is a hint. */
+    ticks?: number;
+    /** Drop the value axis and its gridlines. */
+    axis?: boolean;
+    /** Locale and options for every number shown — ticks and tooltip alike. */
+    locale?: string;
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Accessible name for the figure. The bars are hidden from assistive tech
+     * and the data is exposed as a table instead, so this names what that is.
+     */
+    label?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: Partial<Record<'root' | 'svg' | 'grid' | 'tick' | 'category' | 'bar' | 'tooltip' | 'tooltipLabel' | 'tooltipValue' | 'table', string>>;
+}
+declare const __VLS_export: import("vue").DefineComponent<BarChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BarChartProps> & Readonly<{}>, {
+    unstyled: boolean;
+    data: readonly BarChartDatum[];
+    height: number;
+    ticks: number;
+    axis: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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/Sparkline.vue.d.ts

@@ -0,0 +1,38 @@
+import type { SparseValue } from '../composables/scale';
+export interface SparklineProps {
+    /** Values, oldest first. `null` is a gap in the series, not a zero. */
+    data?: readonly SparseValue[];
+    /** `area` adds a wash beneath the same line. */
+    variant?: 'line' | 'area';
+    /** Mark the most recent point with a dot. */
+    endDot?: boolean;
+    /** Lower edge of the `area` wash. */
+    baseline?: 'min' | 'zero';
+    /** Pin the domain — set both to put several sparklines on one scale. */
+    min?: number;
+    max?: number;
+    /** Draw in muted ink, for the de-emphasised trend inside a stat tile. */
+    muted?: boolean;
+    /**
+     * Accessible description of the trend. Without one the sparkline is treated
+     * as decorative and hidden from assistive tech — which is correct when it
+     * sits beside a value that already states the number.
+     */
+    label?: string;
+    /** Rendered height in px. Width always fills the container. */
+    height?: number;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ line: 'stroke-[3]' }`. */
+    ui?: Partial<Record<'root' | 'plot' | 'line' | 'area' | 'dot' | 'ring', string>>;
+}
+declare const __VLS_export: import("vue").DefineComponent<SparklineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SparklineProps> & Readonly<{}>, {
+    variant: "line" | "area";
+    unstyled: boolean;
+    data: readonly SparseValue[];
+    height: number;
+    baseline: "min" | "zero";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export { default as Alert } from './Alert.vue';
 export { default as App } from './App.vue';
 export { default as Badge } from './Badge.vue';
 export { default as Banner } from './Banner.vue';
+export { default as BarChart } from './BarChart.vue';
 export { default as Breadcrumb } from './Breadcrumb.vue';
 export { default as Button } from './Button.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
@@ -14,6 +15,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';
@@ -26,6 +28,7 @@ export { default as RadioGroup } from './RadioGroup.vue';
 export { default as Select } from './Select.vue';
 export { default as Separator } from './Separator.vue';
 export { default as Skeleton } from './Skeleton.vue';
+export { default as Sparkline } from './Sparkline.vue';
 export { default as Stat } from './Stat.vue';
 export { default as Stepper } from './Stepper.vue';
 export { default as Switch } from './Switch.vue';

package/dist/composables/element-size.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+/**
+ * Track an element's rendered width.
+ *
+ * A sparkline can stretch a fixed box because strokes opt out of the scaling.
+ * A chart with axes cannot: text stretched by `preserveAspectRatio="none"`
+ * comes out distorted, so the drawing has to happen in real pixels and the
+ * width has to be measured.
+ *
+ * One observer per chart, not per mark — cheap enough at that granularity.
+ */
+export declare function useElementSize(target: Ref<HTMLElement | undefined>): {
+    width: Ref<number, number>;
+    height: Ref<number, number>;
+};

package/dist/composables/scale.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The arithmetic every chart shares: find a domain, map it onto a range, and
+ * choose the numbers an axis is allowed to show.
+ *
+ * Deliberately not a charting engine — no band scales or stacking yet. Those
+ * arrive with the components that need them rather than being guessed at now.
+ */
+/** A gap in a series. `null` reads as "no reading", not as zero. */
+export type SparseValue = number | null | undefined;
+/** Finite values only, so gaps and stray `NaN` cannot poison a domain. */
+export declare function finiteValues(values: readonly SparseValue[]): number[];
+/** Smallest and largest finite value, or `undefined` when there are none. */
+export declare function extent(values: readonly SparseValue[]): [number, number] | undefined;
+/**
+ * Map `domain` onto `range`.
+ *
+ * A zero-width domain — every value identical, or a single point — maps to the
+ * middle of the range instead of dividing by zero. A flat series should draw a
+ * flat line through the centre, not vanish or spike to an edge.
+ */
+export declare function linearScale(domain: readonly [number, number], range: readonly [number, number]): (value: number) => number;
+/**
+ * Axis values a person would actually write down.
+ *
+ * The difference between an axis reading `0 / 1,000 / 2,000` and one reading
+ * `0 / 863.4 / 1,726.8` is the single clearest tell of a hand-rolled chart, so
+ * the step is snapped to a 1/2/5 multiple of a power of ten and the domain is
+ * widened outwards to land on it. The returned bounds are therefore usually
+ * wider than the data — that is the point, and the caller should scale to the
+ * first and last tick rather than to its own min and max.
+ */
+export declare function niceTicks(min: number, max: number, count?: number): {
+    ticks: number[];
+    min: number;
+    max: number;
+};

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export type { AlertProps } from './components/Alert.vue';
 export type { AppProps } from './components/App.vue';
 export type { BadgeProps } from './components/Badge.vue';
 export type { BannerProps } from './components/Banner.vue';
+export type { BarChartDatum, BarChartProps } from './components/BarChart.vue';
 export type { BreadcrumbItem, BreadcrumbProps } from './components/Breadcrumb.vue';
 export type { ButtonProps } from './components/Button.vue';
 export type { ButtonGroupProps } from './components/ButtonGroup.vue';
@@ -17,6 +18,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';
@@ -29,6 +31,7 @@ export type { RadioGroupItemOption, RadioGroupProps } from './components/RadioGr
 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 { SparklineProps } from './components/Sparkline.vue';
 export type { StatProps } from './components/Stat.vue';
 export type { StepperItemOption, StepperProps } from './components/Stepper.vue';
 export type { SwitchProps } from './components/Switch.vue';
@@ -44,7 +47,9 @@ export * from './composables/data-table';
 export * from './composables/date';
 export * from './composables/decimal';
 export * from './composables/dropdown-menu';
+export * from './composables/element-size';
 export * from './composables/form';
+export * from './composables/scale';
 export * from './composables/toast';
 export { defaultConfig, iryxUiConfigKey, useIryxUiConfig } from './config';
 export type { IryxUiConfig } from './config';

package/dist/index.js

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