@bysages/solid 0.4.0 → 0.4.2

package/dist/components/tag/index.mjs

@@ -0,0 +1,108 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { delegateEvents, effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createMemo, createSignal, splitProps } from "solid-js";
+//#region src/components/tag/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span data-scope=tag data-part=close aria-hidden=true>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button type=button data-scope=tag data-part=close aria-label=Remove>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<button><!><!>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span><!><!>`);
+const Tag = withSelfRoot(function Tag(props) {
+	injectComponentStyle("tag");
+	const [own, rest] = splitProps(props, [
+		"tone",
+		"variant",
+		"checkable",
+		"checked",
+		"defaultValue",
+		"closable",
+		"disabled",
+		"children",
+		"onValueChange",
+		"onClose"
+	]);
+	const [internalChecked, setInternalChecked] = createSignal(own.defaultValue ?? false);
+	const checked = createMemo(() => own.checked ?? internalChecked());
+	const pressed = () => own.checkable ? checked() : false;
+	const toggle = () => {
+		if (own.disabled) return;
+		const next = !checked();
+		setInternalChecked(next);
+		own.onValueChange?.(next);
+	};
+	const dismiss = (event) => {
+		event.stopPropagation();
+		if (own.disabled) return;
+		own.onClose?.();
+	};
+	const rootAttrs = () => ({
+		"data-scope": "tag",
+		"data-part": "root",
+		"data-tone": own.tone ?? "ink",
+		"data-variant": own.variant ?? "solid",
+		...own.checkable ? { "data-checkable": "true" } : {},
+		...pressed() ? { "data-checked": "true" } : {},
+		...own.disabled ? { "data-disabled": "true" } : {}
+	});
+	const closeControl = own.closable ? own.checkable ? (() => {
+		var _el$ = _tmpl$();
+		_el$._$$click = dismiss;
+		insert(_el$, () => {
+			return iconNode("x");
+		});
+		return _el$;
+	})() : (() => {
+		var _el$2 = _tmpl$2();
+		_el$2._$$click = dismiss;
+		insert(_el$2, () => {
+			return iconNode("x");
+		});
+		effect(() => own.disabled, (_v$) => {
+			setAttribute(_el$2, "disabled", _v$);
+		});
+		return _el$2;
+	})() : null;
+	if (own.checkable) {
+		var _el$3 = _tmpl$3();
+		var _el$4 = _el$3.firstChild;
+		var _el$5 = _el$4.nextSibling;
+		spread(_el$3, [
+			rest,
+			rootAttrs,
+			{
+				type: "button",
+				get "aria-pressed"() {
+					return checked();
+				},
+				get disabled() {
+					return own.disabled;
+				},
+				onclick: toggle
+			}
+		], true);
+		insert(_el$3, () => {
+			return own.children;
+		}, _el$4);
+		insert(_el$3, closeControl, _el$5);
+		return _el$3;
+	}
+	var _el$6 = _tmpl$4();
+	var _el$7 = _el$6.firstChild;
+	var _el$8 = _el$7.nextSibling;
+	spread(_el$6, [
+		rest,
+		rootAttrs,
+		() => {
+			return own.disabled ? { "aria-disabled": "true" } : {};
+		}
+	], true);
+	insert(_el$6, () => {
+		return own.children;
+	}, _el$7);
+	insert(_el$6, closeControl, _el$8);
+	return _el$6;
+});
+delegateEvents(["click"]);
+//#endregion
+export { Tag };

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

@@ -10,7 +10,24 @@ type TagsInputOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function TagsInputRoot(props: TagsInputRootProps & TagsInputOwnProps): import("solid-js").JSX.Element;
-export declare const TagsInput: typeof TagsInputRoot & Omit<typeof TagsInput$1, "Root"> & {
+export interface TagsInputFacadeProps {
+  value?: string[];
+  defaultValue?: string[];
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  /** Show the clear-all control when values exist. */
+  clearable?: boolean;
+  /** One rung of the control-height ladder for the vessel at rest. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string[]) => void;
+}
+/** The one-tag path: one labelled vessel whose values become editable
+ * chips. Delimiters, limits, and custom validation stay on the anatomy. */
+declare function TagsInputFacade(props: TagsInputFacadeProps): import("solid-js").JSX.Element;
+export declare const TagsInput: typeof TagsInputFacade & Omit<typeof TagsInput$1, "Root"> & {
   Root: typeof TagsInputRoot;
 };
 //#endregion

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

@@ -1,8 +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 { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, 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) {
@@ -17,7 +18,86 @@ function TagsInputRoot(props) {
 		}
 	}));
 }
