@bysages/react 0.2.1 → 0.2.3

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

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+//#region src/components/popconfirm/index.d.ts
+/**
+ * A question at the point of no return: the trigger opens a small
+ * anchored vessel carrying the message and two answers. Confirmation
+ * and cancellation are the caller's to act on — the panel closes
+ * either way. The children are the trigger; give it a single element
+ * (wrap a group in a span otherwise).
+ */
+export interface PopconfirmProps {
+  /** The question the reader is answering. */
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  children?: ReactNode;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+export declare function Popconfirm({ message, confirmText, cancelText, children, onConfirm, onCancel }: PopconfirmProps): import("react").JSX.Element;
+//#endregion

package/dist/components/popconfirm/index.mjs

@@ -0,0 +1,44 @@
+import { Button } from "../button/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Popover } from "@ark-ui/react/popover";
+import { Portal } from "@ark-ui/react/portal";
+//#region src/components/popconfirm/index.tsx
+function Popconfirm({ message, confirmText = "Confirm", cancelText = "Cancel", children, onConfirm, onCancel }) {
+	injectComponentStyle("popconfirm");
+	const [open, setOpen] = useState(false);
+	function settle(confirmed) {
+		setOpen(false);
+		(confirmed ? onConfirm : onCancel)?.();
+	}
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: (details) => setOpen(details.open),
+		positioning: { placement: "top" },
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+			className: "bs-popconfirm",
+			children: [/* @__PURE__ */ jsx("p", {
+				"data-part": "message",
+				children: message
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-part": "actions",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: () => settle(false),
+					children: cancelText
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onClick: () => settle(true),
+					children: confirmText
+				})]
+			})]
+		}) }) })]
+	});
+}
+//#endregion
+export { Popconfirm };

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

@@ -0,0 +1,8 @@
+import { Popover as Popover$1 } from "@ark-ui/react/popover";
+//#region src/components/popover/index.d.ts
+/** Ark's Popover, dressed in the paper-and-ink system: a paper vessel that
+ * dissolves in on elevation, anchored to its trigger by a whisker arrow. The
+ * API is Ark's own — Root, Trigger, Anchor, Indicator, Positioner, Content,
+ * Title, Description, CloseTrigger, Arrow, ArrowTip. */
+export declare const Popover: typeof Popover$1;
+//#endregion

package/dist/components/popover/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Popover as Popover$1 } from "@ark-ui/react/popover";
+//#region src/components/popover/index.tsx
+/** Ark's Popover, dressed in the paper-and-ink system: a paper vessel that
+* dissolves in on elevation, anchored to its trigger by a whisker arrow. The
+* API is Ark's own — Root, Trigger, Anchor, Indicator, Positioner, Content,
+* Title, Description, CloseTrigger, Arrow, ArrowTip. */
+const Popover = Popover$1;
+injectComponentStyle("popover");
+//#endregion
+export { Popover };

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

@@ -0,0 +1,2 @@
+import { Presence, PresenceBaseProps, PresenceProps, PresenceProvider, UsePresenceContext, UsePresenceProps, UsePresenceReturn, usePresence, usePresenceContext } from "@ark-ui/react/presence";
+export { Presence, type PresenceBaseProps, type PresenceProps, PresenceProvider, type UsePresenceContext, type UsePresenceProps, type UsePresenceReturn, usePresence, usePresenceContext };

package/dist/components/presence/index.mjs

