@bysages/react 0.4.1 → 0.4.2

package/dist/components/ai-prompt-input/index.mjs

@@ -12,18 +12,9 @@ const arrowUpIcon = iconNode("arrow-up", {
 	width: 14,
 	height: 14
 });
-const stopIcon = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 16 16",
+const stopIcon = iconNode("square", {
 	width: 14,
-	height: 14,
-	"aria-hidden": "true",
-	children: /* @__PURE__ */ jsx("rect", {
-		x: 4.5,
-		y: 4.5,
-		width: 7,
-		height: 7,
-		fill: "currentColor"
-	})
+	height: 14
 });
 /** An empty slot leaves no part in the anatomy — the bare vessel keeps
 * its single-line posture. */

package/dist/components/calendar/index.d.mts

@@ -2,18 +2,29 @@ import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { HTMLAttributes } from "react";
 import { DatePickerRootProps } from "@ark-ui/react/date-picker";
 //#region src/components/calendar/index.d.ts
-export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
+export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   /** Selected date(s) — an array, as the machine speaks in ranges. */
   value?: DatePickerRootProps["value"];
+  defaultValue?: DatePickerRootProps["defaultValue"];
   min?: DatePickerRootProps["min"];
   max?: DatePickerRootProps["max"];
+  /** compact keeps the popup's measure; full gives cells room for content. */
+  variant?: "compact" | "full";
+  /** month is the day grid; year starts on a month overview. */
+  mode?: "month" | "year";
+  selectionMode?: DatePickerRootProps["selectionMode"];
+  startOfWeek?: number;
+  fixedWeeks?: boolean;
+  showWeekNumbers?: boolean;
+  outsideDaySelectable?: boolean;
+  closeOnSelect?: boolean;
+  minView?: DatePickerRootProps["minView"];
+  maxView?: DatePickerRootProps["maxView"];
   onValueChange?: (value: NonNullable<DatePickerRootProps["value"]>) => void;
 }
