@bysages/react 0.2.2 → 0.3.0

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

@@ -0,0 +1,2 @@
+import { a as MentionsVesselProps, c as useMentions, i as MentionsVessel, n as Mentions, o as UseMentionsHandlers, r as MentionsProps, s as UseMentionsOptions, t as MentionEntry } from "../../index-Uefyw7Im.mjs";
+export { MentionEntry, Mentions, MentionsProps, MentionsVessel, MentionsVesselProps, type UseMentionsHandlers, type UseMentionsOptions, useMentions };

package/dist/components/mentions/index.mjs

@@ -0,0 +1,2 @@
+import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-DMIBCBOd.mjs";
+export { Mentions, MentionsVessel, useMentions };

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

@@ -0,0 +1,20 @@
+import { Menu as Menu$1 } from "@ark-ui/react/menu";
+//#region src/components/menu/index.d.ts
+type MenuRootProps = Parameters<typeof Menu$1.Root>[0] & {
+  /** One rung of the control-height ladder for the vessel's rows. */
+  size?: "sm" | "md" | "lg";
+};
+declare function MenuRoot({ size, ...rest }: MenuRootProps): import("react").JSX.Element;
+declare function MenuContent(props: Parameters<typeof Menu$1.Content>[0]): import("react").JSX.Element;
+/** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
+ * elevation, hover as light on the row, checked items as the flat ink fill.
+ * The parts — Root, Trigger, ContextTrigger, Indicator, Positioner,
+ * Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
+ * TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen —
+ * spread copies the members so Root and Content can be the sized
+ * wrappers while the rest stay Ark's own parts. */
+export declare const Menu: Omit<typeof Menu$1, "Root" | "Content"> & {
+  Root: typeof MenuRoot;
+  Content: typeof MenuContent;
+};
+//#endregion

package/dist/components/menu/index.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Menu as Menu$1 } from "@ark-ui/react/menu";
+//#region src/components/menu/index.tsx
+/** The row rung rides the context because Ark's Root renders no DOM of
+* its own — the vessel (Content) is the element the rung can land on,
+* and the Portal breaks CSS ancestry between the two. */
+const MenuSizeContext = createContext("md");
+function MenuRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(MenuSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ jsx(Menu$1.Root, { ...rest })
+	});
+}
+function MenuContent(props) {
+	const size = useContext(MenuSizeContext);
+	return /* @__PURE__ */ jsx(Menu$1.Content, {
+		...props,
+		"data-size": size
+	});
+}
+/** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
+* elevation, hover as light on the row, checked items as the flat ink fill.
+* The parts — Root, Trigger, ContextTrigger, Indicator, Positioner,
+* Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
+* TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen —
+* spread copies the members so Root and Content can be the sized
+* wrappers while the rest stay Ark's own parts. */
+const Menu = {
+	...Menu$1,
+	Root: MenuRoot,
+	Content: MenuContent
+};
+injectComponentStyle("menu");
+//#endregion
+export { Menu };

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

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from "react";
+//#region src/components/menubar/index.d.ts
+export interface MenubarEntry {
+  label: string;
+  value: string;
+  danger?: boolean;
+  disabled?: boolean;
+}
+export interface MenubarGroup {
+  label: string;
+  items: MenubarEntry[];
+}
+/**
+ * A desktop-style menu bar: a row of quiet ghost triggers, each opening
+ * the same paper vessel as the menu family. The triggers are our own
+ * buttons grafted onto the menu machine's trigger via `asChild` — the
+ * machine keeps the trigger element (positioning, focus restore,
+ * `data-state`) while the element wears the menubar scope. The popups
+ * keep the menu parts untouched, so the menu stylesheet dresses them.
+ *
+ * Keyboard note: the triggers move between each other with Tab, not
+ * arrow keys — cross-menu arrow traversal is out of scope for this
+ * version. Inside an open menu the machine handles arrows and Escape.
+ */
+export interface MenubarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** The menus across the bar, each with its entries. */
+  items: MenubarGroup[];
+  /** Called with the entry's `value` when it is chosen. */
+  onSelect?: (value: string) => void;
+}
+export declare function Menubar({ items, onSelect, children, ...rest }: MenubarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/menubar/index.mjs

@@ -0,0 +1,35 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react/portal";
+import { Menu } from "@ark-ui/react/menu";
+//#region src/components/menubar/index.tsx
+function Menubar({ items, onSelect, children, ...rest }) {
+	injectComponentStyle("menubar");
+	injectComponentStyle("menu");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "menubar",
+		"data-part": "root",
+		role: "menubar",
+		children: [items.map((group) => /* @__PURE__ */ jsxs(Menu.Root, {
+			positioning: { placement: "bottom-start" },
+			children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-scope": "menubar",
+					"data-part": "trigger",
+					children: group.label
+				})
+			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: group.items.map((entry) => /* @__PURE__ */ jsx(Menu.Item, {
+				value: entry.value,
+				disabled: entry.disabled,
+				"data-danger": entry.danger ? "" : void 0,
+				onSelect: () => onSelect?.(entry.value),
+				children: /* @__PURE__ */ jsx(Menu.ItemText, { children: entry.label })
+			}, entry.value)) }) }) })]
+		}, group.label)), children]
+	});
+}
+//#endregion
+export { Menubar };

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

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from "react";
+//#region src/components/meter/index.d.ts
+export interface MeterRootProps extends HTMLAttributes<HTMLElement> {
+  /** The measured value — clamped between min and max. */
+  value: number;
+  min?: number;
+  max?: number;
+  /** The pigment the ink rides: primary unless a threshold is crossed. */
+  level?: "normal" | "success" | "warning" | "danger";
+  /** One rung of the groove ladder — the track's thickness. */
+  size?: "sm" | "md" | "lg";
+  label?: string;
+}
+export declare const Meter: (({ value, min, max, level, size, label, children, ...rest }: MeterRootProps) => import("react").JSX.Element) & {
+  Root: ({ value, min, max, level, size, label, children, ...rest }: MeterRootProps) => import("react").JSX.Element;
+  Label: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  ValueText: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Track: ({ ...rest }: HTMLAttributes<HTMLElement>) => import("react").JSX.Element;
+};
+//#endregion

