@neurocle/synapse-react 0.0.0-bootstrap

package/dist/components/input/input.anatomy.mjs

@@ -0,0 +1,8 @@
+import { createAnatomy } from "@zag-js/anatomy";
+//#region src/components/input/input.anatomy.ts
+const anatomy = createAnatomy("input").parts("root");
+const parts = anatomy.build();
+//#endregion
+export { anatomy, parts };
+
+//# sourceMappingURL=input.anatomy.mjs.map

package/dist/components/input/input.anatomy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.anatomy.mjs","names":[],"sources":["../../../src/components/input/input.anatomy.ts"],"sourcesContent":["import { createAnatomy } from '@zag-js/anatomy'\n\nexport const anatomy = createAnatomy('input').parts('root')\n\nexport const parts = anatomy.build()\n"],"mappings":";;AAEA,MAAa,UAAU,cAAc,OAAO,CAAC,CAAC,MAAM,MAAM;AAE1D,MAAa,QAAQ,QAAQ,MAAM"}

package/dist/components/input/input.connect.mjs

@@ -0,0 +1,82 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { anatomy, parts } from "./input.anatomy.mjs";
+//#region src/components/input/input.connect.ts
+var input_connect_exports = /* @__PURE__ */ __exportAll({
+	anatomy: () => anatomy,
+	connect: () => connect,
+	machine: () => null,
+	props: () => props
+});
+const props = [
+	"id",
+	"value",
+	"defaultValue",
+	"onValueChange",
+	"invalid",
+	"required",
+	"disabled",
+	"readOnly",
+	"onLength",
+	"resizeRef",
+	"autoResize",
+	"maxRows",
+	"showCount",
+	"countLength",
+	"countMax"
+];
+const isCallback = (value) => typeof value === "function";
+const isLengthCallback = (value) => typeof value === "function";
+const text = (value) => typeof value === "string" ? value : void 0;
+const flag = (value) => value ? "" : void 0;
+function connect(machineProps) {
+	const value = text(machineProps["value"]);
+	const defaultValue = text(machineProps["defaultValue"]);
+	const onValueChange = isCallback(machineProps["onValueChange"]) ? machineProps["onValueChange"] : void 0;
+	const invalid = machineProps["invalid"] === true;
+	const required = machineProps["required"] === true;
+	const disabled = machineProps["disabled"] === true;
+	const readOnly = machineProps["readOnly"] === true;
+	const onLength = isLengthCallback(machineProps["onLength"]) ? machineProps["onLength"] : void 0;
+	const resizeRef = machineProps["resizeRef"];
+	const autoResize = machineProps["autoResize"] === true;
+	const id = text(machineProps["id"]);
+	const countLength = machineProps["countLength"];
+	const countMax = machineProps["countMax"];
+	const count = machineProps["showCount"] === true && typeof countLength === "number" ? {
+		id: `${id ?? "input"}:count`,
+		length: countLength,
+		max: typeof countMax === "number" ? countMax : void 0
+	} : void 0;
+	return {
+		value,
+		count,
+		getRootProps: () => ({
+			...parts.root.attrs,
+			id,
+			"aria-describedby": count?.id,
+			...count === void 0 ? {} : {
+				"data-show-count": "",
+				style: { "--count-room": `${String(String(count.max ?? count.length).length * 2 + 2)}ch` }
+			},
+			...value === void 0 ? {} : { value },
+			...defaultValue === void 0 ? {} : { defaultValue },
+			onChange: (event) => {
+				onLength?.(event.currentTarget.value.length);
+				onValueChange?.({ value: event.currentTarget.value });
+			},
+			...typeof resizeRef === "function" ? { ref: resizeRef } : {},
+			"data-auto-resize": flag(autoResize),
+			required,
+			disabled,
+			readOnly,
+			"aria-invalid": invalid ? true : void 0,
+			"data-invalid": flag(invalid),
+			"data-disabled": flag(disabled),
+			"data-readonly": flag(readOnly)
+		})
+	};
+}
+//#endregion
+export { anatomy, connect, input_connect_exports, props };
+
+//# sourceMappingURL=input.connect.mjs.map

