@optimum-intelligence/opti-ui 0.0.0-stage → 0.2.0

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {
+    ref?: React.Ref<HTMLSpanElement>;
+    width?: number | string;
+    height?: number | string;
+    /** Render as a circle (uses `width` for both dimensions). */
+    circle?: boolean;
+    radius?: number | string;
+}
+/** Pulsing placeholder for content that is still loading. */
+export declare function Skeleton({ width, height, circle, radius, className, style, ref, ...props }: SkeletonProps): React.JSX.Element;
+export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+    lines?: number;
+}
+export declare function SkeletonText({ lines, className, ref, ...props }: SkeletonTextProps): React.JSX.Element;

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,135 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton/Skeleton.tsx
+/** Pulsing placeholder for content that is still loading. */
+function Skeleton(t0) {
+	const $ = c(22);
+	let circle;
+	let className;
+	let height;
+	let props;
+	let radius;
+	let ref;
+	let style;
+	let width;
+	if ($[0] !== t0) {
+		({width, height, circle, radius, className, style, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = circle;
+		$[2] = className;
+		$[3] = height;
+		$[4] = props;
+		$[5] = radius;
+		$[6] = ref;
+		$[7] = style;
+		$[8] = width;
+	} else {
+		circle = $[1];
+		className = $[2];
+		height = $[3];
+		props = $[4];
+		radius = $[5];
+		ref = $[6];
+		style = $[7];
+		width = $[8];
+	}
+	let t1;
+	if ($[9] !== className) {
+		t1 = cx("oui-skeleton", className);
+		$[9] = className;
+		$[10] = t1;
+	} else t1 = $[10];
+	const t2 = circle || void 0;
+	const t3 = circle ? width : height;
+	let t4;
+	if ($[11] !== radius || $[12] !== style || $[13] !== t3 || $[14] !== width) {
+		t4 = {
+			width,
+			height: t3,
+			borderRadius: radius,
+			...style
+		};
+		$[11] = radius;
+		$[12] = style;
+		$[13] = t3;
+		$[14] = width;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== props || $[17] !== ref || $[18] !== t1 || $[19] !== t2 || $[20] !== t4) {
+		t5 = /* @__PURE__ */ jsx("span", {
+			ref,
+			"aria-hidden": true,
+			className: t1,
+			"data-circle": t2,
+			style: t4,
+			...props
+		});
+		$[16] = props;
+		$[17] = ref;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t4;
+		$[21] = t5;
+	} else t5 = $[21];
+	return t5;
+}
+function SkeletonText(t0) {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let t1;
+	if ($[0] !== t0) {
+		({lines: t1, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		t1 = $[4];
+	}
+	const lines = t1 === void 0 ? 3 : t1;
+	let t2;
+	if ($[5] !== className) {
+		t2 = cx("oui-skeleton-text", className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== lines) {
+		t3 = Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(Skeleton, {
+			height: "0.8rem",
+			width: i === lines - 1 && lines > 1 ? "60%" : "100%"
+		}, i));
+		$[7] = lines;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== props || $[10] !== ref || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			ref,
+			"aria-hidden": true,
+			className: t2,
+			...props,
+			children: t3
+		});
+		$[9] = props;
+		$[10] = ref;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+//#endregion
+export { Skeleton, SkeletonText };
+
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":["React","cx","SkeletonProps","HTMLAttributes","HTMLSpanElement","ref","Ref","width","height","circle","radius","Skeleton","t0","$","_c","className","props","style","t1","t2","undefined","t3","t4","borderRadius","t5","SkeletonTextProps","HTMLDivElement","lines","SkeletonText","Array","from","length","_","i","_c"],"sources":["../../../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {\n  ref?: React.Ref<HTMLSpanElement>;\n  width?: number | string;\n  height?: number | string;\n  /** Render as a circle (uses `width` for both dimensions). */\n  circle?: boolean;\n  radius?: number | string;\n}\n\n/** Pulsing placeholder for content that is still loading. */\nexport function Skeleton({ width, height, circle, radius, className, style, ref, ...props }: SkeletonProps) {\n  return (\n    <span\n      ref={ref}\n      aria-hidden\n      className={cx('oui-skeleton', className)}\n      data-circle={circle || undefined}\n      style={{\n        width,\n        height: circle ? width : height,\n        borderRadius: radius,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement>;\n  lines?: number;\n}\n\nexport function SkeletonText({ lines = 3, className, ref, ...props }: SkeletonTextProps) {\n  return (\n    <div ref={ref} aria-hidden className={cx('oui-skeleton-text', className)} {...props}>\n      {Array.from({ length: lines }, (_, i) => (\n        <Skeleton key={i} height=\"0.8rem\" width={i === lines - 1 && lines > 1 ? '60%' : '100%'} />\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+export interface SliderProps extends BaseSlider.Root.Props {
+    label?: React.ReactNode;
+    /** Show the formatted value next to the label. */
+    showValue?: boolean;
+    /** Accessible labels for each thumb (needed for range sliders). */
+    thumbLabels?: string[];
+}
+/** Single value or range (pass an array) slider. */
+export declare function Slider({ label, showValue, thumbLabels, className, value, defaultValue, ref, ...props }: SliderProps): React.JSX.Element;

package/dist/components/slider/Slider.js

@@ -0,0 +1,107 @@
+"use client";
+import { withClass } from "../../utils/cx.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+//#region src/components/slider/Slider.tsx
+/** Single value or range (pass an array) slider. */
+function Slider$1(t0) {
+	const $ = c(26);
+	let className;
+	let defaultValue;
+	let label;
+	let props;
+	let ref;
+	let showValue;
+	let thumbLabels;
+	let value;
+	if ($[0] !== t0) {
+		({label, showValue, thumbLabels, className, value, defaultValue, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = defaultValue;
+		$[3] = label;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = showValue;
+		$[7] = thumbLabels;
+		$[8] = value;
+	} else {
+		className = $[1];
+		defaultValue = $[2];
+		label = $[3];
+		props = $[4];
+		ref = $[5];
+		showValue = $[6];
+		thumbLabels = $[7];
+		value = $[8];
+	}
+	const initial = value ?? defaultValue;
+	const count = Array.isArray(initial) ? initial.length : 1;
+	let t1;
+	if ($[9] !== className) {
+		t1 = withClass("oui-slider", className);
+		$[9] = className;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== label || $[12] !== showValue) {
+		t2 = (label || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: "oui-slider__header",
+			children: [label && /* @__PURE__ */ jsx(Slider.Label, {
+				className: "oui-field__label",
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Slider.Value, { className: "oui-slider__value" })]
+		});
+		$[11] = label;
+		$[12] = showValue;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Slider.Indicator, { className: "oui-slider__indicator" });
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== count || $[16] !== thumbLabels) {
+		t4 = /* @__PURE__ */ jsx(Slider.Control, {
+			className: "oui-slider__control",
+			children: /* @__PURE__ */ jsxs(Slider.Track, {
+				className: "oui-slider__track",
+				children: [t3, Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
+					index: count > 1 ? index : void 0,
+					className: "oui-slider__thumb",
+					"aria-label": thumbLabels?.[index]
+				}, index))]
+			})
+		});
+		$[15] = count;
+		$[16] = thumbLabels;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== defaultValue || $[19] !== props || $[20] !== ref || $[21] !== t1 || $[22] !== t2 || $[23] !== t4 || $[24] !== value) {
+		t5 = /* @__PURE__ */ jsxs(Slider.Root, {
+			ref,
+			className: t1,
+			value,
+			defaultValue,
+			...props,
+			children: [t2, t4]
+		});
+		$[18] = defaultValue;
+		$[19] = props;
+		$[20] = ref;
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t4;
+		$[24] = value;
+		$[25] = t5;
+	} else t5 = $[25];
+	return t5;
+}
+//#endregion
+export { Slider$1 as Slider };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["React","Slider","BaseSlider","withClass","SliderProps","Root","Props","label","ReactNode","showValue","thumbLabels","t0","$","_c","className","defaultValue","props","ref","value","initial","count","Array","isArray","length","t1","t2","t3","Symbol","for","t4","from","_","index","undefined","t5","Slider","_c","BaseSlider"],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Slider as BaseSlider } from '@base-ui/react/slider';\nimport { withClass } from '../../utils/cx';\n\nexport interface SliderProps extends BaseSlider.Root.Props {\n  label?: React.ReactNode;\n  /** Show the formatted value next to the label. */\n  showValue?: boolean;\n  /** Accessible labels for each thumb (needed for range sliders). */\n  thumbLabels?: string[];\n}\n\n/** Single value or range (pass an array) slider. */\nexport function Slider({ label, showValue, thumbLabels, className, value, defaultValue, ref, ...props }: SliderProps) {\n  const initial = value ?? defaultValue;\n  const count = Array.isArray(initial) ? initial.length : 1;\n  return (\n    <BaseSlider.Root\n      ref={ref}\n      className={withClass('oui-slider', className)}\n      value={value}\n      defaultValue={defaultValue}\n      {...props}\n    >\n      {(label || showValue) && (\n        <div className=\"oui-slider__header\">\n          {label && <BaseSlider.Label className=\"oui-field__label\">{label}</BaseSlider.Label>}\n          {showValue && <BaseSlider.Value className=\"oui-slider__value\" />}\n        </div>\n      )}\n      <BaseSlider.Control className=\"oui-slider__control\">\n        <BaseSlider.Track className=\"oui-slider__track\">\n          <BaseSlider.Indicator className=\"oui-slider__indicator\" />\n          {Array.from({ length: count }, (_, index) => (\n            <BaseSlider.Thumb\n              key={index}\n              index={count > 1 ? index : undefined}\n              className=\"oui-slider__thumb\"\n              aria-label={thumbLabels?.[index]}\n            />\n          ))}\n        </BaseSlider.Track>\n      </BaseSlider.Control>\n    </BaseSlider.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    ref?: React.Ref<HTMLSpanElement>;
+    /** Diameter, e.g. `1rem` or `24`. Defaults to `1.25em`. */
+    size?: number | string;
+    /** Accessible label. Set to `null` when a parent already announces loading. */
+    label?: string | null;
+}
+export declare function Spinner({ size, label, className, style, ref, ...props }: SpinnerProps): React.JSX.Element;

package/dist/components/spinner/Spinner.js

@@ -0,0 +1,78 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/Spinner.tsx
+function Spinner(t0) {
+	const $ = c(20);
+	let className;
+	let props;
+	let ref;
+	let size;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({size, label: t1, className, style, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = size;
+		$[5] = style;
+		$[6] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		size = $[4];
+		style = $[5];
+		t1 = $[6];
+	}
+	const label = t1 === void 0 ? "Loading" : t1;
+	const t2 = label ? "status" : void 0;
+	const t3 = label ?? void 0;
+	const t4 = label ? void 0 : true;
+	let t5;
+	if ($[7] !== className) {
+		t5 = cx("oui-spinner", className);
+		$[7] = className;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== size || $[10] !== style) {
+		t6 = size != null ? {
+			width: size,
+			height: size,
+			...style
+		} : style;
+		$[9] = size;
+		$[10] = style;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== props || $[13] !== ref || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			ref,
+			role: t2,
+			"aria-label": t3,
+			"aria-hidden": t4,
+			className: t5,
+			style: t6,
+			...props
+		});
+		$[12] = props;
+		$[13] = ref;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/components/spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":["React","cx","SpinnerProps","HTMLAttributes","HTMLSpanElement","ref","Ref","size","label","Spinner","t0","$","_c","className","props","style","t1","undefined","t2","t3","t4","t5","t6","width","height","t7","_c"],"sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  ref?: React.Ref<HTMLSpanElement>;\n  /** Diameter, e.g. `1rem` or `24`. Defaults to `1.25em`. */\n  size?: number | string;\n  /** Accessible label. Set to `null` when a parent already announces loading. */\n  label?: string | null;\n}\n\nexport function Spinner({ size, label = 'Loading', className, style, ref, ...props }: SpinnerProps) {\n  return (\n    <span\n      ref={ref}\n      role={label ? 'status' : undefined}\n      aria-label={label ?? undefined}\n      aria-hidden={label ? undefined : true}\n      className={cx('oui-spinner', className)}\n      style={size != null ? { width: size, height: size, ...style } : style}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAOS,QAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAE;CAAA,IAAAQ;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAiB,CAAA,CAAAH,MAAAC,OAAAQ,IAAAH,WAAAE,OAAAV,KAAA,GAAAS,SAAAJ;EAA0EC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAN;EAAAM,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,YAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAN,MAAAM,EAAA;EAAAJ,OAAAI,EAAA;EAAAI,QAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAlE,MAAAH,QAAAQ,OAAAC,KAAAA,IAAA,YAAAD;CAIpB,MAAAE,KAAAV,QAAA,WAAAS,KAAAA;CACM,MAAAE,KAAAX,SAAAS,KAAAA;CACC,MAAAG,KAAAZ,QAAAS,KAAAA,IAAA;CAAwB,IAAAI;CAAA,IAAAV,EAAA,OAAAE,WAAA;EAC1BQ,KAAApB,GAAG,eAAeY,SAAS;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAJ,QAAAI,EAAA,QAAAI,OAAA;EAChCO,KAAAf,QAAQ,OAAR;GAAAgB,OAAwBhB;GAAIiB,QAAUjB;GAAI,GAAKQ;EAAc,IAA7DA;EAA8DJ,EAAA,KAAAJ;EAAAI,EAAA,MAAAI;EAAAJ,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAG,SAAAH,EAAA,QAAAN,OAAAM,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,MAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAW,IAAA;EANvEG,KAAA,oBAAA,QAAA;GACOpB;GACC,MAAAa;GACM,cAAAC;GACC,eAAAC;GACF,WAAAC;GACJ,OAAAC;GAA8D,GACjER;EAAK,CAAA;EACTH,EAAA,MAAAG;EAAAH,EAAA,MAAAN;EAAAM,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARFc;AAQE"}

package/dist/components/stack/Stack.d.ts

@@ -0,0 +1,23 @@
+import { useRender } from '@base-ui/react/use-render';
+export type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type StackState = {
+    direction: 'column' | 'row';
+    gap: StackGap;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap: boolean;
+};
+export interface StackProps extends useRender.ComponentProps<'div', StackState> {
+    /** `column` (default) stacks children, `row` puts them on a line. */
+    direction?: StackState['direction'];
+    /** Space between children. Override with `--oui-stack-gap`. */
+    gap?: StackGap;
+    /** Cross-axis alignment. Defaults to `stretch` in a column and `center` in a row. */
+    align?: StackState['align'];
+    /** Main-axis distribution. */
+    justify?: StackState['justify'];
+    /** Let a row's children wrap onto more lines. */
+    wrap?: boolean;
+}
+/** Flex container that spaces its children evenly, in a column or a row. */
+export declare function Stack({ direction, gap, align, justify, wrap, render, ref, ...props }: StackProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/stack/Stack.js

@@ -0,0 +1,79 @@
+"use client";
+import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
+//#region src/components/stack/Stack.tsx
+/** Flex container that spaces its children evenly, in a column or a row. */
+function Stack(t0) {
+	const $ = c(19);
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] !== t0) {
+		const { direction: t7, gap: t8, align, justify, wrap: t9, render, ref, ...props } = t0;
+		const direction = t7 === void 0 ? "column" : t7;
+		const gap = t8 === void 0 ? "md" : t8;
+		const wrap = t9 === void 0 ? false : t9;
+		let t10;
+		if ($[7] !== align || $[8] !== direction || $[9] !== gap || $[10] !== justify || $[11] !== wrap) {
+			t10 = {
+				direction,
+				gap,
+				align,
+				justify,
+				wrap
+			};
+			$[7] = align;
+			$[8] = direction;
+			$[9] = gap;
+			$[10] = justify;
+			$[11] = wrap;
+			$[12] = t10;
+		} else t10 = $[12];
+		const state = t10;
+		t6 = useRender;
+		t1 = "div";
+		t2 = render;
+		t3 = ref;
+		t4 = state;
+		t5 = mergeProps({ className: "oui-stack" }, props);
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+		$[4] = t4;
+		$[5] = t5;
+		$[6] = t6;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+		t3 = $[3];
+		t4 = $[4];
+		t5 = $[5];
+		t6 = $[6];
+	}
+	let t7;
+	if ($[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
+		t7 = {
+			defaultTagName: t1,
+			render: t2,
+			ref: t3,
+			state: t4,
+			props: t5
+		};
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t7;
+	} else t7 = $[18];
+	return t6(t7);
+}
+//#endregion
+export { Stack };
+
+//# sourceMappingURL=Stack.js.map

package/dist/components/stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","names":["useRender","mergeProps","StackGap","StackState","direction","gap","align","justify","wrap","StackProps","ComponentProps","Stack","t0","$","_c","t1","t2","t3","t4","t5","t6","t7","t8","t9","render","ref","props","undefined","t10","state","className","defaultTagName","_c"],"sources":["../../../src/components/stack/Stack.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport { mergeProps } from '@base-ui/react/merge-props';\n\nexport type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type StackState = {\n  direction: 'column' | 'row';\n  gap: StackGap;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap: boolean;\n};\n\nexport interface StackProps extends useRender.ComponentProps<'div', StackState> {\n  /** `column` (default) stacks children, `row` puts them on a line. */\n  direction?: StackState['direction'];\n  /** Space between children. Override with `--oui-stack-gap`. */\n  gap?: StackGap;\n  /** Cross-axis alignment. Defaults to `stretch` in a column and `center` in a row. */\n  align?: StackState['align'];\n  /** Main-axis distribution. */\n  justify?: StackState['justify'];\n  /** Let a row's children wrap onto more lines. */\n  wrap?: boolean;\n}\n\n/** Flex container that spaces its children evenly, in a column or a row. */\nexport function Stack({\n  direction = 'column',\n  gap = 'md',\n  align,\n  justify,\n  wrap = false,\n  render,\n  ref,\n  ...props\n}: StackProps) {\n  const state: StackState = { direction, gap, align, justify, wrap };\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref,\n    state,\n    props: mergeProps<'div'>({ className: 'oui-stack' }, props),\n  });\n}\n"],"mappings":";;;;;;AA2BA,SAAOW,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAR,WAAAiB,IAAAhB,KAAAiB,IAAAhB,OAAAC,SAAAC,MAAAe,IAAAC,QAAAC,KAAA,GAAAC,UAAAd;EACpB,MAAAR,YAAAiB,OAAAM,KAAAA,IAAA,WAAAN;EACA,MAAAhB,MAAAiB,OAAAK,KAAAA,IAAA,OAAAL;EAGA,MAAAd,OAAAe,OAAAI,KAAAA,IAAA,QAAAJ;EAAY,IAAAK;EAAA,IAAAf,EAAA,OAAAP,SAAAO,EAAA,OAAAT,aAAAS,EAAA,OAAAR,OAAAQ,EAAA,QAAAN,WAAAM,EAAA,QAAAL,MAAA;GAKcoB,MAAA;IAAAxB;IAAAC;IAAAC;IAAAC;IAAAC;GAAuC;GAACK,EAAA,KAAAP;GAAAO,EAAA,KAAAT;GAAAS,EAAA,KAAAR;GAAAQ,EAAA,MAAAN;GAAAM,EAAA,MAAAL;GAAAK,EAAA,MAAAe;EAAA,OAAAA,MAAAf,EAAA;EAAlE,MAAAgB,QAA0BD;EACnB5B,KAAAA;EACWe,KAAA;EAChBS,KAAAA;EACAC,KAAAA;EACAI,KAAAA;EACOV,KAAAlB,WAAkB,EAAA6B,WAAa,YAAY,GAAGJ,KAAK;EAACb,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAL5CE,KAAA;GAAAU,gBACChB;GAAKS,QACrBA;GAAMC,KACNA;GAAGI,OACHA;GAAKH,OACEP;EACT;EAACN,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OANMb,GAAUqB,EAMhB;AAAC"}

package/dist/components/stat-card/StatCard.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { type CardProps } from '../card/Card';
+export type StatTrend = 'up' | 'down' | 'flat';
+export type StatTone = 'positive' | 'negative' | 'neutral';
+export interface StatCardProps extends Omit<CardProps, 'children'> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** Small uppercase unit under the value, e.g. "kWh" or "orders". */
+    unit?: React.ReactNode;
+    /** Change indicator, e.g. "+12.4%". */
+    delta?: React.ReactNode;
+    trend?: StatTrend;
+    /** Color of the delta. Defaults to positive for `up`, negative for `down`. */
+    tone?: StatTone;
+    /** Supporting text under the value. */
+    hint?: React.ReactNode;
+    /** Icon tile shown in the top-right corner. */
+    icon?: React.ReactNode;
+    loading?: boolean;
+}
+/** KPI tile: label, large value, optional unit and trend. */
+export declare function StatCard({ label, value, unit, delta, trend, tone, hint, icon, loading, className, ref, ...props }: StatCardProps): React.JSX.Element;

package/dist/components/stat-card/StatCard.js

@@ -0,0 +1,153 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { TrendingDownIcon, TrendingUpIcon } from "../../icons/index.js";
+import { Card } from "../card/Card.js";
+import { Skeleton } from "../skeleton/Skeleton.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/stat-card/StatCard.tsx
+/** KPI tile: label, large value, optional unit and trend. */
+function StatCard(t0) {
+	const $ = c(36);
+	let className;
+	let delta;
+	let hint;
+	let icon;
+	let label;
+	let loading;
+	let props;
+	let ref;
+	let tone;
+	let trend;
+	let unit;
+	let value;
+	if ($[0] !== t0) {
+		({label, value, unit, delta, trend, tone, hint, icon, loading, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = delta;
+		$[3] = hint;
+		$[4] = icon;
+		$[5] = label;
+		$[6] = loading;
+		$[7] = props;
+		$[8] = ref;
+		$[9] = tone;
+		$[10] = trend;
+		$[11] = unit;
+		$[12] = value;
+	} else {
+		className = $[1];
+		delta = $[2];
+		hint = $[3];
+		icon = $[4];
+		label = $[5];
+		loading = $[6];
+		props = $[7];
+		ref = $[8];
+		tone = $[9];
+		trend = $[10];
+		unit = $[11];
+		value = $[12];
+	}
+	const resolvedTone = tone ?? (trend === "up" ? "positive" : trend === "down" ? "negative" : "neutral");
+	let t1;
+	if ($[13] !== className) {
+		t1 = cx("oui-stat", className);
+		$[13] = className;
+		$[14] = t1;
+	} else t1 = $[14];
+	let t2;
+	if ($[15] !== label) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			className: "oui-stat__label",
+			children: label
+		});
+		$[15] = label;
+		$[16] = t2;
+	} else t2 = $[16];
+	let t3;
+	if ($[17] !== icon) {
+		t3 = icon && /* @__PURE__ */ jsx("span", {
+			className: "oui-stat__icon",
+			children: icon
+		});
+		$[17] = icon;
+		$[18] = t3;
+	} else t3 = $[18];
+	let t4;
+	if ($[19] !== t2 || $[20] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: "oui-stat__header",
+			children: [t2, t3]
+		});
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+	} else t4 = $[21];
+	let t5;
+	if ($[22] !== delta || $[23] !== hint || $[24] !== loading || $[25] !== resolvedTone || $[26] !== trend || $[27] !== unit || $[28] !== value) {
+		t5 = loading ? /* @__PURE__ */ jsxs("div", {
+			className: "oui-stat__loading",
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				height: "2.25rem",
+				width: "55%"
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				height: "0.9rem",
+				width: "35%"
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "oui-stat__body",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "oui-stat__value",
+				children: value
+			}), unit && /* @__PURE__ */ jsx("p", {
+				className: "oui-stat__unit",
+				children: unit
+			})]
+		}), (delta || hint) && /* @__PURE__ */ jsxs("div", {
+			className: "oui-stat__footer",
+			children: [delta && /* @__PURE__ */ jsxs("span", {
+				className: "oui-stat__delta",
+				"data-tone": resolvedTone,
+				children: [
+					trend === "up" && /* @__PURE__ */ jsx(TrendingUpIcon, {}),
+					trend === "down" && /* @__PURE__ */ jsx(TrendingDownIcon, {}),
+					delta
+				]
+			}), hint && /* @__PURE__ */ jsx("span", {
+				className: "oui-stat__hint",
+				children: hint
+			})]
+		})] });
+		$[22] = delta;
+		$[23] = hint;
+		$[24] = loading;
+		$[25] = resolvedTone;
+		$[26] = trend;
+		$[27] = unit;
+		$[28] = value;
+		$[29] = t5;
+	} else t5 = $[29];
+	let t6;
+	if ($[30] !== props || $[31] !== ref || $[32] !== t1 || $[33] !== t4 || $[34] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Card, {
+			ref,
+			className: t1,
+			...props,
+			children: [t4, t5]
+		});
+		$[30] = props;
+		$[31] = ref;
+		$[32] = t1;
+		$[33] = t4;
+		$[34] = t5;
+		$[35] = t6;
+	} else t6 = $[35];
+	return t6;
+}
+//#endregion
+export { StatCard };
+
+//# sourceMappingURL=StatCard.js.map