@bysages/solid 0.2.2 → 0.3.0

package/dist/components/editable/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { Editable as Editable$1 } from "@ark-ui/solid/editable";
+//#region src/components/editable/index.tsx
+function EditableRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Editable$1.Root, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+const Editable = {
+	...Editable$1,
+	Root: EditableRoot
+};
+injectComponentStyle("editable");
+//#endregion
+export { Editable };

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

@@ -0,0 +1,10 @@
+import { JSX } from "solid-js";
+//#region src/components/ellipsis/index.d.ts
+/** The overflow knife: text cut at one line, or held to N lines. The
+ * primitive only draws the cut — reaching the full text (title,
+ * tooltip) stays the consumer's decision. */
+export interface EllipsisProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  lines?: number;
+}
+export declare function Ellipsis(props: EllipsisProps): JSX.Element;
+//#endregion

package/dist/components/ellipsis/index.mjs

@@ -0,0 +1,27 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/ellipsis/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+function Ellipsis(props) {
+	injectComponentStyle("ellipsis");
+	const [own, rest] = splitProps(props, ["lines"]);
+	const multiline = () => (own.lines ?? 1) > 1;
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				...multiline() ? { "--bs-ellipsis-lines": String(own.lines) } : {}
+			};
+		},
+		"data-scope": "ellipsis",
+		"data-part": "root",
+		get "data-multiline"() {
+			return multiline() ? "" : void 0;
+		}
+	}], false);
+	return _el$;
+}
+//#endregion
+export { Ellipsis };

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

@@ -0,0 +1,10 @@
+import { Component } from "solid-js";
+//#region src/components/empty/index.d.ts
+export declare const Empty: Component<Record<string, unknown>> & {
+  Root: Component<Record<string, unknown>>;
+  Visual: Component<Record<string, unknown>>;
+  Title: Component<Record<string, unknown>>;
+  Description: Component<Record<string, unknown>>;
+  Actions: Component<Record<string, unknown>>;
+};
+//#endregion

package/dist/components/empty/index.mjs

@@ -0,0 +1,31 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+//#region src/components/empty/index.tsx
+/** An empty state: the page holds its breath. Root centers the column,
+* Visual carries the mark, Title and Description carry the ink, Actions
+* the way out. Any subset composes. */
+function part(name, tag) {
+	return ((props) => {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "empty",
+			get "data-part"() {
+				return name.toLowerCase();
+			}
+		}));
+	});
+}
+const Root = part("Root", "div");
+const Visual = part("Visual", "div");
+const Title = part("Title", "h3");
+const Description = part("Description", "p");
+const Actions = part("Actions", "div");
+const Empty = Object.assign(Root, {
+	Root,
+	Visual,
+	Title,
+	Description,
+	Actions
+});
+injectComponentStyle("empty");
+//#endregion
+export { Empty };

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

@@ -0,0 +1,8 @@
+import { Field as Field$1 } from "@ark-ui/solid/field";
+//#region src/components/field/index.d.ts
+/** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
+ * border-and-halo control, and quiet help text. The API is Ark's own —
+ * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
+ * RequiredIndicator. */
+export declare const Field: typeof Field$1;
+//#endregion

package/dist/components/field/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Field as Field$1 } from "@ark-ui/solid/field";
+//#region src/components/field/index.ts
+/** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
+* border-and-halo control, and quiet help text. The API is Ark's own —
+* Root, Label, Input, Textarea, Select, HelperText, ErrorText,
+* RequiredIndicator. */
+const Field = Field$1;
+injectComponentStyle("field");
+//#endregion
+export { Field };

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

@@ -0,0 +1,7 @@
+import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
+//#region src/components/fieldset/index.d.ts
+/** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
+ * legend heading a column of fields. The API is Ark's own — Root, Legend,
+ * HelperText, ErrorText. */
+export declare const Fieldset: typeof Fieldset$1;
+//#endregion

package/dist/components/fieldset/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
+//#region src/components/fieldset/index.ts
+/** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
+* legend heading a column of fields. The API is Ark's own — Root, Legend,
+* HelperText, ErrorText. */
+const Fieldset = Fieldset$1;
+injectComponentStyle("fieldset");
+//#endregion
+export { Fieldset };

package/dist/components/file-upload/index.d.mts

