@bysages/react 0.4.0 → 0.4.2

package/dist/components/progress/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Progress as Progress$1 } from "@ark-ui/react/progress";
 //#region src/components/progress/index.tsx
@@ -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/progress-group/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/progress-group/index.tsx
 function ProgressGroupImpl({ segments, max, showLegend = true, ...rest }) {

package/dist/components/qr-code/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { QrCode as QrCode$1 } from "@ark-ui/react/qr-code";
 //#region src/components/qr-code/index.tsx

package/dist/components/radio-group/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RadioGroup as RadioGroup$1 } from "@ark-ui/react/radio-group";
 //#region src/components/radio-group/index.tsx

package/dist/components/rating-group/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RatingGroup as RatingGroup$1 } from "@ark-ui/react/rating-group";
 //#region src/components/rating-group/index.tsx

package/dist/components/result/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/result/index.tsx
 const MARK = "<g data-for=\"success\"><path d=\"M20 6 9 17l-5-5\"/></g><g data-for=\"warning\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></g><g data-for=\"danger\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></g><g data-for=\"info\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></g>";

package/dist/components/scroll-area/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
 //#region src/components/scroll-area/index.tsx

package/dist/components/segment-group/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/react/segment-group";
 //#region src/components/segment-group/index.tsx

package/dist/components/select/index.mjs

@@ -1,2 +1,2 @@
-import { n as NativeSelect, t as Select } from "../../select-ozUFq0zd.mjs";
+import { n as NativeSelect, t as Select } from "../../select-i9UZsQCU.mjs";
 export { NativeSelect, Select };

package/dist/components/separator/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/separator/index.tsx
 function SeparatorImpl({ orientation = "horizontal", decorative = false, ...rest }) {

package/dist/components/signature-pad/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/react/signature-pad";
 //#region src/components/signature-pad/index.tsx

package/dist/components/skeleton/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton/index.tsx
 function SkeletonImpl({ ...rest }) {

package/dist/components/slider/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slider as Slider$1 } from "@ark-ui/react/slider";
 //#region src/components/slider/index.tsx

package/dist/components/spinner/index.mjs

@@ -1,6 +1,6 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/spinner/index.tsx
 /** A wheel of waiting: one arc of ink turning about its center. Quiet by

package/dist/components/split-button/index.mjs

@@ -3,7 +3,7 @@ import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { Menu as Menu$1 } from "../menu/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@ark-ui/react/portal";
 import { Menu } from "@ark-ui/react/menu";

package/dist/components/splitter/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
 import { Splitter as Splitter$1 } from "@ark-ui/react/splitter";

package/dist/components/spotlight/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/spotlight/index.tsx
 /** The ink-light card: a vessel whose rim and face take light from the

package/dist/components/stack/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stack/index.tsx
 /** Whitespace chosen by name: the named steps point at the space ramp so

package/dist/components/stat/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stat/index.tsx
 function part(name, tag) {

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

@@ -1,31 +1,33 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 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/swap/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Swap as Swap$1 } from "@ark-ui/react/swap";
 //#region src/components/swap/index.tsx

package/dist/components/switch/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@ark-ui/react/switch";
 //#region src/components/switch/index.tsx

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

@@ -2,10 +2,10 @@ import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { Pagination } from "../pagination/index.mjs";
-import { t as Select$1 } from "../../select-ozUFq0zd.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { t as Select$1 } from "../../select-i9UZsQCU.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
+import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { createListCollection } from "@ark-ui/react/select";
 import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -184,6 +184,7 @@ function DataTableImpl(rawProps) {
 	});
 	const viewport = useRef(null);
 	const rows = table.getRowModel().rows;
+	const [hydrated, setHydrated] = useState(false);
 	/** The declared row height is the density-scale baseline; the live
 	* scale comes off the document so the virtual window matches what CSS
 	* actually renders. It is read once and re-read only when the density
@@ -211,8 +212,15 @@ function DataTableImpl(rawProps) {
 		});
 		return () => observer.disconnect();
 	}, [virtual]);
-	const virtualRows = virtualizer.getVirtualItems();
-	const totalSize = virtualizer.getTotalSize();
+	useEffect(() => setHydrated(true), []);
+	const fallbackRows = virtual ? rows.slice(0, Math.max(1, Math.ceil(320 / rowHeight))).map((row, index) => ({
+		key: row.id ?? index,
+		index,
+		start: index * rowHeight,
+		size: rowHeight
+	})) : [];
+	const virtualRows = hydrated ? virtualizer.getVirtualItems() : fallbackRows;
+	const totalSize = hydrated ? virtualizer.getTotalSize() : rows.length * rowHeight;
 	/** Column ids of the visible leaves, for pin-seam bookkeeping. */
 	const leafIds = table.getAllLeafColumns().map((c) => c.id);
 	const expandHostId = tree ? leafIds.find((id) => id !== SELECT_COL_ID) : void 0;
@@ -630,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/tabs/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
 //#region src/components/tabs/index.tsx

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 };