-const TagsInput = defineFamily(TagsInputRoot, {
+function closeIcon() {
+	return iconNode("x");
+}
+/** The one-tag path: one labelled vessel whose values become editable
+* chips. Delimiters, limits, and custom validation stay on the anatomy. */
+function TagsInputFacade(props) {
+	injectComponentStyle("tags-input");
+	return createComponent(TagsInputRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (event) => props.onValueChange?.(event.value),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(TagsInput$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(TagsInput$1.Control, { get children() {
+					return [
+						createComponent(TagsInput$1.Context, { children: (tagsInput) => createComponent(For, {
+							get each() {
+								return tagsInput().value;
+							},
+							children: (tag, index) => createComponent(TagsInput$1.Item, {
+								get index() {
+									return index();
+								},
+								value: tag,
+								get children() {
+									return [createComponent(TagsInput$1.ItemPreview, { get children() {
+										return [createComponent(TagsInput$1.ItemText, { children: tag }), createComponent(TagsInput$1.ItemDeleteTrigger, { get children() {
+											return closeIcon();
+										} })];
+									} }), createComponent(TagsInput$1.ItemInput, {})];
+								}
+							})
+						}) }),
+						createComponent(TagsInput$1.Input, { get placeholder() {
+							return props.placeholder;
+						} }),
+						createComponent(Show, {
+							get when() {
+								return props.clearable !== false;
+							},
+							get children() {
+								return createComponent(TagsInput$1.ClearTrigger, { get children() {
+									return closeIcon();
+								} });
+							}
+						})
+					];
+				} }),
+				createComponent(TagsInput$1.HiddenInput, {})
+			];
+		}
+	}));
+}
+const TagsInput = defineFamily(TagsInputFacade, {
 	...TagsInput$1,
 	Root: TagsInputRoot
 });

package/dist/components/terminal/index.mjs