@@ -0,0 +1,17 @@
+import { FileUpload as FileUpload$1, FileUploadRootProps } from "@ark-ui/solid/file-upload";
+//#region src/components/file-upload/index.d.ts
+/** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
+ * dropzone that floods with subtle light on drag-over, and accepted files
+ * as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
+ * Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
+ * ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
+ * Context. */
+type FileUploadOwnProps = {
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+};
+declare function FileUploadRoot(props: FileUploadRootProps & FileUploadOwnProps): import("solid-js").JSX.Element;
+export declare const FileUpload: Omit<typeof FileUpload$1, "Root"> & {
+  Root: typeof FileUploadRoot;
+};
+//#endregion

package/dist/components/file-upload/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { FileUpload as FileUpload$1 } from "@ark-ui/solid/file-upload";
+//#region src/components/file-upload/index.tsx
+function FileUploadRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(FileUpload$1.Root, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+const FileUpload = {
+	...FileUpload$1,
+	Root: FileUploadRoot
+};
+injectComponentStyle("file-upload");
+//#endregion
+export { FileUpload };

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

@@ -0,0 +1,61 @@
+import { JSX } from "solid-js";
+//#region src/components/float-button/index.d.ts
+export type FloatButtonPlacement = "bottom-end" | "bottom-start" | "top-end" | "top-start";
+export type FloatButtonSize = "sm" | "md" | "lg";
+/** The group's openness, shared from the mooring to its parts. */
+export interface FloatButtonContext {
+  open: () => boolean;
+  /** The group's button rung; the trigger takes it whole, the items
+   * step down one. */
+  size: () => FloatButtonSize;
+  toggle: () => void;
+  /** Folds the fan — an Item calls this once its action fires, the way
+   * a speed dial closes after a choice. */
+  close: () => void;
+}
+/** Solid context for {@link FloatButtonContext}, exported so a custom
+ * part can read the group's state with `useContext`. */
+export declare const FloatButtonContextKey: import("solid-js").Context<FloatButtonContext | undefined>;
+export interface FloatButtonRootProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Controlled openness: leave unset to let the group hold its own
+   * state; while set, the Trigger reports back through
+   * `onOpenChange`. */
+  open?: boolean;
+  /** Which corner the group moors at. */
+  placement?: FloatButtonPlacement;
+  /** One rung of the button ladder for the whole group. */
+  size?: FloatButtonSize;
+  /** The openness changed — from the Trigger, or an Item folding the
+   * fan. */
+  onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A floating action and its fanned-out alternatives — FAB and speed
+ * dial in one family. The Root moors the group at a page corner and
+ * holds the openness (mirrored from `open` when controlled); the
+ * Trigger flips it; each Item is a round action with its name surfacing
+ * beside it while the group is open. The buttons are the shared recipe
+ * (vessels here: round); this family owns only the mooring, the fan
+ * and the fold.
+ */
+declare function FloatButtonRoot(props: FloatButtonRootProps): JSX.Element;
+export interface FloatButtonTriggerProps extends JSX.HTMLAttributes<HTMLButtonElement> {
+  /** The accessible name; the control is icon-only. */
+  label?: string;
+}
+declare function FloatButtonTrigger(props: FloatButtonTriggerProps): JSX.Element;
+export interface FloatButtonItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  /** The action's name: the button's accessible name and the
+   * annotation surfaced beside it while the group is open. */
+  label: string;
+  disabled?: boolean;
+  /** The action fired — the fan folds right after. */
+  onClick?: (event: MouseEvent) => void;
+}
+declare function FloatButtonItem(props: FloatButtonItemProps): JSX.Element;
+export declare const FloatButton: typeof FloatButtonRoot & {
+  Root: typeof FloatButtonRoot;
+  Trigger: typeof FloatButtonTrigger;
+  Item: typeof FloatButtonItem;
+};
+//#endregion

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