@@ -0,0 +1,2 @@
+import { Presence, PresenceProvider, usePresence, usePresenceContext } from "@ark-ui/react/presence";
+export { Presence, PresenceProvider, usePresence, usePresenceContext };

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { Progress as Progress$1 } from "@ark-ui/react/progress";
+//#region src/components/progress/index.d.ts
+type ProgressRootProps = ComponentProps<typeof Progress$1.Root> & {
+  /** One rung of the groove ladder — the track's thickness. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ProgressRoot({ size, ...rest }: ProgressRootProps): import("react").JSX.Element;
+/** Ark's Progress, dressed in the paper-and-ink system: a quiet hairline
+ * groove that the primary ink fills at the machine's pace. The API is
+ * Ark's own — Root, Label, ValueText, Track, Range, View, Circle,
+ * CircleTrack, CircleRange. */
+export declare const Progress: Omit<typeof Progress$1, "Root"> & {
+  Root: typeof ProgressRoot;
+};
+//#endregion

package/dist/components/progress/index.mjs

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Progress as Progress$1 } from "@ark-ui/react/progress";
+//#region src/components/progress/index.tsx
+function ProgressRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Progress$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's Progress, dressed in the paper-and-ink system: a quiet hairline
+* groove that the primary ink fills at the machine's pace. The API is
+* Ark's own — Root, Label, ValueText, Track, Range, View, Circle,
+* CircleTrack, CircleRange. */
+const Progress = {
+	...Progress$1,
+	Root: ProgressRoot
+};
+injectComponentStyle("progress");
+//#endregion
+export { Progress };

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

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from "react";
+//#region src/components/progress-group/index.d.ts
+/** One verdict on the bar. */
+export interface ProgressSegment {
+  value: number;
+  label?: string;
+  pigment?: "primary" | "success" | "warning" | "danger" | "info";
+}
+/**
+ * One bar, several verdicts: the segments stand shoulder to shoulder,
+ * each as wide as its share of the whole and speaking its own pigment;
+ * the legend reads them back beneath (swatch, label, value) unless the
+ * caller declines it. The whole is the sum of the parts unless the
+ * caller brings a larger one — the remainder then shows as groove.
+ */
+export interface ProgressGroupProps extends HTMLAttributes<HTMLDivElement> {
+  segments: ProgressSegment[];
+  max?: number;
+  showLegend?: boolean;
+}
+export declare function ProgressGroup({ segments, max, showLegend, ...rest }: ProgressGroupProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,56 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/progress-group/index.tsx
+function ProgressGroup({ segments, max, showLegend = true, ...rest }) {
+	injectComponentStyle("progress-group");
+	const total = max ?? segments.reduce((sum, segment) => sum + segment.value, 0);
+	const share = (value) => total > 0 ? `${value / total * 100}%` : "0%";
+	const nameOf = (segment, index) => segment.label ?? segment.pigment ?? `Segment ${index + 1}`;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "progress-group",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-scope": "progress-group",
+			"data-part": "track",
+			children: segments.map((segment, index) => /* @__PURE__ */ jsx("div", {
+				"data-scope": "progress-group",
+				"data-part": "segment",
+				"data-pigment": segment.pigment,
+				role: "progressbar",
+				"aria-valuenow": segment.value,
+				"aria-valuemin": 0,
+				"aria-valuemax": total,
+				"aria-label": nameOf(segment, index),
+				style: { inlineSize: share(segment.value) }
+			}, index))
+		}), showLegend ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "progress-group",
+			"data-part": "legend",
+			children: segments.map((segment, index) => /* @__PURE__ */ jsxs("div", {
+				"data-scope": "progress-group",
+				"data-part": "legend-item",
+				"data-pigment": segment.pigment,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"data-scope": "progress-group",
+						"data-part": "swatch",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-scope": "progress-group",
+						"data-part": "legend-label",
+						children: nameOf(segment, index)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-scope": "progress-group",
+						"data-part": "legend-value",
+						children: String(segment.value)
+					})
+				]
+			}, index))
+		}) : null]
+	});
+}
+//#endregion
+export { ProgressGroup };

package/dist/components/qr-code/index.d.mts

@@ -0,0 +1,8 @@
+import { QrCode as QrCode$1 } from "@ark-ui/react/qr-code";
+//#region src/components/qr-code/index.d.ts
+/** Ark's QrCode, dressed in the paper-and-ink system: the pattern prints in
+ * ink on the page, with an optional paper badge and a seal-cut download
+ * control. The API is Ark's own — Root, Frame, Pattern, Overlay,
+ * DownloadTrigger. */
+export declare const QrCode: typeof QrCode$1;
+//#endregion

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

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { QrCode as QrCode$1 } from "@ark-ui/react/qr-code";
+//#region src/components/qr-code/index.tsx
+/** Ark's QrCode, dressed in the paper-and-ink system: the pattern prints in
+* ink on the page, with an optional paper badge and a seal-cut download
+* control. The API is Ark's own — Root, Frame, Pattern, Overlay,
+* DownloadTrigger. */
+const QrCode = QrCode$1;
+injectComponentStyle("qr-code");
+//#endregion
+export { QrCode };