@@ -1,7 +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>`);

package/dist/components/textarea/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 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

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

@@ -6,7 +6,18 @@ import { Timer as Timer$1 } from "@ark-ui/solid/timer";
  * is Ark's own — Root, Area, Control, Item, Separator, ActionTrigger,
  * Context. Unit labels are plain content, not a machine part. */
 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"> & {
+export interface TimerFacadeProps {
+  startMs?: number;
+  targetMs?: number;
+  countdown?: boolean;
+  autoStart?: boolean;
+  label?: string;
+}
+/** The complete timer behind one duration: minute and second digits with
+ * start, pause, resume, and reset. Finer intervals and custom faces remain
+ * anatomy work. */
+declare function TimerFacade(props: TimerFacadeProps): import("solid-js").JSX.Element;
+export declare const Timer: typeof TimerFacade & Omit<typeof Timer$1, "Root"> & {
   Root: typeof TimerRoot;
 };
 //#endregion

package/dist/components/timer/index.mjs

@@ -1,20 +1,72 @@
 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 { createComponent } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Timer as Timer$1 } from "@ark-ui/solid/timer";
-//#region src/components/timer/index.ts
+//#region src/components/timer/index.tsx
 /** 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. */
 function TimerRoot(props) {
 	const id = useElementId("timer", () => props.id);
-	return createComponent(Timer$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Timer$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Timer = defineFamily(TimerRoot, {
+/** The complete timer behind one duration: minute and second digits with
+* start, pause, resume, and reset. Finer intervals and custom faces remain
+* anatomy work. */
+function TimerFacade(props) {
+	injectComponentStyle("timer");
+	return createComponent(TimerRoot, {
+		get "aria-label"() {
+			return props.label;
+		},
+		get startMs() {
+			return props.startMs ?? 0;
+		},
+		get targetMs() {
+			return props.targetMs;
+		},
+		get countdown() {
+			return props.countdown;
+		},
+		get autoStart() {
+			return props.autoStart;
+		},
+		get children() {
+			return [createComponent(Timer$1.Area, { get children() {
+				return [
+					createComponent(Timer$1.Item, { type: "minutes" }),
+					createComponent(Timer$1.Separator, { children: ":" }),
+					createComponent(Timer$1.Item, { type: "seconds" })
+				];
+			} }), createComponent(Timer$1.Control, { get children() {
+				return [
+					createComponent(Timer$1.ActionTrigger, {
+						action: "start",
+						children: "Start"
+					}),
+					createComponent(Timer$1.ActionTrigger, {
+						action: "pause",
+						children: "Pause"
+					}),
+					createComponent(Timer$1.ActionTrigger, {
+						action: "resume",
+						children: "Resume"
+					}),
+					createComponent(Timer$1.ActionTrigger, {
+						action: "reset",
+						children: "Reset"
+					})
+				];
+			} })];
+		}
+	});
+}
+const Timer = defineFamily(TimerFacade, {
 	...Timer$1,
 	Root: TimerRoot
 });

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

@@ -1,17 +1,22 @@
-import { ComponentProps } from "solid-js";
-import { CreateToasterReturn, Toast as Toast$1, createToaster } from "@ark-ui/solid/toast";
+import { Accessor, ComponentProps, JSX } from "solid-js";
+import { CreateToasterReturn, Toast as Toast$1, ToastOptions, Toaster as Toaster$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
  * popup vessel while a pigment accents the title by type, and the machine's
  * translate variables carry the slide. The API is Ark's own — Toaster,
  * Root, Title, Description, ActionTrigger, CloseTrigger, plus
  * createToaster. */
-declare function ToastRoot(props: ComponentProps<typeof Toast$1.Root>): import("solid-js").JSX.Element;
+declare function ToastRoot(props: ComponentProps<typeof Toast$1.Root>): JSX.Element;
+export interface ToasterFacadeProps extends Omit<ComponentProps<typeof Toaster$1>, "children"> {
+  /** A custom notice card; it receives the machine's toast options. */
+  children?: (toast: Accessor<ToastOptions>) => JSX.Element;
+}
+declare function ToasterFacade(props: ToasterFacadeProps): 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;
+export declare const Toaster: typeof ToasterFacade & {
+  Root: typeof Toaster$1;
 };
 //#endregion
 export { type CreateToasterReturn, createToaster };

package/dist/components/toast/index.mjs

@@ -1,9 +1,11 @@
-import { n as withSelfRoot, t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+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 { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1, splitProps } from "solid-js";
 import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/solid/toast";
-//#region src/components/toast/index.ts
+//#region src/components/toast/index.tsx
 /** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
 * popup vessel while a pigment accents the title by type, and the machine's
 * translate variables carry the slide. The API is Ark's own — Toaster,
@@ -11,15 +13,45 @@ import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/s
 * createToaster. */
 function ToastRoot(props) {
 	const id = useElementId("toast", () => props.id);
-	return createComponent(Toast$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Toast$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
+function ToasterFacade(props) {
+	injectComponentStyle("toast");
+	const [own, rest] = splitProps(props, ["children"]);
+	return createComponent(Toaster$1, mergeProps(rest, { children: (toast) => own.children ? own.children(toast) : createComponent(Toast$1.Root, { get children() {
+		return [
+			createComponent(Toast$1.Title, { get children() {
+				return toast().title;
+			} }),
+			createComponent(Show, {
+				get when() {
+					return toast().description;
+				},
+				get children() {
+					return createComponent(Toast$1.Description, { get children() {
+						return toast().description;
+					} });
+				}
+			}),
+			createComponent(Toast$1.CloseTrigger, {
+				"aria-label": "Close",
+				get children() {
+					return iconNode("x", {
+						width: "14",
+						height: "14"
+					});
+				}
+			})
+		];
+	} }) }));
+}
 const Toast = defineFamily(ToastRoot, {
 	...Toast$1,
 	Root: ToastRoot
 });
-const Toaster = withSelfRoot(Toaster$1);
+const Toaster = defineFamily(ToasterFacade, { Root: Toaster$1 });
 injectComponentStyle("toast");
 //#endregion
 export { Toast, Toaster, createToaster };

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

@@ -1,11 +1,2 @@
-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
+import { n as TocFacadeProps, t as Toc } from "../../index-BU5U5w04.mjs";
+export { Toc, TocFacadeProps };

package/dist/components/toc/index.mjs

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

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

@@ -5,7 +5,14 @@ import { Toggle as Toggle$1 } from "@ark-ui/solid/toggle";
  * settles into the flat ink fill while pressed on. The API is Ark's own —
  * Root, Indicator. */
 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"> & {
+export interface ToggleFacadeProps extends ComponentProps<typeof Toggle$1.Root> {
+  /** The accessible name when the content is only a glyph. */
+  label?: string;
+}
+/** The complete pressed seal behind one label: the default content
+ * swaps through the indicator, so one child serves both states. */
+declare function ToggleFacade(props: ToggleFacadeProps): import("solid-js").JSX.Element;
+export declare const Toggle: typeof ToggleFacade & Omit<typeof Toggle$1, "Root"> & {
   Root: typeof ToggleRoot;
 };
 //#endregion

package/dist/components/toggle/index.mjs

@@ -1,19 +1,41 @@
 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 { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1, splitProps } from "solid-js";
 import { Toggle as Toggle$1 } from "@ark-ui/solid/toggle";
-//#region src/components/toggle/index.ts
+//#region src/components/toggle/index.tsx
 /** 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. */
 function ToggleRoot(props) {
 	const id = useElementId("toggle", () => props.id);
-	return createComponent(Toggle$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Toggle$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Toggle = defineFamily(ToggleRoot, {
+/** The complete pressed seal behind one label: the default content
+* swaps through the indicator, so one child serves both states. */
+function ToggleFacade(props) {
+	injectComponentStyle("toggle");
+	const [own, rest] = splitProps(props, ["children", "label"]);
+	return createComponent(ToggleRoot, mergeProps(rest, {
+		get "aria-label"() {
+			return own.label ?? rest["aria-label"];
+		},
+		get children() {
+			return createComponent(Toggle$1.Indicator, {
+				get fallback() {
+					return own.children;
+				},
+				get children() {
+					return own.children;
+				}
+			});
+		}
+	}));
+}
+const Toggle = defineFamily(ToggleFacade, {
 	...Toggle$1,
 	Root: ToggleRoot
 });

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

@@ -8,7 +8,29 @@ type ToggleGroupOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ToggleGroupRoot(props: ToggleGroupRootProps & ToggleGroupOwnProps): import("solid-js").JSX.Element;
-export declare const ToggleGroup: typeof ToggleGroupRoot & Omit<typeof ToggleGroup$1, "Root"> & {
+export type ToggleGroupItem = {
+  value: string;
+  label: string;
+  /** A built-in core-registry icon; omit it to render the label as text. */
+  icon?: string;
+  disabled?: boolean;
+};
+type ToggleGroupFacadeValue = string | string[];
+/** The complete toggle group: labels or curated icons share the same tray. */
+export interface ToggleGroupFacadeProps {
+  value?: ToggleGroupFacadeValue;
+  defaultValue?: ToggleGroupFacadeValue;
+  items: ToggleGroupItem[];
+  label?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  /** One rung of the control-height ladder for the items. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: ToggleGroupFacadeValue) => void;
+}
+declare function ToggleGroupFacade(props: ToggleGroupFacadeProps): import("solid-js").JSX.Element;
+type ToggleGroupParts = Omit<typeof ToggleGroup$1, "Root"> & {
   Root: typeof ToggleGroupRoot;
 };
+export declare const ToggleGroup: typeof ToggleGroupFacade & ToggleGroupParts;
 //#endregion

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

@@ -1,8 +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 { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, 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) {
@@ -17,7 +18,60 @@ function ToggleGroupRoot(props) {
 		}
 	}));
 }
-const ToggleGroup = defineFamily(ToggleGroupRoot, {
+function toArkValue(value) {
+	return value === void 0 ? [] : Array.isArray(value) ? value : [value];
+}
+function ToggleGroupFacade(props) {
+	injectComponentStyle("toggle-group");
+	return createComponent(ToggleGroupRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get "aria-label"() {
+			return props.label;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get multiple() {
+			return props.multiple;
+		},
+		get defaultValue() {
+			return toArkValue(props.defaultValue);
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: toArkValue(props.value) };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(props.multiple ? details.value : details.value.at(0) ?? ""),
+		get children() {
+			return createComponent(For, {
+				get each() {
+					return props.items;
+				},
+				children: (item) => createComponent(ToggleGroup$1.Item, {
+					get value() {
+						return item.value;
+					},
+					get disabled() {
+						return item.disabled;
+					},
+					get "aria-label"() {
+						return item.label;
+					},
+					get "data-variant"() {
+						return item.icon ? "icon" : "text";
+					},
+					get children() {
+						return memo(() => {
+							return !!item.icon;
+						})() ? iconNode(item.icon) : item.label;
+					}
+				})
+			});
+		}
+	}));
+}
+const ToggleGroup = defineFamily(ToggleGroupFacade, {
 	...ToggleGroup$1,
 	Root: ToggleGroupRoot
 });

package/dist/components/toolbar/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 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>`);

package/dist/components/tooltip/index.mjs

@@ -1,8 +1,8 @@
 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 { injectComponentStyle } from "@bysages/core";
 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.tsx