-/** The date-picker's month grid, standing on the page without its
- * popup: always open, the trigger gone, the vessel a quiet card. The
- * title zooms out through month and year grids; the grids themselves
- * are the shared machinery — value, range selection, and focus ride
- * Ark's own contract. */
-declare function CalendarImpl({ value, min, max, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
+/** The date-picker's grid standing on the page. Compact is the popup's
+ * quiet card; full opens it into a dashboard calendar. Year mode starts
+ * on a month overview; choosing a month drills into its day grid. */
+declare function CalendarImpl({ value, defaultValue, min, max, variant, mode, selectionMode, startOfWeek, fixedWeeks, showWeekNumbers, outsideDaySelectable, closeOnSelect, minView, maxView, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
 export declare const Calendar: typeof CalendarImpl & typeof DatePicker$1;
 //#endregion

package/dist/components/calendar/index.mjs

@@ -2,7 +2,7 @@ import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker } from "@ark-ui/react/date-picker";
 //#region src/components/calendar/index.tsx
 function chevron(dir) {
@@ -11,81 +11,117 @@ function chevron(dir) {
 		height: 16
 	});
 }
-/** The date-picker's month grid, standing on the page without its
-* popup: always open, the trigger gone, the vessel a quiet card. The
-* title zooms out through month and year grids; the grids themselves
-* are the shared machinery — value, range selection, and focus ride
-* Ark's own contract. */
-function CalendarImpl({ value, min, max, onValueChange, children, ...rest }) {
+/** The date-picker's grid standing on the page. Compact is the popup's
+* quiet card; full opens it into a dashboard calendar. Year mode starts
+* on a month overview; choosing a month drills into its day grid. */
+function CalendarImpl({ value, defaultValue, min, max, variant = "compact", mode = "month", selectionMode, startOfWeek, fixedWeeks = false, showWeekNumbers = false, outsideDaySelectable = true, closeOnSelect = true, minView, maxView, onValueChange, children, ...rest }) {
 	injectComponentStyle("calendar");
 	injectComponentStyle("date-picker");
 	const hostId = useElementId("calendar", rest);
 	const title = (dp) => {
-		const d = dp.focusedValue;
-		if (!d) return "";
-		if (dp.view === "day") return dp.format(d, {
+		const date = dp.focusedValue;
+		if (!date) return "";
+		if (dp.view === "month") return dp.format(date, { year: "numeric" });
+		if (dp.view === "day") return dp.format(date, {
 			month: "long",
 			year: "numeric"
 		});
-		if (dp.view === "month") return dp.format(d, { year: "numeric" });
-		const decade = Math.floor(d.year / 10) * 10;
+		const decade = Math.floor(date.year / 10) * 10;
 		return `${decade} - ${decade + 9}`;
 	};
-	const header = /* @__PURE__ */ jsx("div", {
+	const header = (dp) => /* @__PURE__ */ jsx("div", {
 		"data-scope": "calendar",
 		"data-part": "header",
 		children: /* @__PURE__ */ jsxs(DatePicker.ViewControl, { children: [
 			/* @__PURE__ */ jsx(DatePicker.PrevTrigger, { children: chevron("left") }),
-			/* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => /* @__PURE__ */ jsx(DatePicker.ViewTrigger, { children: title(dp) }) }),
+			/* @__PURE__ */ jsx(DatePicker.Context, { children: (context) => /* @__PURE__ */ jsx(DatePicker.ViewTrigger, { children: title(context) }) }),
+			variant === "full" && dp ? todayTrigger(dp) : null,
 			/* @__PURE__ */ jsx(DatePicker.NextTrigger, { children: chevron("right") })
 		] })
 	});
+	const todayTrigger = (dp) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-scope": "calendar",
+		"data-part": "today-trigger",
+		onClick: () => {
+			dp.selectToday();
+			if (mode === "year" && dp.view === "month") dp.setView("day");
+		},
+		children: "Today"
+	});
+	const dayTable = (dp) => {
+		const weeks = dp.weeks;
+		return /* @__PURE__ */ jsxs(DatePicker.Table, { children: [/* @__PURE__ */ jsx(DatePicker.TableHead, { children: /* @__PURE__ */ jsxs(DatePicker.TableRow, { children: [showWeekNumbers ? /* @__PURE__ */ jsx(DatePicker.WeekNumberHeaderCell, { children: "Wk" }) : null, dp.weekDays.map((day, id) => /* @__PURE__ */ jsx(DatePicker.TableHeader, {
+			"aria-label": day.long,
+			children: day.narrow
+		}, id))] }) }), /* @__PURE__ */ jsx(DatePicker.TableBody, { children: weeks.map((week, id) => /* @__PURE__ */ jsxs(DatePicker.TableRow, { children: [showWeekNumbers ? /* @__PURE__ */ jsx(DatePicker.WeekNumberCell, {
+			weekIndex: id,
+			week,
+			children: dp.getWeekNumber(week)
+		}, "week") : null, week.map((day, cellId) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
+			value: day,
+			children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: day.day })
+		}, cellId))] }, id)) })] });
+	};
+	const monthGrid = (dp, columns) => /* @__PURE__ */ jsx(DatePicker.Table, {
+		columns,
+		children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: dp.getMonthsGrid({
+			columns,
+			format: columns === 4 ? "short" : "long"
+		}).map((months, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: months.map((month, monthId) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
+			value: month.value,
+			columns,
+			children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: month.label })
+		}, monthId)) }, id)) })
+	});
+	const yearGrid = (dp) => /* @__PURE__ */ jsx(DatePicker.Table, {
+		columns: 3,
+		children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: dp.getYearsGrid({ columns: 3 }).map((years, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: years.map((year, yearId) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
+			value: year.value,
+			columns: 3,
+			children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: year.label })
+		}, yearId)) }, id)) })
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		"data-scope": "calendar",
 		"data-part": "root",
