@neurocle/synapse-react 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,320 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/tags-input/tags-input.recipe.ts
+const tagsInputRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"control",
+		"input",
+		"clearTrigger",
+		"item",
+		"itemPreview",
+		"itemInput",
+		"itemText",
+		"itemDeleteTrigger"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline"
+		},
+		label: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		control: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			gap: "gap.inline",
+			paddingInline: "inset.compact",
+			paddingBlock: "inset.compact"
+		},
+		input: {
+			"--tags-input-flex": "1 1 6ch",
+			flex: "var(--tags-input-flex)",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			paddingInline: "inset.compact",
+			bg: "surface.transparent",
+			color: "foreground.default",
+			borderWidth: "none",
+			outlineStyle: "none",
+			_placeholder: { color: "foreground.subtle" },
+			_readOnly: { cursor: "default" },
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed"
+			}
+		},
+		clearTrigger: {
+			marginInlineStart: "auto",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "control",
+			color: "foreground.subtle",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled], [data-readonly]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled], [data-readonly]):active": {
+				bg: "secondary.active",
+				color: "foreground.default"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		item: {
+			display: "inline-flex",
+			alignItems: "center",
+			maxWidth: "fill",
+			rounded: "control"
+		},
+		itemPreview: {
+			display: "inline-flex",
+			alignItems: "center",
+			minHeight: "target.minimum",
+			maxWidth: "fill",
+			paddingInlineStart: "inset.control",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "surface.transparent",
+			bg: "secondary.default",
+			color: "foreground.default",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			_highlighted: {
+				bg: "primary.subtle",
+				color: "primary.onSurface",
+				borderColor: "primary.default",
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.none",
+				outlineColor: "border.focus",
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText"
+				}
+			},
+			_disabled: {
+				bg: "surface.raised",
+				color: "foreground.disabled",
+				_highContrast: {
+					color: "system.grayText",
+					borderColor: "system.grayText"
+				}
+			}
+		},
+		itemText: {
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		},
+		itemInput: {
+			minHeight: "target.minimum",
+			paddingInline: "inset.compact",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.focus",
+			bg: "surface.raised",
+			color: "foreground.default",
+			outlineStyle: "none"
+		},
+		itemDeleteTrigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "control",
+			color: "foreground.subtle",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled], [data-readonly]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled], [data-readonly]):active": {
+				bg: "secondary.active",
+				color: "foreground.default"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			input: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			itemPreview: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			itemInput: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			itemDeleteTrigger: {
+				minHeight: "control.xs",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			},
+			clearTrigger: {
+				minHeight: "control.xs",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			}
+		},
+		sm: {
+			input: {
+				minHeight: "control.xs",
+				textStyle: "body"
+			},
+			itemPreview: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			itemInput: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			itemDeleteTrigger: {
+				minHeight: "control.xs",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			},
+			clearTrigger: {
+				minHeight: "control.xs",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			}
+		},
+		md: {
+			input: {
+				minHeight: "control.xs",
+				textStyle: "body"
+			},
+			itemPreview: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			itemInput: {
+				minHeight: "control.xs",
+				textStyle: "detail"
+			},
+			itemDeleteTrigger: {
+				minHeight: "control.xs",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			},
+			clearTrigger: {
+				minHeight: "control.xs",
+				minWidth: "target.minimum",
+				"& svg": {
+					width: "icon.md",
+					height: "icon.md"
+				}
+			}
+		},
+		lg: {
+			input: {
+				minHeight: "control.sm",
+				textStyle: "body"
+			},
+			itemPreview: {
+				minHeight: "target.minimum",
+				textStyle: "body"
+			},
+			itemInput: {
+				minHeight: "target.minimum",
+				textStyle: "body"
+			},
+			itemDeleteTrigger: {
+				minHeight: "target.minimum",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			},
+			clearTrigger: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			input: {
+				minHeight: "control.md",
+				textStyle: "subtitle"
+			},
+			itemPreview: {
+				minHeight: "control.md",
+				textStyle: "body"
+			},
+			itemInput: {
+				minHeight: "control.md",
+				textStyle: "body"
+			},
+			itemDeleteTrigger: {
+				minHeight: "control.md",
+				"& svg": {
+					width: "icon.md",
+					height: "icon.md"
+				}
+			},
+			clearTrigger: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { tagsInputRecipe };
+
+//# sourceMappingURL=tags-input.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.recipe.mjs","names":[],"sources":["../../../src/components/tags-input/tags-input.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const tagsInputRecipe = sva({\n  slots: [\n    'root',\n    'label',\n    'control',\n    'input',\n    'clearTrigger',\n    'item',\n    'itemPreview',\n    'itemInput',\n    'itemText',\n    'itemDeleteTrigger',\n  ],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n    },\n    label: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    control: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      paddingInline: 'inset.compact',\n      paddingBlock: 'inset.compact',\n    },\n    input: {\n      // 행의 남은 자리로 늘어나지만, 태그에 밀려 몇 글자보다 좁아지기 전에 자기 행으로 줄바꿈합니다.\n      // 한 글자로 잘린 placeholder는 잘못 들어간 문자처럼 읽힙니다.\n      '--tags-input-flex': '1 1 6ch',\n      flex: 'var(--tags-input-flex)',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.compact',\n      bg: 'surface.transparent',\n      color: 'foreground.default',\n      borderWidth: 'none',\n      outlineStyle: 'none',\n      _placeholder: { color: 'foreground.subtle' },\n      _readOnly: { cursor: 'default' },\n      _disabled: { color: 'foreground.disabled', cursor: 'not-allowed' },\n    },\n    clearTrigger: {\n      // 자기 행으로 줄바꿈되어도 상자의 끝에 머무릅니다.\n      marginInlineStart: 'auto',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      rounded: 'control',\n      color: 'foreground.subtle',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled], [data-readonly]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled], [data-readonly]):active': {\n        bg: 'secondary.active',\n        color: 'foreground.default',\n      },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText' },\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    item: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      maxWidth: 'fill',\n      rounded: 'control',\n    },\n    itemPreview: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      minHeight: 'target.minimum',\n      maxWidth: 'fill',\n      paddingInlineStart: 'inset.control',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'surface.transparent',\n      bg: 'secondary.default',\n      color: 'foreground.default',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      _highlighted: {\n        bg: 'primary.subtle',\n        color: 'primary.onSurface',\n        borderColor: 'primary.default',\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.none',\n        outlineColor: 'border.focus',\n        _highContrast: { bg: 'system.highlight', color: 'system.highlightText' },\n      },\n      _disabled: {\n        bg: 'surface.raised',\n        color: 'foreground.disabled',\n        _highContrast: { color: 'system.grayText', borderColor: 'system.grayText' },\n      },\n    },\n    itemText: {\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    itemInput: {\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.compact',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.focus',\n      bg: 'surface.raised',\n      color: 'foreground.default',\n      outlineStyle: 'none',\n    },\n    itemDeleteTrigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      rounded: 'control',\n      color: 'foreground.subtle',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled], [data-readonly]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled], [data-readonly]):active': {\n        bg: 'secondary.active',\n        color: 'foreground.default',\n      },\n      _disabled: { color: 'foreground.disabled', cursor: 'not-allowed' },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        input: { minHeight: 'control.xs', textStyle: 'detail' },\n        itemPreview: { minHeight: 'control.xs', textStyle: 'detail' },\n        itemInput: { minHeight: 'control.xs', textStyle: 'detail' },\n        itemDeleteTrigger: {\n          minHeight: 'control.xs',\n          '& svg': { width: 'icon.xs', height: 'icon.xs' },\n        },\n        clearTrigger: { minHeight: 'control.xs', '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        input: { minHeight: 'control.xs', textStyle: 'body' },\n        itemPreview: { minHeight: 'control.xs', textStyle: 'detail' },\n        itemInput: { minHeight: 'control.xs', textStyle: 'detail' },\n        itemDeleteTrigger: {\n          minHeight: 'control.xs',\n          '& svg': { width: 'icon.xs', height: 'icon.xs' },\n        },\n        clearTrigger: { minHeight: 'control.xs', '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        input: { minHeight: 'control.xs', textStyle: 'body' },\n        itemPreview: { minHeight: 'control.xs', textStyle: 'detail' },\n        itemInput: { minHeight: 'control.xs', textStyle: 'detail' },\n        itemDeleteTrigger: {\n          minHeight: 'control.xs',\n          '& svg': { width: 'icon.xs', height: 'icon.xs' },\n        },\n        clearTrigger: {\n          minHeight: 'control.xs',\n          minWidth: 'target.minimum',\n          '& svg': { width: 'icon.md', height: 'icon.md' },\n        },\n      },\n      lg: {\n        input: { minHeight: 'control.sm', textStyle: 'body' },\n        itemPreview: { minHeight: 'target.minimum', textStyle: 'body' },\n        itemInput: { minHeight: 'target.minimum', textStyle: 'body' },\n        itemDeleteTrigger: {\n          minHeight: 'target.minimum',\n          '& svg': { width: 'icon.sm', height: 'icon.sm' },\n        },\n        clearTrigger: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        input: { minHeight: 'control.md', textStyle: 'subtitle' },\n        itemPreview: { minHeight: 'control.md', textStyle: 'body' },\n        itemInput: { minHeight: 'control.md', textStyle: 'body' },\n        itemDeleteTrigger: {\n          minHeight: 'control.md',\n          '& svg': { width: 'icon.md', height: 'icon.md' },\n        },\n        clearTrigger: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Textarea, TextareaRootProps } from "./textarea.mjs";
+export { Textarea, type TextareaRootProps };

package/dist/components/textarea/index.mjs

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

package/dist/components/textarea/textarea.anatomy.mjs

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

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

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

package/dist/components/textarea/textarea.connect.mjs

@@ -0,0 +1,82 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { anatomy, parts } from "./textarea.anatomy.mjs";
+//#region src/components/textarea/textarea.connect.ts
+var textarea_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 ?? "textarea"}: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, props, textarea_connect_exports };
+
+//# sourceMappingURL=textarea.connect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.connect.mjs","names":[],"sources":["../../../src/components/textarea/textarea.connect.ts"],"sourcesContent":["import type { ChangeEvent } from 'react'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { parts } from '#/components/textarea/textarea.anatomy.ts'\n\nexport { anatomy } from '#/components/textarea/textarea.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 TextareaCount {\n  id: string\n  length: number\n  max: number | undefined\n}\n\nexport interface TextareaApi {\n  value: string | undefined\n  count: TextareaCount | 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>>): TextareaApi {\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 ?? 'textarea'}: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<HTMLTextAreaElement>) => {\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,cAA8D;CACpF,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,WAAW;EACxB,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,UAA4C;IACrD,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/textarea/textarea.d.mts

