@neurocle/synapse-react 0.0.0-bootstrap

package/dist/components/tabs/index.mjs

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

package/dist/components/tabs/tabs.d.mts

@@ -0,0 +1,40 @@
+import { Orientation, SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/tabs/tabs.d.ts
+export interface TabsFocusChangeDetails {
+  readonly value: string | null;
+}
+export type TabsActivationMode = 'automatic' | 'manual';
+export interface TabsRootProps {
+  /** 선택된 탭이며 제어 모드입니다. `null`이면 아무것도 선택하지 않습니다. */
+  value?: string | null;
+  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */
+  defaultValue?: string | null;
+  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<string>) => void;
+  /** 이미 선택된 탭을 다시 선택하면 선택이 해제됩니다. 기본값은 false입니다. */
+  deselectable?: boolean;
+  /** 하이라이트된 탭이 선택된 탭이 되는 시점. 기본값은 `automatic`입니다. */
+  activationMode?: TabsActivationMode;
+  /** 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. */
+  loopFocus?: boolean;
+  /** 키보드가 trigger 사이를 오갈 때 호출됩니다. */
+  onFocusChange?: (details: TabsFocusChangeDetails) => void;
+  /** 목록이 배치되는 축. 기본값은 `horizontal`입니다. */
+  orientation?: Orientation;
+  /**
+   * 목록을 복합 위젯으로 만들어, 그 내용에 Tab으로 닿을 수 있게 합니다.
+   *
+   * machine의 기본값에 맡깁니다. 포커스 모델을 바꾸는 prop이라 여기서 정하지 않고 밖으로 드러냅니다.
+   * 자체 포커스 대상을 품은 패널과 정적인 텍스트만 있는 패널은 서로 다른 답이 필요합니다.
+   */
+  composite?: boolean;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Tabs: SynapseComponent<"content" | "indicator" | "list" | "root" | "trigger", "root", TabsRootProps, never>;
+//#endregion
+//# sourceMappingURL=tabs.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.mts","names":[],"sources":["../../../src/components/tabs/tabs.tsx"],"mappings":";;;;iBAUiB;WACN;;YAGC;iBAEK;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA,iBAAiB;;EAEjB;;EAEA,iBAAiB,SAAS;;EAE1B,cAAc;;;;;;;EAOd;;EAEA,OAAO;;EAEP;;qBAGW,MAAI,gFAAA"}

package/dist/components/tabs/tabs.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { tabsRecipe } from "./tabs.recipe.mjs";
+import * as tabs from "@zag-js/tabs";
+//#region src/components/tabs/tabs.tsx
+const Tabs = defineComponent()({
+	name: "Tabs",
+	module: tabs,
+	rootPart: "root",
+	elements: { indicator: "span" },
+	getterProps: {
+		trigger: ["value", "disabled"],
+		content: ["value"]
+	},
+	machineTranslations: null,
+	variantProps: ["size"],
+	slots: (props) => tabsRecipe({ size: resolveSize(props.size, "Tabs") })
+});
+//#endregion
+export { Tabs };
+
+//# sourceMappingURL=tabs.mjs.map

package/dist/components/tabs/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.mjs","names":[],"sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as tabs from '@zag-js/tabs'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { tabsRecipe } from '#/components/tabs/tabs.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport type { Orientation } from '#/system/types.ts'\n\nexport interface TabsFocusChangeDetails {\n  readonly value: string | null\n}\n\nexport type TabsActivationMode = 'automatic' | 'manual'\n\nexport interface TabsRootProps {\n  /** 선택된 탭이며 제어 모드입니다. `null`이면 아무것도 선택하지 않습니다. */\n  value?: string | null\n  /** 비제어 모드의 초기 선택. `value`를 주면 무시됩니다. */\n  defaultValue?: string | null\n  /** 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<string>) => void\n  /** 이미 선택된 탭을 다시 선택하면 선택이 해제됩니다. 기본값은 false입니다. */\n  deselectable?: boolean\n  /** 하이라이트된 탭이 선택된 탭이 되는 시점. 기본값은 `automatic`입니다. */\n  activationMode?: TabsActivationMode\n  /** 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다. */\n  loopFocus?: boolean\n  /** 키보드가 trigger 사이를 오갈 때 호출됩니다. */\n  onFocusChange?: (details: TabsFocusChangeDetails) => void\n  /** 목록이 배치되는 축. 기본값은 `horizontal`입니다. */\n  orientation?: Orientation\n  /**\n   * 목록을 복합 위젯으로 만들어, 그 내용에 Tab으로 닿을 수 있게 합니다.\n   *\n   * machine의 기본값에 맡깁니다. 포커스 모델을 바꾸는 prop이라 여기서 정하지 않고 밖으로 드러냅니다.\n   * 자체 포커스 대상을 품은 패널과 정적인 텍스트만 있는 패널은 서로 다른 답이 필요합니다.\n   */\n  composite?: boolean\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const Tabs = defineComponent<TabsRootProps>()({\n  name: 'Tabs',\n  module: tabs,\n  rootPart: 'root',\n  elements: { indicator: 'span' },\n  getterProps: {\n    trigger: ['value', 'disabled'],\n    content: ['value'],\n  },\n  machineTranslations: null,\n  variantProps: ['size'],\n  slots: (props: TabsRootProps) => tabsRecipe({ size: resolveSize(props.size, 'Tabs') }),\n})\n"],"mappings":";;;;;;AA8CA,MAAa,OAAO,gBAA+B,CAAC,CAAC;CACnD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EAAE,WAAW,OAAO;CAC9B,aAAa;EACX,SAAS,CAAC,SAAS,UAAU;EAC7B,SAAS,CAAC,OAAO;CACnB;CACA,qBAAqB;CACrB,cAAc,CAAC,MAAM;CACrB,QAAQ,UAAyB,WAAW,EAAE,MAAM,YAAY,MAAM,MAAM,MAAM,EAAE,CAAC;AACvF,CAAC"}

package/dist/components/tabs/tabs.recipe.mjs

@@ -0,0 +1,182 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/tabs/tabs.recipe.ts
+const tabsRecipe = sva({
+	slots: [
+		"root",
+		"list",
+		"trigger",
+		"content",
+		"indicator"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			width: "fill",
+			color: "foreground.default",
+			"&[data-orientation=\"vertical\"]": {
+				flexDirection: "row",
+				gap: "gap.distinct"
+			}
+		},
+		list: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			borderBlockEndWidth: "hairline",
+			borderBlockEndStyle: "solid",
+			borderColor: "border.muted",
+			"&[data-orientation=\"vertical\"]": {
+				flexDirection: "column",
+				alignItems: "stretch",
+				gap: "inset.none",
+				borderBlockEndWidth: "none",
+				borderInlineEndWidth: "hairline",
+				borderInlineEndStyle: "solid"
+			}
+		},
+		trigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "gap.inline",
+			minHeight: "target.minimum",
+			minWidth: "target.minimum",
+			paddingInline: "inset.none",
+			rounded: "control",
+			color: "foreground.subtle",
+			outlineColor: "border.focus",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&[data-orientation=\"vertical\"]": {
+				justifyContent: "flex-start",
+				paddingInlineEnd: "inset.surface"
+			},
+			"&:not(:disabled, [data-disabled], [data-selected]):hover": { color: "foreground.muted" },
+			_selected: { color: "primary.onSurface" },
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		content: {
+			color: "foreground.default",
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		indicator: {
+			position: "absolute",
+			width: "var(--width)",
+			height: "var(--height)",
+			insetInlineStart: "var(--left)",
+			insetBlockStart: "var(--top)",
+			borderStyle: "solid",
+			borderWidth: "none",
+			borderColor: "primary.default",
+			pointerEvents: "none",
+			"--transition-duration": "{durations.reveal}",
+			"--transition-timing-function": "{easings.interaction}",
+			"&[data-orientation=\"horizontal\"]": { borderBlockEndWidth: "emphasis" },
+			"&[data-orientation=\"vertical\"]": { borderInlineEndWidth: "emphasis" },
+			_highContrast: { borderColor: "system.highlight" }
+		}
+	},
+	variants: { size: {
+		xs: {
+			list: { gap: "gap.related" },
+			trigger: {
+				"& > svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				},
+				minHeight: "control.xs",
+				textStyle: "caption"
+			},
+			content: {
+				paddingBlock: "inset.compact",
+				textStyle: "caption"
+			}
+		},
+		sm: {
+			list: { gap: "gap.distinct" },
+			trigger: {
+				"& > svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				},
+				minHeight: "control.sm",
+				paddingBlock: "inset.compact",
+				textStyle: "detail"
+			},
+			content: {
+				paddingBlock: "inset.control",
+				textStyle: "detail"
+			}
+		},
+		md: {
+			list: { gap: "rhythm.normal" },
+			trigger: {
+				"& > svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				},
+				minHeight: "control.md",
+				paddingBlock: "inset.control",
+				textStyle: "body"
+			},
+			content: {
+				paddingBlock: "inset.surface",
+				textStyle: "body"
+			}
+		},
+		lg: {
+			list: { gap: "rhythm.normal" },
+			trigger: {
+				"& > svg": {
+					width: "icon.md",
+					height: "icon.md"
+				},
+				minHeight: "control.lg",
+				paddingBlock: "inset.control",
+				textStyle: "subtitle"
+			},
+			content: {
+				paddingBlock: "inset.surface",
+				textStyle: "body"
+			}
+		},
+		xl: {
+			list: { gap: "gap.section" },
+			trigger: {
+				"& > svg": {
+					width: "icon.lg",
+					height: "icon.lg"
+				},
+				minHeight: "control.xl",
+				paddingBlock: "inset.overlay",
+				textStyle: "title"
+			},
+			content: {
+				paddingBlock: "rhythm.normal",
+				textStyle: "subtitle"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { tabsRecipe };
+
+//# sourceMappingURL=tabs.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.recipe.mjs","names":[],"sources":["../../../src/components/tabs/tabs.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const tabsRecipe = sva({\n  slots: ['root', 'list', 'trigger', 'content', 'indicator'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      width: 'fill',\n      color: 'foreground.default',\n      '&[data-orientation=\"vertical\"]': { flexDirection: 'row', gap: 'gap.distinct' },\n    },\n    list: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      borderBlockEndWidth: 'hairline',\n      borderBlockEndStyle: 'solid',\n      borderColor: 'border.muted',\n      '&[data-orientation=\"vertical\"]': {\n        flexDirection: 'column',\n        alignItems: 'stretch',\n        gap: 'inset.none',\n        borderBlockEndWidth: 'none',\n        borderInlineEndWidth: 'hairline',\n        borderInlineEndStyle: 'solid',\n      },\n    },\n    trigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 'gap.inline',\n      minHeight: 'target.minimum',\n      minWidth: 'target.minimum',\n      paddingInline: 'inset.none',\n      rounded: 'control',\n      color: 'foreground.subtle',\n      outlineColor: 'border.focus',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&[data-orientation=\"vertical\"]': {\n        justifyContent: 'flex-start',\n        paddingInlineEnd: 'inset.surface',\n      },\n      '&:not(:disabled, [data-disabled], [data-selected]):hover': { color: 'foreground.muted' },\n      _selected: { color: 'primary.onSurface' },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText' },\n      },\n    },\n    content: {\n      color: 'foreground.default',\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    indicator: {\n      position: 'absolute',\n      width: 'var(--width)',\n      height: 'var(--height)',\n      insetInlineStart: 'var(--left)',\n      insetBlockStart: 'var(--top)',\n      borderStyle: 'solid',\n      borderWidth: 'none',\n      borderColor: 'primary.default',\n      pointerEvents: 'none',\n      '--transition-duration': '{durations.reveal}',\n      '--transition-timing-function': '{easings.interaction}',\n      '&[data-orientation=\"horizontal\"]': { borderBlockEndWidth: 'emphasis' },\n      '&[data-orientation=\"vertical\"]': { borderInlineEndWidth: 'emphasis' },\n      _highContrast: { borderColor: 'system.highlight' },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        list: { gap: 'gap.related' },\n        trigger: {\n          '& > svg': { width: 'icon.xs', height: 'icon.xs' },\n          minHeight: 'control.xs',\n          textStyle: 'caption',\n        },\n        content: { paddingBlock: 'inset.compact', textStyle: 'caption' },\n      },\n      sm: {\n        list: { gap: 'gap.distinct' },\n        trigger: {\n          '& > svg': { width: 'icon.sm', height: 'icon.sm' },\n          minHeight: 'control.sm',\n          paddingBlock: 'inset.compact',\n          textStyle: 'detail',\n        },\n        content: { paddingBlock: 'inset.control', textStyle: 'detail' },\n      },\n      md: {\n        list: { gap: 'rhythm.normal' },\n        trigger: {\n          '& > svg': { width: 'icon.sm', height: 'icon.sm' },\n          minHeight: 'control.md',\n          paddingBlock: 'inset.control',\n          textStyle: 'body',\n        },\n        content: { paddingBlock: 'inset.surface', textStyle: 'body' },\n      },\n      lg: {\n        list: { gap: 'rhythm.normal' },\n        trigger: {\n          '& > svg': { width: 'icon.md', height: 'icon.md' },\n          minHeight: 'control.lg',\n          paddingBlock: 'inset.control',\n          textStyle: 'subtitle',\n        },\n        content: { paddingBlock: 'inset.surface', textStyle: 'body' },\n      },\n      xl: {\n        list: { gap: 'gap.section' },\n        trigger: {\n          '& > svg': { width: 'icon.lg', height: 'icon.lg' },\n          minHeight: 'control.xl',\n          paddingBlock: 'inset.overlay',\n          textStyle: 'title',\n        },\n        content: { paddingBlock: 'rhythm.normal', textStyle: 'subtitle' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,aAAa,IAAI;CAC5B,OAAO;EAAC;EAAQ;EAAQ;EAAW;EAAW;CAAW;CACzD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,OAAO;GACP,OAAO;GACP,oCAAkC;IAAE,eAAe;IAAO,KAAK;GAAe;EAChF;EACA,MAAM;GACJ,UAAU;GACV,SAAS;GACT,YAAY;GACZ,qBAAqB;GACrB,qBAAqB;GACrB,aAAa;GACb,oCAAkC;IAChC,eAAe;IACf,YAAY;IACZ,KAAK;IACL,qBAAqB;IACrB,sBAAsB;IACtB,sBAAsB;GACxB;EACF;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,WAAW;GACX,UAAU;GACV,eAAe;GACf,SAAS;GACT,OAAO;GACP,cAAc;GACd,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,oCAAkC;IAChC,gBAAgB;IAChB,kBAAkB;GACpB;GACA,4DAA4D,EAAE,OAAO,mBAAmB;GACxF,WAAW,EAAE,OAAO,oBAAoB;GACxC,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,eAAe,EAAE,OAAO,kBAAkB;GAC5C;EACF;EACA,SAAS;GACP,OAAO;GACP,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;EACA,WAAW;GACT,UAAU;GACV,OAAO;GACP,QAAQ;GACR,kBAAkB;GAClB,iBAAiB;GACjB,aAAa;GACb,aAAa;GACb,aAAa;GACb,eAAe;GACf,yBAAyB;GACzB,gCAAgC;GAChC,sCAAoC,EAAE,qBAAqB,WAAW;GACtE,oCAAkC,EAAE,sBAAsB,WAAW;GACrE,eAAe,EAAE,aAAa,mBAAmB;EACnD;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM,EAAE,KAAK,cAAc;GAC3B,SAAS;IACP,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,WAAW;GACb;GACA,SAAS;IAAE,cAAc;IAAiB,WAAW;GAAU;EACjE;EACA,IAAI;GACF,MAAM,EAAE,KAAK,eAAe;GAC5B,SAAS;IACP,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,cAAc;IACd,WAAW;GACb;GACA,SAAS;IAAE,cAAc;IAAiB,WAAW;GAAS;EAChE;EACA,IAAI;GACF,MAAM,EAAE,KAAK,gBAAgB;GAC7B,SAAS;IACP,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,cAAc;IACd,WAAW;GACb;GACA,SAAS;IAAE,cAAc;IAAiB,WAAW;GAAO;EAC9D;EACA,IAAI;GACF,MAAM,EAAE,KAAK,gBAAgB;GAC7B,SAAS;IACP,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,cAAc;IACd,WAAW;GACb;GACA,SAAS;IAAE,cAAc;IAAiB,WAAW;GAAO;EAC9D;EACA,IAAI;GACF,MAAM,EAAE,KAAK,cAAc;GAC3B,SAAS;IACP,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;IACjD,WAAW;IACX,cAAc;IACd,WAAW;GACb;GACA,SAAS;IAAE,cAAc;IAAiB,WAAW;GAAW;EAClE;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { TagsInput, TagsInputBlurBehavior, TagsInputInputValueChangeDetails, TagsInputInvalidDetails, TagsInputInvalidReason, TagsInputRootProps } from "./tags-input.mjs";
+export { TagsInput, type TagsInputBlurBehavior, type TagsInputInputValueChangeDetails, type TagsInputInvalidDetails, type TagsInputInvalidReason, type TagsInputRootProps };

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

@@ -0,0 +1,2 @@
+import { TagsInput } from "./tags-input.mjs";
+export { TagsInput };

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

@@ -0,0 +1,77 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/tags-input/tags-input.d.ts
+export interface TagsInputInputValueChangeDetails {
+  readonly inputValue: string;
+}
+export type TagsInputInvalidReason = 'maxLength' | 'maxTags' | 'duplicate' | 'invalid';
+export interface TagsInputInvalidDetails {
+  readonly reason: TagsInputInvalidReason;
+}
+export type TagsInputBlurBehavior = 'add' | 'clear';
+export interface TagsInputRootProps {
+  /** 제어되는 태그들. */
+  value?: readonly string[];
+  /** 비제어 모드의 초기 태그들. `value`를 주면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 제어 여부와 무관하게 태그가 바뀔 때마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<readonly string[]>) => void;
+  /** 제어되는 필드 안의 텍스트. 태그를 담는 `value`와는 다른 것입니다. */
+  inputValue?: string;
+  /** 비제어 모드에서 필드에 처음 들어 있는 텍스트. */
+  defaultInputValue?: string;
+  /** 텍스트가 바뀔 때 호출됩니다. */
+  onInputValueChange?: (details: TagsInputInputValueChangeDetails) => void;
+  /** 값이 거절됐을 때 호출됩니다. 너무 길거나, 너무 많거나, 중복인 경우입니다. */
+  onValueInvalid?: (details: TagsInputInvalidDetails) => void;
+  /** 값이 태그가 되기 전에 걸러냅니다. 거절하려면 false를 반환합니다. */
+  validate?: (details: {
+    readonly inputValue: string;
+    readonly value: readonly string[];
+  }) => boolean;
+  /** 값이 태그가 되는 길목에서 다듬습니다. 공백 제거, 대소문자 정리 등 제품에 필요한 처리를 합니다. */
+  sanitizeValue?: (value: string) => string;
+  /** 허용되는 태그의 최대 개수. */
+  max?: number;
+  /** 태그 하나가 가질 수 있는 최대 길이. */
+  maxLength?: number;
+  /** `max`를 넘는 태그를 거절하지 않고 받아들여, 넘친 것을 잘못된 값으로 보여줄 수 있게 합니다. */
+  allowOverflow?: boolean;
+  /** 같은 태그를 두 번 허용합니다. 기본적으로는 거절됩니다. */
+  allowDuplicates?: boolean;
+  /** 붙여 넣은 텍스트를 이 문자열을 기준으로 태그로 나눕니다. 기본값은 쉼표입니다. */
+  delimiter?: string;
+  /** 붙여 넣은 텍스트를 태그로 나눕니다. 기본값은 true입니다. */
+  addOnPaste?: boolean;
+  /** 태그를 제자리에서 고칠 수 있게 합니다. 기본값은 true입니다. */
+  editable?: boolean;
+  /** 다 입력하지 못한 태그가 필드의 포커스가 풀렸을 때 어떻게 되는지 정합니다. */
+  blurBehavior?: TagsInputBlurBehavior;
+  /** 필드의 placeholder 텍스트. */
+  placeholder?: string;
+  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 TagsInput을 id로 그 폼에 연결합니다. */
+  form?: string;
+  /** 비활성화된 TagsInput은 제출하지도, 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 TagsInput은 태그를 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알립니다. */
+  invalid?: boolean;
+  /** 제약 검증. 폼이 제출되려면 태그가 적어도 하나는 있어야 합니다. */
+  required?: boolean;
+  /** 마운트될 때 필드 안으로 포커스를 옮깁니다. */
+  autoFocus?: boolean;
+  /** 이 TagsInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const TagsInput: SynapseComponent<"clearTrigger" | "control" | "input" | "item" | "itemDeleteTrigger" | "itemInput" | "itemPreview" | "itemText" | "label" | "root", "root", TagsInputRootProps, never>;
+//#endregion
+//# sourceMappingURL=tags-input.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.d.mts","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"mappings":";;;;;iBAgBiB;WACN;;YAGC;iBAEK;WACN,QAAQ;;YAGP;iBAEK;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,sBAAsB,SAAS;;EAE/B,kBAAkB,SAAS;;EAE3B,YAAY;aACD;aACA;;;EAGX,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAQW,WAAS,4JAAA"}

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

@@ -0,0 +1,103 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { useTranslations } from "../../provider/locale-context.mjs";
+import { close } from "../../icons/src/close.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 { resolveMachineTranslations } from "../machine-translations.mjs";
+import { tagsInputRecipe } from "./tags-input.recipe.mjs";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as tagsInput from "@zag-js/tags-input";
+//#region src/components/tags-input/tags-input.tsx
+const MACHINE_STRINGS = {
+	clearTriggerLabel: "tagsInput.clearTrigger.label",
+	noTagsSelected: "tagsInput.control.noneSelected"
+};
+const TagsInput = defineComponent()({
+	name: "TagsInput",
+	module: tagsInput,
+	rootPart: "root",
+	field: {
+		ids: (field) => ({
+			label: field.label,
+			input: field.control
+		}),
+		describe: ["input"]
+	},
+	elements: {
+		item: "span",
+		itemPreview: "span",
+		itemText: "span",
+		input: "input",
+		itemInput: "input"
+	},
+	defaultContent: {
+		clearTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close }),
+		itemDeleteTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close }),
+		itemText: (_api, _t, args) => typeof args["value"] === "string" ? args["value"] : null
+	},
+	getterProps: {
+		item: [
+			"index",
+			"value",
+			"disabled"
+		],
+		itemPreview: [
+			"index",
+			"value",
+			"disabled"
+		],
+		itemText: [
+			"index",
+			"value",
+			"disabled"
+		],
+		itemInput: [
+			"index",
+			"value",
+			"disabled"
+		],
+		itemDeleteTrigger: [
+			"index",
+			"value",
+			"disabled"
+		]
+	},
+	rootOwnedGetters: [{
+		name: "hiddenInput",
+		getter: "getHiddenInputProps",
+		render: (props) => createElement("input", {
+			...props,
+			"data-synapse-form-field": ""
+		})
+	}],
+	machineTranslations: MACHINE_STRINGS,
+	variantProps: ["size"],
+	useMachineProps: (props) => {
+		const translate = useTranslations(props.translations);
+		return { translations: {
+			...resolveMachineTranslations(MACHINE_STRINGS, translate),
+			deleteTagTriggerLabel: (value) => translate("tagsInput.deleteTrigger.label", { value }),
+			tagAdded: (value) => translate("tagsInput.item.added", { value }),
+			tagDeleted: (value) => translate("tagsInput.item.deleted", { value }),
+			tagUpdated: (value) => translate("tagsInput.item.updated", { value }),
+			tagSelected: (value) => translate("tagsInput.item.selected", { value }),
+			tagEdited: (value) => translate("tagsInput.itemInput.label", { value }),
+			tagsPasted: (values) => translate("tagsInput.control.pasted", { count: values.length })
+		} };
+	},
+	slots: (props) => {
+		const size = resolveSize(props.size, "TagsInput");
+		return {
+			...tagsInputRecipe({ size }),
+			control: inputPartClass(size, tagsInputRecipe.raw({ size }).control)
+		};
+	}
+});
+//#endregion
+export { TagsInput };
+
+//# sourceMappingURL=tags-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.mjs","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"sourcesContent":["'use client'\n\nimport { close } from '@neurocle/synapse-icons'\nimport * as tagsInput from '@zag-js/tags-input'\nimport { createElement } from 'react'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { resolveMachineTranslations } from '#/components/machine-translations.ts'\nimport { tagsInputRecipe } from '#/components/tags-input/tags-input.recipe.ts'\nimport { useTranslations } from '#/provider/locale-context.ts'\nimport type { TranslationKey, TranslationOverrides } from '#/provider/translations.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { inputPartClass } from '#/shared/input-style.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface TagsInputInputValueChangeDetails {\n  readonly inputValue: string\n}\n\nexport type TagsInputInvalidReason = 'maxLength' | 'maxTags' | 'duplicate' | 'invalid'\n\nexport interface TagsInputInvalidDetails {\n  readonly reason: TagsInputInvalidReason\n}\n\nexport type TagsInputBlurBehavior = 'add' | 'clear'\n\nexport interface TagsInputRootProps {\n  /** 제어되는 태그들. */\n  value?: readonly string[]\n  /** 비제어 모드의 초기 태그들. `value`를 주면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 제어 여부와 무관하게 태그가 바뀔 때마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<readonly string[]>) => void\n  /** 제어되는 필드 안의 텍스트. 태그를 담는 `value`와는 다른 것입니다. */\n  inputValue?: string\n  /** 비제어 모드에서 필드에 처음 들어 있는 텍스트. */\n  defaultInputValue?: string\n  /** 텍스트가 바뀔 때 호출됩니다. */\n  onInputValueChange?: (details: TagsInputInputValueChangeDetails) => void\n  /** 값이 거절됐을 때 호출됩니다. 너무 길거나, 너무 많거나, 중복인 경우입니다. */\n  onValueInvalid?: (details: TagsInputInvalidDetails) => void\n  /** 값이 태그가 되기 전에 걸러냅니다. 거절하려면 false를 반환합니다. */\n  validate?: (details: {\n    readonly inputValue: string\n    readonly value: readonly string[]\n  }) => boolean\n  /** 값이 태그가 되는 길목에서 다듬습니다. 공백 제거, 대소문자 정리 등 제품에 필요한 처리를 합니다. */\n  sanitizeValue?: (value: string) => string\n  /** 허용되는 태그의 최대 개수. */\n  max?: number\n  /** 태그 하나가 가질 수 있는 최대 길이. */\n  maxLength?: number\n  /** `max`를 넘는 태그를 거절하지 않고 받아들여, 넘친 것을 잘못된 값으로 보여줄 수 있게 합니다. */\n  allowOverflow?: boolean\n  /** 같은 태그를 두 번 허용합니다. 기본적으로는 거절됩니다. */\n  allowDuplicates?: boolean\n  /** 붙여 넣은 텍스트를 이 문자열을 기준으로 태그로 나눕니다. 기본값은 쉼표입니다. */\n  delimiter?: string\n  /** 붙여 넣은 텍스트를 태그로 나눕니다. 기본값은 true입니다. */\n  addOnPaste?: boolean\n  /** 태그를 제자리에서 고칠 수 있게 합니다. 기본값은 true입니다. */\n  editable?: boolean\n  /** 다 입력하지 못한 태그가 필드의 포커스가 풀렸을 때 어떻게 되는지 정합니다. */\n  blurBehavior?: TagsInputBlurBehavior\n  /** 필드의 placeholder 텍스트. */\n  placeholder?: string\n  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 TagsInput을 id로 그 폼에 연결합니다. */\n  form?: string\n  /** 비활성화된 TagsInput은 제출하지도, 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 TagsInput은 태그를 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알립니다. */\n  invalid?: boolean\n  /** 제약 검증. 폼이 제출되려면 태그가 적어도 하나는 있어야 합니다. */\n  required?: boolean\n  /** 마운트될 때 필드 안으로 포커스를 옮깁니다. */\n  autoFocus?: boolean\n  /** 이 TagsInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst MACHINE_STRINGS: Readonly<Record<string, TranslationKey>> = {\n  clearTriggerLabel: 'tagsInput.clearTrigger.label',\n  noTagsSelected: 'tagsInput.control.noneSelected',\n}\n\nexport const TagsInput = defineComponent<TagsInputRootProps>()({\n  name: 'TagsInput',\n  module: tagsInput,\n  rootPart: 'root',\n  field: {\n    ids: (field) => ({ label: field.label, input: field.control }),\n    describe: ['input'],\n  },\n  elements: {\n    item: 'span',\n    itemPreview: 'span',\n    itemText: 'span',\n    input: 'input',\n    itemInput: 'input',\n  },\n  defaultContent: {\n    clearTrigger: () => <Icon icon={close} />,\n    itemDeleteTrigger: () => <Icon icon={close} />,\n    itemText: (_api, _t, args) => (typeof args['value'] === 'string' ? args['value'] : null),\n  },\n  getterProps: {\n    item: ['index', 'value', 'disabled'],\n    itemPreview: ['index', 'value', 'disabled'],\n    itemText: ['index', 'value', 'disabled'],\n    itemInput: ['index', 'value', 'disabled'],\n    itemDeleteTrigger: ['index', 'value', 'disabled'],\n  },\n  rootOwnedGetters: [\n    {\n      name: 'hiddenInput',\n      getter: 'getHiddenInputProps',\n      render: (props) => createElement('input', { ...props, 'data-synapse-form-field': '' }),\n    },\n  ],\n  machineTranslations: MACHINE_STRINGS,\n  variantProps: ['size'],\n  useMachineProps: (props: TagsInputRootProps) => {\n    const translate = useTranslations(props.translations)\n    return {\n      translations: {\n        ...resolveMachineTranslations(MACHINE_STRINGS, translate),\n        deleteTagTriggerLabel: (value: string) =>\n          translate('tagsInput.deleteTrigger.label', { value }),\n        tagAdded: (value: string) => translate('tagsInput.item.added', { value }),\n        tagDeleted: (value: string) => translate('tagsInput.item.deleted', { value }),\n        tagUpdated: (value: string) => translate('tagsInput.item.updated', { value }),\n        tagSelected: (value: string) => translate('tagsInput.item.selected', { value }),\n        tagEdited: (value: string) => translate('tagsInput.itemInput.label', { value }),\n        tagsPasted: (values: readonly string[]) =>\n          translate('tagsInput.control.pasted', { count: values.length }),\n      },\n    }\n  },\n  slots: (props: TagsInputRootProps) => {\n    const size = resolveSize(props.size, 'TagsInput')\n    return {\n      ...tagsInputRecipe({ size }),\n      control: inputPartClass(size, tagsInputRecipe.raw({ size }).control),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;AA0FA,MAAM,kBAA4D;CAChE,mBAAmB;CACnB,gBAAgB;AAClB;AAEA,MAAa,YAAY,gBAAoC,CAAC,CAAC;CAC7D,MAAM;CACN,QAAQ;CACR,UAAU;CACV,OAAO;EACL,MAAM,WAAW;GAAE,OAAO,MAAM;GAAO,OAAO,MAAM;EAAQ;EAC5D,UAAU,CAAC,OAAO;CACpB;CACA,UAAU;EACR,MAAM;EACN,aAAa;EACb,UAAU;EACV,OAAO;EACP,WAAW;CACb;CACA,gBAAgB;EACd,oBAAoB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;EACxC,yBAAyB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;EAC7C,WAAW,MAAM,IAAI,SAAU,OAAO,KAAK,aAAa,WAAW,KAAK,WAAW;CACrF;CACA,aAAa;EACX,MAAM;GAAC;GAAS;GAAS;EAAU;EACnC,aAAa;GAAC;GAAS;GAAS;EAAU;EAC1C,UAAU;GAAC;GAAS;GAAS;EAAU;EACvC,WAAW;GAAC;GAAS;GAAS;EAAU;EACxC,mBAAmB;GAAC;GAAS;GAAS;EAAU;CAClD;CACA,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,SAAS,UAAU,cAAc,SAAS;GAAE,GAAG;GAAO,2BAA2B;EAAG,CAAC;CACvF,CACF;CACA,qBAAqB;CACrB,cAAc,CAAC,MAAM;CACrB,kBAAkB,UAA8B;EAC9C,MAAM,YAAY,gBAAgB,MAAM,YAAY;EACpD,OAAO,EACL,cAAc;GACZ,GAAG,2BAA2B,iBAAiB,SAAS;GACxD,wBAAwB,UACtB,UAAU,iCAAiC,EAAE,MAAM,CAAC;GACtD,WAAW,UAAkB,UAAU,wBAAwB,EAAE,MAAM,CAAC;GACxE,aAAa,UAAkB,UAAU,0BAA0B,EAAE,MAAM,CAAC;GAC5E,aAAa,UAAkB,UAAU,0BAA0B,EAAE,MAAM,CAAC;GAC5E,cAAc,UAAkB,UAAU,2BAA2B,EAAE,MAAM,CAAC;GAC9E,YAAY,UAAkB,UAAU,6BAA6B,EAAE,MAAM,CAAC;GAC9E,aAAa,WACX,UAAU,4BAA4B,EAAE,OAAO,OAAO,OAAO,CAAC;EAClE,EACF;CACF;CACA,QAAQ,UAA8B;EACpC,MAAM,OAAO,YAAY,MAAM,MAAM,WAAW;EAChD,OAAO;GACL,GAAG,gBAAgB,EAAE,KAAK,CAAC;GAC3B,SAAS,eAAe,MAAM,gBAAgB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO;EACrE;CACF;AACF,CAAC"}