+		"data-variant": variant,
+		"data-mode": mode,
 		children: [/* @__PURE__ */ jsxs(DatePicker.Root, {
 			id: `${hostId}:date-picker`,
 			open: true,
-			closeOnSelect: true,
 			inline: true,
+			closeOnSelect,
+			outsideDaySelectable,
 			...value !== void 0 ? { value } : {},
+			...defaultValue !== void 0 ? { defaultValue } : {},
 			...min !== void 0 ? { min } : {},
 			...max !== void 0 ? { max } : {},
+			...selectionMode !== void 0 ? { selectionMode } : {},
+			...startOfWeek !== void 0 ? { startOfWeek } : {},
+			fixedWeeks: fixedWeeks || variant === "full",
+			showWeekNumbers,
+			...minView !== void 0 ? { minView } : {},
+			...maxView !== void 0 ? { maxView } : {},
+			...mode === "year" ? {
+				defaultView: "month",
+				maxView: "month"
+			} : {},
 			onValueChange: (details) => onValueChange?.(details.value),
 			children: [
-				/* @__PURE__ */ jsxs(DatePicker.View, {
+				/* @__PURE__ */ jsx(DatePicker.View, {
 					view: "day",
-					children: [header, /* @__PURE__ */ jsxs(DatePicker.Table, { children: [/* @__PURE__ */ jsx(DatePicker.TableHead, { children: /* @__PURE__ */ jsx(DatePicker.TableRow, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.weekDays.map((day, id) => /* @__PURE__ */ jsx(DatePicker.TableHeader, {
-						"aria-label": day.long,
-						children: day.narrow
-					}, id)) }) }) }), /* @__PURE__ */ jsx(DatePicker.TableBody, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.weeks.map((week, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
-						value: day,
-						children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: day.day })
-					}, id2)) }, id)) }) })] })]
+					children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [header(dp), dayTable(dp)] }) })
 				}),
-				/* @__PURE__ */ jsxs(DatePicker.View, {
+				/* @__PURE__ */ jsx(DatePicker.View, {
 					view: "month",
-					children: [header, /* @__PURE__ */ jsx(DatePicker.Table, {
-						columns: 3,
-						children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.getMonthsGrid({ columns: 3 }).map((months, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
-							value: month.value,
-							columns: 3,
-							children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: month.label })
-						}, id2)) }, id)) }) })
-					})]
+					children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [header(dp), monthGrid(dp, mode === "year" ? 4 : 3)] }) })
 				}),
-				/* @__PURE__ */ jsxs(DatePicker.View, {
+				mode === "month" ? /* @__PURE__ */ jsx(DatePicker.View, {
 					view: "year",
-					children: [header, /* @__PURE__ */ jsx(DatePicker.Table, {
-						columns: 3,
-						children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.getYearsGrid({ columns: 3 }).map((years, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
-							value: year.value,
-							columns: 3,
-							children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: year.label })
-						}, id2)) }, id)) }) })
-					})]
-				})
+					children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [header(), yearGrid(dp)] }) })
+				}) : null
 			]
 		}), children]
 	});

package/dist/components/chip/index.d.mts

@@ -5,7 +5,7 @@ import { HTMLAttributes } from "react";
 export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
   value: number;
   max?: number;
-  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  tone?: "ink" | "primary" | "success" | "warning" | "danger" | "info";
   variant?: "solid" | "subtle" | "outline";
 }
 declare function ChipImpl({ value, max, tone, variant, ...rest }: ChipProps): import("react").JSX.Element;

package/dist/components/form/index.d.mts

