@neurocle/synapse-react 0.0.0-stage → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.mjs","names":[],"sources":["../../../src/components/password-input/password-input.tsx"],"sourcesContent":["'use client'\n\nimport { hide, show } from '@neurocle/synapse-icons'\nimport * as passwordInput from '@zag-js/password-input'\nimport type { KeyboardEvent } from 'react'\n\nimport type { OpenChangeDetails } from '#/components/details.ts'\nimport { passwordInputRecipe } from '#/components/password-input/password-input.recipe.ts'\nimport type { TranslationOverrides, Translator } 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 type PasswordAutoComplete = 'current-password' | 'new-password' | 'off'\n\nexport interface PasswordInputRootProps {\n  /** 제어되는 노출 상태. 글자가 보이는지 여부입니다. */\n  open?: boolean\n  /** 비제어 모드의 초기 노출 상태. `open`을 주면 무시됩니다. */\n  defaultOpen?: boolean\n  /** 제어 여부와 무관하게 비밀번호가 드러나거나 가려질 때마다 호출됩니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 비밀번호 관리자가 제안해야 할 것. 기본값은 `current-password`입니다. */\n  autoComplete?: PasswordAutoComplete\n  /** 알려진 비밀번호 관리자들에게 이 필드를 건드리지 말라고 요청합니다. */\n  ignorePasswordManagers?: boolean\n  /** 비활성화된 PasswordInput은 제출하지도, 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 PasswordInput은 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알립니다. */\n  invalid?: boolean\n  /** 제약 검증. 폼이 제출되려면 필드에 값이 있어야 합니다. */\n  required?: boolean\n  /** 이 PasswordInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst toMachineProps = (props: PasswordInputRootProps): Record<string, unknown> => ({\n  ...(props.open === undefined ? {} : { visible: props.open }),\n  ...(props.defaultOpen === undefined ? {} : { defaultVisible: props.defaultOpen }),\n  ...(props.onOpenChange === undefined\n    ? {}\n    : {\n        onVisibilityChange: (details: { visible: boolean }) =>\n          props.onOpenChange?.({ open: details.visible }),\n      }),\n})\n\nexport const PasswordInput = defineComponent<PasswordInputRootProps>()({\n  name: 'PasswordInput',\n  module: passwordInput,\n  rootPart: 'root',\n  field: { ids: (field) => ({ input: field.control }), describe: ['input'] },\n  elements: { input: 'input', indicator: 'span' },\n  defaultContent: {\n    indicator: (api) => <Icon icon={api.visible ? hide : show} />,\n  },\n  machineTranslations: {\n    visibilityTrigger:\n      (t: Translator) =>\n      (visible: boolean): string =>\n        visible\n          ? t('passwordInput.visibilityTrigger.hide')\n          : t('passwordInput.visibilityTrigger.show'),\n  },\n  amendBehaviorProps: {\n    visibilityTrigger: (behaviorProps, api) =>\n      behaviorProps['disabled'] === true\n        ? {}\n        : {\n            tabIndex: 0,\n            onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n              if (event.key !== 'Enter' && event.key !== ' ') return\n              event.preventDefault()\n              api.toggleVisible()\n            },\n          },\n  },\n  variantProps: ['open', 'defaultOpen', 'onOpenChange', 'size'],\n  useMachineProps: toMachineProps,\n  slots: (props: PasswordInputRootProps) => {\n    const size = resolveSize(props.size, 'PasswordInput')\n    return {\n      ...passwordInputRecipe({ size }),\n      control: inputPartClass(size, passwordInputRecipe.raw({ size }).control),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;AA6CA,MAAM,kBAAkB,WAA4D;CAClF,GAAI,MAAM,SAAS,KAAA,IAAY,CAAC,IAAI,EAAE,SAAS,MAAM,KAAK;CAC1D,GAAI,MAAM,gBAAgB,KAAA,IAAY,CAAC,IAAI,EAAE,gBAAgB,MAAM,YAAY;CAC/E,GAAI,MAAM,iBAAiB,KAAA,IACvB,CAAC,IACD,EACE,qBAAqB,YACnB,MAAM,eAAe,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAClD;AACN;AAEA,MAAa,gBAAgB,gBAAwC,CAAC,CAAC;CACrE,MAAM;CACN,QAAQ;CACR,UAAU;CACV,OAAO;EAAE,MAAM,WAAW,EAAE,OAAO,MAAM,QAAQ;EAAI,UAAU,CAAC,OAAO;CAAE;CACzE,UAAU;EAAE,OAAO;EAAS,WAAW;CAAO;CAC9C,gBAAgB,EACd,YAAY,QAAQ,oBAAC,MAAD,EAAM,MAAM,IAAI,UAAU,OAAO,KAAO,CAAA,EAC9D;CACA,qBAAqB,EACnB,oBACG,OACA,YACC,UACI,EAAE,sCAAsC,IACxC,EAAE,sCAAsC,EAClD;CACA,oBAAoB,EAClB,oBAAoB,eAAe,QACjC,cAAc,gBAAgB,OAC1B,CAAC,IACD;EACE,UAAU;EACV,YAAY,UAAsC;GAChD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAChD,MAAM,eAAe;GACrB,IAAI,cAAc;EACpB;CACF,EACR;CACA,cAAc;EAAC;EAAQ;EAAe;EAAgB;CAAM;CAC5D,iBAAiB;CACjB,QAAQ,UAAkC;EACxC,MAAM,OAAO,YAAY,MAAM,MAAM,eAAe;EACpD,OAAO;GACL,GAAG,oBAAoB,EAAE,KAAK,CAAC;GAC/B,SAAS,eAAe,MAAM,oBAAoB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO;EACzE;CACF;AACF,CAAC"}

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

@@ -0,0 +1,180 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/password-input/password-input.recipe.ts
+const passwordInputRecipe = sva({
+	slots: [
+		"root",
+		"input",
+		"label",
+		"control",
+		"indicator",
+		"visibilityTrigger"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline",
+			color: "foreground.default",
+			_disabled: { color: "foreground.disabled" }
+		},
+		label: { color: "foreground.muted" },
+		control: {
+			display: "flex",
+			alignItems: "center",
+			paddingInline: "inset.none",
+			overflow: "hidden"
+		},
+		input: {
+			flex: "1",
+			alignSelf: "stretch",
+			minWidth: "target.minimum",
+			borderWidth: "none",
+			bg: "surface.transparent",
+			color: "foreground.default",
+			_placeholder: { color: "foreground.subtle" },
+			_readOnly: { cursor: "default" },
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed"
+			},
+			_focusVisible: { outlineStyle: "none" }
+		},
+		visibilityTrigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "inset",
+			bg: "surface.transparent",
+			color: "foreground.muted",
+			cursor: "pointer",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled]):active": {
+				bg: "secondary.active",
+				color: "foreground.default"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "-inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		indicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			pointerEvents: "none"
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: { textStyle: "detail" },
+			label: { textStyle: "detail" },
+			control: {
+				height: "control.xs",
+				paddingInlineEnd: "inset.none"
+			},
+			input: {
+				paddingInline: "inset.compact",
+				textStyle: "detail"
+			},
+			visibilityTrigger: {
+				width: "icon.lg",
+				height: "icon.lg"
+			},
+			indicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			control: { paddingInlineEnd: "inset.compact" },
+			input: {
+				paddingInline: "inset.control",
+				textStyle: "body"
+			},
+			visibilityTrigger: {
+				width: "icon.lg",
+				height: "icon.lg"
+			},
+			indicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		md: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			control: { paddingInlineEnd: "inset.compact" },
+			input: {
+				paddingInline: "inset.control",
+				textStyle: "body"
+			},
+			visibilityTrigger: {
+				width: "control.sm",
+				height: "control.sm"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			control: { paddingInlineEnd: "inset.compact" },
+			input: {
+				paddingInline: "inset.control",
+				textStyle: "body"
+			},
+			visibilityTrigger: {
+				width: "control.md",
+				height: "control.md"
+			},
+			indicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			root: { textStyle: "subtitle" },
+			label: { textStyle: "body" },
+			control: { paddingInlineEnd: "inset.control" },
+			input: {
+				paddingInline: "inset.surface",
+				textStyle: "subtitle"
+			},
+			visibilityTrigger: {
+				width: "control.lg",
+				height: "control.lg"
+			},
+			indicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { passwordInputRecipe };
+
+//# sourceMappingURL=password-input.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.recipe.mjs","names":[],"sources":["../../../src/components/password-input/password-input.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const passwordInputRecipe = sva({\n  slots: ['root', 'input', 'label', 'control', 'indicator', 'visibilityTrigger'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n      color: 'foreground.default',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    label: {\n      color: 'foreground.muted',\n    },\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      paddingInline: 'inset.none',\n      overflow: 'hidden',\n    },\n    input: {\n      flex: '1',\n      alignSelf: 'stretch',\n      minWidth: 'target.minimum',\n      borderWidth: 'none',\n      bg: 'surface.transparent',\n      color: 'foreground.default',\n      _placeholder: { color: 'foreground.subtle' },\n      _readOnly: { cursor: 'default' },\n      _disabled: { color: 'foreground.disabled', cursor: 'not-allowed' },\n      _focusVisible: { outlineStyle: 'none' },\n    },\n    visibilityTrigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      rounded: 'inset',\n      bg: 'surface.transparent',\n      color: 'foreground.muted',\n      cursor: 'pointer',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled]):active': {\n        bg: 'secondary.active',\n        color: 'foreground.default',\n      },\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    indicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      pointerEvents: 'none',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { textStyle: 'detail' },\n        label: { textStyle: 'detail' },\n        control: {\n          // 대상 크기의 입력이나 버튼이 테두리 상자 안에 들어가면 다른 xs 컨트롤보다 테두리 두 개만큼\n          // 높아집니다. 상자가 행 높이를 잡고, 그 안에서 가운데 정렬됩니다.\n          height: 'control.xs',\n          paddingInlineEnd: 'inset.none',\n        },\n        input: { paddingInline: 'inset.compact', textStyle: 'detail' },\n        visibilityTrigger: { width: 'icon.lg', height: 'icon.lg' },\n        indicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        control: { paddingInlineEnd: 'inset.compact' },\n        input: { paddingInline: 'inset.control', textStyle: 'body' },\n        visibilityTrigger: { width: 'icon.lg', height: 'icon.lg' },\n        indicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      md: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        control: { paddingInlineEnd: 'inset.compact' },\n        input: { paddingInline: 'inset.control', textStyle: 'body' },\n        visibilityTrigger: { width: 'control.sm', height: 'control.sm' },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        control: { paddingInlineEnd: 'inset.compact' },\n        input: { paddingInline: 'inset.control', textStyle: 'body' },\n        visibilityTrigger: { width: 'control.md', height: 'control.md' },\n        indicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        root: { textStyle: 'subtitle' },\n        label: { textStyle: 'body' },\n        control: { paddingInlineEnd: 'inset.control' },\n        input: { paddingInline: 'inset.surface', textStyle: 'subtitle' },\n        visibilityTrigger: { width: 'control.lg', height: 'control.lg' },\n        indicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { PinInput, PinInputCompleteDetails, PinInputRootProps, PinInputType } from "./pin-input.mjs";
+export { PinInput, type PinInputCompleteDetails, type PinInputRootProps, type PinInputType };

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

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

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

@@ -0,0 +1,68 @@
+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/pin-input/pin-input.d.ts
+export type PinInputType = 'alphanumeric' | 'numeric' | 'alphabetic';
+export interface PinInputCompleteDetails {
+  readonly value: readonly string[];
+  readonly valueAsString: string;
+}
+export interface PinInputRootProps {
+  /** 코드 하나를 이루는 글자 수. 기본값은 4입니다. */
+  count?: number;
+  /** 제어되는 값이며, 칸마다 항목이 하나씩입니다. */
+  value?: readonly string[];
+  /** 비제어 모드의 초기 값. `value`를 주면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 값을 바꾸는 모든 키 입력마다 호출됩니다. */
+  onValueChange?: (details: ValueChangeDetails<readonly string[]>) => void;
+  /** 모든 칸이 채워졌을 때 호출됩니다. 실제로 손을 쓸 콜백은 이쪽입니다. */
+  onValueComplete?: (details: PinInputCompleteDetails) => void;
+  /** `type`이나 `pattern`이 거부하는 글자가 입력됐을 때 호출됩니다. */
+  onValueInvalid?: (details: {
+    readonly value: string;
+    readonly index: number;
+  }) => void;
+  /** 각 칸이 받아들이는 것. 기본값은 `alphanumeric`입니다. */
+  type?: PinInputType;
+  /** `type`이 허용하는 것 너머로, 글자마다 맞아야 하는 정규식. */
+  pattern?: string;
+  /** 붙여 넣은 값을 받아들이기 전에 고쳐 씁니다. 복사한 코드에서 공백을 걷어내는 식입니다. */
+  sanitizeValue?: (value: string) => string;
+  /** 글자를 점으로 렌더링합니다. 코드가 비밀일 때 씁니다. */
+  mask?: boolean;
+  /** 칸들을 일회용 코드로 표시해, 플랫폼이 메시지에서 그것을 제안할 수 있게 합니다. */
+  otp?: boolean;
+  /** 비어 있는 모든 칸에 보입니다. */
+  placeholder?: string;
+  /** 마운트될 때 첫 칸으로 포커스를 옮깁니다. */
+  autoFocus?: boolean;
+  /** 코드가 완성되면 포커스를 거둡니다. */
+  blurOnComplete?: boolean;
+  /** 코드가 완성되면 그것을 감싼 폼을 제출합니다. */
+  autoSubmit?: boolean;
+  /** 칸이 포커스를 받을 때 그 안의 글자를 선택해, 입력하면 바로 대체되게 합니다. */
+  selectOnFocus?: boolean;
+  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 PinInput을 id로 그 폼에 연결합니다. */
+  form?: string;
+  /** 비활성화된 PinInput은 제출하지도, 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 PinInput은 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 모든 칸에 `aria-invalid`로 보조 기술에 알립니다. */
+  invalid?: boolean;
+  /** 제약 검증. 폼이 제출되려면 코드가 있어야 합니다. */
+  required?: boolean;
+  /** 이 PinInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const PinInput: SynapseComponent<"control" | "input" | "label" | "root", "root", PinInputRootProps, never>;
+//#endregion
+//# sourceMappingURL=pin-input.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.d.mts","names":[],"sources":["../../../src/components/pin-input/pin-input.tsx"],"mappings":";;;;;YAYY;iBAEK;WACN;WACA;;iBAGM;;EAEf;;EAEA;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,mBAAmB,SAAS;;EAE5B,kBAAkB;aAAoB;aAAwB;;;EAE9D,OAAO;;EAEP;;EAEA,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAGW,UAAQ,iEAAA"}

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

@@ -0,0 +1,51 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { pinInputRecipe } from "./pin-input.recipe.mjs";
+import { createElement } from "react";
+import * as pinInput from "@zag-js/pin-input";
+//#region src/components/pin-input/pin-input.tsx
+const PinInput = defineComponent()({
+	name: "PinInput",
+	module: pinInput,
+	rootPart: "root",
+	elements: { input: "input" },
+	getterProps: { input: ["index"] },
+	rootOwnedGetters: [{
+		name: "hiddenInput",
+		getter: "getHiddenInputProps",
+		render: (props) => createElement("input", {
+			...props,
+			"data-synapse-form-field": ""
+		})
+	}],
+	machineTranslations: { inputLabel: (t) => (index, length) => t("pinInput.input.label", {
+		position: index + 1,
+		count: length
+	}) },
+	field: {
+		ids: (field) => ({ label: field.label }),
+		describe: ["input"],
+		labelable: false
+	},
+	amendBehaviorProps: { control: (_behaviorProps, api) => {
+		const labelId = api.getLabelProps()["id"];
+		return {
+			role: "group",
+			"aria-labelledby": typeof labelId === "string" ? labelId : void 0
+		};
+	} },
+	variantProps: ["size"],
+	slots: (props) => {
+		const size = resolveSize(props.size, "PinInput");
+		return {
+			...pinInputRecipe({ size }),
+			input: inputPartClass(size, pinInputRecipe.raw({ size }).input)
+		};
+	}
+});
+//#endregion
+export { PinInput };
+
+//# sourceMappingURL=pin-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.mjs","names":[],"sources":["../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["'use client'\n\nimport * as pinInput from '@zag-js/pin-input'\nimport { createElement } from 'react'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { pinInputRecipe } from '#/components/pin-input/pin-input.recipe.ts'\nimport type { TranslationOverrides, Translator } from '#/provider/translations.ts'\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 type PinInputType = 'alphanumeric' | 'numeric' | 'alphabetic'\n\nexport interface PinInputCompleteDetails {\n  readonly value: readonly string[]\n  readonly valueAsString: string\n}\n\nexport interface PinInputRootProps {\n  /** 코드 하나를 이루는 글자 수. 기본값은 4입니다. */\n  count?: number\n  /** 제어되는 값이며, 칸마다 항목이 하나씩입니다. */\n  value?: readonly string[]\n  /** 비제어 모드의 초기 값. `value`를 주면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 값을 바꾸는 모든 키 입력마다 호출됩니다. */\n  onValueChange?: (details: ValueChangeDetails<readonly string[]>) => void\n  /** 모든 칸이 채워졌을 때 호출됩니다. 실제로 손을 쓸 콜백은 이쪽입니다. */\n  onValueComplete?: (details: PinInputCompleteDetails) => void\n  /** `type`이나 `pattern`이 거부하는 글자가 입력됐을 때 호출됩니다. */\n  onValueInvalid?: (details: { readonly value: string; readonly index: number }) => void\n  /** 각 칸이 받아들이는 것. 기본값은 `alphanumeric`입니다. */\n  type?: PinInputType\n  /** `type`이 허용하는 것 너머로, 글자마다 맞아야 하는 정규식. */\n  pattern?: string\n  /** 붙여 넣은 값을 받아들이기 전에 고쳐 씁니다. 복사한 코드에서 공백을 걷어내는 식입니다. */\n  sanitizeValue?: (value: string) => string\n  /** 글자를 점으로 렌더링합니다. 코드가 비밀일 때 씁니다. */\n  mask?: boolean\n  /** 칸들을 일회용 코드로 표시해, 플랫폼이 메시지에서 그것을 제안할 수 있게 합니다. */\n  otp?: boolean\n  /** 비어 있는 모든 칸에 보입니다. */\n  placeholder?: string\n  /** 마운트될 때 첫 칸으로 포커스를 옮깁니다. */\n  autoFocus?: boolean\n  /** 코드가 완성되면 포커스를 거둡니다. */\n  blurOnComplete?: boolean\n  /** 코드가 완성되면 그것을 감싼 폼을 제출합니다. */\n  autoSubmit?: boolean\n  /** 칸이 포커스를 받을 때 그 안의 글자를 선택해, 입력하면 바로 대체되게 합니다. */\n  selectOnFocus?: boolean\n  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 폼 바깥에 렌더된 PinInput을 id로 그 폼에 연결합니다. */\n  form?: string\n  /** 비활성화된 PinInput은 제출하지도, 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 PinInput은 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 모든 칸에 `aria-invalid`로 보조 기술에 알립니다. */\n  invalid?: boolean\n  /** 제약 검증. 폼이 제출되려면 코드가 있어야 합니다. */\n  required?: boolean\n  /** 이 PinInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const PinInput = defineComponent<PinInputRootProps>()({\n  name: 'PinInput',\n  module: pinInput,\n  rootPart: 'root',\n  elements: { input: 'input' },\n  getterProps: { input: ['index'] },\n  rootOwnedGetters: [\n    {\n      name: 'hiddenInput',\n      getter: 'getHiddenInputProps',\n      render: (props) => createElement('input', { ...props, 'data-synapse-form-field': '' }),\n    },\n  ],\n  machineTranslations: {\n    inputLabel:\n      (t: Translator) =>\n      (index: number, length: number): string =>\n        t('pinInput.input.label', { position: index + 1, count: length }),\n  },\n  field: { ids: (field) => ({ label: field.label }), describe: ['input'], labelable: false },\n  amendBehaviorProps: {\n    control: (_behaviorProps, api) => {\n      const labelId = api.getLabelProps()['id']\n      return {\n        role: 'group',\n        'aria-labelledby': typeof labelId === 'string' ? labelId : undefined,\n      }\n    },\n  },\n  variantProps: ['size'],\n  slots: (props: PinInputRootProps) => {\n    const size = resolveSize(props.size, 'PinInput')\n    return {\n      ...pinInputRecipe({ size }),\n      input: inputPartClass(size, pinInputRecipe.raw({ size }).input),\n    }\n  },\n})\n"],"mappings":";;;;;;;;AAwEA,MAAa,WAAW,gBAAmC,CAAC,CAAC;CAC3D,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EAAE,OAAO,QAAQ;CAC3B,aAAa,EAAE,OAAO,CAAC,OAAO,EAAE;CAChC,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,SAAS,UAAU,cAAc,SAAS;GAAE,GAAG;GAAO,2BAA2B;EAAG,CAAC;CACvF,CACF;CACA,qBAAqB,EACnB,aACG,OACA,OAAe,WACd,EAAE,wBAAwB;EAAE,UAAU,QAAQ;EAAG,OAAO;CAAO,CAAC,EACtE;CACA,OAAO;EAAE,MAAM,WAAW,EAAE,OAAO,MAAM,MAAM;EAAI,UAAU,CAAC,OAAO;EAAG,WAAW;CAAM;CACzF,oBAAoB,EAClB,UAAU,gBAAgB,QAAQ;EAChC,MAAM,UAAU,IAAI,cAAc,CAAC,CAAC;EACpC,OAAO;GACL,MAAM;GACN,mBAAmB,OAAO,YAAY,WAAW,UAAU,KAAA;EAC7D;CACF,EACF;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UAA6B;EACnC,MAAM,OAAO,YAAY,MAAM,MAAM,UAAU;EAC/C,OAAO;GACL,GAAG,eAAe,EAAE,KAAK,CAAC;GAC1B,OAAO,eAAe,MAAM,eAAe,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK;EAChE;CACF;AACF,CAAC"}

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

@@ -0,0 +1,81 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/pin-input/pin-input.recipe.ts
+const pinInputRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"input",
+		"control"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline",
+			color: "foreground.default",
+			_disabled: { color: "foreground.disabled" }
+		},
+		label: { color: "foreground.muted" },
+		control: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "gap.related",
+			minHeight: "target.minimum"
+		},
+		input: {
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			paddingInline: "inset.none",
+			textAlign: "center",
+			fontVariantNumeric: "tabular-nums",
+			caretColor: "primary.default"
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: { textStyle: "detail" },
+			label: { textStyle: "detail" },
+			input: {
+				width: "control.xs",
+				height: "control.xs"
+			}
+		},
+		sm: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			input: {
+				width: "control.sm",
+				height: "control.sm"
+			}
+		},
+		md: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			input: {
+				width: "control.md",
+				height: "control.md"
+			}
+		},
+		lg: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			input: {
+				width: "control.lg",
+				height: "control.lg"
+			}
+		},
+		xl: {
+			root: { textStyle: "subtitle" },
+			label: { textStyle: "body" },
+			input: {
+				width: "control.xl",
+				height: "control.xl"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { pinInputRecipe };
+
+//# sourceMappingURL=pin-input.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.recipe.mjs","names":[],"sources":["../../../src/components/pin-input/pin-input.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const pinInputRecipe = sva({\n  slots: ['root', 'label', 'input', 'control'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n      color: 'foreground.default',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    label: {\n      color: 'foreground.muted',\n    },\n    control: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: 'gap.related',\n      minHeight: 'target.minimum',\n    },\n    input: {\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      paddingInline: 'inset.none',\n      textAlign: 'center',\n      fontVariantNumeric: 'tabular-nums',\n      caretColor: 'primary.default',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { textStyle: 'detail' },\n        label: { textStyle: 'detail' },\n        input: { width: 'control.xs', height: 'control.xs' },\n      },\n      sm: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        input: { width: 'control.sm', height: 'control.sm' },\n      },\n      md: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        input: { width: 'control.md', height: 'control.md' },\n      },\n      lg: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        input: { width: 'control.lg', height: 'control.lg' },\n      },\n      xl: {\n        root: { textStyle: 'subtitle' },\n        label: { textStyle: 'body' },\n        input: { width: 'control.xl', height: 'control.xl' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,iBAAiB,IAAI;CAChC,OAAO;EAAC;EAAQ;EAAS;EAAS;CAAS;CAC3C,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;GACP,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,OAAO,EACL,OAAO,mBACT;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,KAAK;GACL,WAAW;EACb;EACA,OAAO;GACL,YAAY;GACZ,UAAU;GACV,eAAe;GACf,WAAW;GACX,oBAAoB;GACpB,YAAY;EACd;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM,EAAE,WAAW,SAAS;GAC5B,OAAO,EAAE,WAAW,SAAS;GAC7B,OAAO;IAAE,OAAO;IAAc,QAAQ;GAAa;EACrD;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,OAAO,EAAE,WAAW,SAAS;GAC7B,OAAO;IAAE,OAAO;IAAc,QAAQ;GAAa;EACrD;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,OAAO,EAAE,WAAW,SAAS;GAC7B,OAAO;IAAE,OAAO;IAAc,QAAQ;GAAa;EACrD;EACA,IAAI;GACF,MAAM,EAAE,WAAW,OAAO;GAC1B,OAAO,EAAE,WAAW,SAAS;GAC7B,OAAO;IAAE,OAAO;IAAc,QAAQ;GAAa;EACrD;EACA,IAAI;GACF,MAAM,EAAE,WAAW,WAAW;GAC9B,OAAO,EAAE,WAAW,OAAO;GAC3B,OAAO;IAAE,OAAO;IAAc,QAAQ;GAAa;EACrD;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Popover, PopoverPlacement, PopoverPositioning, PopoverRootProps } from "./popover.mjs";
+export { Popover, type PopoverPlacement, type PopoverPositioning, type PopoverRootProps };

package/dist/components/popover/index.mjs

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

package/dist/components/popover/popover.d.mts

@@ -0,0 +1,42 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { OpenChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/popover/popover.d.ts
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export interface PopoverPositioning {
+  placement?: PopoverPlacement;
+  gutter?: number;
+  flip?: boolean;
+}
+export interface PopoverRootProps {
+  /** 제어되는 열림 상태. */
+  open?: boolean;
+  /** 비제어 모드의 초기 열림 상태. `open`을 주면 무시됩니다. */
+  defaultOpen?: boolean;
+  /** 제어 여부와 무관하게 팝오버가 열리거나 닫힐 때마다 호출됩니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /** 떠 있는 레이어가 놓이는 위치. */
+  positioning?: PopoverPositioning;
+  /** 열려 있는 동안 포커스를 가두고 나머지 페이지를 불활성으로 만듭니다. 기본값은 false입니다. */
+  modal?: boolean;
+  /** 떠 있는 레이어를 포털에 렌더링합니다. 기본값은 true입니다. */
+  portalled?: boolean;
+  /** 열릴 때 내용 안으로 포커스를 옮깁니다. 기본값은 true입니다. */
+  autoFocus?: boolean;
+  /** 닫힐 때 포커스를 trigger로 되돌립니다. 기본값은 true입니다. */
+  restoreFocus?: boolean;
+  /** Escape로 닫습니다. 기본값은 true입니다. */
+  closeOnEscape?: boolean;
+  /** 바깥에서 포인터가 눌리면 닫습니다. 기본값은 true입니다. */
+  closeOnInteractOutside?: boolean;
+  /** 이 Popover에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Popover: SynapseComponent<"anchor" | "arrow" | "arrowTip" | "closeTrigger" | "content" | "description" | "indicator" | "positioner" | "title" | "trigger", null, PopoverRootProps, never>;
+//#endregion
+//# sourceMappingURL=popover.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.mts","names":[],"sources":["../../../src/components/popover/popover.tsx"],"mappings":";;;;;YAaY;iBAcK;EACf,YAAY;EACZ;EACA;;iBAGe;;EAEf;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB,cAAc;;EAEd;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAGW,SAAO,wJAAA"}

package/dist/components/popover/popover.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { resolveSize, sizeBelow } from "../../shared/size-scale.mjs";
+import { chevronDown } from "../../icons/src/chevron-down.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 { popoverRecipe } from "./popover.recipe.mjs";
+import { buttonPartClass } from "../../shared/button-style.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as popover from "@zag-js/popover";
+//#region src/components/popover/popover.tsx
+const Popover = defineComponent()({
+	name: "Popover",
+	module: popover,
+	rootPart: null,
+	unstyledWhenAsChild: ["anchor", "trigger"],
+	elements: {
+		title: "h2",
+		description: "p",
+		indicator: "span"
+	},
+	defaultContent: {
+		indicator: () => /* @__PURE__ */ jsx(Icon, { icon: chevronDown }),
+		closeTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close })
+	},
+	machineTranslations: { closeTriggerLabel: "popover.closeTrigger.label" },
+	variantProps: ["size"],
+	slots: (props) => {
+		const size = resolveSize(props.size, "Popover");
+		const own = popoverRecipe.raw({ size });
+		return {
+			...popoverRecipe({ size }),
+			trigger: buttonPartClass({
+				variant: "outline",
+				tone: "neutral",
+				size
+			}, own.trigger),
+			closeTrigger: buttonPartClass({
+				variant: "ghost",
+				tone: "neutral",
+				size: sizeBelow(size)
+			}, own.closeTrigger)
+		};
+	}
+});
+//#endregion
+export { Popover };
+
+//# sourceMappingURL=popover.mjs.map