@@ -0,0 +1,129 @@
+import { Button } from "../button/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { createContext, createSignal, splitProps, useContext } from "solid-js";
+//#region src/components/float-button/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><span data-scope=float-button data-part=item-label aria-hidden=true>`);
+/** Solid context for {@link FloatButtonContext}, exported so a custom
+* part can read the group's state with `useContext`. */
+const FloatButtonContextKey = createContext();
+/**
+* A floating action and its fanned-out alternatives — FAB and speed
+* dial in one family. The Root moors the group at a page corner and
+* holds the openness (mirrored from `open` when controlled); the
+* Trigger flips it; each Item is a round action with its name surfacing
+* beside it while the group is open. The buttons are the shared recipe
+* (vessels here: round); this family owns only the mooring, the fan
+* and the fold.
+*/
+function FloatButtonRoot(props) {
+	const [own, rest] = splitProps(props, [
+		"open",
+		"placement",
+		"size",
+		"onOpenChange"
+	]);
+	const [inner, setInner] = createSignal(false);
+	const open = () => own.open ?? inner();
+	const setOpen = (value) => {
+		setInner(value);
+		own.onOpenChange?.(value);
+	};
+	const context = {
+		open,
+		size: () => own.size ?? "lg",
+		toggle: () => setOpen(!open()),
+		close: () => setOpen(false)
+	};
+	return createComponent(FloatButtonContextKey.Provider, {
+		value: context,
+		get children() {
+			var _el$ = _tmpl$();
+			spread(_el$, [rest, {
+				"data-scope": "float-button",
+				"data-part": "root",
+				get "data-placement"() {
+					return own.placement ?? "bottom-end";
+				},
+				get "data-state"() {
+					return open() ? "open" : "closed";
+				}
+			}], false);
+			return _el$;
+		}
+	});
+}
+const STEP_DOWN = {
+	lg: "md",
+	md: "sm",
+	sm: "sm"
+};
+function FloatButtonTrigger(props) {
+	const [own, rest] = splitProps(props, ["label", "children"]);
+	const context = useContext(FloatButtonContextKey);
+	return createComponent(Button, mergeProps(rest, {
+		variant: "solid",
+		square: true,
+		get size() {
+			return context?.size() ?? "lg";
+		},
+		onClick: () => context?.toggle(),
+		get "aria-label"() {
+			return own.label || "Actions";
+		},
+		get "aria-expanded"() {
+			return context?.open() ?? false;
+		},
+		get children() {
+			return own.children;
+		}
+	}));
+}
+function FloatButtonItem(props) {
+	const [own, rest] = splitProps(props, [
+		"label",
+		"disabled",
+		"onClick",
+		"children"
+	]);
+	const context = useContext(FloatButtonContextKey);
+	var _el$2 = _tmpl$2();
+	var _el$3 = _el$2.firstChild;
+	spread(_el$2, [rest, {
+		"data-scope": "float-button",
+		"data-part": "item"
+	}], true);
+	insert(_el$2, createComponent(Button, {
+		variant: "outline",
+		square: true,
+		get size() {
+			return context ? STEP_DOWN[context.size()] : "md";
+		},
+		get disabled() {
+			return own.disabled;
+		},
+		get "aria-label"() {
+			return own.label;
+		},
+		onClick: (event) => {
+			own.onClick?.(event);
+			context?.close();
+		},
+		get children() {
+			return own.children;
+		}
+	}), _el$3);
+	insert(_el$3, () => {
+		return own.label;
+	});
+	return _el$2;
+}
+const FloatButton = Object.assign(FloatButtonRoot, {
+	Root: FloatButtonRoot,
+	Trigger: FloatButtonTrigger,
+	Item: FloatButtonItem
+});
+injectComponentStyle("float-button");
+//#endregion
+export { FloatButton, FloatButtonContextKey };

package/dist/components/floating-panel/index.d.mts

@@ -0,0 +1,9 @@
+import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
+//#region src/components/floating-panel/index.d.ts
+/** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
+ * popup vessel let loose — a draggable, resizable sheet whose header is the
+ * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
+ * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
+ * Body. */
+export declare const FloatingPanel: typeof FloatingPanel$1;
+//#endregion

package/dist/components/floating-panel/index.mjs

@@ -0,0 +1,12 @@
+import { injectComponentStyle } from "@bysages/core";
+import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
+//#region src/components/floating-panel/index.ts
+/** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
+* popup vessel let loose — a draggable, resizable sheet whose header is the
+* handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
+* Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
+* Body. */
+const FloatingPanel = FloatingPanel$1;
+injectComponentStyle("floating-panel");
+//#endregion
+export { FloatingPanel };

package/dist/components/focus-trap/index.d.mts

@@ -0,0 +1,2 @@
+import { FocusTrap, FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/solid/focus-trap";
+export { FocusTrap, type FocusTrapBaseProps, type FocusTrapProps };

package/dist/components/focus-trap/index.mjs

@@ -0,0 +1,2 @@
+import { FocusTrap } from "@ark-ui/solid/focus-trap";
+export { FocusTrap };

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

@@ -0,0 +1,2 @@
+import { a as SolidFormApi, c as FormApi, i as FormProps, l as FieldApi, n as FormField, o as createField, r as FormFieldProps, s as createForm, t as Form } from "../../index-B1xiJ5ki.mjs";
+export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, type SolidFormApi, createField, createField as useField, createForm, createForm as useForm };