@@ -1,2 +1,48 @@
-import { a as useField, c as FieldApi, i as FormProps, n as FormField, o as useForm, r as FormFieldProps, s as FormApi, t as Form } from "../../index-PsgGWW3m.mjs";
-export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, useField, useForm };
+import { ComponentType, HTMLAttributes, ReactNode } from "react";
+import { FieldApi, FormApi, useField, useForm } from "@tanstack/react-form";
+//#region src/components/form/index.d.ts
+/** The seam this family passes the engine through — the members the
+ * components drive, with the engine's field-name generics opened to
+ * `any`. The engine ships no "any form" alias: its loosest, `FormLikeAPI`,
+ * still pins names to `string`, which a concrete form's literal names
+ * cannot satisfy. */
+interface AnyFormApi {
+  handleSubmit(): Promise<unknown>;
+  setFieldMeta(field: any, updater: (prev: any) => any): void;
+  Field: ComponentType<any>;
+}
+/** The form element itself: native submit interception handing the event
+ * to the engine, one grid, one spacing voice. */
+export interface FormProps extends HTMLAttributes<HTMLFormElement> {
+  form: AnyFormApi;
+}
+declare function FormImpl({ form, children, ...rest }: FormProps): import("react").JSX.Element;
+export declare const Form: typeof FormImpl & {
+  Root: typeof FormImpl;
+};
+/**
+ * The named slot in the grid: label, control, hint — and the engine's
+ * errors for this name, shown through the same parts the standalone
+ * Field family styles. The children may be a render receiving the live
+ * TanStack field (value, handleChange, handleBlur, full state), so every
+ * capability the engine has is right there where the control is wired.
+ * Without a Form above it degrades to a plain labelled field.
+ */
+export interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  form?: AnyFormApi;
+  name: string;
+  /** The engine's validator slots for this name (onChange, onBlur, ...). */
+  validators?: any;
+  label?: string;
+  hint?: string;
+  required?: boolean;
+  invalid?: boolean;
+  disabled?: boolean;
+  children?: ReactNode | ((field: any) => ReactNode);
+}
+declare function FormFieldImpl({ form: formProp, name, label, hint, required, invalid, disabled, children, ...rest }: FormFieldProps): import("react").JSX.Element;
+export declare const FormField: typeof FormFieldImpl & {
+  Root: typeof FormFieldImpl;
+};
+//#endregion
+export { type FieldApi, type FormApi, useField, useForm };

package/dist/components/pagination/index.d.mts