package/dist/components/meter/index.mjs

@@ -0,0 +1,59 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/meter/index.tsx
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "meter",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Meter" + name;
+	return Component;
+}
+const Label = part("Label", "span");
+const ValueText = part("ValueText", "span");
+const Track = ({ ...rest }) => /* @__PURE__ */ jsx("span", {
+	...rest,
+	"data-scope": "meter",
+	"data-part": "track",
+	children: /* @__PURE__ */ jsx("span", {
+		"data-scope": "meter",
+		"data-part": "range"
+	})
+});
+const Root = ({ value, min = 0, max = 100, level = "normal", size = "md", label, children, ...rest }) => {
+	const span = max - min;
+	const ratio = span > 0 ? Math.min(Math.max((value - min) / span, 0), 1) : 0;
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "meter",
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": value,
+		"aria-label": label ?? rest["aria-label"],
+		"data-scope": "meter",
+		"data-part": "root",
+		"data-size": size,
+		"data-level": level !== "normal" ? level : void 0,
+		style: {
+			...rest.style,
+			"--_percent": `${ratio * 100}%`
+		},
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(Label, { children: label }),
+			/* @__PURE__ */ jsx(ValueText, { children: `${Math.round(ratio * 100)}%` }),
+			/* @__PURE__ */ jsx(Track, {})
+		] })
+	});
+};
+const Meter = Object.assign(Root, {
+	Root,
+	Label,
+	ValueText,
+	Track
+});
+injectComponentStyle("meter");
+//#endregion
+export { Meter };

package/dist/components/navigation-menu/index.d.mts

@@ -0,0 +1,8 @@
+import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/react/navigation-menu";
+//#region src/components/navigation-menu/index.d.ts
+/** Ark's NavigationMenu, dressed in the paper-and-ink system: a menubar of
+ * ghost triggers with one sliding stroke of primary ink, opening the shared
+ * popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
+ * Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. */
+export declare const NavigationMenu: typeof NavigationMenu$1;
+//#endregion