package/dist/components/input/input.connect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.connect.mjs","names":[],"sources":["../../../src/components/input/input.connect.ts"],"sourcesContent":["import type { ChangeEvent } from 'react'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { parts } from '#/components/input/input.anatomy.ts'\n\nexport { anatomy } from '#/components/input/input.anatomy.ts'\n\nexport const machine = null\n\nexport const props: readonly string[] = [\n  'id',\n  'value',\n  'defaultValue',\n  'onValueChange',\n  'invalid',\n  'required',\n  'disabled',\n  'readOnly',\n  'onLength',\n  'resizeRef',\n  'autoResize',\n  'maxRows',\n  'showCount',\n  'countLength',\n  'countMax',\n]\n\nexport interface InputCount {\n  id: string\n  length: number\n  max: number | undefined\n}\n\nexport interface InputApi {\n  value: string | undefined\n  count: InputCount | undefined\n  getRootProps: () => Record<string, unknown>\n}\n\ntype ValueCallback = (details: ValueChangeDetails<string>) => void\n\nconst isCallback = (value: unknown): value is ValueCallback => typeof value === 'function'\n\nconst isLengthCallback = (value: unknown): value is (length: number) => void =>\n  typeof value === 'function'\n\nconst text = (value: unknown): string | undefined => (typeof value === 'string' ? value : undefined)\n\nconst flag = (value: boolean): '' | undefined => (value ? '' : undefined)\n\nexport function connect(machineProps: Readonly<Record<string, unknown>>): InputApi {\n  const value = text(machineProps['value'])\n  const defaultValue = text(machineProps['defaultValue'])\n  const onValueChange = isCallback(machineProps['onValueChange'])\n    ? machineProps['onValueChange']\n    : undefined\n  const invalid = machineProps['invalid'] === true\n  const required = machineProps['required'] === true\n  const disabled = machineProps['disabled'] === true\n  const readOnly = machineProps['readOnly'] === true\n  const onLength = isLengthCallback(machineProps['onLength']) ? machineProps['onLength'] : undefined\n  const resizeRef = machineProps['resizeRef']\n  const autoResize = machineProps['autoResize'] === true\n  const id = text(machineProps['id'])\n  const countLength = machineProps['countLength']\n  const countMax = machineProps['countMax']\n  const count =\n    machineProps['showCount'] === true && typeof countLength === 'number'\n      ? {\n          id: `${id ?? 'input'}:count`,\n          length: countLength,\n          max: typeof countMax === 'number' ? countMax : undefined,\n        }\n      : undefined\n\n  return {\n    value,\n    count,\n    getRootProps: () => ({\n      ...parts.root.attrs,\n      id,\n      'aria-describedby': count?.id,\n      ...(count === undefined\n        ? {}\n        : {\n            'data-show-count': '',\n            style: {\n              '--count-room': `${String(String(count.max ?? count.length).length * 2 + 2)}ch`,\n            },\n          }),\n      ...(value === undefined ? {} : { value }),\n      ...(defaultValue === undefined ? {} : { defaultValue }),\n      onChange: (event: ChangeEvent<HTMLInputElement>) => {\n        onLength?.(event.currentTarget.value.length)\n        onValueChange?.({ value: event.currentTarget.value })\n      },\n      ...(typeof resizeRef === 'function' ? { ref: resizeRef } : {}),\n      'data-auto-resize': flag(autoResize),\n      required,\n      disabled,\n      readOnly,\n      'aria-invalid': invalid ? true : undefined,\n      'data-invalid': flag(invalid),\n      'data-disabled': flag(disabled),\n      'data-readonly': flag(readOnly),\n    }),\n  }\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,QAA2B;CACtC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAgBA,MAAM,cAAc,UAA2C,OAAO,UAAU;AAEhF,MAAM,oBAAoB,UACxB,OAAO,UAAU;AAEnB,MAAM,QAAQ,UAAwC,OAAO,UAAU,WAAW,QAAQ,KAAA;AAE1F,MAAM,QAAQ,UAAoC,QAAQ,KAAK,KAAA;AAE/D,SAAgB,QAAQ,cAA2D;CACjF,MAAM,QAAQ,KAAK,aAAa,QAAQ;CACxC,MAAM,eAAe,KAAK,aAAa,eAAe;CACtD,MAAM,gBAAgB,WAAW,aAAa,gBAAgB,IAC1D,aAAa,mBACb,KAAA;CACJ,MAAM,UAAU,aAAa,eAAe;CAC5C,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,WAAW,iBAAiB,aAAa,WAAW,IAAI,aAAa,cAAc,KAAA;CACzF,MAAM,YAAY,aAAa;CAC/B,MAAM,aAAa,aAAa,kBAAkB;CAClD,MAAM,KAAK,KAAK,aAAa,KAAK;CAClC,MAAM,cAAc,aAAa;CACjC,MAAM,WAAW,aAAa;CAC9B,MAAM,QACJ,aAAa,iBAAiB,QAAQ,OAAO,gBAAgB,WACzD;EACE,IAAI,GAAG,MAAM,QAAQ;EACrB,QAAQ;EACR,KAAK,OAAO,aAAa,WAAW,WAAW,KAAA;CACjD,IACA,KAAA;CAEN,OAAO;EACL;EACA;EACA,qBAAqB;GACnB,GAAG,MAAM,KAAK;GACd;GACA,oBAAoB,OAAO;GAC3B,GAAI,UAAU,KAAA,IACV,CAAC,IACD;IACE,mBAAmB;IACnB,OAAO,EACL,gBAAgB,GAAG,OAAO,OAAO,MAAM,OAAO,MAAM,MAAM,CAAC,CAAC,SAAS,IAAI,CAAC,EAAE,IAC9E;GACF;GACJ,GAAI,UAAU,KAAA,IAAY,CAAC,IAAI,EAAE,MAAM;GACvC,GAAI,iBAAiB,KAAA,IAAY,CAAC,IAAI,EAAE,aAAa;GACrD,WAAW,UAAyC;IAClD,WAAW,MAAM,cAAc,MAAM,MAAM;IAC3C,gBAAgB,EAAE,OAAO,MAAM,cAAc,MAAM,CAAC;GACtD;GACA,GAAI,OAAO,cAAc,aAAa,EAAE,KAAK,UAAU,IAAI,CAAC;GAC5D,oBAAoB,KAAK,UAAU;GACnC;GACA;GACA;GACA,gBAAgB,UAAU,OAAO,KAAA;GACjC,gBAAgB,KAAK,OAAO;GAC5B,iBAAiB,KAAK,QAAQ;GAC9B,iBAAiB,KAAK,QAAQ;EAChC;CACF;AACF"}

package/dist/components/input/input.d.mts

@@ -0,0 +1,31 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { InputHTMLAttributes } from "react";
+//#region src/components/input/input.d.ts
+export type InputType = 'text' | 'email' | 'search' | 'tel' | 'url';
+export interface InputRootProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'required' | 'readOnly' | 'color' | 'children' | 'type' | 'size'> {
+  /** 제어되는 값. */
+  value?: string;
+  /** 비제어 모드의 초기 값. `value`를 주면 무시됩니다. */
+  defaultValue?: string;
+  /** 사용자가 값을 바꿀 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<string>) => void;
+  /** 오류 상태. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다. */
+  invalid?: boolean;
+  /** 필수 입력. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다. */
+  required?: boolean;
+  /** 비활성화된 입력은 포커스도 값 제출도 받지 않습니다. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다. */
+  disabled?: boolean;
+  /** 읽기 전용 입력은 포커스와 제출은 되지만 값을 바꿀 수 없습니다. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다. */
+  readOnly?: boolean;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 입력한 글자 수를 상자 안쪽 오른쪽에 연하게 보여 줍니다. `maxLength`가 있으면 "12/40"처럼 한도와 함께 보이고, 한도에 가까워지면 남은 글자 수를 스크린 리더에 알립니다. 메시지 줄에 보이려면 Field의 `showCount`를 씁니다. */
+  showCount?: boolean;
+  /** 텍스트 입력의 종류. 숫자, 비밀번호, 날짜, 체크 상자는 각자의 컴포넌트가 맡습니다. 기본값은 `text`입니다. */
+  type?: InputType;
+}
+export declare const Input: SynapseComponent<"root", "root", InputRootProps, never>;
+//#endregion
+//# sourceMappingURL=input.d.mts.map

package/dist/components/input/input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.mts","names":[],"sources":["../../../src/components/input/input.tsx"],"mappings":";;;;;YAYY;iBAEK,uBAAuB,KACtC,oBAAoB;;EAapB;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA;;EAEA;;EAEA,OAAO;;EAEP;;EAEA,OAAO;;qBAGI,OAAK,iCAAA"}

package/dist/components/input/input.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { inputCountClass, inputRecipe, inputWrapperClass } from "./input.recipe.mjs";
+import { CharacterCount } from "../../shared/character-count.mjs";
+import { useTextEntry } from "../../shared/text-entry.mjs";
+import { input_connect_exports } from "./input.connect.mjs";
+import { createElement } from "react";
+//#region src/components/input/input.tsx
+const Input = defineComponent()({
+	name: "Input",
+	module: input_connect_exports,
+	rootPart: "root",
+	rootElement: "input",
+	variantProps: ["size"],
+	useMachineProps: useTextEntry,
+	wrapRoot: (api, node) => api.count === void 0 ? node : createElement("span", {
+		className: inputWrapperClass,
+		"data-scope": "input",
+		"data-part": "count-wrapper"
+	}, node, createElement(CharacterCount, {
+		id: api.count.id,
+		className: inputCountClass,
+		length: api.count.length,
+		max: api.count.max,
+		compact: true
+	})),
+	field: {
+		id: "control",
+		describe: ["root"]
+	},
+	slots: (props) => inputRecipe({ size: resolveSize(props.size, "Input") })
+});
+//#endregion
+export { Input };
+
+//# sourceMappingURL=input.mjs.map

package/dist/components/input/input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.mjs","names":["input"],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, type InputHTMLAttributes } from 'react'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport * as input from '#/components/input/input.connect.ts'\nimport { inputCountClass, inputRecipe, inputWrapperClass } from '#/components/input/input.recipe.ts'\nimport { CharacterCount } from '#/shared/character-count.tsx'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { useTextEntry } from '#/shared/text-entry.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport type InputType = 'text' | 'email' | 'search' | 'tel' | 'url'\n\nexport interface InputRootProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'disabled'\n  | 'required'\n  | 'readOnly'\n  | 'color'\n  | 'children'\n  | 'type'\n  | 'size'\n> {\n  /** 제어되는 값. */\n  value?: string\n  /** 비제어 모드의 초기 값. `value`를 주면 무시됩니다. */\n  defaultValue?: string\n  /** 사용자가 값을 바꿀 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<string>) => void\n  /** 오류 상태. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다. */\n  invalid?: boolean\n  /** 필수 입력. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다. */\n  required?: boolean\n  /** 비활성화된 입력은 포커스도 값 제출도 받지 않습니다. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다. */\n  disabled?: boolean\n  /** 읽기 전용 입력은 포커스와 제출은 되지만 값을 바꿀 수 없습니다. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다. */\n  readOnly?: boolean\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 입력한 글자 수를 상자 안쪽 오른쪽에 연하게 보여 줍니다. `maxLength`가 있으면 \"12/40\"처럼 한도와 함께 보이고, 한도에 가까워지면 남은 글자 수를 스크린 리더에 알립니다. 메시지 줄에 보이려면 Field의 `showCount`를 씁니다. */\n  showCount?: boolean\n  /** 텍스트 입력의 종류. 숫자, 비밀번호, 날짜, 체크 상자는 각자의 컴포넌트가 맡습니다. 기본값은 `text`입니다. */\n  type?: InputType\n}\n\nexport const Input = defineComponent<InputRootProps>()({\n  name: 'Input',\n  module: input,\n  rootPart: 'root',\n  rootElement: 'input',\n  variantProps: ['size'],\n  useMachineProps: useTextEntry,\n  wrapRoot: (api, node) =>\n    api.count === undefined\n      ? node\n      : createElement(\n          'span',\n          { className: inputWrapperClass, 'data-scope': 'input', 'data-part': 'count-wrapper' },\n          node,\n          createElement(CharacterCount, {\n            id: api.count.id,\n            className: inputCountClass,\n            length: api.count.length,\n            max: api.count.max,\n            compact: true,\n          }),\n        ),\n  field: { id: 'control', describe: ['root'] },\n  slots: (props: InputRootProps) => inputRecipe({ size: resolveSize(props.size, 'Input') }),\n})\n"],"mappings":";;;;;;;;;AAiDA,MAAa,QAAQ,gBAAgC,CAAC,CAAC;CACrD,MAAM;CACN,QAAQA;CACR,UAAU;CACV,aAAa;CACb,cAAc,CAAC,MAAM;CACrB,iBAAiB;CACjB,WAAW,KAAK,SACd,IAAI,UAAU,KAAA,IACV,OACA,cACE,QACA;EAAE,WAAW;EAAmB,cAAc;EAAS,aAAa;CAAgB,GACpF,MACA,cAAc,gBAAgB;EAC5B,IAAI,IAAI,MAAM;EACd,WAAW;EACX,QAAQ,IAAI,MAAM;EAClB,KAAK,IAAI,MAAM;EACf,SAAS;CACX,CAAC,CACH;CACN,OAAO;EAAE,IAAI;EAAW,UAAU,CAAC,MAAM;CAAE;CAC3C,QAAQ,UAA0B,YAAY,EAAE,MAAM,YAAY,MAAM,MAAM,OAAO,EAAE,CAAC;AAC1F,CAAC"}

