@bysages/react 0.3.1 → 0.4.0

package/dist/components/alert/index.mjs

@@ -1,26 +1,19 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 //#region src/components/alert/index.tsx
 const StatusContext = createContext("ink");
-function glyph(status) {
-	return /* @__PURE__ */ jsx("svg", {
+function statusIcon(status) {
+	return iconNode({
+		info: "info",
+		success: "circle-check",
+		warning: "triangle-alert",
+		danger: "circle-x",
+		ink: "info"
+	}[status], {
 		width: 16,
-		height: 16,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 1.75,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: {
-			info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
-			success: "m4 12.5 5 5L20 6.5",
-			warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
-			danger: "M6 6l12 12M18 6 6 18",
-			ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
-		}[status] })
+		height: 16
 	});
 }
 function AlertRoot({ status = "ink", children, ...rest }) {
@@ -41,7 +34,7 @@ function Icon() {
 	return /* @__PURE__ */ jsx("span", {
 		"data-scope": "alert",
 		"data-part": "icon",
-		children: glyph(status)
+		children: statusIcon(status)
 	});
 }
 function Body({ children, ...rest }) {

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

@@ -5,12 +5,29 @@ type AngleSliderRootProps = ComponentProps<typeof AngleSlider$1.Root> & {
   /** One rung of the dial ladder — the diameter the needle sweeps. */
   size?: "sm" | "md" | "lg";
 };
-declare function AngleSliderRoot({ size, ...rest }: AngleSliderRootProps): import("react").JSX.Element;
+declare function AngleSliderRoot(props: AngleSliderRootProps): import("react").JSX.Element;
+export interface AngleSliderFacadeProps {
+  value?: number;
+  defaultValue?: number;
+  label?: string;
+  step?: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** One rung of the dial ladder — the diameter the needle sweeps. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: number) => void;
+}
+declare function AngleSliderFacade({ value, defaultValue, label, step, disabled, readOnly, size, className, onValueChange }: AngleSliderFacadeProps): import("react").JSX.Element;
+declare namespace AngleSliderFacade {
+  var displayName: string;
+}
 /** Ark's AngleSlider, dressed in the paper-and-ink system: a flat paper dial
  * the thumb sweeps as a pigment needle over hairline degree ticks. The API
  * is Ark's own — Root, Label, ValueText, Control, Thumb, MarkerGroup,
  * Marker, HiddenInput. */
-export declare const AngleSlider: Omit<typeof AngleSlider$1, "Root"> & {
+type AngleSliderParts = Omit<typeof AngleSlider$1, "Root"> & {
   Root: typeof AngleSliderRoot;
 };
+export declare const AngleSlider: typeof AngleSliderFacade & AngleSliderParts;
 //#endregion

package/dist/components/angle-slider/index.mjs

@@ -1,21 +1,44 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/react/angle-slider";
 //#region src/components/angle-slider/index.tsx
-function AngleSliderRoot({ size = "md", ...rest }) {
+function AngleSliderRoot(props) {
+	const id = useElementId("angle-slider", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(AngleSlider$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's AngleSlider, dressed in the paper-and-ink system: a flat paper dial
-* the thumb sweeps as a pigment needle over hairline degree ticks. The API
-* is Ark's own — Root, Label, ValueText, Control, Thumb, MarkerGroup,
-* Marker, HiddenInput. */
-const AngleSlider = {
+function AngleSliderFacade({ value, defaultValue = 45, label, step = 1, disabled = false, readOnly = false, size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(AngleSliderRoot, {
+		className,
+		size,
+		disabled,
+		readOnly,
+		step,
+		defaultValue,
+		...value === void 0 ? {} : { value },
+		onValueChange: (details) => onValueChange?.(details.value),
+		children: [
+			label ? /* @__PURE__ */ jsx(AngleSlider$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(AngleSlider$1.ValueText, {}),
+			/* @__PURE__ */ jsxs(AngleSlider$1.Control, { children: [/* @__PURE__ */ jsx(AngleSlider$1.MarkerGroup, { children: [
+				0,
+				90,
+				180,
+				270
+			].map((degree) => /* @__PURE__ */ jsx(AngleSlider$1.Marker, { value: degree }, degree)) }), /* @__PURE__ */ jsx(AngleSlider$1.Thumb, { children: /* @__PURE__ */ jsx(AngleSlider$1.HiddenInput, {}) })] })
+		]
+	});
+}
+AngleSliderFacade.displayName = "SAngleSlider";
+const AngleSlider = Object.assign(AngleSliderFacade, {
 	...AngleSlider$1,
 	Root: AngleSliderRoot
-};
+});
 injectComponentStyle("angle-slider");
 //#endregion
 export { AngleSlider };

package/dist/components/aspect-ratio/index.d.mts

@@ -6,5 +6,8 @@ export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
   /** A CSS `aspect-ratio` value — "16 / 9", "4 / 3", "1 / 1". */
   ratio?: string;
 }
-export declare function AspectRatio({ ratio, ...rest }: AspectRatioProps): import("react").JSX.Element;
+declare function AspectRatioImpl({ ratio, ...rest }: AspectRatioProps): import("react").JSX.Element;
+export declare const AspectRatio: typeof AspectRatioImpl & {
+  Root: typeof AspectRatioImpl;
+};
 //#endregion

package/dist/components/aspect-ratio/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/aspect-ratio/index.tsx
-function AspectRatio({ ratio = "1 / 1", ...rest }) {
+function AspectRatioImpl({ ratio = "1 / 1", ...rest }) {
 	injectComponentStyle("aspect-ratio");
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -13,5 +14,6 @@ function AspectRatio({ ratio = "1 / 1", ...rest }) {
 		"data-part": "root"
 	});
 }
+const AspectRatio = withSelfRoot(AspectRatioImpl);
 //#endregion
 export { AspectRatio };

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

@@ -1,3 +1,4 @@
+import { Combobox } from "../combobox/index.mjs";
 import { HTMLAttributes } from "react";
 //#region src/components/autocomplete/index.d.ts
 /**
@@ -17,5 +18,6 @@ export interface AutoCompleteProps extends Omit<HTMLAttributes<HTMLDivElement>,
   size?: "sm" | "md" | "lg";
   onValueChange?: (value: string) => void;
 }
-export declare function AutoComplete({ value, items, placeholder, filter, size, onValueChange, ...rest }: AutoCompleteProps): import("react").JSX.Element;
+declare function AutoCompleteImpl({ value, items, placeholder, filter, size, onValueChange, ...rest }: AutoCompleteProps): import("react").JSX.Element;
+export declare const AutoComplete: typeof AutoCompleteImpl & typeof Combobox;
 //#endregion

package/dist/components/autocomplete/index.mjs

@@ -1,19 +1,23 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { Combobox as Combobox$1 } from "../combobox/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@ark-ui/react/portal";
 import { useListCollection } from "@ark-ui/react/collection";
 import { Combobox } from "@ark-ui/react/combobox";
 //#region src/components/autocomplete/index.tsx
-function AutoComplete({ value = "", items = [], placeholder, filter, size = "md", onValueChange, ...rest }) {
+function AutoCompleteImpl({ value = "", items = [], placeholder, filter, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("combobox");
 	const messages = useComponentMessages();
+	const hostId = useElementId("autocomplete", rest);
 	const { collection, filter: filterItems } = useListCollection({
 		initialItems: items,
 		filter: (item, input) => filter ? filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
 	});
 	return /* @__PURE__ */ jsxs(Combobox.Root, {
 		...rest,
+		id: `${hostId}:combobox`,
 		collection,
 		inputValue: value,
 		allowCustomValue: true,
@@ -33,5 +37,6 @@ function AutoComplete({ value = "", items = [], placeholder, filter, size = "md"
 		}, item))] }) }) })]
 	});
 }