package/dist/components/radio-group/index.d.mts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { RadioGroup as RadioGroup$1 } from "@ark-ui/react/radio-group";
+//#region src/components/radio-group/index.d.ts
+type RadioGroupRootProps = ComponentProps<typeof RadioGroup$1.Root> & {
+  /** One rung for the dial; the chosen dot rides it. */
+  size?: "sm" | "md" | "lg";
+};
+declare function RadioGroupRoot({ size, ...rest }: RadioGroupRootProps): import("react").JSX.Element;
+/** Ark's RadioGroup, dressed in the paper-and-ink system: a column of
+ * full-circle seals that fill flat with primary ink when chosen, the dot
+ * punched through as paper. The API is Ark's own — Root, Label, Item,
+ * ItemText, ItemControl, Indicator, ItemHiddenInput. */
+export declare const RadioGroup: Omit<typeof RadioGroup$1, "Root"> & {
+  Root: typeof RadioGroupRoot;
+};
+//#endregion

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

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup as RadioGroup$1 } from "@ark-ui/react/radio-group";
+//#region src/components/radio-group/index.tsx
+function RadioGroupRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's RadioGroup, dressed in the paper-and-ink system: a column of
+* full-circle seals that fill flat with primary ink when chosen, the dot
+* punched through as paper. The API is Ark's own — Root, Label, Item,
+* ItemText, ItemControl, Indicator, ItemHiddenInput. */
+const RadioGroup = {
+	...RadioGroup$1,
+	Root: RadioGroupRoot
+};
+injectComponentStyle("radio-group");
+//#endregion
+export { RadioGroup };

package/dist/components/rating-group/index.d.mts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { RatingGroup as RatingGroup$1 } from "@ark-ui/react/rating-group";
+//#region src/components/rating-group/index.d.ts
+type RatingGroupRootProps = ComponentProps<typeof RatingGroup$1.Root> & {
+  /** One rung of the control-height ladder every seal stands on. */
+  size?: "sm" | "md" | "lg";
+};
+declare function RatingGroupRoot({ size, ...rest }: RatingGroupRootProps): import("react").JSX.Element;
+/** Ark's RatingGroup, dressed in the paper-and-ink system: a row of quiet
+ * seals whose glyphs take the primary pigment as they light up. The API is
+ * Ark's own — Root, Label, Control, Item, HiddenInput (plus the Context and
+ * ItemContext render helpers). */
+export declare const RatingGroup: Omit<typeof RatingGroup$1, "Root"> & {
+  Root: typeof RatingGroupRoot;
+};
+//#endregion

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

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { RatingGroup as RatingGroup$1 } from "@ark-ui/react/rating-group";
+//#region src/components/rating-group/index.tsx
+function RatingGroupRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(RatingGroup$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's RatingGroup, dressed in the paper-and-ink system: a row of quiet
+* seals whose glyphs take the primary pigment as they light up. The API is
+* Ark's own — Root, Label, Control, Item, HiddenInput (plus the Context and
+* ItemContext render helpers). */
+const RatingGroup = {
+	...RatingGroup$1,
+	Root: RatingGroupRoot
+};
+injectComponentStyle("rating-group");
+//#endregion
+export { RatingGroup };

package/dist/components/scroll-area/index.d.mts

@@ -0,0 +1,7 @@
+import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
+//#region src/components/scroll-area/index.d.ts
+/** Ark's ScrollArea, dressed in the paper-and-ink system: native bars
+ * give way to quiet ink lanes that surface on hover and scroll. The API
+ * is Ark's own — Root, Viewport, Content, Scrollbar, Thumb, Corner. */
+export declare const ScrollArea: typeof ScrollArea$1;
+//#endregion

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

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
+//#region src/components/scroll-area/index.tsx
+/** Ark's ScrollArea, dressed in the paper-and-ink system: native bars
+* give way to quiet ink lanes that surface on hover and scroll. The API
+* is Ark's own — Root, Viewport, Content, Scrollbar, Thumb, Corner. */
+const ScrollArea = ScrollArea$1;
+injectComponentStyle("scroll-area");
+//#endregion
+export { ScrollArea };

