@bysages/solid 0.3.1 → 0.4.0

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

@@ -1,10 +1,22 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/solid/scroll-area";
 //#region src/components/scroll-area/index.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. */
-const ScrollArea = ScrollArea$1;
+function ScrollAreaRoot(props) {
+	const id = useElementId("scroll-area", () => props.id);
+	return createComponent(ScrollArea$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const ScrollArea = defineFamily(ScrollAreaRoot, {
+	...ScrollArea$1,
+	Root: ScrollAreaRoot
+});
 injectComponentStyle("scroll-area");
 //#endregion
 export { ScrollArea };

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

@@ -11,7 +11,7 @@ declare function SegmentGroupRoot(props: SegmentGroupRootProps & SegmentGroupOwn
 /** 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"> & {
+export declare const SegmentGroup: typeof SegmentGroupRoot & Omit<typeof SegmentGroup$1, "Root"> & {
   Root: typeof SegmentGroupRoot;
 };
 //#endregion

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

@@ -1,23 +1,28 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, splitProps } from "solid-js";
+import { createComponent, mergeProps, splitProps } from "solid-js";
 import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/solid/segment-group";
 //#region src/components/segment-group/index.tsx
 function SegmentGroupRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(SegmentGroup$1.Root, {
+	const id = useElementId("segment-group", () => rest.id);
+	return createComponent(SegmentGroup$1.Root, mergeProps(rest, {
 		get "data-size"() {
 			return own.size ?? "md";
 		},
-		...rest
-	});
+		get id() {
+			return id();
+		}
+	}));
 }
 /** 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 = {
+const SegmentGroup = defineFamily(SegmentGroupRoot, {
 	...SegmentGroup$1,
 	Root: SegmentGroupRoot
-};
+});
 injectComponentStyle("segment-group");
 //#endregion
 export { SegmentGroup };

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

@@ -1,2 +1,2 @@
-import { i as NativeSelectProps, n as NativeSelect, r as NativeSelectOption, t as Select } from "../../index-YPUiqD3n.mjs";
-export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select };
+import { a as NativeSelectProps, i as NativeSelectOption, n as SelectFacadeProps, r as NativeSelect, t as Select } from "../../index-ID48LCMU.mjs";
+export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select, SelectFacadeProps };

package/dist/components/select/index.mjs

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

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

@@ -7,5 +7,7 @@ export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
   orientation?: "horizontal" | "vertical";
   decorative?: boolean;
 }
-export declare function Separator(props: SeparatorProps): JSX.Element;
+export declare const Separator: ((props: SeparatorProps) => JSX.Element) & {
+  Root: (props: SeparatorProps) => JSX.Element;
+};
 //#endregion

package/dist/components/separator/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/separator/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function Separator(props) {
+const Separator = withSelfRoot(function Separator(props) {
 	injectComponentStyle("separator");
 	const [own, rest] = splitProps(props, ["orientation", "decorative"]);
 	const orientation = () => own.orientation ?? "horizontal";
@@ -22,6 +23,6 @@ function Separator(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Separator };

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

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/solid/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;
+declare function SignaturePadRoot(props: ComponentProps<typeof SignaturePad$1.Root>): import("solid-js").JSX.Element;
+export declare const SignaturePad: typeof SignaturePadRoot & Omit<typeof SignaturePad$1, "Root"> & {
+  Root: typeof SignaturePadRoot;
+};
 //#endregion

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

@@ -1,11 +1,23 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/solid/signature-pad";
 //#region src/components/signature-pad/index.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. */
-const SignaturePad = SignaturePad$1;
+function SignaturePadRoot(props) {
+	const id = useElementId("signature-pad", () => props.id);
+	return createComponent(SignaturePad$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const SignaturePad = defineFamily(SignaturePadRoot, {
+	...SignaturePad$1,
+	Root: SignaturePadRoot
+});
 injectComponentStyle("signature-pad");
 //#endregion
 export { SignaturePad };

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

@@ -3,5 +3,7 @@ import { JSX } from "solid-js";
 /** A waiting sheet of unset paper. Size it from the outside; the breath
  * is the component's own. */
 export type SkeletonProps = JSX.HTMLAttributes<HTMLDivElement>;
-export declare function Skeleton(props: SkeletonProps): JSX.Element;
+export declare const Skeleton: ((props: SkeletonProps) => JSX.Element) & {
+  Root: (props: SkeletonProps) => JSX.Element;
+};
 //#endregion

package/dist/components/skeleton/index.mjs

@@ -1,8 +1,9 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 //#region src/components/skeleton/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function Skeleton(props) {
+const Skeleton = withSelfRoot(function Skeleton(props) {
 	injectComponentStyle("skeleton");
 	var _el$ = _tmpl$();
 	spread(_el$, [props, {
@@ -10,6 +11,6 @@ function Skeleton(props) {
 		"data-part": "root"
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Skeleton };

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

@@ -9,7 +9,7 @@ type SliderOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SliderRoot(props: SliderRootProps & SliderOwnProps): import("solid-js").JSX.Element;
-export declare const Slider: Omit<typeof Slider$1, "Root"> & {
+export declare const Slider: typeof SliderRoot & Omit<typeof Slider$1, "Root"> & {
   Root: typeof SliderRoot;
 };
 //#endregion

package/dist/components/slider/index.mjs

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ import { Slider as Slider$1 } from "@ark-ui/solid/slider";
 //#region src/components/slider/index.tsx
 function SliderRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Slider$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("slider", () => rest.id);
+	return createComponent(Slider$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Slider = {
+const Slider = defineFamily(SliderRoot, {
 	...Slider$1,
 	Root: SliderRoot
-};
+});
 injectComponentStyle("slider");
 //#endregion
 export { Slider };

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

@@ -5,5 +5,7 @@ export interface SpinnerProps extends JSX.HTMLAttributes<HTMLElement> {
 }
 /** 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(props: SpinnerProps): JSX.Element;
+export declare const Spinner: ((props: SpinnerProps) => JSX.Element) & {
+  Root: (props: SpinnerProps) => JSX.Element;
+};
 //#endregion

package/dist/components/spinner/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
@@ -6,7 +7,7 @@ import { splitProps } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template(`<span><svg viewBox="0 0 24 24"fill=none aria-hidden=true><circle cx=12 cy=12 r=9 stroke=currentColor stroke-opacity=0.2 stroke-width=2.5></circle><path d="M21 12a9 9 0 0 0-9-9"stroke=currentColor stroke-width=2.5 stroke-linecap=round>`);
 /** A wheel of waiting: one arc of ink turning about its center. Quiet by
 * default — it reports progress without claiming attention. */
-function Spinner(props) {
+const Spinner = withSelfRoot(function Spinner(props) {
 	injectComponentStyle("spinner");
 	const [own, rest] = splitProps(props, ["size"]);
 	const messages = useComponentMessages();
@@ -23,6 +24,6 @@ function Spinner(props) {
 		}
 	}], true);
 	return _el$;
-}
+});
 //#endregion
 export { Spinner };

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

@@ -1,3 +1,4 @@
+import { Menu } from "../menu/index.mjs";
 import { JSX } from "solid-js";
 //#region src/components/split-button/index.d.ts
 export interface SplitButtonEntry {
@@ -32,5 +33,6 @@ export interface SplitButtonProps extends Omit<JSX.HTMLAttributes<HTMLDivElement
  * button stylesheet's trigger register dresses it. The popup keeps the
  * menu parts untouched.
  */
-export declare function SplitButton(props: SplitButtonProps): JSX.Element;
+declare function SplitButtonImpl(props: SplitButtonProps): JSX.Element;
+export declare const SplitButton: typeof SplitButtonImpl & typeof Menu;
 //#endregion

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

@@ -1,5 +1,9 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { Button } from "../button/index.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { Menu as Menu$1 } from "../menu/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, spread, template } from "@solidjs/web";
 import { For, splitProps } from "solid-js";
@@ -8,7 +12,6 @@ import { Menu } from "@ark-ui/solid/menu";
 //#region src/components/split-button/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><!><!>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
 /**
 * A primary action with its alternatives one seam away: the main button
 * fires `onClick`, the fitted arrow opens a paper vessel of the same
@@ -18,7 +21,7 @@ var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24
 * button stylesheet's trigger register dresses it. The popup keeps the
 * menu parts untouched.
 */
-function SplitButton(props) {
+function SplitButtonImpl(props) {
 	injectComponentStyle("split-button");
 	injectComponentStyle("menu");
 	const [own, rest] = splitProps(props, [
@@ -35,6 +38,7 @@ function SplitButton(props) {
 	const variant = () => own.variant ?? "solid";
 	const tone = () => own.tone ?? "ink";
 	const size = () => own.size ?? "md";
+	const id = useElementId("split-button-menu");
 	const messages = useComponentMessages();
 	var _el$ = _tmpl$();
 	var _el$2 = _el$.firstChild;
@@ -62,6 +66,9 @@ function SplitButton(props) {
 		}
 	}), _el$2);
 	insert(_el$, createComponent(Menu.Root, {
+		get id() {
+			return id();
+		},
 		positioning: { placement: "bottom-end" },
 		get children() {
 			return [createComponent(Menu.Trigger, { asChild: (propsFn) => (() => {
@@ -122,7 +129,11 @@ function SplitButton(props) {
 }
 /** One stroke pointing down: all a fitted dropdown arrow needs. */
 function chevronDown() {
-	return _tmpl$3();
+	return iconNode("chevron-down", {
+		width: "16",
+		height: "16"
+	});
 }
+const SplitButton = defineFamily(SplitButtonImpl, Menu$1);
 //#endregion
 export { SplitButton };

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

@@ -1,7 +1,11 @@
+import { ComponentProps } from "solid-js";
 import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
 //#region src/components/splitter/index.d.ts
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
  * a hairline and a small paper-seal thumb answers the hand. The API is
  * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
-export declare const Splitter: typeof Splitter$1;
+declare function SplitterRoot(props: ComponentProps<typeof Splitter$1.Root>): import("solid-js").JSX.Element;
+export declare const Splitter: typeof SplitterRoot & Omit<typeof Splitter$1, "Root"> & {
+  Root: typeof SplitterRoot;
+};
 //#endregion

package/dist/components/splitter/index.mjs

@@ -1,10 +1,22 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js";
 import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
 //#region src/components/splitter/index.ts
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
 * a hairline and a small paper-seal thumb answers the hand. The API is
 * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
-const Splitter = Splitter$1;
+function SplitterRoot(props) {
+	const id = useElementId("splitter", () => props.id);
+	return createComponent(Splitter$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Splitter = defineFamily(SplitterRoot, {
+	...Splitter$1,
+	Root: SplitterRoot
+});
 injectComponentStyle("splitter");
 //#endregion
 export { Splitter };

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

@@ -7,5 +7,7 @@ export interface SpotlightProps extends JSX.HTMLAttributes<HTMLDivElement> {
 /** The ink-light card: a vessel whose rim and face take light from the
  * reader's hand. The wrapper only measures and writes the geometry —
  * the lamp itself is the two layers the stylesheet paints. */
-export declare function Spotlight(props: SpotlightProps): JSX.Element;
+export declare const Spotlight: ((props: SpotlightProps) => JSX.Element) & {
+  Root: (props: SpotlightProps) => JSX.Element;
+};
 //#endregion

package/dist/components/spotlight/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { insert, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -6,7 +7,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /** The ink-light card: a vessel whose rim and face take light from the
 * reader's hand. The wrapper only measures and writes the geometry —
 * the lamp itself is the two layers the stylesheet paints. */
-function Spotlight(props) {
+const Spotlight = withSelfRoot(function Spotlight(props) {
 	injectComponentStyle("spotlight");
 	const [own, rest] = splitProps(props, ["radius"]);
 	const track = (event) => {
@@ -33,6 +34,6 @@ function Spotlight(props) {
 		return props.children;
 	});
 	return _el$;
-}
+});
 //#endregion
 export { Spotlight };

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

@@ -7,5 +7,7 @@ export interface StackProps extends JSX.HTMLAttributes<HTMLDivElement> {
   align?: string;
   justify?: string;
 }
-export declare function Stack(props: StackProps): JSX.Element;
+export declare const Stack: ((props: StackProps) => JSX.Element) & {
+  Root: (props: StackProps) => JSX.Element;
+};
 //#endregion

package/dist/components/stack/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -13,7 +14,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Stack(props) {
+const Stack = withSelfRoot(function Stack(props) {
 	injectComponentStyle("stack");
 	const [own, rest] = splitProps(props, [
 		"direction",
@@ -28,9 +29,9 @@ function Stack(props) {
 			return {
 				...rest.style,
 				"--bs-stack-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
-				"align-items": own.align,
-				"justify-content": own.justify,
-				"flex-wrap": own.wrap ? "wrap" : void 0
+				"--bs-stack-align": own.align,
+				"--bs-stack-justify": own.justify,
+				"--bs-stack-wrap": own.wrap ? "wrap" : void 0
 			};
 		},
 		"data-scope": "stack",
@@ -40,6 +41,6 @@ function Stack(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Stack };

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

@@ -8,16 +8,33 @@ import { Steps as Steps$1, StepsRootProps } from "@ark-ui/solid/steps";
  * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
  * data-complete / data-current / data-incomplete.
  */
+type StepsRootProps$1 = StepsRootProps & StepsOwnProps;
 type StepsOwnProps = {
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
 };
-declare function StepsRoot(props: StepsRootProps & StepsOwnProps): import("solid-js").JSX.Element;
+declare function StepsRoot(props: StepsRootProps$1): import("solid-js").JSX.Element;
+type StepsItem = {
+  title: string;
+};
+export interface StepsFacadeProps {
+  items: StepsItem[];
+  step?: number;
+  defaultStep?: number;
+  linear?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the control-height ladder every indicator stands on. */
+  size?: "sm" | "md" | "lg";
+  class?: string;
+  onStepChange?: (step: number) => void;
+}
+declare function StepsFacade(props: StepsFacadeProps): import("solid-js").JSX.Element;
 /** The machine wraps each tab in an item div; presentation keeps the
  * tablist owned children legal while the tab itself keeps its role. */
 declare function StepsItem(props: ComponentProps<typeof Steps$1.Item>): import("solid-js").JSX.Element;
-export declare const Steps: Omit<typeof Steps$1, "Root" | "Item"> & {
+export declare const Steps: typeof StepsFacade & Omit<typeof Steps$1, "Root" | "Item"> & {
   Root: typeof StepsRoot;
   Item: typeof StepsItem;
 };
-//#endregion
+//#endregion
+export { StepsItem };

package/dist/components/steps/index.mjs

@@ -1,24 +1,83 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { For, splitProps } from "solid-js";
 import { Steps as Steps$1 } from "@ark-ui/solid/steps";
 //#region src/components/steps/index.tsx
 function StepsRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Steps$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("steps", () => rest.id);
+	return createComponent(Steps$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
+}
+function StepsFacade(props) {
+	injectComponentStyle("steps");
+	return createComponent(StepsRoot, mergeProps({
+		get "class"() {
+			return props.class;
+		},
+		get size() {
+			return props.size ?? "md";
+		},
+		get count() {
+			return props.items.length;
+		},
+		get linear() {
+			return props.linear ?? false;
+		},
+		get orientation() {
+			return props.orientation ?? "horizontal";
+		},
+		get defaultStep() {
+			return props.defaultStep ?? 0;
+		}
+	}, () => {
+		return props.step === void 0 ? {} : { step: props.step };
+	}, {
+		onStepChange: (details) => props.onStepChange?.(details.step),
+		get children() {
+			return createComponent(Steps$1.List, { get children() {
+				return createComponent(For, {
+					get each() {
+						return props.items;
+					},
+					children: (item, index) => createComponent(Steps$1.Item, {
+						get index() {
+							return index();
+						},
+						role: "presentation",
+						get children() {
+							return [createComponent(Steps$1.Trigger, { get children() {
+								return [createComponent(Steps$1.Indicator, { get children() {
+									return String(index() + 1);
+								} }), memo(() => {
+									return item.title;
+								})];
+							} }), createComponent(Steps$1.Separator, {})];
+						}
+					})
+				});
+			} });
+		}
+	}));
 }
 /** The machine wraps each tab in an item div; presentation keeps the
 * tablist owned children legal while the tab itself keeps its role. */
 function StepsItem(props) {
 	return createComponent(Steps$1.Item, mergeProps(props, { role: "presentation" }));
 }
-const Steps = {
+const Steps = defineFamily(StepsFacade, {
 	...Steps$1,
 	Root: StepsRoot,
 	Item: StepsItem
-};
+});
 injectComponentStyle("steps");
 //#endregion
 export { Steps };

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

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { Swap as Swap$1 } from "@ark-ui/solid/swap";
 //#region src/components/swap/index.d.ts
 /** Ark's Swap, dressed in the paper-and-ink system: two impressions
  * occupying one seal, the arriving one growing into place on the spring
  * while the departing one shrinks away. The API is Ark's own — Root,
  * Indicator (type="on" | "off"), RootProvider. */
-export declare const Swap: typeof Swap$1;
+declare function SwapRoot(props: ComponentProps<typeof Swap$1.Root>): import("solid-js").JSX.Element;
+export declare const Swap: typeof SwapRoot & Omit<typeof Swap$1, "Root"> & {
+  Root: typeof SwapRoot;
+};
 //#endregion

package/dist/components/swap/index.mjs

@@ -1,11 +1,23 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js";
 import { Swap as Swap$1 } from "@ark-ui/solid/swap";
 //#region src/components/swap/index.ts
 /** Ark's Swap, dressed in the paper-and-ink system: two impressions
 * occupying one seal, the arriving one growing into place on the spring
 * while the departing one shrinks away. The API is Ark's own — Root,
 * Indicator (type="on" | "off"), RootProvider. */
-const Swap = Swap$1;
+function SwapRoot(props) {
+	const id = useElementId("swap", () => props.id);
+	return createComponent(Swap$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Swap = defineFamily(SwapRoot, {
+	...Swap$1,
+	Root: SwapRoot
+});
 injectComponentStyle("swap");
 //#endregion
 export { Swap };

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

@@ -9,7 +9,7 @@ type SwitchOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SwitchRoot(props: SwitchRootProps & SwitchOwnProps): import("solid-js").JSX.Element;
-export declare const Switch: Omit<typeof Switch$1, "Root"> & {
+export declare const Switch: typeof SwitchRoot & Omit<typeof Switch$1, "Root"> & {
   Root: typeof SwitchRoot;
 };
 //#endregion