@@ -21,6 +21,8 @@ type PaginationFacadeProps = {
   siblingCount?: number;
   label?: string;
   size?: "sm" | "md" | "lg";
+  /** full is the page-seal ladder; simple keeps prev, the count, next. */
+  variant?: "default" | "simple";
   className?: string;
   style?: CSSProperties;
   onValueChange?: (page: number) => void;

package/dist/components/pagination/index.mjs

@@ -1,7 +1,7 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Pagination as Pagination$1 } from "@ark-ui/react/pagination";
 //#region src/components/pagination/index.tsx
 function PaginationRoot(props) {
@@ -19,8 +19,8 @@ const PaginationNextTrigger = Pagination$1.NextTrigger;
 /** The complete pagination bar behind one page: count and page size become
 * the visible ladder, with edge semantics left to anatomy. */
 function PaginationFacade(props) {
-	const { value, defaultValue, count = 0, pageSize, defaultPageSize, siblingCount = 1, label, size = "md", className, style, onValueChange } = props;
-	return /* @__PURE__ */ jsxs(PaginationRoot, {
+	const { value, defaultValue, count = 0, pageSize, defaultPageSize, siblingCount = 1, label, size = "md", variant = "default", className, style, onValueChange } = props;
+	return /* @__PURE__ */ jsx(PaginationRoot, {
 		size,
 		"aria-label": label,
 		count,
@@ -29,10 +29,35 @@ function PaginationFacade(props) {
 		...pageSize === void 0 ? {} : { pageSize },
 		...defaultPageSize === void 0 ? {} : { defaultPageSize },
 		siblingCount,
+		"data-variant": variant === "simple" ? variant : void 0,
 		className,
 		style,
 		onPageChange: (event) => onValueChange?.(event.page),
-		children: [
+		children: variant === "simple" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(PaginationPrevTrigger, {
+				"aria-label": "Previous page",
+				children: iconNode("chevron-left", {
+					width: 14,
+					height: 14
+				})
+			}),
+			/* @__PURE__ */ jsx(Pagination$1.Context, { children: (pagination) => /* @__PURE__ */ jsxs("span", {
+				"data-scope": "pagination",
+				"data-part": "status",
+				children: [
+					pagination.page,
+					" / ",
+					pagination.totalPages
+				]
+			}) }),
+			/* @__PURE__ */ jsx(PaginationNextTrigger, {
+				"aria-label": "Next page",
+				children: iconNode("chevron-right", {
+					width: 14,
+					height: 14
+				})
+			})
+		] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(PaginationPrevTrigger, {
 				"aria-label": "Previous page",
 				children: iconNode("chevron-left", {
@@ -55,7 +80,7 @@ function PaginationFacade(props) {
 					height: 14
 				})
 			})
-		]
+		] })
 	});
 }
 const Pagination = Object.assign(PaginationFacade, {

package/dist/components/progress/index.d.mts

@@ -16,14 +16,14 @@ type ProgressFacadeProps = {
   min?: number;
   max?: number;
   label?: string;
-  variant?: "linear" | "circle";
+  variant?: "linear" | "circle" | "dashboard";
   size?: "sm" | "md" | "lg";
   className?: string;
   style?: CSSProperties;
   onValueChange?: (value: number | null) => void;
 };
 /** The complete progress behind one value: a labelled linear groove by
- * default, with a circular variant for compact status. */
+ * default, with circular and dashboard dials for compact status. */
 declare function ProgressFacade(props: ProgressFacadeProps): import("react").JSX.Element;
 export declare const Progress: typeof ProgressFacade & Omit<typeof Progress$1, "Root"> & {
   Root: typeof ProgressRoot;

package/dist/components/progress/index.mjs

@@ -15,9 +15,15 @@ function ProgressRoot(props) {
 	});
 }
 /** The complete progress behind one value: a labelled linear groove by
-* default, with a circular variant for compact status. */
+* default, with circular and dashboard dials for compact status. */
 function ProgressFacade(props) {
 	const { value, defaultValue, min, max, label, variant = "linear", size = "md", className, style, onValueChange } = props;
+	const dashboardPercent = (() => {
+		const lower = min ?? 0;
+		const upper = max ?? 100;
+		const percent = ((value ?? defaultValue ?? lower + (upper - lower) / 2) - lower) / (upper - lower) * 100;
+		return !Number.isFinite(percent) ? 0 : Math.min(100, Math.max(0, percent));
+	})();
 	return /* @__PURE__ */ jsxs(ProgressRoot, {
 		size,
 		"data-variant": variant,
@@ -30,11 +36,21 @@ function ProgressFacade(props) {
 		onValueChange: (event) => onValueChange?.(event.value),
 		children: [
 			label ? /* @__PURE__ */ jsx(Progress$1.Label, { children: label }) : null,
-			/* @__PURE__ */ jsx(Progress$1.ValueText, {}),
-			variant === "circle" ? /* @__PURE__ */ jsx(ProgressView, {
+			variant === "dashboard" ? /* @__PURE__ */ jsxs("div", {
+				"data-scope": "progress",
+				"data-part": "view",
+				"data-view": "dashboard",
+				children: [/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					"data-scope": "progress",
+					"data-part": "dash-ring",
+					style: { "--percent": String(dashboardPercent) }
+				}), /* @__PURE__ */ jsx(Progress$1.ValueText, {})]
+			}) : variant === "circle" ? /* @__PURE__ */ jsx(ProgressView, {
 				view: "circle",
 				children: /* @__PURE__ */ jsx(Progress$1.Circle, { children: /* @__PURE__ */ jsx(Progress$1.CircleRange, {}) })
-			}) : /* @__PURE__ */ jsx(Progress$1.Track, { children: /* @__PURE__ */ jsx(Progress$1.Range, {}) })
+			}) : /* @__PURE__ */ jsx(Progress$1.Track, { children: /* @__PURE__ */ jsx(Progress$1.Range, {}) }),
+			variant !== "dashboard" ? /* @__PURE__ */ jsx(Progress$1.ValueText, {}) : null
 		]
 	});
 }

package/dist/components/steps/index.d.mts

@@ -4,6 +4,8 @@ import { Steps as Steps$1 } from "@ark-ui/react/steps";
 type StepsRootProps = ComponentProps<typeof Steps$1.Root> & {
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
+  /** Default renders numbered seals; dot reduces each step to a bead. */
+  variant?: "default" | "dot";
 };
 declare function StepsRoot(props: StepsRootProps): import("react").JSX.Element;
 type StepsItem = {
@@ -17,10 +19,12 @@ export interface StepsFacadeProps {
   orientation?: "horizontal" | "vertical";
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
+  /** Default renders numbered seals; dot reduces each step to a bead. */
+  variant?: "default" | "dot";
   className?: string;
   onStepChange?: (step: number) => void;
 }
-declare function StepsFacade({ items, step, defaultStep, linear, orientation, size, className, onStepChange }: StepsFacadeProps): import("react").JSX.Element;
+declare function StepsFacade({ items, step, defaultStep, linear, orientation, size, variant, className, onStepChange }: StepsFacadeProps): import("react").JSX.Element;
 declare namespace StepsFacade {
   var displayName: string;
 }

package/dist/components/steps/index.mjs

@@ -5,27 +5,29 @@ import { Steps as Steps$1 } from "@ark-ui/react/steps";
 //#region src/components/steps/index.tsx
 function StepsRoot(props) {
 	const id = useElementId("steps", props);
-	const { size = "md", ...rest } = props;
+	const { size = "md", variant = "default", ...rest } = props;
 	return /* @__PURE__ */ jsx(Steps$1.Root, {
 		...rest,
 		id,
-		"data-size": size
+		"data-size": size,
+		"data-variant": variant === "dot" ? variant : void 0
 	});
 }
-function StepsFacade({ items, step, defaultStep = 0, linear = false, orientation = "horizontal", size = "md", className, onStepChange }) {
+function StepsFacade({ items, step, defaultStep = 0, linear = false, orientation = "horizontal", size = "md", variant = "default", className, onStepChange }) {
 	return /* @__PURE__ */ jsx(StepsRoot, {
 		className,
 		size,
 		count: items.length,
 		linear,
 		orientation,
+		variant,
 		defaultStep,
 		...step === void 0 ? {} : { step },
 		onStepChange: (details) => onStepChange?.(details.step),
 		children: /* @__PURE__ */ jsx(Steps$1.List, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Steps$1.Item, {
 			index,
 			role: "presentation",
-			children: [/* @__PURE__ */ jsxs(Steps$1.Trigger, { children: [/* @__PURE__ */ jsx(Steps$1.Indicator, { children: String(index + 1) }), item.title] }), /* @__PURE__ */ jsx(Steps$1.Separator, {})]
+			children: [/* @__PURE__ */ jsxs(Steps$1.Trigger, { children: [/* @__PURE__ */ jsx(Steps$1.Indicator, { children: variant === "dot" ? null : String(index + 1) }), item.title] }), /* @__PURE__ */ jsx(Steps$1.Separator, {})]
 		}, item.title)) })
 	});
 }