+const AutoComplete = Object.assign(AutoCompleteImpl, Combobox$1);
 //#endregion
 export { AutoComplete };

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

@@ -16,8 +16,8 @@ export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
    * beside a round portrait. */
   shape?: "circle" | "square";
 }
-declare function AvatarRoot({ size, shape, ...rest }: AvatarProps): import("react").JSX.Element;
-export declare const Avatar: typeof Avatar$1 & {
+declare function AvatarRoot(props: AvatarProps): import("react").JSX.Element;
+export declare const Avatar: typeof AvatarRoot & typeof Avatar$1 & {
   Root: typeof AvatarRoot;
 };
 //#endregion

package/dist/components/avatar/index.mjs

@@ -1,15 +1,22 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
 //#region src/components/avatar/index.tsx
-function AvatarRoot({ size, shape = "circle", ...rest }) {
+function AvatarRoot(props) {
+	const id = useElementId("avatar", props);
+	const { size, shape = "circle", ...rest } = props;
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		...rest,
+		id,
 		"data-size": size,
 		"data-shape": shape
 	});
 }
-const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
+const Avatar = Object.assign(AvatarRoot, {
+	...Avatar$1,
+	Root: AvatarRoot
+});
 injectComponentStyle("avatar");
 //#endregion
 export { Avatar };

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