package/dist/components/form/index.mjs

@@ -0,0 +1,125 @@
+import { injectComponentStyle } from "@bysages/core";
+import { claimElement, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { Show, createContext, splitProps, useContext } from "solid-js";
+import { Field } from "@ark-ui/solid/field";
+import { createField, createForm } from "@tanstack/solid-form";
+//#region src/components/form/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<form>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+const FormContext = createContext(null);
+/** A validator's complaint is a string or a Standard Schema issue; both
+* reduce to the sentence the field shows. */
+function errorText(error) {
+	if (error == null) return "";
+	if (typeof error === "string") return error;
+	if (typeof error === "object" && "message" in error) return String(error.message);
+	return "";
+}
+function Form(props) {
+	injectComponentStyle("form");
+	injectComponentStyle("field");
+	const [own, rest] = splitProps(props, ["form"]);
+	return createComponent(FormContext.Provider, {
+		get value() {
+			return own.form;
+		},
+		get children() {
+			var _el$ = _tmpl$();
+			claimElement(_el$);
+			spread(_el$, [rest, {
+				"data-scope": "form",
+				"data-part": "root",
+				novalidate: true,
+				onSubmit: (event) => {
+					event.preventDefault();
+					own.form.handleSubmit();
+				}
+			}], false);
+			return _el$;
+		}
+	});
+}
+function FormField(props) {
+	const injected = useContext(FormContext);
+	const [own, rest] = splitProps(props, [
+		"form",
+		"name",
+		"label",
+		"hint",
+		"required",
+		"invalid",
+		"disabled",
+		"children"
+	]);
+	const form = () => own.form ?? injected;
+	const assemble = (field) => {
+		const errors = () => {
+			if (!field) return [];
+			const meta = field().state.meta;
+			return (meta.isTouched ? meta.errors ?? [] : [meta.errorMap?.onSubmit].flat().filter(Boolean)).map(errorText).filter(Boolean);
+		};
+		var _el$2 = _tmpl$2();
+		spread(_el$2, [rest, { get "data-form-field"() {
+			return own.name;
+		} }], true);
+		insert(_el$2, createComponent(Field.Root, {
+			get invalid() {
+				return own.invalid || errors().length > 0;
+			},
+			get required() {
+				return own.required;
+			},
+			get disabled() {
+				return own.disabled;
+			},
+			get children() {
+				return [
+					memo(() => {
+						return memo(() => {
+							return !!own.label;
+						})() ? createComponent(Field.Label, { get children() {
+							return own.label;
+						} }) : null;
+					}),
+					memo(() => {
+						return memo(() => {
+							return typeof own.children === "function";
+						})() ? own.children(field) : own.children;
+					}),
+					memo(() => {
+						return memo(() => {
+							return !!(own.hint && errors().length === 0);
+						})() ? createComponent(Field.HelperText, { get children() {
+							return own.hint;
+						} }) : null;
+					}),
+					memo(() => {
+						return memo(() => {
+							return errors().length > 0;
+						})() ? createComponent(Field.ErrorText, { get children() {
+							return errors()[0];
+						} }) : null;
+					})
+				];
+			}
+		}));
+		return _el$2;
+	};
+	return createComponent(Show, {
+		get when() {
+			return form();
+		},
+		keyed: true,
+		get fallback() {
+			return assemble(void 0);
+		},
+		children: (engine) => createComponent(engine.Field, mergeProps(rest, {
+			get name() {
+				return own.name;
+			},
+			children: (field) => assemble(field)
+		}))
+	});
+}
+//#endregion
+export { Form, FormField, createField, createField as useField, createForm, createForm as useForm };

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

@@ -0,0 +1,9 @@
+import { Format as Format$1 } from "@ark-ui/solid/format";
+//#region src/components/format/index.d.ts
+/** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
+ * numbers, currency, bytes and relative time. The components render bare
+ * text with no DOM of their own — typography flows from the token layer,
+ * so there is no component stylesheet. The API is Ark's own — Number,
+ * Byte, Time, RelativeTime. */
+export declare const Format: typeof Format$1;
+//#endregion

package/dist/components/format/index.mjs

@@ -0,0 +1,10 @@
+import { Format as Format$1 } from "@ark-ui/solid/format";
+//#region src/components/format/index.ts
+/** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
+* numbers, currency, bytes and relative time. The components render bare
+* text with no DOM of their own — typography flows from the token layer,
+* so there is no component stylesheet. The API is Ark's own — Number,
+* Byte, Time, RelativeTime. */
+const Format = Format$1;
+//#endregion
+export { Format };

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

@@ -0,0 +1,10 @@
+//#region src/components/frame/index.d.ts
+/** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
+ * iframe whose body mounts the children and whose `head` prop
+ * carries extra <head> elements — styles the child renders must
+ * travel through that prop. The frame measures its content and
+ * grows to fit; the vessel's border and paper belong to the
+ * consumer, since an iframe carries no anatomy attributes for the
+ * core stylesheet to hook. The API is Ark's own. */
+export declare const Frame: (props: import("@ark-ui/solid/frame").FrameProps) => import("solid-js").JSX.Element;
+//#endregion

package/dist/components/frame/index.mjs

@@ -0,0 +1,12 @@
+import { Frame as Frame$1 } from "@ark-ui/solid/frame";
+//#region src/components/frame/index.ts
+/** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
+* iframe whose body mounts the children and whose `head` prop
+* carries extra <head> elements — styles the child renders must
+* travel through that prop. The frame measures its content and
+* grows to fit; the vessel's border and paper belong to the
+* consumer, since an iframe carries no anatomy attributes for the
+* core stylesheet to hook. The API is Ark's own. */
+const Frame = Frame$1;
+//#endregion
+export { Frame };

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

@@ -0,0 +1,13 @@
+import { JSX } from "solid-js";
+//#region src/components/grid/index.d.ts
+/** An alignment lattice: tracks of equal measure, sized by column count
+ * — or, with `minChildWidth`, as many tracks as the container fits. */
+export interface GridProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  columns?: number;
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  /** Switch to the auto-fill lattice: each track is at least this wide,
+   * and the container decides how many fit. */
+  minChildWidth?: string;
+}
+export declare function Grid(props: GridProps): JSX.Element;
+//#endregion