@@ -0,0 +1,32 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { TextareaHTMLAttributes } from "react";
+//#region src/components/textarea/textarea.d.ts
+export interface TextareaRootProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'required' | 'readOnly' | 'color' | 'children'> {
+  /** 제어되는 값. */
+  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;
+  /** 내용에 맞춰 높이가 늘어납니다. 켜져 있는 동안 크기 조절 손잡이는 숨습니다. 최소 높이는 `rows`가 정합니다. */
+  autoResize?: boolean;
+  /** `autoResize`로 늘어날 수 있는 최대 줄 수. 넘으면 그 높이에서 멈추고 안쪽이 스크롤됩니다. */
+  maxRows?: number;
+}
+export declare const Textarea: SynapseComponent<"root", "root", TextareaRootProps, never>;
+//#endregion
+//# sourceMappingURL=textarea.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.mts","names":[],"sources":["../../../src/components/textarea/textarea.tsx"],"mappings":";;;;;iBAiBiB,0BAA0B,KACzC,uBAAuB;;EAWvB;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA;;EAEA;;EAEA,OAAO;;EAEP;;EAEA;;EAEA;;qBAGW,UAAQ,iCAAA"}

package/dist/components/textarea/textarea.mjs

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

package/dist/components/textarea/textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.mjs","names":["textarea"],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, type TextareaHTMLAttributes } from 'react'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport * as textarea from '#/components/textarea/textarea.connect.ts'\nimport {\n  textareaCountClass,\n  textareaRecipe,\n  textareaWrapperClass,\n} from '#/components/textarea/textarea.recipe.ts'\nimport { CharacterCount } from '#/shared/character-count.tsx'\nimport { inputPartClass } from '#/shared/input-style.ts'\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 interface TextareaRootProps extends Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'disabled'\n  | 'required'\n  | 'readOnly'\n  | 'color'\n  | 'children'\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  /** 내용에 맞춰 높이가 늘어납니다. 켜져 있는 동안 크기 조절 손잡이는 숨습니다. 최소 높이는 `rows`가 정합니다. */\n  autoResize?: boolean\n  /** `autoResize`로 늘어날 수 있는 최대 줄 수. 넘으면 그 높이에서 멈추고 안쪽이 스크롤됩니다. */\n  maxRows?: number\n}\n\nexport const Textarea = defineComponent<TextareaRootProps>()({\n  name: 'Textarea',\n  module: textarea,\n  rootPart: 'root',\n  rootElement: 'textarea',\n  variantProps: ['size'],\n  useMachineProps: useTextEntry,\n  wrapRoot: (api, node) =>\n    api.count === undefined\n      ? node\n      : createElement(\n          'span',\n          {\n            className: textareaWrapperClass,\n            'data-scope': 'textarea',\n            'data-part': 'count-wrapper',\n          },\n          node,\n          createElement(CharacterCount, {\n            id: api.count.id,\n            className: textareaCountClass,\n            length: api.count.length,\n            max: api.count.max,\n            compact: true,\n          }),\n        ),\n  field: { id: 'control', describe: ['root'] },\n  slots: (props: TextareaRootProps) => {\n    const size = resolveSize(props.size, 'Textarea')\n    return { root: inputPartClass(size, textareaRecipe.raw({ size }).root) }\n  },\n})\n"],"mappings":";;;;;;;;;;AAoDA,MAAa,WAAW,gBAAmC,CAAC,CAAC;CAC3D,MAAM;CACN,QAAQA;CACR,UAAU;CACV,aAAa;CACb,cAAc,CAAC,MAAM;CACrB,iBAAiB;CACjB,WAAW,KAAK,SACd,IAAI,UAAU,KAAA,IACV,OACA,cACE,QACA;EACE,WAAW;EACX,cAAc;EACd,aAAa;CACf,GACA,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,UAA6B;EACnC,MAAM,OAAO,YAAY,MAAM,MAAM,UAAU;EAC/C,OAAO,EAAE,MAAM,eAAe,MAAM,eAAe,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE;CACzE;AACF,CAAC"}