package/dist/components/popover/popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.mjs","names":[],"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["'use client'\n\nimport { chevronDown, close } from '@neurocle/synapse-icons'\nimport * as popover from '@zag-js/popover'\n\nimport type { OpenChangeDetails } from '#/components/details.ts'\nimport { popoverRecipe } from '#/components/popover/popover.recipe.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { buttonPartClass } from '#/shared/button-style.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, sizeBelow, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n\nexport interface PopoverPositioning {\n  placement?: PopoverPlacement\n  gutter?: number\n  flip?: boolean\n}\n\nexport interface PopoverRootProps {\n  /** 제어되는 열림 상태. */\n  open?: boolean\n  /** 비제어 모드의 초기 열림 상태. `open`을 주면 무시됩니다. */\n  defaultOpen?: boolean\n  /** 제어 여부와 무관하게 팝오버가 열리거나 닫힐 때마다 호출됩니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /** 떠 있는 레이어가 놓이는 위치. */\n  positioning?: PopoverPositioning\n  /** 열려 있는 동안 포커스를 가두고 나머지 페이지를 불활성으로 만듭니다. 기본값은 false입니다. */\n  modal?: boolean\n  /** 떠 있는 레이어를 포털에 렌더링합니다. 기본값은 true입니다. */\n  portalled?: boolean\n  /** 열릴 때 내용 안으로 포커스를 옮깁니다. 기본값은 true입니다. */\n  autoFocus?: boolean\n  /** 닫힐 때 포커스를 trigger로 되돌립니다. 기본값은 true입니다. */\n  restoreFocus?: boolean\n  /** Escape로 닫습니다. 기본값은 true입니다. */\n  closeOnEscape?: boolean\n  /** 바깥에서 포인터가 눌리면 닫습니다. 기본값은 true입니다. */\n  closeOnInteractOutside?: boolean\n  /** 이 Popover에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const Popover = defineComponent<PopoverRootProps>()({\n  name: 'Popover',\n  module: popover,\n  rootPart: null,\n  // NOTE: asChild anchor·trigger는 사용처의 요소가 레이아웃과 모양을 소유합니다.\n  unstyledWhenAsChild: ['anchor', 'trigger'],\n  elements: {\n    title: 'h2',\n    description: 'p',\n    indicator: 'span',\n  },\n  defaultContent: {\n    indicator: () => <Icon icon={chevronDown} />,\n    closeTrigger: () => <Icon icon={close} />,\n  },\n  machineTranslations: { closeTriggerLabel: 'popover.closeTrigger.label' },\n  variantProps: ['size'],\n  slots: (props: PopoverRootProps) => {\n    const size = resolveSize(props.size, 'Popover')\n    const own = popoverRecipe.raw({ size })\n    return {\n      ...popoverRecipe({ size }),\n      trigger: buttonPartClass({ variant: 'outline', tone: 'neutral', size }, own.trigger),\n      closeTrigger: buttonPartClass(\n        { variant: 'ghost', tone: 'neutral', size: sizeBelow(size) },\n        own.closeTrigger,\n      ),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;AA8DA,MAAa,UAAU,gBAAkC,CAAC,CAAC;CACzD,MAAM;CACN,QAAQ;CACR,UAAU;CAEV,qBAAqB,CAAC,UAAU,SAAS;CACzC,UAAU;EACR,OAAO;EACP,aAAa;EACb,WAAW;CACb;CACA,gBAAgB;EACd,iBAAiB,oBAAC,MAAD,EAAM,MAAM,YAAc,CAAA;EAC3C,oBAAoB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;CAC1C;CACA,qBAAqB,EAAE,mBAAmB,6BAA6B;CACvE,cAAc,CAAC,MAAM;CACrB,QAAQ,UAA4B;EAClC,MAAM,OAAO,YAAY,MAAM,MAAM,SAAS;EAC9C,MAAM,MAAM,cAAc,IAAI,EAAE,KAAK,CAAC;EACtC,OAAO;GACL,GAAG,cAAc,EAAE,KAAK,CAAC;GACzB,SAAS,gBAAgB;IAAE,SAAS;IAAW,MAAM;IAAW;GAAK,GAAG,IAAI,OAAO;GACnF,cAAc,gBACZ;IAAE,SAAS;IAAS,MAAM;IAAW,MAAM,UAAU,IAAI;GAAE,GAC3D,IAAI,YACN;EACF;CACF;AACF,CAAC"}