@@ -7,5 +7,8 @@ export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
    * stylesheet to re-point the avatars' measure. */
   size?: "sm" | "md" | "lg";
 }
-export declare function AvatarGroup({ size, children, ...rest }: AvatarGroupProps): import("react").JSX.Element;
+declare function AvatarGroupImpl({ size, children, ...rest }: AvatarGroupProps): import("react").JSX.Element;
+export declare const AvatarGroup: typeof AvatarGroupImpl & {
+  Root: typeof AvatarGroupImpl;
+};
 //#endregion

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

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar-group/index.tsx
-function AvatarGroup({ size, children, ...rest }) {
+function AvatarGroupImpl({ size, children, ...rest }) {
 	injectComponentStyle("avatar-group");
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -11,5 +12,6 @@ function AvatarGroup({ size, children, ...rest }) {
 		children
 	});
 }
+const AvatarGroup = withSelfRoot(AvatarGroupImpl);
 //#endregion
 export { AvatarGroup };

package/dist/components/back-top/index.d.mts

@@ -11,6 +11,9 @@ export interface BackTopProps extends HTMLAttributes<HTMLButtonElement> {
    * scrollTop. The host supplies the positioning context. */
   scrollEl?: () => HTMLElement | null;
 }
+/**
+ * A way
+
 /**
  * A way home: after the page has scrolled past `threshold`, a small
  * floating control rises at the page's corner and returns the reader to
@@ -25,5 +28,8 @@ export interface BackTopProps extends HTMLAttributes<HTMLButtonElement> {
  * paper, hairline and halo are its; this family owns only the floating
  * and the entrance.
  */
-export declare function BackTop({ threshold, label, scrollEl, ...rest }: BackTopProps): import("react").JSX.Element;
+declare function BackTopImpl({ threshold, label, scrollEl, ...rest }: BackTopProps): import("react").JSX.Element;
+export declare const BackTop: typeof BackTopImpl & {
+  Root: typeof BackTopImpl;
+};
 //#endregion

package/dist/components/back-top/index.mjs

@@ -1,23 +1,17 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 //#region src/components/back-top/index.tsx
-/** The single glyph a way-home control needs: one stroke pointing up. */
-function chevronUp() {
-	return /* @__PURE__ */ jsx("svg", {
-		width: 16,
-		height: 16,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 1.75,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: "m6 14 6-6 6 6" })
-	});
-}
+const chevronUp = iconNode("chevron-up", {
+	width: 16,
+	height: 16
+});
+/**
+* A way
+
 /**
 * A way home: after the page has scrolled past `threshold`, a small
 * floating control rises at the page's corner and returns the reader to
@@ -32,7 +26,7 @@ function chevronUp() {
 * paper, hairline and halo are its; this family owns only the floating
 * and the entrance.
 */