package/dist/components/textarea/textarea.recipe.mjs

@@ -0,0 +1,58 @@
+import { css } from "../../react/styled-system/css/css.mjs";
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/textarea/textarea.recipe.ts
+const textareaWrapperClass = css({
+	position: "relative",
+	display: "block",
+	width: "fill"
+});
+const textareaCountClass = css({
+	position: "absolute",
+	insetInlineEnd: "inset.control",
+	insetBlockEnd: "inset.compact",
+	pointerEvents: "none",
+	textStyle: "detail",
+	color: "foreground.subtle",
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap",
+	"&[data-near-limit]": { color: "foreground.muted" }
+});
+const textareaRecipe = sva({
+	slots: ["root"],
+	base: { root: {
+		minHeight: "target.minimum",
+		resize: "vertical",
+		"&[data-auto-resize]": {
+			resize: "none",
+			overflowY: "hidden"
+		},
+		"&[data-show-count]": { paddingBlockEnd: "rhythm.normal" }
+	} },
+	variants: { size: {
+		xs: { root: {
+			paddingBlock: "inset.compact",
+			textStyle: "detail"
+		} },
+		sm: { root: {
+			paddingBlock: "inset.compact",
+			textStyle: "body"
+		} },
+		md: { root: {
+			paddingBlock: "inset.control",
+			textStyle: "body"
+		} },
+		lg: { root: {
+			paddingBlock: "inset.overlay",
+			textStyle: "body"
+		} },
+		xl: { root: {
+			paddingBlock: "inset.overlay",
+			textStyle: "subtitle"
+		} }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { textareaCountClass, textareaRecipe, textareaWrapperClass };
+
+//# sourceMappingURL=textarea.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.recipe.mjs","names":[],"sources":["../../../src/components/textarea/textarea.recipe.ts"],"sourcesContent":["import { css, sva } from '#styled-system/css/index.js'\n\nexport const textareaWrapperClass = css({ position: 'relative', display: 'block', width: 'fill' })\n\nexport const textareaCountClass = css({\n  position: 'absolute',\n  insetInlineEnd: 'inset.control',\n  insetBlockEnd: 'inset.compact',\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\nexport const textareaRecipe = sva({\n  slots: ['root'],\n  base: {\n    root: {\n      minHeight: 'target.minimum',\n      resize: 'vertical',\n      '&[data-auto-resize]': { resize: 'none', overflowY: 'hidden' },\n      '&[data-show-count]': { paddingBlockEnd: 'rhythm.normal' },\n    },\n  },\n  variants: {\n    size: {\n      xs: { root: { paddingBlock: 'inset.compact', textStyle: 'detail' } },\n      sm: { root: { paddingBlock: 'inset.compact', textStyle: 'body' } },\n      md: { root: { paddingBlock: 'inset.control', textStyle: 'body' } },\n      lg: { root: { paddingBlock: 'inset.overlay', textStyle: 'body' } },\n      xl: { root: { paddingBlock: 'inset.overlay', textStyle: 'subtitle' } },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;;AAEA,MAAa,uBAAuB,IAAI;CAAE,UAAU;CAAY,SAAS;CAAS,OAAO;AAAO,CAAC;AAEjG,MAAa,qBAAqB,IAAI;CACpC,UAAU;CACV,gBAAgB;CAChB,eAAe;CACf,eAAe;CACf,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CACZ,sBAAsB,EAAE,OAAO,mBAAmB;AACpD,CAAC;AAED,MAAa,iBAAiB,IAAI;CAChC,OAAO,CAAC,MAAM;CACd,MAAM,EACJ,MAAM;EACJ,WAAW;EACX,QAAQ;EACR,uBAAuB;GAAE,QAAQ;GAAQ,WAAW;EAAS;EAC7D,sBAAsB,EAAE,iBAAiB,gBAAgB;CAC3D,EACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,MAAM;GAAE,cAAc;GAAiB,WAAW;EAAS,EAAE;EACnE,IAAI,EAAE,MAAM;GAAE,cAAc;GAAiB,WAAW;EAAO,EAAE;EACjE,IAAI,EAAE,MAAM;GAAE,cAAc;GAAiB,WAAW;EAAO,EAAE;EACjE,IAAI,EAAE,MAAM;GAAE,cAAc;GAAiB,WAAW;EAAO,EAAE;EACjE,IAAI,EAAE,MAAM;GAAE,cAAc;GAAiB,WAAW;EAAW,EAAE;CACvE,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Timer, TimerAction, TimerPart, TimerRootProps, TimerTickDetails } from "./timer.mjs";
+export { Timer, type TimerAction, type TimerPart, type TimerRootProps, type TimerTickDetails };

package/dist/components/timer/index.mjs

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

package/dist/components/timer/timer.d.mts

@@ -0,0 +1,31 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/timer/timer.d.ts
+export type TimerPart = 'days' | 'hours' | 'minutes' | 'seconds' | 'milliseconds';
+export type TimerAction = 'start' | 'pause' | 'resume' | 'reset' | 'restart';
+export interface TimerTickDetails {
+  readonly value: number;
+}
+export interface TimerRootProps {
+  /** 올려 세지 않고 내려 세요. */
+  countdown?: boolean;
+  /** 세기가 시작되는 지점(밀리초). */
+  startMs?: number;
+  /** 세기가 끝나는 지점(밀리초). */
+  targetMs?: number;
+  /** 마운트되자마자 시작합니다. */
+  autoStart?: boolean;
+  /** 셈이 갱신되는 주기(밀리초). 기본값은 1000입니다. */
+  interval?: number;
+  /** 매 틱마다 호출됩니다. */
+  onTick?: (details: TimerTickDetails) => void;
+  /** 목표 지점에 닿았을 때 한 번 호출됩니다. */
+  onComplete?: () => void;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Timer: SynapseComponent<"actionTrigger" | "area" | "control" | "item" | "itemLabel" | "itemValue" | "root" | "separator", "root", TimerRootProps, never>;
+//#endregion
+//# sourceMappingURL=timer.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timer.d.mts","names":[],"sources":["../../../src/components/timer/timer.tsx"],"mappings":";;;YAaY;YAEA;iBAEK;WACN;;iBA6BM;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,UAAU,SAAS;;EAEnB;;EAEA,OAAO;;EAEP;;qBAGW,OAAK,2HAAA"}