package/dist/components/navigation-menu/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/react/navigation-menu";
+//#region src/components/navigation-menu/index.tsx
+/** Ark's NavigationMenu, dressed in the paper-and-ink system: a menubar of
+* ghost triggers with one sliding stroke of primary ink, opening the shared
+* popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
+* Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. */
+const NavigationMenu = NavigationMenu$1;
+injectComponentStyle("navigation-menu");
+//#endregion
+export { NavigationMenu };

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { NumberInput as NumberInput$1 } from "@ark-ui/react/number-input";
+//#region src/components/number-input/index.d.ts
+type NumberInputRootProps = ComponentProps<typeof NumberInput$1.Root> & {
+  /** One rung of the control-height ladder for the field and its stepper. */
+  size?: "sm" | "md" | "lg";
+};
+declare function NumberInputRoot({ size, ...rest }: NumberInputRootProps): import("react").JSX.Element;
+/** Ark's NumberInput, dressed in the paper-and-ink system: the stepper
+ * rides inside the field as one seal split by a hairline, numbers set in
+ * tabular figures. The API is Ark's own — Root, Label, Control, Input,
+ * ValueText, IncrementTrigger, DecrementTrigger, Scrubber. */
+export declare const NumberInput: Omit<typeof NumberInput$1, "Root"> & {
+  Root: typeof NumberInputRoot;
+};
+//#endregion

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

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { NumberInput as NumberInput$1 } from "@ark-ui/react/number-input";
+//#region src/components/number-input/index.tsx
+function NumberInputRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(NumberInput$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's NumberInput, dressed in the paper-and-ink system: the stepper
+* rides inside the field as one seal split by a hairline, numbers set in
+* tabular figures. The API is Ark's own — Root, Label, Control, Input,
+* ValueText, IncrementTrigger, DecrementTrigger, Scrubber. */
+const NumberInput = {
+	...NumberInput$1,
+	Root: NumberInputRoot
+};
+injectComponentStyle("number-input");
+//#endregion
+export { NumberInput };

package/dist/components/order-list/index.d.mts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "react";
+//#region src/components/order-list/index.d.ts
+export interface OrderOption {
+  label: string;
+  value: string;
+}
+export interface OrderListProps extends HTMLAttributes<HTMLDivElement> {
+  /** The rows in their current order — the value is the order. */
+  value: string[];
+  /** Every row the ledger knows, in no particular order. */
+  options: OrderOption[];
+  label?: string;
+  onValueChange?: (value: string[]) => void;
+}
+/** A ledger the reader may rewrite: rows move by grip or by the side
+ * arrows, and the group reports the new order as the value itself —
+ * the model is the order. Dragging rides the native drag events — a
+ * hairline of primary ink marks the seam the row will land on — so
+ * touch keeps the buttons as its route. */
+export declare function OrderList({ value, options, label, onValueChange, ...rest }: OrderListProps): import("react").JSX.Element;
+//#endregion

package/dist/components/order-list/index.mjs

@@ -0,0 +1,162 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+//#region src/components/order-list/index.tsx
+const ARROWS = {
+	up: ["m18 15-6-6-6 6"],
+	down: ["m6 9 6 6 6-6"],
+	top: ["m18 15-6-6-6 6", "M5 4h14"],
+	bottom: ["m6 9 6 6 6-6", "M5 20h14"]
+};
+function arrowGlyph(paths) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: 12,
+		height: 12,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: paths.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+	});
+}
+/** A ledger the reader may rewrite: rows move by grip or by the side
+* arrows, and the group reports the new order as the value itself —
+* the model is the order. Dragging rides the native drag events — a
+* hairline of primary ink marks the seam the row will land on — so
+* touch keeps the buttons as its route. */
+function OrderList({ value, options, label, onValueChange, ...rest }) {
+	injectComponentStyle("order-list");
+	const dragging = useRef(null);
+	const [dropLine, setDropLine] = useState(null);
+	const rows = value.map((entry) => options.find((option) => option.value === entry)).filter((option) => option != null);
+	function reset() {
+		dragging.current = null;
+		setDropLine(null);
+	}
+	function move(entry, offset) {
+		const next = [...value];
+		const from = next.indexOf(entry);
+		const to = Math.max(0, Math.min(next.length - 1, from + offset));
+		if (from === to) return;
+		next.splice(to, 0, ...next.splice(from, 1));
+		onValueChange?.(next);
+	}
+	function drop() {
+		const entry = dragging.current;
+		if (entry == null) return;
+		const seam = dropLine;
+		const from = value.indexOf(entry);
+		if (seam && seam.index === from) return reset();
+		const next = value.filter((candidate) => candidate !== entry);
+		let at = seam ? seam.before ? seam.index : seam.index + 1 : next.length;
+		if (from < at) at -= 1;
+		next.splice(Math.max(0, Math.min(next.length, at)), 0, entry);
+		onValueChange?.(next);
+		reset();
+	}
+	function over(event, index, entry) {
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+		const rect = event.currentTarget.getBoundingClientRect();
+		const before = event.clientY < rect.top + rect.height / 2;
+		setDropLine(dragging.current != null && !(entry.value === dragging.current && before) ? {
+			index,
+			before
+		} : null);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "listbox",
+		"aria-label": label ?? void 0,
+		"aria-multiselectable": false,
+		"data-scope": "order-list",
+		"data-part": "root",
+		onDragLeave: (event) => {
+			const host = event.currentTarget;
+			if (!event.relatedTarget || !host.contains(event.relatedTarget)) setDropLine(null);
+		},
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-scope": "order-list",
+			"data-part": "list",
+			children: rows.map((option, index) => {
+				const seam = dropLine && dropLine.index === index ? dropLine.before ? "top" : "bottom" : void 0;
+				return /* @__PURE__ */ jsxs("li", {
+					role: "option",
+					"aria-selected": true,
+					draggable: true,
+					"data-scope": "order-list",
+					"data-part": "item",
+					"data-dragging": dragging.current === option.value ? "" : void 0,
+					"data-drop-line": seam,
+					onDragStart: (event) => {
+						dragging.current = option.value;
+						event.dataTransfer?.setData("text/plain", option.value);
+						if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+					},
+					onDragEnd: reset,
+					onDragOver: (event) => over(event, index, option),
+					onDrop: (event) => {
+						event.preventDefault();
+						drop();
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"data-scope": "order-list",
+							"data-part": "grip",
+							"aria-hidden": "true",
+							children: "⋮⋮"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-scope": "order-list",
+							"data-part": "label",
+							children: option.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-scope": "order-list",
+							"data-part": "controls",
+							children: [
+								[
+									"Move to top",
+									ARROWS.top,
+									-index,
+									0
+								],
+								[
+									"Move up",
+									ARROWS.up,
+									-1,
+									0
+								],
+								[
+									"Move down",
+									ARROWS.down,
+									1,
+									rows.length - 1
+								],
+								[
+									"Move to bottom",
+									ARROWS.bottom,
+									rows.length - 1 - index,
+									rows.length - 1
+								]
+							].map(([aria, paths, offset, edge]) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": aria,
+								"data-scope": "order-list",
+								"data-part": "move",
+								disabled: index === edge,
+								onClick: () => move(option.value, offset),
+								children: arrowGlyph([...paths])
+							}, aria))
+						})
+					]
+				}, option.value);
+			})
+		})
+	});
+}
+//#endregion
+export { OrderList };