package/dist/components/table/index.d.mts

@@ -61,6 +61,8 @@ export interface DataTableProps {
   initialSorting?: SortingState;
   globalFilterPlaceholder?: string;
   emptyText?: string;
+  /** Band every other body row so wide measures keep the eye on line. */
+  striped?: boolean;
   /** Allow dragging header cells onto each other to reorder columns and
    * body rows onto each other to reorder data — with `tree`, row drops
    * read as before / inside / after, so a drop can also nest a branch

package/dist/components/table/index.mjs

@@ -638,6 +638,7 @@ function DataTableImpl(rawProps) {
 		"data-scope": "table",
 		"data-part": "root",
 		"data-reorderable": reorderable || void 0,
+		"data-striped": props.striped || void 0,
 		style: {
 			"--bs-table-row-height": `calc(${rowHeight}px * var(--bs-density-scale, 1))`,
 			...props.style

package/dist/components/tag/index.d.mts

@@ -0,0 +1,33 @@
+import { HTMLAttributes } from "react";
+//#region src/components/tag/index.d.ts
+export interface TagProps extends Omit<HTMLAttributes<HTMLElement>, "defaultValue"> {
+  /** The pigment the tag is inked with; ink is the solemn default,
+   * and the fixed pigments speak for their meaning. */
+  tone?: "ink" | "primary" | "success" | "warning" | "danger" | "info";
+  /** How the tag rests: a solid fill, an outline shell, a subtle
+   * wash. The pressed state always reads as solid. */
+  variant?: "solid" | "outline" | "subtle";
+  /** Render the tag as a pressed button the consumer can toggle. */
+  checkable?: boolean;
+  /** The pressed state held from outside; omit it and the tag keeps
+   * its own state from `defaultValue`. */
+  value?: boolean;
+  defaultValue?: boolean;
+  /** Render the quiet removal seal. */
+  closable?: boolean;
+  disabled?: boolean;
+  onValueChange?: (checked: boolean) => void;
+  onClose?: () => void;
+}
+/** A small named seal for filtering and cataloguing. The resting shape
+ * is a span; `checkable` raises it to a pressed button, and `closable`
+ * hangs the removal seal inside — dismissal stays the consumer's state,
+ * the way the banner's does. */
+declare function TagImpl({ tone, variant, checkable, value, defaultValue, closable, disabled, onValueChange, onClose, children, ...rest }: TagProps): import("react").JSX.Element;
+declare namespace TagImpl {
+  var displayName: string;
+}
+export declare const Tag: typeof TagImpl & {
+  Root: typeof TagImpl;
+};
+//#endregion