package/dist/components/input/input.recipe.mjs

@@ -0,0 +1,111 @@
+import { css } from "../../react/styled-system/css/css.mjs";
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/input/input.recipe.ts
+const inputWrapperClass = css({
+	position: "relative",
+	display: "block",
+	width: "fill"
+});
+const inputCountClass = css({
+	position: "absolute",
+	insetBlock: "inset.none",
+	insetInlineEnd: "inset.control",
+	display: "flex",
+	alignItems: "center",
+	pointerEvents: "none",
+	textStyle: "detail",
+	color: "foreground.subtle",
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap",
+	"&[data-near-limit]": { color: "foreground.muted" }
+});
+const invalid = "&:is([data-invalid], [aria-invalid=true])";
+const readOnly = "&:is([data-readonly], [readonly], :has(input[readonly]))";
+const inputRecipe = sva({
+	slots: ["root"],
+	base: { root: {
+		display: "block",
+		width: "fill",
+		minWidth: "target.minimum",
+		minHeight: "target.minimum",
+		margin: "inset.none",
+		rounded: "control",
+		borderWidth: "hairline",
+		borderStyle: "solid",
+		borderColor: "border.default",
+		bg: "surface.raised",
+		color: "foreground.default",
+		transitionProperty: "colors",
+		transitionDuration: "interaction",
+		transitionTimingFunction: "interaction",
+		_placeholder: { color: "foreground.subtle" },
+		"&[data-show-count]": { paddingInlineEnd: "var(--count-room)" },
+		["&:hover:not(:disabled, [data-disabled], [data-readonly], [readonly], :has(input[readonly]), [data-invalid], [aria-invalid=true], :focus-within)"]: { borderColor: "primary.default" },
+		_focusWithin: {
+			borderColor: "border.focus",
+			outlineStyle: "solid",
+			outlineWidth: "hairline",
+			outlineOffset: "inset.none",
+			outlineColor: "border.focus"
+		},
+		[invalid]: {
+			borderColor: "error.default",
+			outlineStyle: "solid",
+			outlineWidth: "hairline",
+			outlineOffset: "inset.none",
+			outlineColor: "error.default",
+			_focusWithin: {
+				borderColor: "error.default",
+				outlineWidth: "focus",
+				outlineColor: "border.focus"
+			}
+		},
+		[readOnly]: {
+			bg: "background.subtle",
+			borderStyle: "dashed",
+			cursor: "default"
+		},
+		_disabled: {
+			bg: "secondary.default",
+			borderColor: "border.default",
+			color: "foreground.disabled",
+			cursor: "not-allowed",
+			_highContrast: {
+				borderColor: "system.grayText",
+				color: "system.grayText"
+			}
+		}
+	} },
+	variants: { size: {
+		xs: { root: {
+			minHeight: "control.xs",
+			paddingInline: "inset.compact",
+			textStyle: "detail"
+		} },
+		sm: { root: {
+			minHeight: "control.sm",
+			paddingInline: "inset.control",
+			textStyle: "body"
+		} },
+		md: { root: {
+			minHeight: "control.md",
+			paddingInline: "inset.control",
+			textStyle: "body"
+		} },
+		lg: { root: {
+			minHeight: "control.lg",
+			paddingInline: "inset.control",
+			textStyle: "body"
+		} },
+		xl: { root: {
+			minHeight: "control.xl",
+			paddingInline: "inset.surface",
+			textStyle: "subtitle"
+		} }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { inputCountClass, inputRecipe, inputWrapperClass };
+
+//# sourceMappingURL=input.recipe.mjs.map

package/dist/components/input/input.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.recipe.mjs","names":[],"sources":["../../../src/components/input/input.recipe.ts"],"sourcesContent":["import { css, sva } from '#styled-system/css/index.js'\n\nexport const inputWrapperClass = css({ position: 'relative', display: 'block', width: 'fill' })\n\nexport const inputCountClass = css({\n  position: 'absolute',\n  insetBlock: 'inset.none',\n  insetInlineEnd: 'inset.control',\n  display: 'flex',\n  alignItems: 'center',\n  pointerEvents: 'none',\n  textStyle: 'detail',\n  color: 'foreground.subtle',\n  fontVariantNumeric: 'tabular-nums',\n  whiteSpace: 'nowrap',\n  '&[data-near-limit]': { color: 'foreground.muted' },\n})\n\nconst invalid = '&:is([data-invalid], [aria-invalid=true])'\n\nconst readOnly = '&:is([data-readonly], [readonly], :has(input[readonly]))'\n\nconst hoverable =\n  '&:hover:not(:disabled, [data-disabled], [data-readonly], [readonly], :has(input[readonly]), [data-invalid], [aria-invalid=true], :focus-within)'\n\nexport const inputRecipe = sva({\n  slots: ['root'],\n  base: {\n    root: {\n      display: 'block',\n      width: 'fill',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      margin: 'inset.none',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      bg: 'surface.raised',\n      color: 'foreground.default',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      _placeholder: { color: 'foreground.subtle' },\n      '&[data-show-count]': { paddingInlineEnd: 'var(--count-room)' },\n      [hoverable]: {\n        borderColor: 'primary.default',\n      },\n      _focusWithin: {\n        borderColor: 'border.focus',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'border.focus',\n      },\n      [invalid]: {\n        borderColor: 'error.default',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'error.default',\n        _focusWithin: {\n          borderColor: 'error.default',\n          outlineWidth: 'focus',\n          outlineColor: 'border.focus',\n        },\n      },\n      [readOnly]: { bg: 'background.subtle', borderStyle: 'dashed', cursor: 'default' },\n      _disabled: {\n        bg: 'secondary.default',\n        borderColor: 'border.default',\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { borderColor: 'system.grayText', color: 'system.grayText' },\n      },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { minHeight: 'control.xs', paddingInline: 'inset.compact', textStyle: 'detail' },\n      },\n      sm: { root: { minHeight: 'control.sm', paddingInline: 'inset.control', textStyle: 'body' } },\n      md: { root: { minHeight: 'control.md', paddingInline: 'inset.control', textStyle: 'body' } },\n      lg: { root: { minHeight: 'control.lg', paddingInline: 'inset.control', textStyle: 'body' } },\n      xl: {\n        root: { minHeight: 'control.xl', paddingInline: 'inset.surface', textStyle: 'subtitle' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;;AAEA,MAAa,oBAAoB,IAAI;CAAE,UAAU;CAAY,SAAS;CAAS,OAAO;AAAO,CAAC;AAE9F,MAAa,kBAAkB,IAAI;CACjC,UAAU;CACV,YAAY;CACZ,gBAAgB;CAChB,SAAS;CACT,YAAY;CACZ,eAAe;CACf,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CACZ,sBAAsB,EAAE,OAAO,mBAAmB;AACpD,CAAC;AAED,MAAM,UAAU;AAEhB,MAAM,WAAW;AAKjB,MAAa,cAAc,IAAI;CAC7B,OAAO,CAAC,MAAM;CACd,MAAM,EACJ,MAAM;EACJ,SAAS;EACT,OAAO;EACP,UAAU;EACV,WAAW;EACX,QAAQ;EACR,SAAS;EACT,aAAa;EACb,aAAa;EACb,aAAa;EACb,IAAI;EACJ,OAAO;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc,EAAE,OAAO,oBAAoB;EAC3C,sBAAsB,EAAE,kBAAkB,oBAAoB;GAC7D,oJAAY,EACX,aAAa,kBACf;EACA,cAAc;GACZ,aAAa;GACb,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;EAChB;GACC,UAAU;GACT,aAAa;GACb,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;GACd,cAAc;IACZ,aAAa;IACb,cAAc;IACd,cAAc;GAChB;EACF;GACC,WAAW;GAAE,IAAI;GAAqB,aAAa;GAAU,QAAQ;EAAU;EAChF,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACP,QAAQ;GACR,eAAe;IAAE,aAAa;IAAmB,OAAO;GAAkB;EAC5E;CACF,EACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,MAAM;GAAE,WAAW;GAAc,eAAe;GAAiB,WAAW;EAAS,EACvF;EACA,IAAI,EAAE,MAAM;GAAE,WAAW;GAAc,eAAe;GAAiB,WAAW;EAAO,EAAE;EAC3F,IAAI,EAAE,MAAM;GAAE,WAAW;GAAc,eAAe;GAAiB,WAAW;EAAO,EAAE;EAC3F,IAAI,EAAE,MAAM;GAAE,WAAW;GAAc,eAAe;GAAiB,WAAW;EAAO,EAAE;EAC3F,IAAI,EACF,MAAM;GAAE,WAAW;GAAc,eAAe;GAAiB,WAAW;EAAW,EACzF;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Kbd, KbdRootProps } from "./kbd.mjs";
+export { Kbd, type KbdRootProps };

package/dist/components/kbd/index.mjs

@@ -0,0 +1,2 @@
+import { Kbd } from "./kbd.mjs";
+export { Kbd };

package/dist/components/kbd/kbd.anatomy.mjs

@@ -0,0 +1,8 @@
+import { createAnatomy } from "@zag-js/anatomy";
+//#region src/components/kbd/kbd.anatomy.ts
+const anatomy = createAnatomy("kbd").parts("root");
+const parts = anatomy.build();
+//#endregion
+export { anatomy, parts };
+
+//# sourceMappingURL=kbd.anatomy.mjs.map

package/dist/components/kbd/kbd.anatomy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.anatomy.mjs","names":[],"sources":["../../../src/components/kbd/kbd.anatomy.ts"],"sourcesContent":["import { createAnatomy } from '@zag-js/anatomy'\n\nexport const anatomy = createAnatomy('kbd').parts('root')\n\nexport const parts = anatomy.build()\n"],"mappings":";;AAEA,MAAa,UAAU,cAAc,KAAK,CAAC,CAAC,MAAM,MAAM;AAExD,MAAa,QAAQ,QAAQ,MAAM"}

package/dist/components/kbd/kbd.connect.mjs

@@ -0,0 +1,17 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { anatomy, parts } from "./kbd.anatomy.mjs";
+//#region src/components/kbd/kbd.connect.ts
+var kbd_connect_exports = /* @__PURE__ */ __exportAll({
+	anatomy: () => anatomy,
+	connect: () => connect,
+	machine: () => null,
+	props: () => props
+});
+const props = [];
+function connect() {
+	return { getRootProps: () => ({ ...parts.root.attrs }) };
+}
+//#endregion
+export { anatomy, connect, kbd_connect_exports, props };
+
+//# sourceMappingURL=kbd.connect.mjs.map

package/dist/components/kbd/kbd.connect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.connect.mjs","names":[],"sources":["../../../src/components/kbd/kbd.connect.ts"],"sourcesContent":["import { parts } from '#/components/kbd/kbd.anatomy.ts'\n\nexport { anatomy } from '#/components/kbd/kbd.anatomy.ts'\n\nexport const machine = null\n\nexport const props: readonly string[] = []\n\nexport interface KbdApi {\n  getRootProps: () => Record<string, unknown>\n}\n\nexport function connect(): KbdApi {\n  return { getRootProps: () => ({ ...parts.root.attrs }) }\n}\n"],"mappings":";;;;;;;;;AAMA,MAAa,QAA2B,CAAC;AAMzC,SAAgB,UAAkB;CAChC,OAAO,EAAE,qBAAqB,EAAE,GAAG,MAAM,KAAK,MAAM,GAAG;AACzD"}

package/dist/components/kbd/kbd.d.mts

@@ -0,0 +1,10 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/kbd/kbd.d.ts
+export interface KbdRootProps {
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+}
+export declare const Kbd: SynapseComponent<"root", "root", KbdRootProps, never>;
+//#endregion
+//# sourceMappingURL=kbd.d.mts.map

package/dist/components/kbd/kbd.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.mts","names":[],"sources":["../../../src/components/kbd/kbd.tsx"],"mappings":";;;iBAOiB;;EAEf,OAAO;;qBAGI,KAAG,iCAAA"}

package/dist/components/kbd/kbd.mjs

@@ -0,0 +1,18 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { kbd_connect_exports } from "./kbd.connect.mjs";
+import { kbdRecipe } from "./kbd.recipe.mjs";
+//#region src/components/kbd/kbd.tsx
+const Kbd = defineComponent()({
+	name: "Kbd",
+	module: kbd_connect_exports,
+	rootPart: "root",
+	rootElement: "kbd",
+	variantProps: ["size"],
+	slots: (props) => kbdRecipe({ size: resolveSize(props.size, "Kbd") })
+});
+//#endregion
+export { Kbd };
+
+//# sourceMappingURL=kbd.mjs.map

package/dist/components/kbd/kbd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.mjs","names":["kbd"],"sources":["../../../src/components/kbd/kbd.tsx"],"sourcesContent":["'use client'\n\nimport * as kbd from '#/components/kbd/kbd.connect.ts'\nimport { kbdRecipe } from '#/components/kbd/kbd.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface KbdRootProps {\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n}\n\nexport const Kbd = defineComponent<KbdRootProps>()({\n  name: 'Kbd',\n  module: kbd,\n  rootPart: 'root',\n  rootElement: 'kbd',\n  variantProps: ['size'],\n  slots: (props: KbdRootProps) => kbdRecipe({ size: resolveSize(props.size, 'Kbd') }),\n})\n"],"mappings":";;;;;;AAYA,MAAa,MAAM,gBAA8B,CAAC,CAAC;CACjD,MAAM;CACN,QAAQA;CACR,UAAU;CACV,aAAa;CACb,cAAc,CAAC,MAAM;CACrB,QAAQ,UAAwB,UAAU,EAAE,MAAM,YAAY,MAAM,MAAM,KAAK,EAAE,CAAC;AACpF,CAAC"}

package/dist/components/kbd/kbd.recipe.mjs

@@ -0,0 +1,55 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/kbd/kbd.recipe.ts
+const kbdRecipe = sva({
+	slots: ["root"],
+	base: { root: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0,
+		rounded: "control",
+		borderWidth: "hairline",
+		borderStyle: "solid",
+		borderColor: "border.default",
+		borderBlockEndWidth: "emphasis",
+		bg: "surface.raised",
+		color: "foreground.default",
+		fontFamily: "mono",
+		fontWeight: "medium",
+		lineHeight: "none",
+		whiteSpace: "nowrap",
+		"&:has(> kbd)": {
+			gap: "gap.inline",
+			borderWidth: "0",
+			bg: "surface.transparent",
+			paddingInline: "inset.none"
+		}
+	} },
+	variants: { size: {
+		xs: { root: {
+			paddingInline: "inset.compact",
+			fontSize: "2xs"
+		} },
+		sm: { root: {
+			paddingInline: "inset.compact",
+			fontSize: "xs"
+		} },
+		md: { root: {
+			paddingInline: "inset.compact",
+			fontSize: "sm"
+		} },
+		lg: { root: {
+			paddingInline: "inset.control",
+			fontSize: "sm"
+		} },
+		xl: { root: {
+			paddingInline: "inset.control",
+			fontSize: "md"
+		} }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { kbdRecipe };
+
+//# sourceMappingURL=kbd.recipe.mjs.map

package/dist/components/kbd/kbd.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.recipe.mjs","names":[],"sources":["../../../src/components/kbd/kbd.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const kbdRecipe = sva({\n  slots: ['root'],\n  base: {\n    root: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      borderBlockEndWidth: 'emphasis',\n      bg: 'surface.raised',\n      color: 'foreground.default',\n      fontFamily: 'mono',\n      fontWeight: 'medium',\n      lineHeight: 'none',\n      whiteSpace: 'nowrap',\n      '&:has(> kbd)': {\n        gap: 'gap.inline',\n        borderWidth: '0',\n        bg: 'surface.transparent',\n        paddingInline: 'inset.none',\n      },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: {\n          paddingInline: 'inset.compact',\n          fontSize: '2xs',\n        },\n      },\n      sm: {\n        root: {\n          paddingInline: 'inset.compact',\n          fontSize: 'xs',\n        },\n      },\n      md: {\n        root: {\n          paddingInline: 'inset.compact',\n          fontSize: 'sm',\n        },\n      },\n      lg: {\n        root: {\n          paddingInline: 'inset.control',\n          fontSize: 'sm',\n        },\n      },\n      xl: {\n        root: {\n          paddingInline: 'inset.control',\n          fontSize: 'md',\n        },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,YAAY,IAAI;CAC3B,OAAO,CAAC,MAAM;CACd,MAAM,EACJ,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,aAAa;EACb,aAAa;EACb,aAAa;EACb,qBAAqB;EACrB,IAAI;EACJ,OAAO;EACP,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,gBAAgB;GACd,KAAK;GACL,aAAa;GACb,IAAI;GACJ,eAAe;EACjB;CACF,EACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,MAAM;GACJ,eAAe;GACf,UAAU;EACZ,EACF;EACA,IAAI,EACF,MAAM;GACJ,eAAe;GACf,UAAU;EACZ,EACF;EACA,IAAI,EACF,MAAM;GACJ,eAAe;GACf,UAAU;EACZ,EACF;EACA,IAAI,EACF,MAAM;GACJ,eAAe;GACf,UAAU;EACZ,EACF;EACA,IAAI,EACF,MAAM;GACJ,eAAe;GACf,UAAU;EACZ,EACF;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Listbox, ListboxHighlightChangeDetails, ListboxRootProps, ListboxSelectionMode, ListboxValueChangeDetails } from "./listbox.mjs";
+export { Listbox, type ListboxHighlightChangeDetails, type ListboxRootProps, type ListboxSelectionMode, type ListboxValueChangeDetails };

package/dist/components/listbox/index.mjs

@@ -0,0 +1,2 @@
+import { Listbox } from "./listbox.mjs";
+export { Listbox };

package/dist/components/listbox/listbox.d.mts

@@ -0,0 +1,70 @@
+import { DomAttributes, Orientation, PartComponent, PartOwnProps, SynapseComponentMeta } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { SynapseCollection } from "../../shared/collection.mjs";
+import { ReactNode } from "react";
+//#region src/components/listbox/listbox.d.ts
+export interface ListboxValueChangeDetails {
+  readonly value: readonly string[];
+}
+export interface ListboxHighlightChangeDetails {
+  readonly highlightedValue: string | null;
+}
+export type ListboxSelectionMode = 'single' | 'multiple' | 'extended' | 'none';
+export interface ListboxRootProps<TItem> {
+  /** `createCollection`으로 만든 전체 컬렉션. 윈도잉은 이것을 바꾸지 않습니다. */
+  collection: SynapseCollection<TItem>;
+  /**
+   * 제어되는 선택입니다.
+   *
+   * 어느 선택 모드에서든 배열입니다. 값이 곧 선택이고, 하나짜리 선택도 여전히 선택이기 때문입니다.
+   * Select와 같은 논리입니다. `selectionMode`에 따라 타입이 달라지는 prop은 어떤 사용처도 타입을
+   * 맞춰 쓸 수 없는 prop입니다.
+   */
+  value?: readonly string[];
+  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ListboxValueChangeDetails) => void;
+  /** 제어되는 하이라이트 아이템. `aria-activedescendant`가 가리키는 대상입니다. */
+  highlightedValue?: string | null;
+  /** 비제어 모드에서 처음 하이라이트되는 아이템. */
+  defaultHighlightedValue?: string | null;
+  /** 하이라이트가 옮겨 갈 때 호출됩니다. 한 번도 렌더된 적 없는 아이템으로 갈 때도 포함합니다. */
+  onHighlightChange?: (details: ListboxHighlightChangeDetails) => void;
+  /** 몇 개까지 선택할 수 있는지. 기본값은 `single`입니다. */
+  selectionMode?: ListboxSelectionMode;
+  /** 이미 선택된 아이템을 다시 선택하면 선택이 해제됩니다. */
+  deselectable?: boolean;
+  /** 다중 선택에서 전체 선택 단축키를 내주지 않습니다. */
+  disallowSelectAll?: boolean;
+  /** 선택이 하이라이트를 따라갑니다. 선택이 상세 패널을 움직이는 목록에 씁니다. */
+  selectOnHighlight?: boolean;
+  /** 몇 글자를 입력해 해당 아이템으로 건너뜁니다. 기본값은 true입니다. */
+  typeahead?: boolean;
+  /** 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. */
+  loopFocus?: boolean;
+  /** 아이템이 배치되는 축. 기본값은 `vertical`입니다. */
+  orientation?: Orientation;
+  /** 비활성화된 Listbox는 반응하지 않습니다. */
+  disabled?: boolean;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+declare function ListboxRoot<TItem>(props: ListboxRootProps<TItem> & PartOwnProps<HTMLElement> & DomAttributes): ReactNode;
+export declare const Listbox: {
+  meta: SynapseComponentMeta;
+  Root: typeof ListboxRoot;
+  Content: PartComponent<HTMLElement, Record<string, unknown>>;
+  Input: PartComponent<HTMLElement, Record<string, unknown>>;
+  Item: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemGroup: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemGroupLabel: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemIndicator: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemText: PartComponent<HTMLElement, Record<string, unknown>>;
+  Label: PartComponent<HTMLElement, Record<string, unknown>>;
+  ValueText: PartComponent<HTMLElement, Record<string, unknown>>;
+};
+//#endregion
+//# sourceMappingURL=listbox.d.mts.map

package/dist/components/listbox/listbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.d.mts","names":[],"sources":["../../../src/components/listbox/listbox.tsx"],"mappings":";;;;;iBAqBiB;WACN;;iBAGM;WACN;;YAGC;iBAEK,iBAAiB;;EAEhC,YAAY,kBAAkB;;;;;;;;EAQ9B;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,qBAAqB,SAAS;;EAE9B,gBAAgB;;EAEhB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,cAAc;;EAEd;;EAEA,OAAO;;EAEP;;iBA4DO,YAAY,OACnB,OAAO,iBAAiB,SAAS,aAAa,eAAe,gBAC5D;qBAMU;QAAA"}

package/dist/components/listbox/listbox.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { pinnedRowProps, positionProps, rememberCollection, windowedContent } from "../collection-window.mjs";
+import { listboxRecipe } from "./listbox.recipe.mjs";
+import { createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as listbox from "@zag-js/listbox";
+//#region src/components/listbox/listbox.tsx
+const base = defineComponent()({
+	name: "Listbox",
+	module: listbox,
+	rootPart: "root",
+	elements: {
+		valueText: "span",
+		itemText: "span",
+		itemIndicator: "span",
+		input: "input"
+	},
+	defaultContent: {
+		itemIndicator: () => /* @__PURE__ */ jsx(Icon, { icon: checkmark }),
+		valueText: (api) => api.valueAsString,
+		content: windowedContent({ renderRow: (row, hidden, collection) => /* @__PURE__ */ jsxs(base.Item, {
+			item: row.item,
+			...positionProps(row.position),
+			...pinnedRowProps(hidden),
+			children: [/* @__PURE__ */ jsx(base.ItemText, {
+				item: row.item,
+				children: collection.labelOf(row.value)
+			}), /* @__PURE__ */ jsx(base.ItemIndicator, { item: row.item })]
+		}, row.value) })
+	},
+	getterProps: {
+		item: ["item", "highlightOnHover"],
+		itemText: ["item"],
+		itemIndicator: ["item"],
+		itemGroup: ["id"],
+		itemGroupLabel: ["htmlFor"],
+		input: ["autoHighlight", "keyboardPriority"]
+	},
+	machineTranslations: null,
+	field: {
+		ids: (field) => ({ label: field.label }),
+		describe: ["content"],
+		labelable: false
+	},
+	amendBehaviorProps: { content: (_behaviorProps, api) => ({
+		"aria-disabled": api.disabled ? true : void 0,
+		"data-disabled": api.disabled ? "" : void 0
+	}) },
+	variantProps: ["size"],
+	slots: (props) => {
+		const size = resolveSize(props.size, "Listbox");
+		return {
+			...listboxRecipe({ size }),
+			input: inputPartClass(size, listboxRecipe.raw({ size }).input)
+		};
+	}
+});
+function ListboxRoot(props) {
+	const { collection, ...rest } = props;
+	return createElement(base.Root, {
+		...rest,
+		collection: rememberCollection(collection)
+	});
+}
+ListboxRoot.displayName = base.Root.displayName;
+const Listbox = {
+	...base,
+	Root: ListboxRoot
+};
+//#endregion
+export { Listbox };
+
+//# sourceMappingURL=listbox.mjs.map