package/dist/components/grid/index.mjs

@@ -0,0 +1,42 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/grid/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/** The same named steps of the space ramp the stack uses — one
+* vocabulary of distance across the layout primitives. */
+const gapVars = {
+	none: "0",
+	xs: "var(--bs-gap-xs)",
+	sm: "var(--bs-gap-sm)",
+	md: "var(--bs-gap-md)",
+	lg: "var(--bs-gap-lg)",
+	xl: "var(--bs-gap-xl)"
+};
+function Grid(props) {
+	injectComponentStyle("grid");
+	const [own, rest] = splitProps(props, [
+		"columns",
+		"gap",
+		"minChildWidth"
+	]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				"--bs-grid-columns": String(own.columns ?? 12),
+				"--bs-grid-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
+				...own.minChildWidth != null ? { "--bs-grid-min-child-width": own.minChildWidth } : {}
+			};
+		},
+		"data-scope": "grid",
+		"data-part": "root",
+		get "data-autofill"() {
+			return own.minChildWidth != null ? "" : void 0;
+		}
+	}], false);
+	return _el$;
+}
+//#endregion
+export { Grid };

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

@@ -0,0 +1,7 @@
+//#region src/components/highlight/index.d.ts
+/** Ark's Highlight, dressed in the paper-and-ink system: query hits are
+ * strokes of pigment on the page — a quiet tint of the accent behind the
+ * ink, never neon. The component renders bare <mark> elements, so the
+ * document-wide mark default carries the look. The API is Ark's own. */
+export declare const Highlight: (props: import("@ark-ui/solid/highlight").HighlightProps) => import("solid-js").JSX.Element;
+//#endregion

package/dist/components/highlight/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Highlight as Highlight$1 } from "@ark-ui/solid/highlight";
+//#region src/components/highlight/index.ts
+/** Ark's Highlight, dressed in the paper-and-ink system: query hits are
+* strokes of pigment on the page — a quiet tint of the accent behind the
+* ink, never neon. The component renders bare <mark> elements, so the
+* document-wide mark default carries the look. The API is Ark's own. */
+const Highlight = Highlight$1;
+injectComponentStyle("highlight");
+//#endregion
+export { Highlight };