-function BackTop({ threshold = 400, label = "Back to top", scrollEl, ...rest }) {
+function BackTopImpl({ threshold = 400, label = "Back to top", scrollEl, ...rest }) {
 	injectComponentStyle("back-top");
 	const [visible, setVisible] = useState(false);
 	useEffect(() => {
@@ -74,9 +68,10 @@ function BackTop({ threshold = 400, label = "Back to top", scrollEl, ...rest })
 			"aria-hidden": visible ? void 0 : "true",
 			tabIndex: visible ? 0 : -1,
 			onClick: toTop,
-			children: rest.children ?? chevronUp()
+			children: rest.children ?? chevronUp
 		})
 	});
 }
+const BackTop = withSelfRoot(BackTopImpl);
 //#endregion
 export { BackTop };

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

@@ -6,5 +6,8 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   tone?: "ink" | "info" | "success" | "warning" | "danger";
   variant?: "solid" | "subtle" | "outline";
 }
-export declare function Badge({ tone, variant, ...rest }: BadgeProps): import("react").JSX.Element;
+declare function BadgeImpl({ tone, variant, ...rest }: BadgeProps): import("react").JSX.Element;
+export declare const Badge: typeof BadgeImpl & {
+  Root: typeof BadgeImpl;
+};
 //#endregion

package/dist/components/badge/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/badge/index.tsx
-function Badge({ tone = "ink", variant = "solid", ...rest }) {
+function BadgeImpl({ tone = "ink", variant = "solid", ...rest }) {
 	injectComponentStyle("badge");
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
@@ -11,5 +12,6 @@ function Badge({ tone = "ink", variant = "solid", ...rest }) {
 		"data-variant": variant
 	});
 }
+const Badge = withSelfRoot(BadgeImpl);
 //#endregion
 export { Badge };

package/dist/components/banner/index.mjs

@@ -1,3 +1,4 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
@@ -40,17 +41,7 @@ const Close = (rest) => {
 		"aria-label": rest["aria-label"] ?? messages.banner.dismiss,
 		"data-scope": "banner",
 		"data-part": "close",
-		children: /* @__PURE__ */ jsx("svg", {
-			viewBox: "0 0 16 16",
-			fill: "none",
-			"aria-hidden": true,
-			children: /* @__PURE__ */ jsx("path", {
-				d: "M4 4l8 8M12 4l-8 8",
-				stroke: "currentColor",
-				strokeWidth: 1.5,
-				strokeLinecap: "round"
-			})
-		})
+		children: iconNode("x")
 	});
 };
 const Banner = Object.assign(Root, {

package/dist/components/block-ui/index.d.mts

@@ -8,5 +8,8 @@ export interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {
 /** A curtain over content that must wait: the blocked region keeps its
  * shape and dims under frosted paper while a quiet wheel reports the
  * wait. Callers own the state; the curtain only answers it. */
-export declare function BlockUI({ blocked, children, ...rest }: BlockUIProps): import("react").JSX.Element;
+declare function BlockUIImpl({ blocked, children, ...rest }: BlockUIProps): import("react").JSX.Element;
+export declare const BlockUI: typeof BlockUIImpl & {
+  Root: typeof BlockUIImpl;
+};
 //#endregion

package/dist/components/block-ui/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Spinner } from "../spinner/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -5,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** A curtain over content that must wait: the blocked region keeps its
 * shape and dims under frosted paper while a quiet wheel reports the
 * wait. Callers own the state; the curtain only answers it. */
-function BlockUI({ blocked = false, children, ...rest }) {
+function BlockUIImpl({ blocked = false, children, ...rest }) {
 	injectComponentStyle("block-ui");
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
@@ -20,5 +21,6 @@ function BlockUI({ blocked = false, children, ...rest }) {
 		}) : null]
 	});
 }
