iryx-ui 0.8.0 → 0.10.1

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

@@ -0,0 +1,132 @@
+/**
+ * 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;
+            plot?: 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;
+            plot?: 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;
+    /**
+     * The tooltip's coordinates come from the SVG, so the SVG has to be its
+     * positioning context. Anchoring to the root instead shifts it up by the
+     * height of anything above the plot — the legend, most obviously.
+     */
+    plot: 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;
+            plot?: 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;
+    /**
+     * The tooltip's coordinates come from the SVG, so the SVG has to be its
+     * positioning context. Anchoring to the root instead shifts it up by the
+     * height of anything above the plot — the legend, most obviously.
+     */
+    plot: 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;
+    /**
+     * The tooltip's coordinates come from the SVG, so the SVG has to be its
+     * positioning context. Anchoring to the root instead shifts it up by the
+     * height of anything above the plot — the legend, most obviously.
+     */
+    plot: 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/bar-chart.js

@@ -0,0 +1,19 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/bar-chart.ts
+var t = e({ slots: {
+	root: "w-full text-primary",
+	plot: "relative",
+	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/theme/breadcrumb.d.ts

@@ -3,8 +3,8 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
             link?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
             item?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
             current?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
         };
@@ -14,8 +14,8 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
         [x: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
             link?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
             item?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
             current?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
         };
@@ -33,8 +33,8 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
             link?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
             item?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
             current?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
         };

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

@@ -0,0 +1,55 @@
+/**
+ * Shared by every multi-series chart. A legend is mandatory from two series
+ * up: colour alone is not a dependable identity channel, and the swatch beside
+ * the name is what makes it one.
+ */
+export declare const chartLegendTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            name?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            name?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    /** The mark carries the series colour. */
+    swatch: string;
+    /** The text never does — a light hue is illegible as type on the surface. */
+    name: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            name?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    /** The mark carries the series colour. */
+    swatch: string;
+    /** The text never does — a light hue is illegible as type on the surface. */
+    name: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    item: string;
+    /** The mark carries the series colour. */
+    swatch: string;
+    /** The text never does — a light hue is illegible as type on the surface. */
+    name: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ChartLegendSlots = keyof ReturnType<typeof chartLegendTheme>;

package/dist/theme/chart-legend.js

@@ -0,0 +1,10 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/chart-legend.ts
+var t = e({ slots: {
+	root: "flex flex-wrap items-center gap-x-4 gap-y-1.5 pb-4",
+	item: "flex items-center gap-1.5 text-xs",
+	swatch: "size-2.5 shrink-0 rounded-full",
+	name: "text-muted-foreground"
+} });
+//#endregion
+export { t as chartLegendTheme };

package/dist/theme/index.d.ts

@@ -1,10 +1,12 @@
 export * from './alert';
 export * from './badge';
 export * from './banner';
+export * from './bar-chart';
 export * from './breadcrumb';
 export * from './button';
 export * from './button-group';
 export * from './card';
+export * from './chart-legend';
 export * from './checkbox';
 export * from './combobox';
 export * from './date-picker';
@@ -14,6 +16,7 @@ export * from './empty-state';
 export * from './file-upload';
 export * from './input';
 export * from './label';
+export * from './line-chart';
 export * from './number-input';
 export * from './pagination';
 export * from './password-input';
@@ -23,6 +26,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/line-chart.d.ts

@@ -0,0 +1,143 @@
+export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
+            area?: import("tailwind-variants").ClassValue;
+            table?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
+            marker?: import("tailwind-variants").ClassValue;
+            plot?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            tick?: import("tailwind-variants").ClassValue;
+            category?: import("tailwind-variants").ClassValue;
+            hit?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            tooltipLabel?: import("tailwind-variants").ClassValue;
+            tooltipValue?: import("tailwind-variants").ClassValue;
+            crosshair?: import("tailwind-variants").ClassValue;
+            markerRing?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
+            area?: import("tailwind-variants").ClassValue;
+            table?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
+            marker?: import("tailwind-variants").ClassValue;
+            plot?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            tick?: import("tailwind-variants").ClassValue;
+            category?: import("tailwind-variants").ClassValue;
+            hit?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            tooltipLabel?: import("tailwind-variants").ClassValue;
+            tooltipValue?: import("tailwind-variants").ClassValue;
+            crosshair?: import("tailwind-variants").ClassValue;
+            markerRing?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    /**
+     * The tooltip's coordinates come from the SVG, so the SVG has to be its
+     * positioning context. Anchoring to the root instead shifts it up by the
+     * height of anything above the plot — the legend, most obviously.
+     */
+    plot: string;
+    svg: string;
+    grid: string;
+    tick: string;
+    category: 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;
+    /** Recessive: it locates the reading, it is not a reading itself. */
+    crosshair: string;
+    marker: string;
+    /** Keeps the marker legible where it sits on top of the line. */
+    markerRing: string;
+    hit: string;
+    tooltip: string;
+    tooltipLabel: string;
+    tooltipValue: string;
+    table: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
+            area?: import("tailwind-variants").ClassValue;
+            table?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
+            marker?: import("tailwind-variants").ClassValue;
+            plot?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            tick?: import("tailwind-variants").ClassValue;
+            category?: import("tailwind-variants").ClassValue;
+            hit?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            tooltipLabel?: import("tailwind-variants").ClassValue;
+            tooltipValue?: import("tailwind-variants").ClassValue;
+            crosshair?: import("tailwind-variants").ClassValue;
+            markerRing?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    /**
+     * The tooltip's coordinates come from the SVG, so the SVG has to be its
+     * positioning context. Anchoring to the root instead shifts it up by the
+     * height of anything above the plot — the legend, most obviously.
+     */
+    plot: string;
+    svg: string;
+    grid: string;
+    tick: string;
+    category: 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;
+    /** Recessive: it locates the reading, it is not a reading itself. */
+    crosshair: string;
+    marker: string;
+    /** Keeps the marker legible where it sits on top of the line. */
+    markerRing: string;
+    hit: string;
+    tooltip: string;
+    tooltipLabel: string;
+    tooltipValue: string;
+    table: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    /**
+     * The tooltip's coordinates come from the SVG, so the SVG has to be its
+     * positioning context. Anchoring to the root instead shifts it up by the
+     * height of anything above the plot — the legend, most obviously.
+     */
+    plot: string;
+    svg: string;
+    grid: string;
+    tick: string;
+    category: 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;
+    /** Recessive: it locates the reading, it is not a reading itself. */
+    crosshair: string;
+    marker: string;
+    /** Keeps the marker legible where it sits on top of the line. */
+    markerRing: string;
+    hit: string;
+    tooltip: string;
+    tooltipLabel: string;
+    tooltipValue: string;
+    table: string;
+}, undefined, unknown, unknown, undefined>>;
+export type LineChartSlots = keyof ReturnType<typeof lineChartTheme>;

