@bysages/solid 0.3.1 → 0.4.1

package/dist/components/tabs/index.mjs

@@ -1,11 +1,17 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, splitProps } from "solid-js";
 import { Tabs as Tabs$1 } from "@ark-ui/solid/tabs";
 //#region src/components/tabs/index.tsx
 function TabsRoot(props) {
 	const [own, rest] = splitProps(props, ["size", "variant"]);
+	const id = useElementId("tabs", () => rest.id);
 	return createComponent(Tabs$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get "data-size"() {
 			return own.size ?? "md";
 		},
@@ -14,10 +20,60 @@ function TabsRoot(props) {
 		}
 	}));
 }
-const Tabs = {
+function TabsFacade(props) {
+	injectComponentStyle("tabs");
+	return createComponent(TabsRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get variant() {
+			return props.variant ?? "line";
+		},
+		get orientation() {
+			return props.orientation ?? "horizontal";
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [createComponent(Tabs$1.List, { get children() {
+				return [createComponent(For, {
+					get each() {
+						return props.items;
+					},
+					children: (item) => createComponent(Tabs$1.Trigger, {
+						get value() {
+							return item.value;
+						},
+						get children() {
+							return item.label;
+						}
+					})
+				}), createComponent(Tabs$1.Indicator, {})];
+			} }), createComponent(For, {
+				get each() {
+					return props.items;
+				},
+				children: (item) => createComponent(Tabs$1.Content, {
+					get value() {
+						return item.value;
+					},
+					get children() {
+						return item.content;
+					}
+				})
+			})];
+		}
+	}));
+}
+const Tabs = defineFamily(TabsFacade, {
 	...Tabs$1,
 	Root: TabsRoot
-};
+});
 injectComponentStyle("tabs");
 //#endregion
 export { Tabs };

package/dist/components/tags-input/index.d.mts

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

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

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

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

@@ -13,5 +13,7 @@ export interface TerminalProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>,
  * component owns only the reading and the caret — each entered line
  * leaves as an event, and the caller answers through the lines prop,
  * so history stays theirs to shape. */
-export declare function Terminal(props: TerminalProps): JSX.Element;
+export declare const Terminal: ((props: TerminalProps) => JSX.Element) & {
+  Root: (props: TerminalProps) => JSX.Element;
+};
 //#endregion

package/dist/components/terminal/index.mjs

@@ -1,6 +1,7 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, delegateEvents, effect, insert, ref, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, createEffect, createSignal, onMount, splitProps } from "solid-js";
 //#region src/components/terminal/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=terminal data-part=scroll></div><div data-scope=terminal data-part=entry><span data-scope=terminal data-part=sigil aria-hidden=true></span><input data-scope=terminal data-part=input autocomplete=off>`);
@@ -9,7 +10,7 @@ var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=terminal data-part=line>
 * component owns only the reading and the caret — each entered line
 * leaves as an event, and the caller answers through the lines prop,
 * so history stays theirs to shape. */