package/dist/components/segment-group/index.d.mts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/react/segment-group";
+//#region src/components/segment-group/index.d.ts
+type SegmentGroupRootProps = ComponentProps<typeof SegmentGroup$1.Root> & {
+  /** One rung of the control-height ladder for the segments. The
+   * family keeps its compact register, so the rungs sit one notch
+   * below the global ladder - the default md rests at the small
+   * height. */
+  size?: "sm" | "md" | "lg";
+};
+declare function SegmentGroupRoot({ size, ...rest }: SegmentGroupRootProps): import("react").JSX.Element;
+/** SegmentGroup, dressed in the paper-and-ink system: a hairline tray
+ * where one flat ink plate travels beneath the checked seal. The parts - Root, Label, Indicator, Item, ItemText, ItemControl,
+ * ItemHiddenInput. */
+export declare const SegmentGroup: Omit<typeof SegmentGroup$1, "Root"> & {
+  Root: typeof SegmentGroupRoot;
+};
+//#endregion

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

@@ -0,0 +1,20 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/react/segment-group";
+//#region src/components/segment-group/index.tsx
+function SegmentGroupRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(SegmentGroup$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** SegmentGroup, dressed in the paper-and-ink system: a hairline tray
+* where one flat ink plate travels beneath the checked seal. The parts - Root, Label, Indicator, Item, ItemText, ItemControl,
+* ItemHiddenInput. */
+const SegmentGroup = {
+	...SegmentGroup$1,
+	Root: SegmentGroupRoot
+};
+injectComponentStyle("segment-group");
+//#endregion
+export { SegmentGroup };

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

@@ -0,0 +1,17 @@
+import { CollectionItem } from "@ark-ui/react/collection";
+import { Select as Select$1, SelectRootComponentProps } from "@ark-ui/react/select";
+//#region src/components/select/index.d.ts
+/** Ark's Select, dressed in the paper-and-ink system: the trigger is the
+ * whole control and its list dissolves open as a paper vessel, the checked
+ * row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
+ * Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
+ * Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
+type SelectOwnProps = {
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+};
+declare function SelectRoot<T extends CollectionItem>(props: SelectRootComponentProps<T, SelectOwnProps>): import("react").JSX.Element;
+export declare const Select: Omit<typeof Select$1, "Root"> & {
+  Root: typeof SelectRoot;
+};
+//#endregion

package/dist/components/select/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Select as Select$1 } from "@ark-ui/react/select";
+//#region src/components/select/index.tsx
+function SelectRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(Select$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Select = {
+	...Select$1,
+	Root: SelectRoot
+};
+injectComponentStyle("select");
+//#endregion
+export { Select };

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

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+//#region src/components/separator/index.d.ts
+/** The paper-ink hairline as a component: a named rule between sections.
+ * Decorative separators drop the separator role, since the page reads
+ * fine without them. */
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+}
+export declare function Separator({ orientation, decorative, ...rest }: SeparatorProps): import("react").JSX.Element;
+//#endregion

package/dist/components/separator/index.mjs

@@ -0,0 +1,16 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/separator/index.tsx
+function Separator({ orientation = "horizontal", decorative = false, ...rest }) {
+	injectComponentStyle("separator");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: decorative ? "none" : "separator",
+		"data-scope": "separator",
+		"data-part": "root",
+		"data-orientation": orientation,
+		"aria-orientation": decorative ? void 0 : orientation
+	});
+}
+//#endregion
+export { Separator };

package/dist/components/signature-pad/index.d.mts

@@ -0,0 +1,8 @@
+import { SignaturePad as SignaturePad$1 } from "@ark-ui/react/signature-pad";
+//#region src/components/signature-pad/index.d.ts
+/** Ark's SignaturePad, dressed in the paper-and-ink system: a quiet paper
+ * field with a guide hairline where ink — real ink strokes — is laid down.
+ * The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
+ * ClearTrigger, HiddenInput, Context. */
+export declare const SignaturePad: typeof SignaturePad$1;
+//#endregion

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

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { SignaturePad as SignaturePad$1 } from "@ark-ui/react/signature-pad";
+//#region src/components/signature-pad/index.tsx
+/** Ark's SignaturePad, dressed in the paper-and-ink system: a quiet paper
+* field with a guide hairline where ink — real ink strokes — is laid down.
+* The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
+* ClearTrigger, HiddenInput, Context. */
+const SignaturePad = SignaturePad$1;
+injectComponentStyle("signature-pad");
+//#endregion
+export { SignaturePad };

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+//#region src/components/skeleton/index.d.ts
+/** A waiting sheet of unset paper. Size it from the outside; the breath
+ * is the component's own. */
+export type SkeletonProps = HTMLAttributes<HTMLDivElement>;
+export declare function Skeleton({ ...rest }: SkeletonProps): import("react").JSX.Element;
+//#endregion