package/dist/components/page-header/index.d.mts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from "react";
+//#region src/components/page-header/index.d.ts
+export declare const PageHeader: {
+  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+  displayName: string;
+} & {
+  Root: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Heading: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Eyebrow: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Title: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Description: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Actions: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/page-header/index.mjs

@@ -0,0 +1,34 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/page-header/index.tsx
+/** The page's face: an eyebrow whisper, a serif title, one line of
+* description, and the actions resting beside the title on the same
+* baseline. Heading groups title and actions; the rest compose below. */
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "page-header",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "PageHeader" + name;
+	return Component;
+}
+const Root = part("Root", "header");
+const Heading = part("Heading", "div");
+const Eyebrow = part("Eyebrow", "p");
+const Title = part("Title", "h1");
+const Description = part("Description", "p");
+const Actions = part("Actions", "div");
+const PageHeader = Object.assign(Root, {
+	Root,
+	Heading,
+	Eyebrow,
+	Title,
+	Description,
+	Actions
+});
+injectComponentStyle("page-header");
+//#endregion
+export { PageHeader };

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

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+import { Pagination as Pagination$1 } from "@ark-ui/react/pagination";
+//#region src/components/pagination/index.d.ts
+type PaginationRootProps = ComponentProps<typeof Pagination$1.Root> & {
+  /** One rung of the control-height ladder every page seal shares. */
+  size?: "sm" | "md" | "lg";
+};
+declare function PaginationRoot({ size, ...rest }: PaginationRootProps): import("react").JSX.Element;
+/**
+ * Pagination — paged navigation.
+ *
+ * Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger,
+ * FirstTrigger, LastTrigger. Items carry data-selected.
+ */
+export declare const Pagination: Omit<typeof Pagination$1, "Root"> & {
+  Root: typeof PaginationRoot;
+};
+//#endregion

