@bysages/solid 0.2.2 → 0.2.3

package/dist/components/comment/index.mjs

@@ -0,0 +1,86 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/comment/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-scope=comment data-part=avatar>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-scope=comment data-part=author>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<time data-scope=comment data-part=datetime>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<header data-scope=comment data-part=header>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div data-scope=comment data-part=actions>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<article><div data-scope=comment data-part=body><div data-scope=comment data-part=content>`);
+/**
+* A voice on the record: the portrait hangs left (the `avatar` prop),
+* the body carries the byline from `author` and `datetime`, the ink is
+* the children, and `actions` is the row of answers.
+*/
+function Comment(props) {
+	injectComponentStyle("comment");
+	const [own, rest] = splitProps(props, [
+		"author",
+		"datetime",
+		"avatar",
+		"actions",
+		"children"
+	]);
+	return (() => {
+		var _el$ = _tmpl$6(), _el$3 = _el$.firstChild, _el$7 = _el$3.firstChild;
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "comment",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return own.avatar;
+			},
+			get children() {
+				var _el$2 = _tmpl$();
+				insert(_el$2, () => own.avatar);
+				return _el$2;
+			}
+		}), _el$3);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return own.author || own.datetime;
+			},
+			get children() {
+				var _el$4 = _tmpl$4();
+				insert(_el$4, createComponent(Show, {
+					get when() {
+						return own.author;
+					},
+					get children() {
+						var _el$5 = _tmpl$2();
+						insert(_el$5, () => own.author);
+						return _el$5;
+					}
+				}), null);
+				insert(_el$4, createComponent(Show, {
+					get when() {
+						return own.datetime;
+					},
+					get children() {
+						var _el$6 = _tmpl$3();
+						insert(_el$6, () => own.datetime);
+						effect(() => setAttribute(_el$6, "datetime", own.datetime));
+						return _el$6;
+					}
+				}), null);
+				return _el$4;
+			}
+		}), _el$7);
+		insert(_el$7, () => own.children);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return own.actions;
+			},
+			get children() {
+				var _el$8 = _tmpl$5();
+				insert(_el$8, () => own.actions);
+				return _el$8;
+			}
+		}), null);
+		return _el$;
+	})();
+}
+//#endregion
+export { Comment };

package/dist/components/config-provider/index.d.mts

@@ -0,0 +1,48 @@
+import { ThemeScene } from "@bysages/core";
+import { JSX } from "solid-js";
+//#region src/components/config-provider/index.d.ts
+/** The four density tiers the token layer's `[data-density]` selectors
+ * name — whitespace and control heights compress, readability never
+ * does. */
+export type ConfigDensity = "compact" | "default" | "comfortable" | "spacious";
+/** The named scene registers the token layer's `[data-scene]` selectors
+ * retune — "auto" is the engine's own resolution and stays off the
+ * subtree vocabulary. */
+export type ConfigScene = Exclude<ThemeScene, "auto">;
+/** The configuration a provider lays over its subtree. Every field is
+ * optional: an absent field changes nothing, and the page's own
+ * attributes keep ruling. */
+export interface ConfigContext {
+  density?: ConfigDensity;
+  scene?: ConfigScene;
+  /** A mineral pigment theme (qinghua, celadon, zhusha, …) landing as
+   * `[data-accent]` on the host element. */
+  accent?: string;
+  /** Writing direction, landing as the native `dir` attribute. */
+  dir?: "ltr" | "rtl";
+  /** BCP-47 locale, landing as the native `lang` attribute. */
+  locale?: string;
+}
+/** Solid context for the provider's snapshot — a custom part reads it
+ * with `useContext(ConfigContextKey)`. */
+export declare const ConfigContextKey: import("solid-js").Context<() => ConfigContext>;
+/** The nearest provider's snapshot, or an empty one when no provider
+ * wraps the caller — the hook the date and format families will consume
+ * to localize their output. */
+export declare function useConfig(): () => ConfigContext;
+export interface ConfigProviderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  density?: ConfigDensity;
+  scene?: ConfigScene;
+  accent?: string;
+  dir?: "ltr" | "rtl";
+  locale?: string;
+}
+/**
+ * The declarative host for global configuration: one element that both
+ * carries the token layer's attributes — `[data-density]` and
+ * `[data-accent]` fire on any element — and provides the same values to
+ * descendants through `useConfig`, so interactive behavior (formatting,
+ * messages) and visual theming stay one decision.
+ */
+export declare function ConfigProvider(props: ConfigProviderProps): JSX.Element;
+//#endregion

package/dist/components/config-provider/index.mjs

@@ -0,0 +1,65 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { createContext, splitProps, useContext } from "solid-js";
+//#region src/components/config-provider/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+/** Solid context for the provider's snapshot — a custom part reads it
+* with `useContext(ConfigContextKey)`. */
+const ConfigContextKey = createContext(() => ({}));
+/** The nearest provider's snapshot, or an empty one when no provider
+* wraps the caller — the hook the date and format families will consume
+* to localize their output. */
+function useConfig() {
+	return useContext(ConfigContextKey);
+}
+/**
+* The declarative host for global configuration: one element that both
+* carries the token layer's attributes — `[data-density]` and
+* `[data-accent]` fire on any element — and provides the same values to
+* descendants through `useConfig`, so interactive behavior (formatting,
+* messages) and visual theming stay one decision.
+*/
+function ConfigProvider(props) {
+	const [own, rest] = splitProps(props, [
+		"density",
+		"scene",
+		"accent",
+		"dir",
+		"locale",
+		"children"
+	]);
+	return createComponent(ConfigContextKey.Provider, {
+		value: () => ({
+			density: own.density,
+			scene: own.scene,
+			accent: own.accent,
+			dir: own.dir,
+			locale: own.locale
+		}),
+		get children() {
+			var _el$ = _tmpl$();
+			spread(_el$, mergeProps(rest, {
+				"data-scope": "config-provider",
+				"data-part": "root",
+				get ["data-density"]() {
+					return own.density;
+				},
+				get ["data-scene"]() {
+					return own.scene;
+				},
+				get ["data-accent"]() {
+					return own.accent;
+				},
+				get dir() {
+					return own.dir;
+				},
+				get lang() {
+					return own.locale;
+				}
+			}), false, true);
+			insert(_el$, () => own.children);
+			return _el$;
+		}
+	});
+}
+//#endregion
+export { ConfigContextKey, ConfigProvider, useConfig };

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

@@ -0,0 +1,13 @@
+import { JSX } from "solid-js";
+//#region src/components/container/index.d.ts
+/** The reading frame: content held to a measure and centered on the
+ * page. The sizes name typographic measures, not breakpoints — the page
+ * owns its edges, the container only owns how long a line of ink runs. */
+export interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  size?: "narrow" | "readable" | "wide" | "full";
+  /** Keep the ink off the page edges when the viewport runs narrower
+   * than the measure. */
+  padding?: boolean;
+}
+export declare function Container(props: ContainerProps): JSX.Element;
+//#endregion

package/dist/components/container/index.mjs

@@ -0,0 +1,25 @@
+import { injectComponentStyle } from "@bysages/core";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/container/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+function Container(props) {
+	injectComponentStyle("container");
+	const [own, rest] = splitProps(props, ["size", "padding"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "container",
+			"data-part": "root",
+			get ["data-size"]() {
+				return own.size ?? "readable";
+			},
+			get ["data-padding"]() {
+				return own.padding === false ? void 0 : "";
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+export { Container };

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

@@ -0,0 +1,15 @@
+import { DateInput as DateInput$1, DateInputRootProps } from "@ark-ui/solid/date-input";
+//#region src/components/date-input/index.d.ts
+/** Ark's DateInput, dressed in the paper-and-ink system: a segmented
+ * field where the focused segment takes the flat ink fill. The API is
+ * Ark's own — Root, Label, Control, SegmentGroup, Segment, SegmentContext,
+ * HiddenInput. */
+type DateInputOwnProps = {
+  /** One rung of the control-height ladder for the segmented field. */
+  size?: "sm" | "md" | "lg";
+};
+declare function DateInputRoot(props: DateInputRootProps & DateInputOwnProps): import("solid-js").JSX.Element;
+export declare const DateInput: Omit<typeof DateInput$1, "Root"> & {
+  Root: typeof DateInputRoot;
+};
+//#endregion

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

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

package/dist/components/date-picker/index.d.mts

@@ -0,0 +1,17 @@
+import { DatePicker as DatePicker$1, DatePickerRootProps } from "@ark-ui/solid/date-picker";
+//#region src/components/date-picker/index.d.ts
+/** Ark's DatePicker, dressed in the paper-and-ink system: the popup
+ * dissolves in on elevation, selected days take the flat ink fill, and
+ * range middles run subtle with cut corners. The API is Ark's own —
+ * Root, Label, Control, Input, Trigger, ClearTrigger, Positioner,
+ * Content, View, ViewControl, ViewTrigger, RangeText, PrevTrigger,
+ * NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. */
+type DatePickerOwnProps = {
+  /** One rung of the control-height ladder for the field row. */
+  size?: "sm" | "md" | "lg";
+};
+declare function DatePickerRoot(props: DatePickerRootProps & DatePickerOwnProps): import("solid-js").JSX.Element;
+export declare const DatePicker: Omit<typeof DatePicker$1, "Root"> & {
+  Root: typeof DatePickerRoot;
+};
+//#endregion

package/dist/components/date-picker/index.mjs

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

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

@@ -0,0 +1,18 @@
+import { JSX } from "solid-js";
+//#region src/components/descriptions/index.d.ts
+/**
+ * A ledger laid flat: term and detail pairs in one quiet grid. The
+ * horizontal layout reads as a table of two columns; the vertical one
+ * stacks each pair for narrow measures.
+ */
+export interface DescriptionsRootProps extends JSX.HTMLAttributes<HTMLDListElement> {
+  layout?: "horizontal" | "vertical";
+}
+declare function Root(props: DescriptionsRootProps): JSX.Element;
+export declare const Descriptions: typeof Root & {
+  Root: typeof Root;
+  Item: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+  Term: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+  Detail: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+};
+//#endregion

package/dist/components/descriptions/index.mjs

@@ -0,0 +1,42 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/descriptions/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<dl>`);
+function Root(props) {
+	const [own, rest] = splitProps(props, ["layout"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "descriptions",
+			"data-part": "root",
+			get ["data-layout"]() {
+				return own.layout ?? "horizontal";
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+function part(name, tag) {
+	function Component(props) {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "descriptions",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
+	}
+	return Component;
+}
+const Item = part("Item", "div");
+const Term = part("Term", "dt");
+const Detail = part("Detail", "dd");
+const Descriptions = Object.assign(Root, {
+	Root,
+	Item,
+	Term,
+	Detail
+});
+injectComponentStyle("descriptions");
+//#endregion
+export { Descriptions };

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

@@ -0,0 +1,9 @@
+import { Dialog as Dialog$1, DialogOpenChangeDetails } from "@ark-ui/solid/dialog";
+//#region src/components/dialog/index.d.ts
+/** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
+ * in on elevation, the backdrop fades, and nested overlays stack through
+ * the shared z-index ladder. The API is Ark's own — Root, Trigger,
+ * Backdrop, Positioner, Content, Title, Description, CloseTrigger. */
+export declare const Dialog: typeof Dialog$1;
+//#endregion
+export type { DialogOpenChangeDetails };

package/dist/components/dialog/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Dialog as Dialog$1 } from "@ark-ui/solid/dialog";
+//#region src/components/dialog/index.ts
+/** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
+* in on elevation, the backdrop fades, and nested overlays stack through
+* the shared z-index ladder. The API is Ark's own — Root, Trigger,
+* Backdrop, Positioner, Content, Title, Description, CloseTrigger. */
+const Dialog = Dialog$1;
+injectComponentStyle("dialog");
+//#endregion
+export { Dialog };

package/dist/components/download-trigger/index.d.mts

@@ -0,0 +1,2 @@
+import { DownloadTrigger, DownloadTriggerBaseProps, DownloadTriggerProps, DownloadableData, UseDownloadProps, UseDownloadReturn, useDownload } from "@ark-ui/solid/download-trigger";
+export { DownloadTrigger, type DownloadTriggerBaseProps, type DownloadTriggerProps, type DownloadableData, type UseDownloadProps, type UseDownloadReturn, useDownload };

package/dist/components/download-trigger/index.mjs

@@ -0,0 +1,2 @@
+import { DownloadTrigger, useDownload } from "@ark-ui/solid/download-trigger";
+export { DownloadTrigger, useDownload };

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

@@ -0,0 +1,9 @@
+import { Drawer as Drawer$1 } from "@ark-ui/solid/drawer";
+//#region src/components/drawer/index.d.ts
+/** Ark's Drawer, dressed in the paper-and-ink system: a full-height sheet
+ * cut flush to the edge it rises from, sliding on the machine's translate
+ * under the grabber's hand. The API is Ark's own — Root, Trigger,
+ * Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title,
+ * Description, CloseTrigger, SwipeArea. */
+export declare const Drawer: typeof Drawer$1;
+//#endregion

package/dist/components/drawer/index.mjs

@@ -0,0 +1,12 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Drawer as Drawer$1 } from "@ark-ui/solid/drawer";
+//#region src/components/drawer/index.ts
+/** Ark's Drawer, dressed in the paper-and-ink system: a full-height sheet
+* cut flush to the edge it rises from, sliding on the machine's translate
+* under the grabber's hand. The API is Ark's own — Root, Trigger,
+* Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title,
+* Description, CloseTrigger, SwipeArea. */
+const Drawer = Drawer$1;
+injectComponentStyle("drawer");
+//#endregion
+export { Drawer };

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

@@ -0,0 +1,30 @@
+import { JSX } from "solid-js";
+//#region src/components/dynamic-input/index.d.ts
+export interface DynamicInputProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The rows' values; the group renders one Input per entry. */
+  value?: string[];
+  /** The fewest rows the group keeps; the remove seals yield first. */
+  min?: number;
+  /** The most rows the group grows to; the add control yields then. */
+  max?: number;
+  placeholder?: string;
+  /** The add control's visible words. */
+  addLabel?: string;
+  /** One rung of the ladder, handed to every row's field and seals. */
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  invalid?: boolean;
+  /** Every edit emits a fresh array; the caller's array stays the only
+   * truth. */
+  onValueChange?: (value: string[]) => void;
+}
+/**
+ * A column of entry rows: one Input per line, each with a quiet remove
+ * seal, and an add row at the tail. The list is controlled — every edit
+ * calls `onValueChange` with a fresh array and the caller's array stays
+ * the only truth. Deleting never drops below `min`, adding never grows
+ * past `max`, and the group always keeps one row: an entry list that
+ * emptied itself would leave the reader no place to type.
+ */
+export declare function DynamicInput(props: DynamicInputProps): JSX.Element;
+//#endregion

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

@@ -0,0 +1,116 @@
+import { Button } from "../button/index.mjs";
+import { Input } from "../input/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { Index, splitProps } from "solid-js";
+//#region src/components/dynamic-input/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><div data-scope=dynamic-input data-part=add>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-scope=dynamic-input data-part=row>`);
+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="M18 6 6 18M6 6l12 12">`);
+/**
+* A column of entry rows: one Input per line, each with a quiet remove
+* seal, and an add row at the tail. The list is controlled — every edit
+* calls `onValueChange` with a fresh array and the caller's array stays
+* the only truth. Deleting never drops below `min`, adding never grows
+* past `max`, and the group always keeps one row: an entry list that
+* emptied itself would leave the reader no place to type.
+*/
+function DynamicInput(props) {
+	injectComponentStyle("dynamic-input");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"min",
+		"max",
+		"placeholder",
+		"size",
+		"addLabel",
+		"disabled",
+		"invalid",
+		"onValueChange",
+		"children"
+	]);
+	const values = () => own.value ?? [""];
+	const update = (index, value) => {
+		const next = values().slice();
+		next[index] = value;
+		own.onValueChange?.(next);
+	};
+	const remove = (index) => {
+		const next = values().filter((_, i) => i !== index);
+		own.onValueChange?.(next.length > 0 ? next : [""]);
+	};
+	const add = () => {
+		own.onValueChange?.([...values(), ""]);
+	};
+	const canRemove = () => values().length > Math.max(own.min ?? 0, 1);
+	const canAdd = () => own.max === void 0 || values().length < own.max;
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "dynamic-input",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return values();
+			},
+			children: (value, index) => (() => {
+				var _el$3 = _tmpl$2();
+				insert(_el$3, createComponent(Input, {
+					get value() {
+						return value();
+					},
+					get placeholder() {
+						return own.placeholder;
+					},
+					get disabled() {
+						return own.disabled;
+					},
+					get invalid() {
+						return own.invalid;
+					},
+					get size() {
+						return own.size ?? "md";
+					},
+					onValueChange: (next) => update(index, next)
+				}), null);
+				insert(_el$3, createComponent(Button, {
+					variant: "ghost",
+					get size() {
+						return own.size ?? "md";
+					},
+					square: true,
+					get disabled() {
+						return own.disabled || !canRemove();
+					},
+					"aria-label": `Remove entry ${index + 1}`,
+					onClick: () => remove(index),
+					get children() {
+						return crossIcon();
+					}
+				}), null);
+				return _el$3;
+			})()
+		}), _el$2);
+		insert(_el$2, createComponent(Button, {
+			variant: "ghost",
+			get size() {
+				return own.size ?? "md";
+			},
+			get disabled() {
+				return own.disabled || !canAdd();
+			},
+			onClick: () => add(),
+			get children() {
+				return ["+", memo(() => own.addLabel ?? "Add entry")];
+			}
+		}));
+		return _el$;
+	})();
+}
+/** The one glyph a remove seal needs: a single crossing stroke. */
+function crossIcon() {
+	return _tmpl$3();
+}
+//#endregion
+export { DynamicInput };

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

@@ -0,0 +1,15 @@
+import { Editable as Editable$1, EditableRootProps } from "@ark-ui/solid/editable";
+//#region src/components/editable/index.d.ts
+/** Ark's Editable, dressed in the paper-and-ink system: bare ink while
+ * reading, the full field recipe while editing. The API is Ark's own —
+ * Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger,
+ * CancelTrigger, Control. */
+type EditableOwnProps = {
+  /** One rung of the control-height ladder for the editing field. */
+  size?: "sm" | "md" | "lg";
+};
+declare function EditableRoot(props: EditableRootProps & EditableOwnProps): import("solid-js").JSX.Element;
+export declare const Editable: Omit<typeof Editable$1, "Root"> & {
+  Root: typeof EditableRoot;
+};
+//#endregion

package/dist/components/editable/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js/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,29 @@
+import { injectComponentStyle } from "@bysages/core";
+import { mergeProps, spread, template } from "solid-js/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;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(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, false);
+		return _el$;
+	})();
+}
+//#endregion
+export { Ellipsis };