package/dist/components/tags-input/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TagsInput as TagsInput$1 } from "@ark-ui/react/tags-input";
 //#region src/components/tags-input/index.tsx

package/dist/components/terminal/index.mjs

@@ -1,6 +1,6 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 //#region src/components/terminal/index.tsx

package/dist/components/textarea/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { useFieldContext } from "@ark-ui/react/field";
 //#region src/components/textarea/index.tsx

package/dist/components/timeline/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/timeline/index.tsx
 /** A line of moments: Root is the ordered thread, Item one moment on it,

package/dist/components/timer/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Timer as Timer$1 } from "@ark-ui/react/timer";
 //#region src/components/timer/index.tsx

package/dist/components/toast/index.mjs

@@ -1,6 +1,6 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/react/toast";

package/dist/components/toc/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toc as Toc$1 } from "@ark-ui/react/toc";
 //#region src/components/toc/index.tsx

package/dist/components/toggle/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@ark-ui/react/toggle";
 //#region src/components/toggle/index.tsx

package/dist/components/toggle-group/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { ToggleGroup as ToggleGroup$1 } from "@ark-ui/react/toggle-group";
 //#region src/components/toggle-group/index.tsx

package/dist/components/toolbar/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/toolbar/index.tsx
 /** A workbench rail: the start tools at the leading edge, the end tools

package/dist/components/tooltip/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement } from "react";
 import { Tooltip as Tooltip$1 } from "@ark-ui/react/tooltip";

package/dist/components/tour/index.mjs

@@ -1,6 +1,6 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { Button } from "../button/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Tour as Tour$1, useTour as useTour$1 } from "@ark-ui/react/tour";
 //#region src/components/tour/index.tsx

package/dist/components/transfer/index.mjs

@@ -2,9 +2,9 @@ import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
-import { t as Input } from "../../input-C21Zzuy6.mjs";
+import { t as Input } from "../../input-BDpQ0e6G.mjs";
 import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Checkbox } from "@ark-ui/react/checkbox";

package/dist/components/tree-select/index.mjs

@@ -2,8 +2,8 @@ import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Popover as Popover$1 } from "../popover/index.mjs";
-import { t as Input } from "../../input-C21Zzuy6.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { t as Input } from "../../input-BDpQ0e6G.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Popover } from "@ark-ui/react/popover";

package/dist/components/tree-view/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TreeView as TreeView$1, createTreeCollection } from "@ark-ui/react/tree-view";
 //#region src/components/tree-view/index.tsx

package/dist/components/typography/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/typography/index.tsx
 /** The typographic voices, named so prose can ask for one: display and

package/dist/components/user/index.mjs

@@ -1,6 +1,6 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Avatar } from "../avatar/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/user/index.tsx
 function initialsOf(name) {

package/dist/components/virtual-list/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";