@neurocle/synapse-react 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,231 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/number-input/number-input.recipe.ts
+const stepper = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	alignSelf: "stretch",
+	minWidth: "target.minimum",
+	borderStyle: "solid",
+	borderWidth: "none",
+	borderInlineStartWidth: "hairline",
+	borderColor: "border.default",
+	bg: "surface.transparent",
+	color: "foreground.muted",
+	cursor: "pointer",
+	userSelect: "none",
+	transitionProperty: "common",
+	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",
+			borderColor: "system.grayText"
+		}
+	},
+	":has(> input[readonly]) > &": { cursor: "default" }
+};
+const numberInputRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"input",
+		"control",
+		"valueText",
+		"incrementTrigger",
+		"decrementTrigger",
+		"scrubber"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			flexDirection: "column",
+			gap: "gap.inline",
+			color: "foreground.default",
+			_disabled: { color: "foreground.disabled" }
+		},
+		label: { color: "foreground.muted" },
+		control: {
+			display: "grid",
+			gridTemplateColumns: "1fr auto",
+			gridTemplateRows: "minmax(0, 1fr) minmax(0, 1fr)",
+			gridTemplateAreas: "\"input increment\" \"input decrement\"",
+			paddingInline: "inset.none",
+			overflow: "hidden"
+		},
+		input: {
+			gridArea: "input",
+			alignSelf: "stretch",
+			minWidth: "target.minimum",
+			borderWidth: "none",
+			bg: "surface.transparent",
+			color: "foreground.default",
+			fontVariantNumeric: "tabular-nums",
+			_placeholder: { color: "foreground.subtle" },
+			_readOnly: { cursor: "default" },
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed"
+			},
+			_focusVisible: { outlineStyle: "none" }
+		},
+		valueText: {
+			color: "foreground.muted",
+			fontVariantNumeric: "tabular-nums"
+		},
+		incrementTrigger: {
+			...stepper,
+			gridArea: "increment"
+		},
+		decrementTrigger: {
+			...stepper,
+			gridArea: "decrement",
+			borderBlockStartWidth: "hairline"
+		},
+		scrubber: {}
+	},
+	variants: { size: {
+		xs: {
+			root: { textStyle: "detail" },
+			label: { textStyle: "detail" },
+			control: { height: "control.xs" },
+			input: {
+				paddingInline: "inset.compact",
+				textStyle: "detail"
+			},
+			valueText: { textStyle: "detail" },
+			incrementTrigger: {
+				width: "icon.md",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			},
+			decrementTrigger: {
+				width: "icon.md",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			}
+		},
+		sm: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			control: { height: "control.sm" },
+			input: {
+				paddingInline: "inset.control",
+				textStyle: "body"
+			},
+			valueText: { textStyle: "body" },
+			incrementTrigger: {
+				width: "icon.lg",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			},
+			decrementTrigger: {
+				width: "icon.lg",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			}
+		},
+		md: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			control: { height: "control.md" },
+			input: {
+				paddingInline: "inset.control",
+				textStyle: "body"
+			},
+			valueText: { textStyle: "body" },
+			incrementTrigger: {
+				width: "icon.lg",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			},
+			decrementTrigger: {
+				width: "icon.lg",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			}
+		},
+		lg: {
+			root: { textStyle: "body" },
+			label: { textStyle: "detail" },
+			control: { height: "control.lg" },
+			input: {
+				paddingInline: "inset.control",
+				textStyle: "body"
+			},
+			valueText: { textStyle: "body" },
+			incrementTrigger: {
+				width: "control.sm",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			},
+			decrementTrigger: {
+				width: "control.sm",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			}
+		},
+		xl: {
+			root: { textStyle: "subtitle" },
+			label: { textStyle: "body" },
+			control: { height: "control.xl" },
+			input: {
+				paddingInline: "inset.surface",
+				textStyle: "subtitle"
+			},
+			valueText: { textStyle: "subtitle" },
+			incrementTrigger: {
+				width: "control.md",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			},
+			decrementTrigger: {
+				width: "control.md",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { numberInputRecipe };
+
+//# sourceMappingURL=number-input.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.recipe.mjs","names":[],"sources":["../../../src/components/number-input/number-input.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\nimport type { SystemStyleObject } from '#styled-system/types/index.js'\n\nconst stepper: SystemStyleObject = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  alignSelf: 'stretch',\n  minWidth: 'target.minimum',\n  borderStyle: 'solid',\n  borderWidth: 'none',\n  borderInlineStartWidth: 'hairline',\n  borderColor: 'border.default',\n  bg: 'surface.transparent',\n  color: 'foreground.muted',\n  cursor: 'pointer',\n  userSelect: 'none',\n  transitionProperty: 'common',\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', borderColor: 'system.grayText' },\n  },\n  ':has(> input[readonly]) > &': { cursor: 'default' },\n}\n\nexport const numberInputRecipe = sva({\n  slots: [\n    'root',\n    'label',\n    'input',\n    'control',\n    'valueText',\n    'incrementTrigger',\n    'decrementTrigger',\n    'scrubber',\n  ],\n  base: {\n    root: {\n      display: 'inline-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: 'grid',\n      gridTemplateColumns: '1fr auto',\n      gridTemplateRows: 'minmax(0, 1fr) minmax(0, 1fr)',\n      gridTemplateAreas: '\"input increment\" \"input decrement\"',\n      paddingInline: 'inset.none',\n      overflow: 'hidden',\n    },\n    input: {\n      gridArea: 'input',\n      alignSelf: 'stretch',\n      minWidth: 'target.minimum',\n      borderWidth: 'none',\n      bg: 'surface.transparent',\n      color: 'foreground.default',\n      fontVariantNumeric: 'tabular-nums',\n      _placeholder: { color: 'foreground.subtle' },\n      _readOnly: { cursor: 'default' },\n      _disabled: { color: 'foreground.disabled', cursor: 'not-allowed' },\n      _focusVisible: { outlineStyle: 'none' },\n    },\n    valueText: {\n      color: 'foreground.muted',\n      fontVariantNumeric: 'tabular-nums',\n    },\n    incrementTrigger: {\n      ...stepper,\n      gridArea: 'increment',\n    },\n    decrementTrigger: {\n      ...stepper,\n      gridArea: 'decrement',\n      borderBlockStartWidth: 'hairline',\n    },\n    scrubber: {},\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { textStyle: 'detail' },\n        label: { textStyle: 'detail' },\n        control: { height: 'control.xs' },\n        input: { paddingInline: 'inset.compact', textStyle: 'detail' },\n        valueText: { textStyle: 'detail' },\n        incrementTrigger: { width: 'icon.md', '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        decrementTrigger: { width: 'icon.md', '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        control: { height: 'control.sm' },\n        input: { paddingInline: 'inset.control', textStyle: 'body' },\n        valueText: { textStyle: 'body' },\n        incrementTrigger: { width: 'icon.lg', '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        decrementTrigger: { width: 'icon.lg', '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      md: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        control: { height: 'control.md' },\n        input: { paddingInline: 'inset.control', textStyle: 'body' },\n        valueText: { textStyle: 'body' },\n        incrementTrigger: { width: 'icon.lg', '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        decrementTrigger: { width: 'icon.lg', '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      lg: {\n        root: { textStyle: 'body' },\n        label: { textStyle: 'detail' },\n        control: { height: 'control.lg' },\n        input: { paddingInline: 'inset.control', textStyle: 'body' },\n        valueText: { textStyle: 'body' },\n        incrementTrigger: { width: 'control.sm', '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        decrementTrigger: { width: 'control.sm', '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      xl: {\n        root: { textStyle: 'subtitle' },\n        label: { textStyle: 'body' },\n        control: { height: 'control.xl' },\n        input: { paddingInline: 'inset.surface', textStyle: 'subtitle' },\n        valueText: { textStyle: 'subtitle' },\n        incrementTrigger: { width: 'control.md', '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        decrementTrigger: { width: 'control.md', '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Pagination, PaginationPageChangeDetails, PaginationPageSizeChangeDetails, PaginationRootProps, PaginationType } from "./pagination.mjs";
+export { Pagination, type PaginationPageChangeDetails, type PaginationPageSizeChangeDetails, type PaginationRootProps, type PaginationType };

package/dist/components/pagination/index.mjs

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

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

@@ -0,0 +1,51 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/pagination/pagination.d.ts
+export interface PaginationPageChangeDetails {
+  readonly page: number;
+  readonly pageSize: number;
+}
+export interface PaginationPageSizeChangeDetails {
+  readonly pageSize: number;
+}
+export type PaginationType = 'button' | 'link';
+export interface PaginationRootProps {
+  /** 전체 항목 수. 페이지 수는 이 값과 `pageSize`에서 도출됩니다. */
+  count: number;
+  /** 제어되는 현재 페이지. 1부터 세요. */
+  page?: number;
+  /** 비제어 모드의 초기 페이지. `page`를 주면 무시됩니다. */
+  defaultPage?: number;
+  /** 제어 여부와 무관하게 페이지가 바뀔 때마다 호출됩니다. */
+  onPageChange?: (details: PaginationPageChangeDetails) => void;
+  /** 제어되는 페이지당 항목 수. */
+  pageSize?: number;
+  /** 비제어 모드의 초기 페이지당 항목 수. */
+  defaultPageSize?: number;
+  /** 페이지 크기가 바뀔 때마다 호출됩니다. */
+  onPageSizeChange?: (details: PaginationPageSizeChangeDetails) => void;
+  /** 현재 페이지 양옆에 보여줄 페이지 수. 기본값은 1입니다. */
+  siblingCount?: number;
+  /** 현재 페이지가 아무리 멀리 있어도 양 끝에 항상 보여줄 페이지 수. */
+  boundaryCount?: number;
+  /**
+   * 페이지 컨트롤이 상태를 바꾸는 버튼인지, 다른 URL로 이동하는 링크인지 정합니다. 기본값은
+   * `button`입니다. `link`라면 `getPageUrl`도 함께 줍니다.
+   */
+  type?: PaginationType;
+  /** `type`이 `link`일 때 각 페이지의 URL. */
+  getPageUrl?: (details: {
+    readonly page: number;
+    readonly pageSize: number;
+  }) => string;
+  /** 이 Pagination에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const Pagination: SynapseComponent<"ellipsis" | "firstTrigger" | "item" | "lastTrigger" | "nextTrigger" | "prevTrigger" | "root", "root", PaginationRootProps, never>;
+//#endregion
+//# sourceMappingURL=pagination.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.mts","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"mappings":";;;;iBAciB;WACN;WACA;;iBAGM;WACN;;YAGC;iBAEK;;EAEf;;EAEA;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB;;EAEA;;EAEA,oBAAoB,SAAS;;EAE7B;;EAEA;;;;;EAKA,OAAO;;EAEP,cAAc;aAAoB;aAAuB;;;EAEzD,eAAe;;EAEf,OAAO;;EAEP;;qBAWW,YAAU,wHAAA"}

package/dist/components/pagination/pagination.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { useTranslations } from "../../provider/locale-context.mjs";
+import { chevronLeft } from "../../icons/src/chevron-left.mjs";
+import { chevronRight } from "../../icons/src/chevron-right.mjs";
+import { chevronsLeft } from "../../icons/src/chevrons-left.mjs";
+import { chevronsRight } from "../../icons/src/chevrons-right.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { buttonPartClass } from "../../shared/button-style.mjs";
+import { resolveMachineTranslations } from "../machine-translations.mjs";
+import { paginationRecipe } from "./pagination.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as pagination from "@zag-js/pagination";
+//#region src/components/pagination/pagination.tsx
+const MACHINE_STRINGS = {
+	rootLabel: "pagination.root.label",
+	firstTriggerLabel: "pagination.firstTrigger.label",
+	prevTriggerLabel: "pagination.prevTrigger.label",
+	nextTriggerLabel: "pagination.nextTrigger.label",
+	lastTriggerLabel: "pagination.lastTrigger.label"
+};
+const Pagination = defineComponent()({
+	name: "Pagination",
+	module: pagination,
+	rootPart: "root",
+	rootElement: "nav",
+	elements: { ellipsis: "span" },
+	defaultContent: {
+		firstTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronsLeft }),
+		prevTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronLeft }),
+		nextTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronRight }),
+		lastTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronsRight }),
+		ellipsis: () => "…",
+		item: (_api, _t, args) => String(args["value"] ?? "")
+	},
+	getterProps: {
+		item: ["type", "value"],
+		ellipsis: ["index"]
+	},
+	machineTranslations: MACHINE_STRINGS,
+	variantProps: ["size"],
+	useMachineProps: (props) => {
+		const translate = useTranslations(props.translations);
+		return { translations: {
+			...resolveMachineTranslations(MACHINE_STRINGS, translate),
+			itemLabel: ({ page, totalPages }) => translate("pagination.item.label", {
+				page,
+				totalPages
+			})
+		} };
+	},
+	slots: (props) => {
+		const size = resolveSize(props.size, "Pagination");
+		const own = paginationRecipe.raw({ size });
+		const style = {
+			variant: "ghost",
+			tone: "neutral",
+			size
+		};
+		return {
+			...paginationRecipe({ size }),
+			firstTrigger: buttonPartClass(style, own.firstTrigger),
+			prevTrigger: buttonPartClass(style, own.prevTrigger),
+			nextTrigger: buttonPartClass(style, own.nextTrigger),
+			lastTrigger: buttonPartClass(style, own.lastTrigger)
+		};
+	}
+});
+//#endregion
+export { Pagination };
+
+//# sourceMappingURL=pagination.mjs.map

package/dist/components/pagination/pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.mjs","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["'use client'\n\nimport { chevronLeft, chevronRight, chevronsLeft, chevronsRight } from '@neurocle/synapse-icons'\nimport * as pagination from '@zag-js/pagination'\n\nimport { resolveMachineTranslations } from '#/components/machine-translations.ts'\nimport { paginationRecipe } from '#/components/pagination/pagination.recipe.ts'\nimport { useTranslations } from '#/provider/locale-context.ts'\nimport type { TranslationKey, TranslationOverrides } from '#/provider/translations.ts'\nimport { buttonPartClass, type ButtonStyle } from '#/shared/button-style.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface PaginationPageChangeDetails {\n  readonly page: number\n  readonly pageSize: number\n}\n\nexport interface PaginationPageSizeChangeDetails {\n  readonly pageSize: number\n}\n\nexport type PaginationType = 'button' | 'link'\n\nexport interface PaginationRootProps {\n  /** 전체 항목 수. 페이지 수는 이 값과 `pageSize`에서 도출됩니다. */\n  count: number\n  /** 제어되는 현재 페이지. 1부터 세요. */\n  page?: number\n  /** 비제어 모드의 초기 페이지. `page`를 주면 무시됩니다. */\n  defaultPage?: number\n  /** 제어 여부와 무관하게 페이지가 바뀔 때마다 호출됩니다. */\n  onPageChange?: (details: PaginationPageChangeDetails) => void\n  /** 제어되는 페이지당 항목 수. */\n  pageSize?: number\n  /** 비제어 모드의 초기 페이지당 항목 수. */\n  defaultPageSize?: number\n  /** 페이지 크기가 바뀔 때마다 호출됩니다. */\n  onPageSizeChange?: (details: PaginationPageSizeChangeDetails) => void\n  /** 현재 페이지 양옆에 보여줄 페이지 수. 기본값은 1입니다. */\n  siblingCount?: number\n  /** 현재 페이지가 아무리 멀리 있어도 양 끝에 항상 보여줄 페이지 수. */\n  boundaryCount?: number\n  /**\n   * 페이지 컨트롤이 상태를 바꾸는 버튼인지, 다른 URL로 이동하는 링크인지 정합니다. 기본값은\n   * `button`입니다. `link`라면 `getPageUrl`도 함께 줍니다.\n   */\n  type?: PaginationType\n  /** `type`이 `link`일 때 각 페이지의 URL. */\n  getPageUrl?: (details: { readonly page: number; readonly pageSize: number }) => string\n  /** 이 Pagination에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst MACHINE_STRINGS: Readonly<Record<string, TranslationKey>> = {\n  rootLabel: 'pagination.root.label',\n  firstTriggerLabel: 'pagination.firstTrigger.label',\n  prevTriggerLabel: 'pagination.prevTrigger.label',\n  nextTriggerLabel: 'pagination.nextTrigger.label',\n  lastTriggerLabel: 'pagination.lastTrigger.label',\n}\n\nexport const Pagination = defineComponent<PaginationRootProps>()({\n  name: 'Pagination',\n  module: pagination,\n  rootPart: 'root',\n  rootElement: 'nav',\n  elements: { ellipsis: 'span' },\n  defaultContent: {\n    firstTrigger: () => <Icon icon={chevronsLeft} />,\n    prevTrigger: () => <Icon icon={chevronLeft} />,\n    nextTrigger: () => <Icon icon={chevronRight} />,\n    lastTrigger: () => <Icon icon={chevronsRight} />,\n    ellipsis: () => '…',\n    item: (_api, _t, args) => String(args['value'] ?? ''),\n  },\n  getterProps: {\n    item: ['type', 'value'],\n    ellipsis: ['index'],\n  },\n  machineTranslations: MACHINE_STRINGS,\n  variantProps: ['size'],\n  useMachineProps: (props: PaginationRootProps) => {\n    const translate = useTranslations(props.translations)\n    return {\n      translations: {\n        ...resolveMachineTranslations(MACHINE_STRINGS, translate),\n        itemLabel: ({ page, totalPages }: { page: number; totalPages: number }) =>\n          translate('pagination.item.label', { page, totalPages }),\n      },\n    }\n  },\n  slots: (props: PaginationRootProps) => {\n    const size = resolveSize(props.size, 'Pagination')\n    const own = paginationRecipe.raw({ size })\n    const style: ButtonStyle = { variant: 'ghost', tone: 'neutral', size }\n    return {\n      ...paginationRecipe({ size }),\n      firstTrigger: buttonPartClass(style, own.firstTrigger),\n      prevTrigger: buttonPartClass(style, own.prevTrigger),\n      nextTrigger: buttonPartClass(style, own.nextTrigger),\n      lastTrigger: buttonPartClass(style, own.lastTrigger),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;;;AA2DA,MAAM,kBAA4D;CAChE,WAAW;CACX,mBAAmB;CACnB,kBAAkB;CAClB,kBAAkB;CAClB,kBAAkB;AACpB;AAEA,MAAa,aAAa,gBAAqC,CAAC,CAAC;CAC/D,MAAM;CACN,QAAQ;CACR,UAAU;CACV,aAAa;CACb,UAAU,EAAE,UAAU,OAAO;CAC7B,gBAAgB;EACd,oBAAoB,oBAAC,MAAD,EAAM,MAAM,aAAe,CAAA;EAC/C,mBAAmB,oBAAC,MAAD,EAAM,MAAM,YAAc,CAAA;EAC7C,mBAAmB,oBAAC,MAAD,EAAM,MAAM,aAAe,CAAA;EAC9C,mBAAmB,oBAAC,MAAD,EAAM,MAAM,cAAgB,CAAA;EAC/C,gBAAgB;EAChB,OAAO,MAAM,IAAI,SAAS,OAAO,KAAK,YAAY,EAAE;CACtD;CACA,aAAa;EACX,MAAM,CAAC,QAAQ,OAAO;EACtB,UAAU,CAAC,OAAO;CACpB;CACA,qBAAqB;CACrB,cAAc,CAAC,MAAM;CACrB,kBAAkB,UAA+B;EAC/C,MAAM,YAAY,gBAAgB,MAAM,YAAY;EACpD,OAAO,EACL,cAAc;GACZ,GAAG,2BAA2B,iBAAiB,SAAS;GACxD,YAAY,EAAE,MAAM,iBAClB,UAAU,yBAAyB;IAAE;IAAM;GAAW,CAAC;EAC3D,EACF;CACF;CACA,QAAQ,UAA+B;EACrC,MAAM,OAAO,YAAY,MAAM,MAAM,YAAY;EACjD,MAAM,MAAM,iBAAiB,IAAI,EAAE,KAAK,CAAC;EACzC,MAAM,QAAqB;GAAE,SAAS;GAAS,MAAM;GAAW;EAAK;EACrE,OAAO;GACL,GAAG,iBAAiB,EAAE,KAAK,CAAC;GAC5B,cAAc,gBAAgB,OAAO,IAAI,YAAY;GACrD,aAAa,gBAAgB,OAAO,IAAI,WAAW;GACnD,aAAa,gBAAgB,OAAO,IAAI,WAAW;GACnD,aAAa,gBAAgB,OAAO,IAAI,WAAW;EACrD;CACF;AACF,CAAC"}

package/dist/components/pagination/pagination.recipe.mjs

@@ -0,0 +1,144 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/pagination/pagination.recipe.ts
+const paginationRecipe = sva({
+	slots: [
+		"root",
+		"item",
+		"ellipsis",
+		"firstTrigger",
+		"prevTrigger",
+		"nextTrigger",
+		"lastTrigger"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			gap: "inset.compact"
+		},
+		item: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			paddingInline: "inset.compact",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "surface.transparent",
+			bg: "surface.transparent",
+			color: "foreground.muted",
+			textDecoration: "none",
+			fontVariantNumeric: "tabular-nums",
+			cursor: "pointer",
+			transitionProperty: "common",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled], [data-readonly], [data-selected]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled], [data-readonly], [data-selected]):active": {
+				bg: "secondary.active",
+				color: "foreground.default",
+				transform: "scale(0.96)"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_selected: {
+				bg: "primary.subtle",
+				color: "primary.onSurface",
+				borderColor: "primary.default",
+				cursor: "default",
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText",
+					borderColor: "system.highlight"
+				}
+			}
+		},
+		ellipsis: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			minWidth: "target.minimum",
+			color: "foreground.subtle",
+			fontVariantNumeric: "tabular-nums",
+			pointerEvents: "none"
+		},
+		firstTrigger: {},
+		prevTrigger: {},
+		nextTrigger: {},
+		lastTrigger: {}
+	},
+	variants: { size: {
+		xs: {
+			item: {
+				minWidth: "control.xs",
+				minHeight: "control.xs",
+				textStyle: "caption"
+			},
+			ellipsis: {
+				minHeight: "control.xs",
+				textStyle: "caption"
+			}
+		},
+		sm: {
+			item: {
+				minWidth: "control.sm",
+				minHeight: "control.sm",
+				textStyle: "detail"
+			},
+			ellipsis: {
+				minHeight: "control.sm",
+				textStyle: "detail"
+			}
+		},
+		md: {
+			item: {
+				minWidth: "control.md",
+				minHeight: "control.md",
+				textStyle: "label"
+			},
+			ellipsis: {
+				minHeight: "control.md",
+				textStyle: "label"
+			}
+		},
+		lg: {
+			item: {
+				minWidth: "control.lg",
+				minHeight: "control.lg",
+				textStyle: "label"
+			},
+			ellipsis: {
+				minHeight: "control.lg",
+				textStyle: "label"
+			}
+		},
+		xl: {
+			item: {
+				minWidth: "control.xl",
+				minHeight: "control.xl",
+				textStyle: "subtitle"
+			},
+			ellipsis: {
+				minHeight: "control.xl",
+				textStyle: "subtitle"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { paginationRecipe };
+
+//# sourceMappingURL=pagination.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.recipe.mjs","names":[],"sources":["../../../src/components/pagination/pagination.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const paginationRecipe = sva({\n  slots: ['root', 'item', 'ellipsis', 'firstTrigger', 'prevTrigger', 'nextTrigger', 'lastTrigger'],\n  base: {\n    root: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      alignItems: 'center',\n      gap: 'inset.compact',\n    },\n    item: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.compact',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'surface.transparent',\n      bg: 'surface.transparent',\n      color: 'foreground.muted',\n      textDecoration: 'none',\n      fontVariantNumeric: 'tabular-nums',\n      cursor: 'pointer',\n      transitionProperty: 'common',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled], [data-readonly], [data-selected]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled], [data-readonly], [data-selected]):active': {\n        bg: 'secondary.active',\n        color: 'foreground.default',\n        transform: 'scale(0.96)',\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _selected: {\n        bg: 'primary.subtle',\n        color: 'primary.onSurface',\n        borderColor: 'primary.default',\n        cursor: 'default',\n        _highContrast: {\n          bg: 'system.highlight',\n          color: 'system.highlightText',\n          borderColor: 'system.highlight',\n        },\n      },\n    },\n    ellipsis: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      minWidth: 'target.minimum',\n      color: 'foreground.subtle',\n      fontVariantNumeric: 'tabular-nums',\n      pointerEvents: 'none',\n    },\n    firstTrigger: {},\n    prevTrigger: {},\n    nextTrigger: {},\n    lastTrigger: {},\n  },\n  variants: {\n    size: {\n      xs: {\n        item: { minWidth: 'control.xs', minHeight: 'control.xs', textStyle: 'caption' },\n        ellipsis: { minHeight: 'control.xs', textStyle: 'caption' },\n      },\n      sm: {\n        item: { minWidth: 'control.sm', minHeight: 'control.sm', textStyle: 'detail' },\n        ellipsis: { minHeight: 'control.sm', textStyle: 'detail' },\n      },\n      md: {\n        item: { minWidth: 'control.md', minHeight: 'control.md', textStyle: 'label' },\n        ellipsis: { minHeight: 'control.md', textStyle: 'label' },\n      },\n      lg: {\n        item: { minWidth: 'control.lg', minHeight: 'control.lg', textStyle: 'label' },\n        ellipsis: { minHeight: 'control.lg', textStyle: 'label' },\n      },\n      xl: {\n        item: { minWidth: 'control.xl', minHeight: 'control.xl', textStyle: 'subtitle' },\n        ellipsis: { minHeight: 'control.xl', textStyle: 'subtitle' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,mBAAmB,IAAI;CAClC,OAAO;EAAC;EAAQ;EAAQ;EAAY;EAAgB;EAAe;EAAe;CAAa;CAC/F,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,UAAU;GACV,YAAY;GACZ,KAAK;EACP;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,UAAU;GACV,WAAW;GACX,eAAe;GACf,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,OAAO;GACP,gBAAgB;GAChB,oBAAoB;GACpB,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,6EAA6E;IAC3E,IAAI;IACJ,OAAO;GACT;GACA,8EAA8E;IAC5E,IAAI;IACJ,OAAO;IACP,WAAW;GACb;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW;IACT,IAAI;IACJ,OAAO;IACP,aAAa;IACb,QAAQ;IACR,eAAe;KACb,IAAI;KACJ,OAAO;KACP,aAAa;IACf;GACF;EACF;EACA,UAAU;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,OAAO;GACP,oBAAoB;GACpB,eAAe;EACjB;EACA,cAAc,CAAC;EACf,aAAa,CAAC;EACd,aAAa,CAAC;EACd,aAAa,CAAC;CAChB;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM;IAAE,UAAU;IAAc,WAAW;IAAc,WAAW;GAAU;GAC9E,UAAU;IAAE,WAAW;IAAc,WAAW;GAAU;EAC5D;EACA,IAAI;GACF,MAAM;IAAE,UAAU;IAAc,WAAW;IAAc,WAAW;GAAS;GAC7E,UAAU;IAAE,WAAW;IAAc,WAAW;GAAS;EAC3D;EACA,IAAI;GACF,MAAM;IAAE,UAAU;IAAc,WAAW;IAAc,WAAW;GAAQ;GAC5E,UAAU;IAAE,WAAW;IAAc,WAAW;GAAQ;EAC1D;EACA,IAAI;GACF,MAAM;IAAE,UAAU;IAAc,WAAW;IAAc,WAAW;GAAQ;GAC5E,UAAU;IAAE,WAAW;IAAc,WAAW;GAAQ;EAC1D;EACA,IAAI;GACF,MAAM;IAAE,UAAU;IAAc,WAAW;IAAc,WAAW;GAAW;GAC/E,UAAU;IAAE,WAAW;IAAc,WAAW;GAAW;EAC7D;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { PasswordAutoComplete, PasswordInput, PasswordInputRootProps } from "./password-input.mjs";
+export { type PasswordAutoComplete, PasswordInput, type PasswordInputRootProps };

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

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

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

@@ -0,0 +1,37 @@
+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/password-input/password-input.d.ts
+export type PasswordAutoComplete = 'current-password' | 'new-password' | 'off';
+export interface PasswordInputRootProps {
+  /** 제어되는 노출 상태. 글자가 보이는지 여부입니다. */
+  open?: boolean;
+  /** 비제어 모드의 초기 노출 상태. `open`을 주면 무시됩니다. */
+  defaultOpen?: boolean;
+  /** 제어 여부와 무관하게 비밀번호가 드러나거나 가려질 때마다 호출됩니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /** 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 비밀번호 관리자가 제안해야 할 것. 기본값은 `current-password`입니다. */
+  autoComplete?: PasswordAutoComplete;
+  /** 알려진 비밀번호 관리자들에게 이 필드를 건드리지 말라고 요청합니다. */
+  ignorePasswordManagers?: boolean;
+  /** 비활성화된 PasswordInput은 제출하지도, 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 PasswordInput은 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알립니다. */
+  invalid?: boolean;
+  /** 제약 검증. 폼이 제출되려면 필드에 값이 있어야 합니다. */
+  required?: boolean;
+  /** 이 PasswordInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare const PasswordInput: SynapseComponent<"control" | "indicator" | "input" | "label" | "root" | "visibilityTrigger", "root", PasswordInputRootProps, never>;
+//#endregion
+//# sourceMappingURL=password-input.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.d.mts","names":[],"sources":["../../../src/components/password-input/password-input.tsx"],"mappings":";;;;;YAcY;iBAEK;;EAEf;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB;;EAEA,eAAe;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAcW,eAAa,qGAAA"}

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

@@ -0,0 +1,58 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { hide } from "../../icons/src/hide.mjs";
+import { show } from "../../icons/src/show.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 { passwordInputRecipe } from "./password-input.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as passwordInput from "@zag-js/password-input";
+//#region src/components/password-input/password-input.tsx
+const toMachineProps = (props) => ({
+	...props.open === void 0 ? {} : { visible: props.open },
+	...props.defaultOpen === void 0 ? {} : { defaultVisible: props.defaultOpen },
+	...props.onOpenChange === void 0 ? {} : { onVisibilityChange: (details) => props.onOpenChange?.({ open: details.visible }) }
+});
+const PasswordInput = defineComponent()({
+	name: "PasswordInput",
+	module: passwordInput,
+	rootPart: "root",
+	field: {
+		ids: (field) => ({ input: field.control }),
+		describe: ["input"]
+	},
+	elements: {
+		input: "input",
+		indicator: "span"
+	},
+	defaultContent: { indicator: (api) => /* @__PURE__ */ jsx(Icon, { icon: api.visible ? hide : show }) },
+	machineTranslations: { visibilityTrigger: (t) => (visible) => visible ? t("passwordInput.visibilityTrigger.hide") : t("passwordInput.visibilityTrigger.show") },
+	amendBehaviorProps: { visibilityTrigger: (behaviorProps, api) => behaviorProps["disabled"] === true ? {} : {
+		tabIndex: 0,
+		onKeyDown: (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			api.toggleVisible();
+		}
+	} },
+	variantProps: [
+		"open",
+		"defaultOpen",
+		"onOpenChange",
+		"size"
+	],
+	useMachineProps: toMachineProps,
+	slots: (props) => {
+		const size = resolveSize(props.size, "PasswordInput");
+		return {
+			...passwordInputRecipe({ size }),
+			control: inputPartClass(size, passwordInputRecipe.raw({ size }).control)
+		};
+	}
+});
+//#endregion
+export { PasswordInput };
+
+//# sourceMappingURL=password-input.mjs.map