package/dist/components/skeleton/index.mjs

@@ -0,0 +1,13 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton/index.tsx
+function Skeleton({ ...rest }) {
+	injectComponentStyle("skeleton");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "skeleton",
+		"data-part": "root"
+	});
+}
+//#endregion
+export { Skeleton };

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { Slider as Slider$1 } from "@ark-ui/react/slider";
+//#region src/components/slider/index.d.ts
+type SliderRootProps = ComponentProps<typeof Slider$1.Root> & {
+  /** One rung of the part-size ladder for the thumb seal. */
+  size?: "sm" | "md" | "lg";
+};
+declare function SliderRoot({ size, ...rest }: SliderRootProps): import("react").JSX.Element;
+/** Ark's Slider, dressed in the paper-and-ink system: a recessed track the
+ * primary ink runs along, a paper-seal thumb, and hairline tick markers.
+ * The API is Ark's own — Root, Label, ValueText, Control, Track, Range,
+ * Thumb, MarkerGroup, Marker, DraggingIndicator, HiddenInput. */
+export declare const Slider: Omit<typeof Slider$1, "Root"> & {
+  Root: typeof SliderRoot;
+};
+//#endregion

package/dist/components/slider/index.mjs

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Slider as Slider$1 } from "@ark-ui/react/slider";
+//#region src/components/slider/index.tsx
+function SliderRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Slider$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's Slider, dressed in the paper-and-ink system: a recessed track the
+* primary ink runs along, a paper-seal thumb, and hairline tick markers.
+* The API is Ark's own — Root, Label, ValueText, Control, Track, Range,
+* Thumb, MarkerGroup, Marker, DraggingIndicator, HiddenInput. */
+const Slider = {
+	...Slider$1,
+	Root: SliderRoot
+};
+injectComponentStyle("slider");
+//#endregion
+export { Slider };

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+//#region src/components/spinner/index.d.ts
+export interface SpinnerProps extends HTMLAttributes<HTMLElement> {
+  size?: "sm" | "md" | "lg";
+}
+/** A wheel of waiting: one arc of ink turning about its center. Quiet by
+ * default — it reports progress without claiming attention. */
+export declare function Spinner({ size, children, ...rest }: SpinnerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/spinner/index.mjs

@@ -0,0 +1,36 @@
+import { injectComponentStyle } from "@bysages/core";
+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
+* default — it reports progress without claiming attention. */
+function Spinner({ size = "md", children, ...rest }) {
+	injectComponentStyle("spinner");
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		role: "status",
+		"aria-label": rest["aria-label"] ?? "Loading",
+		"data-scope": "spinner",
+		"data-part": "root",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: 9,
+				stroke: "currentColor",
+				strokeOpacity: .2,
+				strokeWidth: 2.5
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M21 12a9 9 0 0 0-9-9",
+				stroke: "currentColor",
+				strokeWidth: 2.5,
+				strokeLinecap: "round"
+			})]
+		}), children]
+	});
+}
+//#endregion
+export { Spinner };

package/dist/components/split-button/index.d.mts

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from "react";
+//#region src/components/split-button/index.d.ts
+export interface SplitButtonEntry {
+  label: string;
+  /** Handed back with `onSelect` when the entry is chosen. */
+  value: string;
+  danger?: boolean;
+  disabled?: boolean;
+}
+export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** The main action's label. */
+  label: string;
+  /** The dropdown's entries. */
+  items?: SplitButtonEntry[];
+  /** How both halves rest; the arrow always reads as one control with
+   * the main button. */
+  variant?: "solid" | "outline" | "ghost" | "subtle";
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  /** The main button was pressed. */
+  onClick?: () => void;
+  /** An entry was chosen; carries its `value`. */
+  onSelect?: (value: string) => void;
+}
+/**
+ * A primary action with its alternatives one seam away: the main button
+ * fires `onClick`, the fitted arrow opens a paper vessel of the same
+ * register whose entries report `onSelect` with their value. The arrow
+ * is the menu machine's trigger grafting the button recipe — the
+ * machine keeps the element (positioning, focus, `data-state`), the
+ * button stylesheet's trigger register dresses it. The popup keeps the
+ * menu parts untouched.
+ */
+export declare function SplitButton({ label, items, variant, tone, size, disabled, onClick, onSelect, ...rest }: SplitButtonProps): import("react").JSX.Element;
+//#endregion