package/dist/theme/line-chart.js

@@ -0,0 +1,22 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/line-chart.ts
+var t = e({ slots: {
+	root: "w-full text-primary",
+	plot: "relative",
+	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",
+	line: "fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]",
+	area: "fill-current stroke-none opacity-10",
+	crosshair: "stroke-border",
+	marker: "fill-current",
+	markerRing: "fill-background",
+	hit: "fill-transparent",
+	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 lineChartTheme };

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/dist/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.10.1",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",
@@ -41,6 +41,12 @@
   "engines": {
     "node": ">=20"
   },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit"
+  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -62,11 +68,5 @@
     "vitest": "^4.1.8",
     "vue": "^3.5.35",
     "vue-tsc": "^3.3.4"
-  },
-  "scripts": {
-    "build": "vite build && vue-tsc -p tsconfig.build.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "vue-tsc --noEmit"
   }
-}
+}

package/theme.css

@@ -77,6 +77,30 @@
   --iryx-info-muted: oklch(0.97 0.014 254.604);
   --iryx-info-muted-foreground: oklch(0.488 0.243 264.376);
   --iryx-info-border: oklch(0.882 0.059 254.128);
+
+  /*
+   * Categorical chart series. Identity only — which series a mark belongs to,
+   * never how large it is. Assign in order and never cycle: a ninth series
+   * folds into "Other" or becomes small multiples, because a generated ninth
+   * hue cannot be checked for the separation the first eight were chosen for.
+   *
+   * Status colours are deliberately NOT reused here. A series that happens to
+   * be slot 4 must never be mistaken for a warning.
+   *
+   * These steps are not eyeballed. They clear the lightness band, a chroma
+   * floor of 0.10, protanopia/deuteranopia separation and contrast against the
+   * surface, verified with the dataviz validator. Dark has its own steps,
+   * validated against the dark surface — not an automatic flip. Re-run the
+   * validator before changing any of them.
+   */
+  --iryx-chart-1: oklch(0.59 0.2 277);
+  --iryx-chart-2: oklch(0.68 0.17 50);
+  --iryx-chart-3: oklch(0.62 0.13 175);
+  --iryx-chart-4: oklch(0.75 0.16 90);
+  --iryx-chart-5: oklch(0.68 0.15 350);
+  --iryx-chart-6: oklch(0.52 0.14 145);
+  --iryx-chart-7: oklch(0.55 0.17 240);
+  --iryx-chart-8: oklch(0.58 0.21 25);
 }
 
 .dark {
@@ -116,6 +140,16 @@
   --iryx-info-muted: oklch(0.282 0.091 267.935);
   --iryx-info-muted-foreground: oklch(0.809 0.105 251.813);
   --iryx-info-border: oklch(0.379 0.146 265.522);
+
+  /* Chart series — their own steps, validated against the dark surface. */
+  --iryx-chart-1: oklch(0.62 0.19 277);
+  --iryx-chart-2: oklch(0.66 0.16 50);
+  --iryx-chart-3: oklch(0.62 0.13 175);
+  --iryx-chart-4: oklch(0.65 0.15 90);
+  --iryx-chart-5: oklch(0.65 0.15 350);
+  --iryx-chart-6: oklch(0.58 0.14 145);
+  --iryx-chart-7: oklch(0.6 0.16 240);
+  --iryx-chart-8: oklch(0.6 0.19 25);
 }
 
 @theme inline {
@@ -152,6 +186,14 @@
   --color-info-muted: var(--iryx-info-muted);
   --color-info-muted-foreground: var(--iryx-info-muted-foreground);
   --color-info-border: var(--iryx-info-border);
+  --color-chart-1: var(--iryx-chart-1);
+  --color-chart-2: var(--iryx-chart-2);
+  --color-chart-3: var(--iryx-chart-3);
+  --color-chart-4: var(--iryx-chart-4);
+  --color-chart-5: var(--iryx-chart-5);
+  --color-chart-6: var(--iryx-chart-6);
+  --color-chart-7: var(--iryx-chart-7);
+  --color-chart-8: var(--iryx-chart-8);
   --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
   --animate-fade-in: fade-in 150ms ease-out;
   --animate-fade-out: fade-out 150ms ease-in;

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

@@ -1,4 +0,0 @@
-//#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(".");
-//#endregion
-export { e as componentNames };