+const BlockUI = withSelfRoot(BlockUIImpl);
 //#endregion
 export { BlockUI };

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

@@ -15,5 +15,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   children?: ReactNode;
 }
-export declare function Button({ variant, tone, size, square, asChild, disabled, type, children, ...rest }: ButtonProps): import("react").JSX.Element | null;
+declare function ButtonImpl({ variant, tone, size, square, asChild, disabled, type, children, ...rest }: ButtonProps): import("react").JSX.Element | null;
+export declare const Button: typeof ButtonImpl & {
+  Root: typeof ButtonImpl;
+};
 //#endregion

package/dist/components/button/index.mjs

@@ -1,8 +1,9 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from "react";
 //#region src/components/button/index.tsx
-function Button({ variant = "solid", tone = "ink", size = "md", square = false, asChild = false, disabled = false, type = "button", children, ...rest }) {
+function ButtonImpl({ variant = "solid", tone = "ink", size = "md", square = false, asChild = false, disabled = false, type = "button", children, ...rest }) {
 	injectComponentStyle("button");
 	const partProps = {
 		...rest,
@@ -25,5 +26,6 @@ function Button({ variant = "solid", tone = "ink", size = "md", square = false,
 		children
 	});
 }
+const Button = withSelfRoot(ButtonImpl);
 //#endregion
 export { Button };

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

@@ -1,3 +1,4 @@
+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
@@ -13,5 +14,6 @@ export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
  * 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. */
-export declare function Calendar({ value, min, max, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
+declare function CalendarImpl({ value, min, max, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
+export declare const Calendar: typeof CalendarImpl & typeof DatePicker$1;
 //#endregion

package/dist/components/calendar/index.mjs

@@ -1,18 +1,14 @@
+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";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker } from "@ark-ui/react/date-picker";
 //#region src/components/calendar/index.tsx
 function chevron(dir) {
-	return /* @__PURE__ */ jsx("svg", {
+	return iconNode(dir === "left" ? "chevron-left" : "chevron-right", {
 		width: 16,
-		height: 16,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 1.75,
-		"aria-hidden": true,
-		style: dir === "left" ? { transform: "rotate(180deg)" } : void 0,
-		children: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7" })
+		height: 16
 	});
 }
 /** The date-picker's month grid, standing on the page without its
@@ -20,9 +16,10 @@ function chevron(dir) {
 * 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 Calendar({ value, min, max, onValueChange, children, ...rest }) {
+function CalendarImpl({ value, min, max, onValueChange, children, ...rest }) {
 	injectComponentStyle("calendar");
 	injectComponentStyle("date-picker");
+	const hostId = useElementId("calendar", rest);
 	const title = (dp) => {
 		const d = dp.focusedValue;
 		if (!d) return "";
@@ -48,6 +45,7 @@ function Calendar({ value, min, max, onValueChange, children, ...rest }) {
 		"data-scope": "calendar",
 		"data-part": "root",
 		children: [/* @__PURE__ */ jsxs(DatePicker.Root, {
+			id: `${hostId}:date-picker`,
 			open: true,
 			closeOnSelect: true,
 			inline: true,
@@ -92,5 +90,6 @@ function Calendar({ value, min, max, onValueChange, children, ...rest }) {
 		}), children]
 	});
 }
+const Calendar = Object.assign(CalendarImpl, DatePicker$1);
 //#endregion
 export { Calendar };

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

@@ -1,3 +1,4 @@
+import { CSSProperties, ComponentProps } from "react";
 import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
 //#region src/components/carousel/index.d.ts
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -5,5 +6,24 @@ import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
  * current indicator alone carries the ink. The API is Ark's own — Root,
  * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
  * Indicator, AutoplayTrigger, ProgressText. */
-export declare const Carousel: typeof Carousel$1;
+declare function CarouselRoot(props: ComponentProps<typeof Carousel$1.Root>): import("react").JSX.Element;
+type CarouselSlide = string | {
+  label: string;
+};
+type CarouselFacadeProps = {
+  value?: number;
+  defaultValue?: number;
+  items: CarouselSlide[];
+  spacing?: string;
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (page: number) => void;
+};
+/** The complete carousel behind a slide list: arrows, progress, items, and
+ * indicators use the common lane. Custom slides remain anatomy work. */
+declare function CarouselFacade(props: CarouselFacadeProps): import("react").JSX.Element;
+export declare const Carousel: typeof CarouselFacade & Omit<typeof Carousel$1, "Root"> & {
+  Root: typeof CarouselRoot;
+};
 //#endregion

package/dist/components/carousel/index.mjs

@@ -1,4 +1,7 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
 //#region src/components/carousel/index.tsx
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -6,7 +9,45 @@ import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
 * current indicator alone carries the ink. The API is Ark's own — Root,
 * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
 * Indicator, AutoplayTrigger, ProgressText. */
-const Carousel = Carousel$1;
-injectComponentStyle("carousel");
+function CarouselRoot(props) {
+	injectComponentStyle("carousel");
+	const id = useElementId("carousel", props);
+	return /* @__PURE__ */ jsx(Carousel$1.Root, {
+		...props,
+		id
+	});
+}
+/** The complete carousel behind a slide list: arrows, progress, items, and
+* indicators use the common lane. Custom slides remain anatomy work. */
+function CarouselFacade(props) {
+	const { value, defaultValue, items, spacing, label, className, style, onValueChange } = props;
+	const slides = items.map((item) => typeof item === "string" ? item : item.label);
+	return /* @__PURE__ */ jsxs(CarouselRoot, {
+		"aria-label": label,
+		slideCount: slides.length,
+		defaultPage: defaultValue,
+		page: value,
+		spacing,
+		className,
+		style,
+		onPageChange: (event) => onValueChange?.(event.page),
+		children: [
+			/* @__PURE__ */ jsxs(Carousel$1.Control, { children: [
+				/* @__PURE__ */ jsx(Carousel$1.PrevTrigger, { children: iconNode("chevron-left") }),
+				/* @__PURE__ */ jsx(Carousel$1.ProgressText, {}),
+				/* @__PURE__ */ jsx(Carousel$1.NextTrigger, { children: iconNode("chevron-right") })
+			] }),
+			/* @__PURE__ */ jsx(Carousel$1.ItemGroup, { children: slides.map((slide, index) => /* @__PURE__ */ jsx(Carousel$1.Item, {
+				index,
+				children: slide
+			}, index)) }),
+			/* @__PURE__ */ jsx(Carousel$1.IndicatorGroup, { children: slides.map((_, index) => /* @__PURE__ */ jsx(Carousel$1.Indicator, { index }, index)) })
+		]
+	});
+}
+const Carousel = Object.assign(CarouselFacade, {
+	...Carousel$1,
+	Root: CarouselRoot
+});
 //#endregion
 export { Carousel };

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

@@ -6,6 +6,8 @@ export interface CascadeSelectNode {
   children?: CascadeSelectNode[];
   disabled?: boolean;
 }
+/**
+
 /**
  * A corridor of linked columns: pick a branch and the next column
  * dissolves open beside it, until a leaf click settles the whole path.
@@ -27,5 +29,8 @@ export interface CascadeSelectProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md" | "lg";
   onValueChange?: (value: string[][]) => void;
 }
-export declare function CascadeSelect({ value, data, placeholder, highlightTrigger, filterable, multiple, disabled, size, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
+declare function CascadeSelectImpl({ value, data, placeholder, highlightTrigger, filterable, multiple, disabled, size, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
+export declare const CascadeSelect: typeof CascadeSelectImpl & {
+  Root: typeof CascadeSelectImpl;
+};
 //#endregion