-function Terminal(props) {
+const Terminal = withSelfRoot(function Terminal(props) {
 	const messages = useComponentMessages();
 	injectComponentStyle("terminal");
 	const [own, rest] = splitProps(props, [
@@ -80,7 +81,7 @@ function Terminal(props) {
 		a !== _p$?.a && setAttribute(_el$5, "aria-label", a);
 	});
 	return _el$;
-}
+});
 delegateEvents(["input", "keydown"]);
 //#endregion
 export { Terminal };

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

@@ -10,5 +10,7 @@ export interface TextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaEl
  * itself from the `invalid` prop; inside a `Field.Root` it consumes the
  * field context, picking up the label id, the described-by wiring and
  * the invalid state for free. Disabled rides the native attribute. */
-export declare function Textarea(props: TextareaProps): JSX.Element;
+export declare const Textarea: ((props: TextareaProps) => JSX.Element) & {
+  Root: (props: TextareaProps) => JSX.Element;
+};
 //#endregion

package/dist/components/textarea/index.mjs

@@ -1,5 +1,6 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { mergeProps as mergeProps$1, splitProps } from "solid-js";
 import { useFieldContext } from "@ark-ui/solid/field";
 //#region src/components/textarea/index.tsx
@@ -9,7 +10,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<textarea>`);
 * itself from the `invalid` prop; inside a `Field.Root` it consumes the
 * field context, picking up the label id, the described-by wiring and
 * the invalid state for free. Disabled rides the native attribute. */
-function Textarea(props) {
+const Textarea = withSelfRoot(function Textarea(props) {
 	injectComponentStyle("textarea");
 	const field = useFieldContext();
 	const [own, rest] = splitProps(props, [
@@ -32,6 +33,6 @@ function Textarea(props) {
 		});
 	}, false);
 	return _el$;
-}
+});
 //#endregion
 export { Textarea };

package/dist/components/timeline/index.mjs

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/timeline/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<ol>`);

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

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { Timer as Timer$1 } from "@ark-ui/solid/timer";
 //#region src/components/timer/index.d.ts
 /** Ark's Timer, dressed in the paper-and-ink system: monospaced digits
  * that never jitter, quiet action triggers on the control recipe. The API
  * is Ark's own — Root, Area, Control, Item, Separator, ActionTrigger,
  * Context. Unit labels are plain content, not a machine part. */
-export declare const Timer: typeof Timer$1;
+declare function TimerRoot(props: ComponentProps<typeof Timer$1.Root>): import("solid-js").JSX.Element;
+export declare const Timer: typeof TimerRoot & Omit<typeof Timer$1, "Root"> & {
+  Root: typeof TimerRoot;
+};
 //#endregion

package/dist/components/timer/index.mjs

@@ -1,11 +1,23 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { Timer as Timer$1 } from "@ark-ui/solid/timer";
 //#region src/components/timer/index.ts
 /** Ark's Timer, dressed in the paper-and-ink system: monospaced digits
 * that never jitter, quiet action triggers on the control recipe. The API
 * is Ark's own — Root, Area, Control, Item, Separator, ActionTrigger,
 * Context. Unit labels are plain content, not a machine part. */
