iryx-ui 0.8.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,8 @@ 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 |
@@ -481,6 +482,102 @@ 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

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", "FileUpload", "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/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';
@@ -27,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';
@@ -30,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';
@@ -45,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,75 +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 { 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 };
+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 };

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.FileUpload.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.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".split(".");
 //#endregion
 export { e as componentNames };

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

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

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

@@ -0,0 +1,178 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { useElementSize as t } from "../composables/element-size.js";
+import { extent as n, linearScale as r, niceTicks as i } from "../composables/scale.js";
+import { barChartTheme as a } from "../theme/bar-chart.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v } from "vue";
+//#region src/components/BarChart.vue?vue&type=script&setup=true&lang.ts
+var y = ["role", "aria-label"], b = [
+	"width",
+	"height",
+	"viewBox"
+], x = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+], S = ["x", "y"], C = ["d"], w = ["x", "y"], T = [
+	"x",
+	"y",
+	"width",
+	"height",
+	"onPointerenter"
+], E = { scope: "row" }, D = 6.5, O = 8, k = 20, A = 8, j = .7, M = /*@__PURE__*/ d({
+	__name: "BarChart",
+	props: {
+		data: { default: () => [] },
+		height: { default: 240 },
+		ticks: { default: 5 },
+		axis: {
+			type: Boolean,
+			default: !0
+		},
+		locale: {},
+		format: {},
+		label: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(d) {
+		let M = d, N = e(), P = s(() => M.unstyled ?? N.unstyled), F = h(), { width: I } = t(F), L = s(() => new Intl.NumberFormat(M.locale, M.format));
+		function R(e) {
+			return L.value.format(e);
+		}
+		let z = s(() => {
+			let e = n(M.data.map((e) => e.value));
+			return e ? i(Math.min(0, e[0]), Math.max(0, e[1]), M.ticks) : i(0, 1, M.ticks);
+		}), B = s(() => {
+			if (!M.axis) return 0;
+			let e = Math.max(...z.value.ticks.map((e) => R(e).length), 1);
+			return Math.ceil(e * D) + O;
+		}), V = s(() => ({
+			left: B.value,
+			top: A,
+			width: Math.max(I.value - B.value, 0),
+			height: Math.max(M.height - A - k, 0)
+		})), H = s(() => r([z.value.min, z.value.max], [V.value.top + V.value.height, V.value.top])), U = s(() => M.data.length ? V.value.width / M.data.length : 0), W = s(() => Math.max(2, Math.min(24, U.value * j))), G = s(() => {
+			if (!I.value || !M.data.length) return [];
+			let e = H.value(0);
+			return M.data.flatMap((t, n) => {
+				let r = t.value;
+				if (typeof r != "number" || !Number.isFinite(r)) return [];
+				let i = H.value(r);
+				return [{
+					x: V.value.left + U.value * (n + .5) - W.value / 2,
+					y: Math.min(i, e),
+					width: W.value,
+					height: Math.abs(e - i),
+					up: r >= 0,
+					datum: t
+				}];
+			});
+		});
+		function K(e) {
+			let t = Math.min(4, e.width / 2, e.height), { x: n, width: r } = e, i = n + r;
+			if (e.up) {
+				let r = e.y, a = e.y + e.height;
+				return `M${n} ${a} L${n} ${r + t} Q${n} ${r} ${n + t} ${r} L${i - t} ${r} Q${i} ${r} ${i} ${r + t} L${i} ${a} Z`;
+			}
+			let a = e.y, o = e.y + e.height;
+			return `M${n} ${a} L${n} ${o - t} Q${n} ${o} ${n + t} ${o} L${i - t} ${o} Q${i} ${o} ${i} ${o - t} L${i} ${a} Z`;
+		}
+		let q = s(() => {
+			if (!U.value || !M.data.length) return 1;
+			let e = Math.max(...M.data.map((e) => e.label.length), 1);
+			return Math.max(1, Math.ceil((e * D + 8) / U.value));
+		}), J = h(), Y = s(() => {
+			if (J.value == null) return;
+			let e = M.data[J.value];
+			if (!e || typeof e.value != "number") return;
+			let t = e.label, n = R(e.value), r = ((t.length + n.length) * D + 28) / 2, i = V.value.left + U.value * (J.value + .5);
+			return {
+				label: t,
+				value: n,
+				x: Math.min(Math.max(i, r), Math.max(I.value - r, r)),
+				y: Math.min(H.value(e.value), H.value(0))
+			};
+		}), X = s(() => a());
+		function Z(e, t) {
+			let n = M.ui?.[e];
+			return P.value ? [n, t] : X.value[e]({ class: [n, t] });
+		}
+		function Q(e) {
+			let t = J.value != null && J.value !== e;
+			return P.value ? [M.ui?.bar] : X.value.bar({ class: [M.ui?.bar, t ? X.value.faded() : void 0] });
+		}
+		return (e, t) => (m(), l("div", {
+			ref_key: "root",
+			ref: F,
+			role: M.label ? "figure" : void 0,
+			"aria-label": M.label,
+			class: f(Z("root", M.class))
+		}, [
+			(m(), l("svg", {
+				width: v(I),
+				height: M.height,
+				viewBox: `0 0 ${v(I)} ${M.height}`,
+				"aria-hidden": "true",
+				class: f(Z("svg"))
+			}, [
+				M.axis ? (m(!0), l(o, { key: 0 }, g(z.value.ticks, (e) => (m(), l("g", { key: `tick-${e}` }, [u("line", {
+					x1: V.value.left,
+					y1: H.value(e),
+					x2: V.value.left + V.value.width,
+					y2: H.value(e),
+					"stroke-width": "1",
+					class: f(Z("grid"))
+				}, null, 10, x), u("text", {
+					x: V.value.left - O,
+					y: H.value(e),
+					"text-anchor": "end",
+					"dominant-baseline": "middle",
+					class: f(Z("tick"))
+				}, _(R(e)), 11, S)]))), 128)) : c("", !0),
+				(m(!0), l(o, null, g(G.value, (e, t) => (m(), l("path", {
+					key: `bar-${e.datum.label}-${t}`,
+					d: K(e),
+					class: f(Q(t))
+				}, null, 10, C))), 128)),
+				(m(!0), l(o, null, g(M.data, (e, t) => (m(), l(o, { key: `label-${e.label}-${t}` }, [t % q.value === 0 ? (m(), l("text", {
+					key: 0,
+					x: V.value.left + U.value * (t + .5),
+					y: V.value.top + V.value.height + 14,
+					"text-anchor": "middle",
+					class: f(Z("category"))
+				}, _(e.label), 11, w)) : c("", !0)], 64))), 128)),
+				(m(!0), l(o, null, g(M.data, (e, n) => (m(), l("rect", {
+					key: `hit-${e.label}-${n}`,
+					x: V.value.left + U.value * n,
+					y: V.value.top,
+					width: U.value,
+					height: V.value.height,
+					class: f(P.value ? void 0 : X.value.hit()),
+					onPointerenter: (e) => J.value = n,
+					onPointerleave: t[0] ||= (e) => J.value = void 0
+				}, null, 42, T))), 128))
+			], 10, b)),
+			Y.value ? (m(), l("div", {
+				key: 0,
+				class: f(Z("tooltip")),
+				style: p({
+					left: `${Y.value.x}px`,
+					top: `${Y.value.y}px`,
+					transform: "translate(-50%, -100%) translateY(-8px)"
+				})
+			}, [u("span", { class: f(Z("tooltipLabel")) }, _(Y.value.label), 3), u("span", { class: f(Z("tooltipValue")) }, _(Y.value.value), 3)], 6)) : c("", !0),
+			u("table", { class: f(Z("table")) }, [
+				u("caption", null, _(M.label), 1),
+				t[1] ||= u("thead", null, [u("tr", null, [u("th", { scope: "col" }, " Category "), u("th", { scope: "col" }, " Value ")])], -1),
+				u("tbody", null, [(m(!0), l(o, null, g(M.data, (e, t) => (m(), l("tr", { key: `row-${e.label}-${t}` }, [u("th", E, _(e.label), 1), u("td", null, _(typeof e.value == "number" ? R(e.value) : "—"), 1)]))), 128))])
+			], 2)
+		], 10, y));
+	}
+});
+//#endregion
+export { M as default };

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

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

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,78 +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 "./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";
+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 R = /* @__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,
-	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
+	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 { R 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/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/index.d.ts

@@ -1,6 +1,7 @@
 export * from './alert';
 export * from './badge';
 export * from './banner';
+export * from './bar-chart';
 export * from './breadcrumb';
 export * from './button';
 export * from './button-group';
@@ -23,6 +24,7 @@ export * from './radio-group';
 export * from './select';
 export * from './separator';
 export * from './skeleton';
+export * from './sparkline';
 export * from './stat';
 export * from './stepper';
 export * from './switch';

package/dist/theme/sparkline.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Colour comes from `currentColor`, so a sparkline recolours with a text
+ * utility and follows the theme and appearance without any JS. That is the
+ * whole reason these are SVG rather than canvas.
+ */
+export declare const sparklineTheme: import("tailwind-variants").TVReturnType<{
+    muted: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    /** Carries the inset that keeps every mark inside the component's box. */
+    root: string;
+    plot: string;
+    /** 2px, round join and cap, per the shared line-mark spec. */
+    line: string;
+    /** A wash at ~10%, never a saturated block competing with the line. */
+    area: string;
+    dot: string;
+    /** Keeps the end dot legible where it sits on top of the line. */
+    ring: string;
+}, undefined, {
+    muted: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    /** Carries the inset that keeps every mark inside the component's box. */
+    root: string;
+    plot: string;
+    /** 2px, round join and cap, per the shared line-mark spec. */
+    line: string;
+    /** A wash at ~10%, never a saturated block competing with the line. */
+    area: string;
+    dot: string;
+    /** Keeps the end dot legible where it sits on top of the line. */
+    ring: string;
+}, import("tailwind-variants").TVReturnType<{
+    muted: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    /** Carries the inset that keeps every mark inside the component's box. */
+    root: string;
+    plot: string;
+    /** 2px, round join and cap, per the shared line-mark spec. */
+    line: string;
+    /** A wash at ~10%, never a saturated block competing with the line. */
+    area: string;
+    dot: string;
+    /** Keeps the end dot legible where it sits on top of the line. */
+    ring: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SparklineSlots = keyof ReturnType<typeof sparklineTheme>;

package/package.json

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