package/dist/components/pagination/index.mjs

@@ -0,0 +1,23 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Pagination as Pagination$1 } from "@ark-ui/react/pagination";
+//#region src/components/pagination/index.tsx
+function PaginationRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Pagination$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/**
+* Pagination — paged navigation.
+*
+* Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger,
+* FirstTrigger, LastTrigger. Items carry data-selected.
+*/
+const Pagination = {
+	...Pagination$1,
+	Root: PaginationRoot
+};
+injectComponentStyle("pagination");
+//#endregion
+export { Pagination };

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { PasswordInput as PasswordInput$1 } from "@ark-ui/react/password-input";
+//#region src/components/password-input/index.d.ts
+type PasswordInputRootProps = ComponentProps<typeof PasswordInput$1.Root> & {
+  /** One rung of the control-height ladder for the field and its eye. */
+  size?: "sm" | "md" | "lg";
+};
+declare function PasswordInputRoot({ size, ...rest }: PasswordInputRootProps): import("react").JSX.Element;
+/** Ark's PasswordInput, dressed in the paper-and-ink system: the reveal
+ * eye sits quiet at the field's edge and swaps in place — no shift, no
+ * noise. The API is Ark's own — Root, Label, Control, Input, Indicator,
+ * VisibilityTrigger. */
+export declare const PasswordInput: Omit<typeof PasswordInput$1, "Root"> & {
+  Root: typeof PasswordInputRoot;
+};
+//#endregion

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

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { PasswordInput as PasswordInput$1 } from "@ark-ui/react/password-input";
+//#region src/components/password-input/index.tsx
+function PasswordInputRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(PasswordInput$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's PasswordInput, dressed in the paper-and-ink system: the reveal
+* eye sits quiet at the field's edge and swaps in place — no shift, no
+* noise. The API is Ark's own — Root, Label, Control, Input, Indicator,
+* VisibilityTrigger. */
+const PasswordInput = {
+	...PasswordInput$1,
+	Root: PasswordInputRoot
+};
+injectComponentStyle("password-input");
+//#endregion
+export { PasswordInput };

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

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+import { PinInput as PinInput$1 } from "@ark-ui/react/pin-input";
+//#region src/components/pin-input/index.d.ts
+type PinInputRootProps = ComponentProps<typeof PinInput$1.Root> & {
+  /** One rung of the control-height ladder each seal stands on. */
+  size?: "sm" | "md" | "lg";
+};
+declare function PinInputRoot({ size, ...rest }: PinInputRootProps): import("react").JSX.Element;
+/** Ark's PinInput, dressed in the paper-and-ink system: one character per
+ * square-cut seal, centered ink in tabular figures. The API is Ark's own —
+ * Root, Label, Control, Input, HiddenInput. */
+export declare const PinInput: Omit<typeof PinInput$1, "Root"> & {
+  Root: typeof PinInputRoot;
+};
+//#endregion

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

@@ -0,0 +1,20 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { PinInput as PinInput$1 } from "@ark-ui/react/pin-input";
+//#region src/components/pin-input/index.tsx
+function PinInputRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(PinInput$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's PinInput, dressed in the paper-and-ink system: one character per
+* square-cut seal, centered ink in tabular figures. The API is Ark's own —
+* Root, Label, Control, Input, HiddenInput. */
+const PinInput = {
+	...PinInput$1,
+	Root: PinInputRoot
+};
+injectComponentStyle("pin-input");
+//#endregion
+export { PinInput };