-const Timer = Timer$1;
+function TimerRoot(props) {
+	const id = useElementId("timer", () => props.id);
+	return createComponent(Timer$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Timer = defineFamily(TimerRoot, {
+	...Timer$1,
+	Root: TimerRoot
+});
 injectComponentStyle("timer");
 //#endregion
 export { Timer };

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

@@ -1,3 +1,4 @@
+import { ComponentProps } from "solid-js";
 import { CreateToasterReturn, Toast as Toast$1, createToaster } from "@ark-ui/solid/toast";
 //#region src/components/toast/index.d.ts
 /** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
@@ -5,7 +6,12 @@ import { CreateToasterReturn, Toast as Toast$1, createToaster } from "@ark-ui/so
  * translate variables carry the slide. The API is Ark's own — Toaster,
  * Root, Title, Description, ActionTrigger, CloseTrigger, plus
  * createToaster. */
-export declare const Toast: typeof Toast$1;
-export declare const Toaster: (props: import("@ark-ui/solid/toast").ToasterProps) => import("solid-js").JSX.Element;
+declare function ToastRoot(props: ComponentProps<typeof Toast$1.Root>): import("solid-js").JSX.Element;
+export declare const Toast: typeof ToastRoot & Omit<typeof Toast$1, "Root"> & {
+  Root: typeof ToastRoot;
+};
+export declare const Toaster: ((props: import("@ark-ui/solid/toast").ToasterProps) => import("solid-js").JSX.Element) & {
+  Root: (props: import("@ark-ui/solid/toast").ToasterProps) => import("solid-js").JSX.Element;
+};
 //#endregion
 export { type CreateToasterReturn, createToaster };

package/dist/components/toast/index.mjs

@@ -1,4 +1,7 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot, t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/solid/toast";
 //#region src/components/toast/index.ts
 /** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
@@ -6,8 +9,17 @@ import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/s
 * translate variables carry the slide. The API is Ark's own — Toaster,
 * Root, Title, Description, ActionTrigger, CloseTrigger, plus
 * createToaster. */
-const Toast = Toast$1;
-const Toaster = Toaster$1;
+function ToastRoot(props) {
+	const id = useElementId("toast", () => props.id);
+	return createComponent(Toast$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Toast = defineFamily(ToastRoot, {
+	...Toast$1,
+	Root: ToastRoot
+});
+const Toaster = withSelfRoot(Toaster$1);
 injectComponentStyle("toast");
 //#endregion
 export { Toast, Toaster, createToaster };

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

@@ -1,2 +1,11 @@
-import { t as Toc } from "../../index-DdsnfV4f.mjs";
-export { Toc };
+import { ComponentProps } from "solid-js";
+import { Toc as Toc$1 } from "@ark-ui/solid/toc";
+//#region src/components/toc/index.d.ts
+/** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
+ * beside the scroll, one stroke of primary ink marking where the reader
+ * stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
+declare function TocRoot(props: ComponentProps<typeof Toc$1.Root>): import("solid-js").JSX.Element;
+export declare const Toc: typeof TocRoot & Omit<typeof Toc$1, "Root"> & {
+  Root: typeof TocRoot;
+};
+//#endregion

package/dist/components/toc/index.mjs

@@ -1,2 +1,2 @@
-import { t as Toc } from "../../toc-CZmYEaQR.mjs";
+import { t as Toc } from "../../toc-CqvGOp34.mjs";
 export { Toc };

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

@@ -1,7 +1,11 @@
+import { ComponentProps } from "solid-js";
 import { Toggle as Toggle$1 } from "@ark-ui/solid/toggle";
 //#region src/components/toggle/index.d.ts
 /** Ark's Toggle, dressed in the paper-and-ink system: a standalone seal that
  * settles into the flat ink fill while pressed on. The API is Ark's own —
  * Root, Indicator. */
-export declare const Toggle: typeof Toggle$1;
+declare function ToggleRoot(props: ComponentProps<typeof Toggle$1.Root>): import("solid-js").JSX.Element;
+export declare const Toggle: typeof ToggleRoot & Omit<typeof Toggle$1, "Root"> & {
+  Root: typeof ToggleRoot;
+};
 //#endregion

package/dist/components/toggle/index.mjs

@@ -1,10 +1,22 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { Toggle as Toggle$1 } from "@ark-ui/solid/toggle";
 //#region src/components/toggle/index.ts
 /** Ark's Toggle, dressed in the paper-and-ink system: a standalone seal that
 * settles into the flat ink fill while pressed on. The API is Ark's own —
 * Root, Indicator. */
-const Toggle = Toggle$1;
+function ToggleRoot(props) {
+	const id = useElementId("toggle", () => props.id);
+	return createComponent(Toggle$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Toggle = defineFamily(ToggleRoot, {
+	...Toggle$1,
+	Root: ToggleRoot
+});
 injectComponentStyle("toggle");
 //#endregion
 export { Toggle };

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

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

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

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

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

@@ -13,5 +13,7 @@ export interface ToolbarProps extends JSX.HTMLAttributes<HTMLDivElement> {
 /** A workbench rail: the start tools at the leading edge, the end tools
  * at the trailing, the rail itself carrying the toolbar role so
  * assistive tech reads it as one group of commands. */
-export declare function Toolbar(props: ToolbarProps): JSX.Element;
+export declare const Toolbar: ((props: ToolbarProps) => JSX.Element) & {
+  Root: (props: ToolbarProps) => JSX.Element;
+};
 //#endregion

package/dist/components/toolbar/index.mjs

@@ -1,5 +1,6 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { createComponent, insert, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, splitProps } from "solid-js";
 //#region src/components/toolbar/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=toolbar data-part=group data-edge=end>`);
@@ -7,7 +8,7 @@ var _tmpl$2 = /* @__PURE__ */ template(`<div><div data-scope=toolbar data-part=g
 /** A workbench rail: the start tools at the leading edge, the end tools
 * at the trailing, the rail itself carrying the toolbar role so
 * assistive tech reads it as one group of commands. */
-function Toolbar(props) {
+const Toolbar = withSelfRoot(function Toolbar(props) {
 	injectComponentStyle("toolbar");
 	const [own, rest] = splitProps(props, [
 		"label",
@@ -41,6 +42,6 @@ function Toolbar(props) {
 		}
 	}), null);
 	return _el$;
-}
+});
 //#endregion
 export { Toolbar };

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

@@ -1,7 +1,22 @@
+import { ComponentProps } from "solid-js";
 import { Tooltip as Tooltip$1 } from "@ark-ui/solid/tooltip";
 //#region src/components/tooltip/index.d.ts
 /** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
  * vessel — a tight chip of ink that dissolves in over its anchor. The
  * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-export declare const Tooltip: typeof Tooltip$1;
+declare function TooltipRoot(props: ComponentProps<typeof Tooltip$1.Root>): import("solid-js").JSX.Element;
+type TooltipPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface TooltipFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger: string | Element;
+  content: string;
+  disabled?: boolean;
+  placement?: TooltipPlacement;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function TooltipFacade(props: TooltipFacadeProps): import("solid-js").JSX.Element;
+export declare const Tooltip: typeof TooltipFacade & Omit<typeof Tooltip$1, "Root"> & {
+  Root: typeof TooltipRoot;
+};
 //#endregion

package/dist/components/tooltip/index.mjs

@@ -1,10 +1,63 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { n as withElementProps, t as isElement } from "../../element-dGIhOTJ6.mjs";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Tooltip as Tooltip$1 } from "@ark-ui/solid/tooltip";
-//#region src/components/tooltip/index.ts
+//#region src/components/tooltip/index.tsx
 /** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
 * vessel — a tight chip of ink that dissolves in over its anchor. The
 * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-const Tooltip = Tooltip$1;
+function TooltipRoot(props) {
+	const id = useElementId("tooltip", () => props.id);
+	return createComponent$1(Tooltip$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function TooltipFacade(props) {
+	injectComponentStyle("tooltip");
+	const triggerElement = () => isElement(props.trigger) ? props.trigger : void 0;
+	const triggerChildren = () => triggerElement() ? void 0 : props.trigger;
+	const triggerAsChild = (propsFn) => {
+		const trigger = triggerElement();
+		return trigger ? withElementProps(trigger, propsFn()) : props.trigger;
+	};
+	return createComponent(TooltipRoot, mergeProps(() => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, () => {
+		return props.placement === void 0 ? {} : { positioning: { placement: props.placement } };
+	}, {
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [createComponent(Tooltip$1.Trigger, {
+				get disabled() {
+					return props.disabled;
+				},
+				get asChild() {
+					return triggerElement() ? triggerAsChild : void 0;
+				},
+				get children() {
+					return triggerChildren();
+				}
+			}), createComponent(Tooltip$1.Positioner, { get children() {
+				return createComponent(Tooltip$1.Content, { get children() {
+					return [createComponent(Tooltip$1.Arrow, { get children() {
+						return createComponent(Tooltip$1.ArrowTip, {});
+					} }), memo(() => {
+						return props.content;
+					})];
+				} });
+			} })];
+		}
+	}));
+}
+const Tooltip = defineFamily(TooltipFacade, {
+	...Tooltip$1,
+	Root: TooltipRoot
+});
 injectComponentStyle("tooltip");
 //#endregion
 export { Tooltip };

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

@@ -1,4 +1,5 @@
-import { Tour as Tour$1, TourInteractOutsideEvent, TourPointerDownOutsideEvent, TourStepDetails, useTour } from "@ark-ui/solid/tour";
+import { JSX } from "solid-js";
+import { Tour as Tour$1, TourInteractOutsideEvent, TourPointerDownOutsideEvent, TourStepDetails, UseTourProps, UseTourReturn } from "@ark-ui/solid/tour";
 //#region src/components/tour/index.d.ts
 /** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
  * the spotlight alone keeps the focus halo, and the anchored card rides
@@ -6,6 +7,18 @@ import { Tour as Tour$1, TourInteractOutsideEvent, TourPointerDownOutsideEvent,
  * Spotlight, Positioner, Content, Arrow, ArrowTip, Title, Description,
  * ProgressText, Control, Actions, ActionTrigger, CloseTrigger, plus
  * useTour. */
-export declare const Tour: typeof Tour$1;
+export interface TourFacadeProps {
+  tour: UseTourReturn;
+  trigger?: string;
+  /** Replaces the standard card body when supplied. */
+  content?: JSX.Element;
+  children?: JSX.Element;
+}
+declare function TourFacade(props: TourFacadeProps): JSX.Element;
+export declare const Tour: typeof TourFacade & Omit<typeof Tour$1, "Root"> & {
+  Root: typeof Tour$1.Root;
+};
+/** Tour machines are created by useTour, so the stable id belongs there. */
+export declare function useTour(props?: UseTourProps): UseTourReturn;
 //#endregion
-export { type TourInteractOutsideEvent, type TourPointerDownOutsideEvent, type TourStepDetails, useTour };
+export type { TourInteractOutsideEvent, TourPointerDownOutsideEvent, TourStepDetails };

package/dist/components/tour/index.mjs

@@ -1,13 +1,78 @@
-import { injectComponentStyle } from "@bysages/core";
-import { Tour as Tour$1, useTour } from "@ark-ui/solid/tour";
-//#region src/components/tour/index.ts
-/** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
-* the spotlight alone keeps the focus halo, and the anchored card rides
-* the shared popup vessel. The API is Ark's own — Root, Backdrop,
-* Spotlight, Positioner, Content, Arrow, ArrowTip, Title, Description,
-* ProgressText, Control, Actions, ActionTrigger, CloseTrigger, plus
-* useTour. */
-const Tour = Tour$1;
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { Button } from "../button/index.mjs";
+import { createComponent, memo } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, mergeProps as mergeProps$1 } from "solid-js";
+import { Tour as Tour$1, useTour as useTour$1 } from "@ark-ui/solid/tour";
+//#region src/components/tour/index.tsx
+function TourFacade(props) {
+	injectComponentStyle("tour");
+	return createComponent(Tour$1.Root, {
+		get tour() {
+			return props.tour;
+		},
+		get children() {
+			return [
+				createComponent(Button, {
+					size: "sm",
+					onClick: () => props.tour().start(),
+					get children() {
+						return props.trigger ?? "Start tour";
+					}
+				}),
+				memo(() => {
+					return props.children;
+				}),
+				createComponent(Tour$1.Backdrop, {}),
+				createComponent(Tour$1.Spotlight, {}),
+				createComponent(Tour$1.Positioner, { get children() {
+					return createComponent(Tour$1.Content, { get children() {
+						return createComponent(Show, {
+							get when() {
+								return props.content;
+							},
+							get fallback() {
+								return createComponent(TourCardBody, {});
+							},
+							get children() {
+								return props.content;
+							}
+						});
+					} });
+				} })
+			];
+		}
+	});
+}
+function TourCardBody() {
+	return [
+		createComponent(Tour$1.ProgressText, {}),
+		createComponent(Tour$1.Title, {}),
+		createComponent(Tour$1.Description, {}),
+		createComponent(Tour$1.Control, { get children() {
+			return createComponent(Tour$1.Actions, { children: (actions) => memo(() => {
+				return actions().map((action) => createComponent(Tour$1.ActionTrigger, {
+					action,
+					get children() {
+						return action.label;
+					}
+				}));
+			}) });
+		} })
+	];
+}
+const Tour = defineFamily(TourFacade, {
+	...Tour$1,
+	Root: Tour$1.Root
+});
+/** Tour machines are created by useTour, so the stable id belongs there. */
+function useTour(props = {}) {
+	const id = useElementId("tour", () => props.id);
+	return useTour$1(mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
 injectComponentStyle("tour");
 //#endregion
 export { Tour, useTour };