package/dist/components/tag/index.mjs

@@ -0,0 +1,69 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/tag/index.tsx
+/** A small named seal for filtering and cataloguing. The resting shape
+* is a span; `checkable` raises it to a pressed button, and `closable`
+* hangs the removal seal inside — dismissal stays the consumer's state,
+* the way the banner's does. */
+function TagImpl({ tone = "ink", variant = "solid", checkable = false, value, defaultValue = false, closable = false, disabled = false, onValueChange, onClose, children, ...rest }) {
+	injectComponentStyle("tag");
+	const [internalChecked, setInternalChecked] = useState(defaultValue);
+	const checked = value ?? internalChecked;
+	const toggle = () => {
+		if (disabled) return;
+		const next = !checked;
+		setInternalChecked(next);
+		onValueChange?.(next);
+	};
+	const dismiss = (event) => {
+		event.stopPropagation();
+		if (disabled) return;
+		onClose?.();
+	};
+	const pressed = checkable && checked;
+	const closeControl = closable ? checkable ? /* @__PURE__ */ jsx("span", {
+		"data-scope": "tag",
+		"data-part": "close",
+		"aria-hidden": "true",
+		onClick: dismiss,
+		children: iconNode("x")
+	}) : /* @__PURE__ */ jsx("button", {
+		"data-scope": "tag",
+		"data-part": "close",
+		type: "button",
+		"aria-label": "Remove",
+		disabled,
+		onClick: dismiss,
+		children: iconNode("x")
+	}) : null;
+	const partProps = {
+		...rest,
+		"data-scope": "tag",
+		"data-part": "root",
+		"data-tone": tone,
+		"data-variant": variant,
+		...checkable ? { "data-checkable": "true" } : {},
+		...pressed ? { "data-checked": "true" } : {},
+		...disabled ? { "data-disabled": "true" } : {}
+	};
+	if (checkable) return /* @__PURE__ */ jsxs("button", {
+		...partProps,
+		type: "button",
+		"aria-pressed": checked,
+		disabled,
+		onClick: toggle,
+		children: [children, closeControl]
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		...partProps,
+		...disabled ? { "aria-disabled": "true" } : {},
+		children: [children, closeControl]
+	});
+}
+TagImpl.displayName = "STag";
+const Tag = withSelfRoot(TagImpl);
+//#endregion
+export { Tag };