@neurocle/synapse-react 0.0.0-bootstrap

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Neurocle, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,163 @@
+# @neurocle/synapse-react
+
+React용 Neurocle의 AI 친화적 디자인 시스템.
+
+```sh
+npm install @neurocle/synapse-react
+```
+
+한 번만 설치하면 됩니다. 별도의 토큰 패키지도, 아이콘 패키지도, registry 패키지도 없습니다. `@zag-js/*`와
+`lucide`(아이콘 도형)는 함께 설치되고, 나머지는 모두 번들에 들어 있습니다.
+
+```tsx
+import '@neurocle/synapse-react/styles.css'
+
+import { SynapseProvider } from '@neurocle/synapse-react'
+import { Checkbox } from '@neurocle/synapse-react/checkbox'
+
+export function Terms() {
+  return (
+    <SynapseProvider>
+      <Checkbox.Root name="terms" formValue="accepted">
+        <Checkbox.Control>
+          <Checkbox.Indicator />
+        </Checkbox.Control>
+        <Checkbox.Label>I accept the terms</Checkbox.Label>
+      </Checkbox.Root>
+    </SynapseProvider>
+  )
+}
+```
+
+컴포넌트 하나를 임포트해도 관련 없는 컴포넌트는 하나도 딸려 오지 않습니다. 컴포넌트마다 자체 진입점이 있습니다.
+
+## 스타일링
+
+컴포넌트에는 스타일시트가 정의해야 하는 클래스 이름이 붙어 있습니다. 스타일시트를 얻는 방법은 두 가지이고,
+그중 정확히 하나가 필요합니다. **둘 다 하지 않으면 컴포넌트는 올바른 마크업, 올바른 키보드 동작, 올바른
+접근성을 갖추되 스타일은 전혀 없이 렌더링됩니다.** 경고도 없습니다. 어느 쪽이든 클래스 이름은 붙어 있기
+때문입니다.
+
+### Panda CSS 사용하기 (권장)
+
+프로젝트가 [Panda CSS](https://panda-css.com)를 쓴다면 Panda가 Synapse를 바라보게 하면 됩니다. 그러면
+컴포넌트가 쓰는 CSS만 정확히 생성하고 그 밖에는 아무것도 생성하지 않습니다. 자신의 `panda.config.ts`에
+Synapse의 프리셋과 설치된 파일을 추가합니다.
+
+```ts
+import { defineConfig } from '@pandacss/dev'
+import { synapsePreset } from '@neurocle/synapse-react/preset'
+
+export default defineConfig({
+  presets: [synapsePreset],
+  preflight: true,
+  include: ['./src/**/*.{ts,tsx}', './node_modules/@neurocle/synapse-react/dist/**/*.mjs'],
+})
+```
+
+그런 다음 `styles.css`는 임포트하지 **않습니다**. 직접 생성한 Panda 출력이 이를 대신합니다.
+
+위의 모든 줄에는 이유가 있습니다.
+
+- **패키지를 가리키는 `include` 항목**이 이 모든 것을 동작하게 만듭니다. Panda는 설치된 컴포넌트를 읽어
+  어떤 CSS를 써야 할지 알아냅니다. 이 줄이 없어도 Panda는 성공하고 스타일시트도 쓰지만, Synapse의 어떤
+  컴포넌트에 대한 규칙도 그 안에 하나도 없습니다.
+- **`presets: [synapsePreset]`**는 디자인 토큰을 전달합니다. 이것이 없으면 Panda는 값이 색과 크기가 아니라
+  토큰 이름인 규칙을 쓰고, 브라우저는 이를 조용히 버립니다.
+- **`preflight: true`**는 Synapse 컴포넌트가 전제로 설계된 리셋입니다.
+- **`outdir`은 기본값으로 둡니다.** `styled-system`이 아닌 다른 값으로 설정한다면, Panda가 여전히
+  Synapse의 파일을 인식하도록 `importMap`을 추가합니다.
+
+  ```ts
+  outdir: 'panda',
+  importMap: { css: ['panda/css', 'styled-system/css'] },
+  ```
+
+이 방법에는 **Panda CSS 1.x**가 필요합니다. Panda 2는 생성하는 클래스의 이름을 Synapse 컴포넌트가
+렌더링하는 이름과 다르게 짓기 때문에, Panda 2 프로젝트는 컴포넌트가 전혀 요청하지 않는 스타일시트를
+생성하게 됩니다. `@pandacss/dev`는 선택적 peer 의존성으로 선언되어 있으므로, 패키지 매니저가 스타일 없는
+페이지를 남기는 대신 버전 불일치를 알려 줍니다. 무엇을 측정했는지는
+[스타일 스파이크](./spikes/styles/README.md)를 참고합니다.
+
+### 미리 빌드된 스타일시트 임포트하기
+
+Panda를 쓰지 않는다면 앱의 진입점처럼 가능한 한 이른 곳에서 스타일시트를 한 번 임포트합니다.
+
+```ts
+import '@neurocle/synapse-react/styles.css'
+```
+
+리셋, 디자인 토큰, 모든 컴포넌트의 스타일이 들어 있으며, 모든 컴포넌트를 다 쓰든 아니든 전체가 gzip
+기준 약 9 KB다. 권장 방법이 쓰는 것과 같은 Panda 설정으로 생성되고, 릴리스마다 둘을 서로 대조해 검사하므로
+이 방법을 택해도 다른 스타일을 쓰게 되는 것이 아닙니다.
+
+### 테마
+
+Synapse의 디자인 토큰은 CSS 커스텀 프로퍼티이므로, Panda 없이도 이를 덮어써서 테마를 바꿀 수 있습니다.
+
+```css
+:root {
+  --colors-background-canvas: #fbfbfd;
+  --colors-foreground-default: #111827;
+}
+```
+
+Synapse 자체 선언은 명시도가 없고 `@layer` 안에 있으므로, 스타일시트가 Synapse의 스타일시트에 비해
+어디서 로드되든 일반적인 `:root` 규칙이 이깁니다. `--colors-neutral-900` 같은 기본 색을 덮어쓰면 그 색에서
+파생된 모든 역할의 테마가 바뀌고, `--colors-foreground-default` 같은 역할을 덮어쓰면 그 역할만 바뀝니다.
+전체 목록은 `styles.css` 맨 위의 `@layer
+tokens` 블록에 있습니다.
+
+## AI 코딩 에이전트를 위한 스킬
+
+패키지는 코드 옆에 에이전트 스킬을 함께 배포합니다. Synapse를 조합하는 방법에 대한 문서 하나와,
+컴포넌트와 같은 원천에서 생성된 컴포넌트별 문서 하나씩입니다. 이를 읽는 에이전트는 학습 중에 본 무언가가
+아니라 설치한 버전을 읽게 됩니다.
+
+스킬은 [Intent](https://github.com/TanStack/intent)로 전달되며, [Agent Skills](https://agentskills.io)
+형식을 지원하는 에디터라면 어디서든 읽을 수 있습니다. 프로젝트에서 한 번만 하면 되는 두 단계가 필요합니다. 두
+단계 모두 Synapse가 아니라 Intent에 속하며, 같은 두 단계로 스킬을 배포하는 어떤 패키지든 받아들일 수 있습니다.
+
+```sh
+npx @tanstack/intent@latest install
+```
+
+위 명령은 스킬 로딩 안내를 에이전트의 설정 파일에 기록합니다. 그런 다음 프로젝트 자체의 `package.json`에
+이 패키지를 스킬 원천으로 지정합니다.
+
+```json
+{
+  "intent": {
+    "skills": ["@neurocle/synapse-react"]
+  }
+}
+```
+
+**사용하는 Intent 버전이 이 목록 없이 동작하더라도 목록을 적어 둡니다.** `intent.skills`가 없으면 Intent는
+스킬을 배포하는 설치된 패키지를 모두 노출하고, 향후 버전에서는 대신 이 목록을 요구할 것이라는 안내를
+출력합니다. 패키지 이름을 적는 것은 두 버전에 공통이므로, 지금 옵트인한 프로젝트는 그 버전이 나와도 따로
+할 일이 없습니다.
+
+`npx @tanstack/intent@latest list`는 프로젝트가 볼 수 있는 것을 보여 줍니다. 스킬을 직접 읽으려면 다음을
+실행합니다.
+
+```sh
+npx @tanstack/intent@latest load @neurocle/synapse-react#synapse
+```
+
+## 요구 사항
+
+**React 19**와 **ESM 전용 도구 체인**. 이전 React 메이저 버전은 런타임에 실패하는 대신 설치 단계에서
+거부됩니다. 지원하는 버전 범위는 `package.json`의 `peerDependencies`와 `engines`(Node.js 20.19 이상)에
+선언되어 있습니다.
+
+## 기반 기술
+
+동작과 접근성은 [Zag.js](https://zagjs.com)에서, 스타일링은 Synapse 자체 디자인 토큰을 사용하는
+[Panda CSS](https://panda-css.com)에서 옵니다. Synapse는 공개 API, 시각 언어, 토큰 계층을 소유합니다. Zag
+machine이 이미 제공하는 동작을 다시 구현하지 않으며, Zag가 제공하는 ARIA, 포커스 관리, 키보드 상호작용을
+벗겨 내지도 않습니다.
+
+## 라이선스
+
+MIT.

package/dist/_virtual/_rolldown/runtime.mjs

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/dist/components/accordion/accordion.d.mts

@@ -0,0 +1,38 @@
+import { Orientation, SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/accordion/accordion.d.ts
+export interface AccordionFocusChangeDetails {
+  readonly value: string | null;
+}
+export interface AccordionRootProps {
+  /**
+   * 열려 있는 섹션이며, 제어됩니다.
+   *
+   * `multiple`이 꺼져 있어도 배열입니다. 열린 섹션의 집합이라 원소가 하나여도 집합이고,
+   * 배열을 벗기면 `multiple`이 바뀔 때 prop 타입도 함께 바뀌어 사용처가 타입을 고정할 수
+   * 없기 때문입니다.
+   */
+  value?: readonly string[];
+  /** 비제어 초기 열림 섹션. `value`가 주어지면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 제어 여부와 무관하게 열린 집합이 바뀔 때마다 알림을 받습니다. */
+  onValueChange?: (details: ValueChangeDetails<readonly string[]>) => void;
+  /** 한 번에 둘 이상의 섹션이 열리도록 허용합니다. */
+  multiple?: boolean;
+  /** 마지막으로 열린 섹션까지 닫아 아무것도 열리지 않은 상태가 되도록 허용합니다. */
+  collapsible?: boolean;
+  /** 키보드가 trigger 사이를 오갈 때 알림을 받습니다. */
+  onFocusChange?: (details: AccordionFocusChangeDetails) => void;
+  /** 섹션이 배치되는 축. 기본값은 `vertical`입니다. */
+  orientation?: Orientation;
+  /** 비활성화된 Accordion은 어떤 trigger에도 반응하지 않습니다. */
+  disabled?: boolean;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const Accordion: SynapseComponent<"item" | "itemContent" | "itemIndicator" | "itemTrigger" | "root", "root", AccordionRootProps, never>;
+//#endregion
+//# sourceMappingURL=accordion.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.mts","names":[],"sources":["../../../src/components/accordion/accordion.tsx"],"mappings":";;;;iBAYiB;WACN;;iBAGM;;;;;;;;EAQf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,cAAc;;EAEd;;EAEA,OAAO;;EAEP;;qBAGW,WAAS,4FAAA"}

package/dist/components/accordion/accordion.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { chevronDown } from "../../icons/src/chevron-down.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { accordionRecipe } from "./accordion.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as accordion from "@zag-js/accordion";
+//#region src/components/accordion/accordion.tsx
+const Accordion = defineComponent()({
+	name: "Accordion",
+	module: accordion,
+	rootPart: "root",
+	elements: { itemIndicator: "span" },
+	defaultContent: { itemIndicator: () => /* @__PURE__ */ jsx(Icon, { icon: chevronDown }) },
+	getterProps: {
+		item: ["value", "disabled"],
+		itemTrigger: ["value", "disabled"],
+		itemContent: ["value", "disabled"],
+		itemIndicator: ["value", "disabled"]
+	},
+	variantProps: ["size"],
+	slots: (props) => accordionRecipe({ size: resolveSize(props.size, "Accordion") })
+});
+//#endregion
+export { Accordion };
+
+//# sourceMappingURL=accordion.mjs.map

package/dist/components/accordion/accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.mjs","names":[],"sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["'use client'\n\nimport { chevronDown } from '@neurocle/synapse-icons'\nimport * as accordion from '@zag-js/accordion'\n\nimport { accordionRecipe } from '#/components/accordion/accordion.recipe.ts'\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { Icon } from '#/shared/icon.tsx'\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 AccordionFocusChangeDetails {\n  readonly value: string | null\n}\n\nexport interface AccordionRootProps {\n  /**\n   * 열려 있는 섹션이며, 제어됩니다.\n   *\n   * `multiple`이 꺼져 있어도 배열입니다. 열린 섹션의 집합이라 원소가 하나여도 집합이고,\n   * 배열을 벗기면 `multiple`이 바뀔 때 prop 타입도 함께 바뀌어 사용처가 타입을 고정할 수\n   * 없기 때문입니다.\n   */\n  value?: readonly string[]\n  /** 비제어 초기 열림 섹션. `value`가 주어지면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 제어 여부와 무관하게 열린 집합이 바뀔 때마다 알림을 받습니다. */\n  onValueChange?: (details: ValueChangeDetails<readonly string[]>) => void\n  /** 한 번에 둘 이상의 섹션이 열리도록 허용합니다. */\n  multiple?: boolean\n  /** 마지막으로 열린 섹션까지 닫아 아무것도 열리지 않은 상태가 되도록 허용합니다. */\n  collapsible?: boolean\n  /** 키보드가 trigger 사이를 오갈 때 알림을 받습니다. */\n  onFocusChange?: (details: AccordionFocusChangeDetails) => void\n  /** 섹션이 배치되는 축. 기본값은 `vertical`입니다. */\n  orientation?: Orientation\n  /** 비활성화된 Accordion은 어떤 trigger에도 반응하지 않습니다. */\n  disabled?: boolean\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nexport const Accordion = defineComponent<AccordionRootProps>()({\n  name: 'Accordion',\n  module: accordion,\n  rootPart: 'root',\n  elements: { itemIndicator: 'span' },\n  defaultContent: { itemIndicator: () => <Icon icon={chevronDown} /> },\n  getterProps: {\n    item: ['value', 'disabled'],\n    itemTrigger: ['value', 'disabled'],\n    itemContent: ['value', 'disabled'],\n    itemIndicator: ['value', 'disabled'],\n  },\n  variantProps: ['size'],\n  slots: (props: AccordionRootProps) =>\n    accordionRecipe({ size: resolveSize(props.size, 'Accordion') }),\n})\n"],"mappings":";;;;;;;;;;AA6CA,MAAa,YAAY,gBAAoC,CAAC,CAAC;CAC7D,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EAAE,eAAe,OAAO;CAClC,gBAAgB,EAAE,qBAAqB,oBAAC,MAAD,EAAM,MAAM,YAAc,CAAA,EAAE;CACnE,aAAa;EACX,MAAM,CAAC,SAAS,UAAU;EAC1B,aAAa,CAAC,SAAS,UAAU;EACjC,aAAa,CAAC,SAAS,UAAU;EACjC,eAAe,CAAC,SAAS,UAAU;CACrC;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,gBAAgB,EAAE,MAAM,YAAY,MAAM,MAAM,WAAW,EAAE,CAAC;AAClE,CAAC"}

package/dist/components/accordion/accordion.recipe.mjs

@@ -0,0 +1,191 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/accordion/accordion.recipe.ts
+const accordionRecipe = sva({
+	slots: [
+		"root",
+		"item",
+		"itemTrigger",
+		"itemContent",
+		"itemIndicator"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			width: "fill",
+			color: "foreground.default",
+			"&[data-orientation=\"horizontal\"]": { flexDirection: "row" }
+		},
+		item: {
+			display: "flex",
+			flexDirection: "column",
+			borderBlockEndWidth: "hairline",
+			borderBlockEndStyle: "solid",
+			borderColor: "border.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		itemTrigger: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "gap.inline",
+			width: "fill",
+			minHeight: "target.minimum",
+			minWidth: "target.minimum",
+			rounded: "control",
+			color: "foreground.default",
+			textAlign: "start",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			cursor: "pointer",
+			"&:not(:disabled, [data-disabled], [data-readonly]):hover": {
+				bg: "secondary.hover",
+				color: "foreground.default"
+			},
+			"&:not(:disabled, [data-disabled], [data-readonly]):active": {
+				bg: "secondary.active",
+				color: "foreground.default"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		itemContent: {
+			overflow: "hidden",
+			color: "foreground.muted",
+			boxSizing: "content-box",
+			interpolateSize: "allow-keywords",
+			"--accordion-motion-properties": "height, width, padding, display",
+			transitionProperty: "var(--accordion-motion-properties)",
+			transitionDuration: "expand",
+			transitionTimingFunction: "interaction",
+			transitionBehavior: "allow-discrete",
+			"&[data-orientation=\"vertical\"]": { _closed: {
+				height: "0",
+				paddingBlock: "0"
+			} },
+			"&[data-orientation=\"horizontal\"]": { _closed: {
+				width: "0",
+				paddingInline: "0"
+			} },
+			"[data-scope=\"accordion\"][data-part=\"root\"]:focus-within &": {
+				"&[data-orientation=\"vertical\"]": { _starting: {
+					height: "0",
+					paddingBlock: "0"
+				} },
+				"&[data-orientation=\"horizontal\"]": { _starting: {
+					width: "0",
+					paddingInline: "0"
+				} }
+			}
+		},
+		itemIndicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			color: "foreground.muted",
+			transitionProperty: "common",
+			transitionDuration: "expand",
+			transitionTimingFunction: "interaction",
+			_open: { transform: "rotate(180deg)" }
+		}
+	},
+	variants: { size: {
+		xs: {
+			itemTrigger: {
+				minHeight: "control.xs",
+				paddingInline: "inset.compact",
+				textStyle: "caption"
+			},
+			itemContent: {
+				paddingBlockEnd: "inset.compact",
+				paddingInline: "inset.compact",
+				textStyle: "caption"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			itemTrigger: {
+				minHeight: "control.sm",
+				paddingInline: "inset.control",
+				textStyle: "detail"
+			},
+			itemContent: {
+				paddingBlockEnd: "inset.control",
+				paddingInline: "inset.control",
+				textStyle: "caption"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			itemTrigger: {
+				minHeight: "control.md",
+				paddingInline: "inset.control",
+				textStyle: "label"
+			},
+			itemContent: {
+				paddingBlockEnd: "inset.control",
+				paddingInline: "inset.control",
+				textStyle: "detail"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			itemTrigger: {
+				minHeight: "control.lg",
+				paddingInline: "inset.overlay",
+				textStyle: "label"
+			},
+			itemContent: {
+				paddingBlockEnd: "inset.overlay",
+				paddingInline: "inset.overlay",
+				textStyle: "body"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			itemTrigger: {
+				minHeight: "control.xl",
+				paddingInline: "inset.surface",
+				textStyle: "subtitle"
+			},
+			itemContent: {
+				paddingBlockEnd: "inset.surface",
+				paddingInline: "inset.surface",
+				textStyle: "body"
+			},
+			itemIndicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { accordionRecipe };
+
+//# sourceMappingURL=accordion.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.recipe.mjs","names":[],"sources":["../../../src/components/accordion/accordion.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const accordionRecipe = sva({\n  slots: ['root', 'item', 'itemTrigger', 'itemContent', 'itemIndicator'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      width: 'fill',\n      color: 'foreground.default',\n      '&[data-orientation=\"horizontal\"]': { flexDirection: 'row' },\n    },\n    item: {\n      display: 'flex',\n      flexDirection: 'column',\n      borderBlockEndWidth: 'hairline',\n      borderBlockEndStyle: 'solid',\n      borderColor: 'border.muted',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    itemTrigger: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: 'gap.inline',\n      width: 'fill',\n      minHeight: 'target.minimum',\n      minWidth: 'target.minimum',\n      rounded: 'control',\n      color: 'foreground.default',\n      textAlign: 'start',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      cursor: 'pointer',\n      '&:not(:disabled, [data-disabled], [data-readonly]):hover': {\n        bg: 'secondary.hover',\n        color: 'foreground.default',\n      },\n      '&:not(:disabled, [data-disabled], [data-readonly]):active': {\n        bg: 'secondary.active',\n        color: 'foreground.default',\n      },\n      _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    itemContent: {\n      overflow: 'hidden',\n      color: 'foreground.muted',\n      boxSizing: 'content-box',\n      interpolateSize: 'allow-keywords',\n      '--accordion-motion-properties': 'height, width, padding, display',\n      transitionProperty: 'var(--accordion-motion-properties)',\n      transitionDuration: 'expand',\n      transitionTimingFunction: 'interaction',\n      transitionBehavior: 'allow-discrete',\n      '&[data-orientation=\"vertical\"]': { _closed: { height: '0', paddingBlock: '0' } },\n      '&[data-orientation=\"horizontal\"]': { _closed: { width: '0', paddingInline: '0' } },\n      '[data-scope=\"accordion\"][data-part=\"root\"]:focus-within &': {\n        '&[data-orientation=\"vertical\"]': { _starting: { height: '0', paddingBlock: '0' } },\n        '&[data-orientation=\"horizontal\"]': { _starting: { width: '0', paddingInline: '0' } },\n      },\n    },\n    itemIndicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      color: 'foreground.muted',\n      transitionProperty: 'common',\n      transitionDuration: 'expand',\n      transitionTimingFunction: 'interaction',\n      _open: { transform: 'rotate(180deg)' },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        itemTrigger: {\n          minHeight: 'control.xs',\n          paddingInline: 'inset.compact',\n          textStyle: 'caption',\n        },\n        itemContent: {\n          paddingBlockEnd: 'inset.compact',\n          paddingInline: 'inset.compact',\n          textStyle: 'caption',\n        },\n        itemIndicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        itemTrigger: {\n          minHeight: 'control.sm',\n          paddingInline: 'inset.control',\n          textStyle: 'detail',\n        },\n        itemContent: {\n          paddingBlockEnd: 'inset.control',\n          paddingInline: 'inset.control',\n          textStyle: 'caption',\n        },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        itemTrigger: {\n          minHeight: 'control.md',\n          paddingInline: 'inset.control',\n          textStyle: 'label',\n        },\n        itemContent: {\n          paddingBlockEnd: 'inset.control',\n          paddingInline: 'inset.control',\n          textStyle: 'detail',\n        },\n        itemIndicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        itemTrigger: {\n          minHeight: 'control.lg',\n          paddingInline: 'inset.overlay',\n          textStyle: 'label',\n        },\n        itemContent: {\n          paddingBlockEnd: 'inset.overlay',\n          paddingInline: 'inset.overlay',\n          textStyle: 'body',\n        },\n        itemIndicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        itemTrigger: {\n          minHeight: 'control.xl',\n          paddingInline: 'inset.surface',\n          textStyle: 'subtitle',\n        },\n        itemContent: {\n          paddingBlockEnd: 'inset.surface',\n          paddingInline: 'inset.surface',\n          textStyle: 'body',\n        },\n        itemIndicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,kBAAkB,IAAI;CACjC,OAAO;EAAC;EAAQ;EAAQ;EAAe;EAAe;CAAe;CACrE,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,OAAO;GACP,OAAO;GACP,sCAAoC,EAAE,eAAe,MAAM;EAC7D;EACA,MAAM;GACJ,SAAS;GACT,eAAe;GACf,qBAAqB;GACrB,qBAAqB;GACrB,aAAa;GACb,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,OAAO;GACP,WAAW;GACX,UAAU;GACV,SAAS;GACT,OAAO;GACP,WAAW;GACX,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,QAAQ;GACR,4DAA4D;IAC1D,IAAI;IACJ,OAAO;GACT;GACA,6DAA6D;IAC3D,IAAI;IACJ,OAAO;GACT;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,eAAe,EAAE,OAAO,kBAAkB;GAC5C;EACF;EACA,aAAa;GACX,UAAU;GACV,OAAO;GACP,WAAW;GACX,iBAAiB;GACjB,iCAAiC;GACjC,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,oCAAkC,EAAE,SAAS;IAAE,QAAQ;IAAK,cAAc;GAAI,EAAE;GAChF,sCAAoC,EAAE,SAAS;IAAE,OAAO;IAAK,eAAe;GAAI,EAAE;GAClF,iEAA6D;IAC3D,oCAAkC,EAAE,WAAW;KAAE,QAAQ;KAAK,cAAc;IAAI,EAAE;IAClF,sCAAoC,EAAE,WAAW;KAAE,OAAO;KAAK,eAAe;IAAI,EAAE;GACtF;EACF;EACA,eAAe;GACb,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,OAAO;GACP,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EAAE,WAAW,iBAAiB;EACvC;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,aAAa;IACX,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,aAAa;IACX,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;EACA,IAAI;GACF,aAAa;IACX,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,aAAa;IACX,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;EACA,IAAI;GACF,aAAa;IACX,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,aAAa;IACX,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;EACA,IAAI;GACF,aAAa;IACX,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,aAAa;IACX,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;EACA,IAAI;GACF,aAAa;IACX,WAAW;IACX,eAAe;IACf,WAAW;GACb;GACA,aAAa;IACX,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,eAAe,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EACpE;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Accordion, AccordionFocusChangeDetails, AccordionRootProps } from "./accordion.mjs";
+export { Accordion, type AccordionFocusChangeDetails, type AccordionRootProps };

package/dist/components/accordion/index.mjs

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

package/dist/components/alert/alert.anatomy.mjs

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

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

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

package/dist/components/alert/alert.connect.d.mts

@@ -0,0 +1,4 @@
+//#region src/components/alert/alert.connect.d.ts
+export type AlertType = 'info' | 'success' | 'warning' | 'error';
+//#endregion
+//# sourceMappingURL=alert.connect.d.mts.map

package/dist/components/alert/alert.connect.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.connect.d.mts","names":[],"sources":["../../../src/components/alert/alert.connect.ts"],"mappings":";YAQY"}

package/dist/components/alert/alert.connect.mjs

@@ -0,0 +1,39 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { anatomy, parts } from "./alert.anatomy.mjs";
+//#region src/components/alert/alert.connect.ts
+var alert_connect_exports = /* @__PURE__ */ __exportAll({
+	anatomy: () => anatomy,
+	connect: () => connect,
+	machine: () => null,
+	props: () => props
+});
+const props = ["type"];
+const ALERT_TYPES = [
+	"info",
+	"success",
+	"warning",
+	"error"
+];
+const toType = (value) => ALERT_TYPES.find((candidate) => candidate === value) ?? "info";
+function connect(machineProps) {
+	const type = toType(machineProps["type"]);
+	return {
+		type,
+		getRootProps: () => ({
+			...parts.root.attrs,
+			role: type === "error" ? "alert" : "status",
+			"data-type": type
+		}),
+		getIndicatorProps: () => ({
+			...parts.indicator.attrs,
+			"aria-hidden": true,
+			"data-type": type
+		}),
+		getTitleProps: () => ({ ...parts.title.attrs }),
+		getDescriptionProps: () => ({ ...parts.description.attrs })
+	};
+}
+//#endregion
+export { alert_connect_exports, anatomy, connect, props };
+
+//# sourceMappingURL=alert.connect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.connect.mjs","names":[],"sources":["../../../src/components/alert/alert.connect.ts"],"sourcesContent":["import { parts } from '#/components/alert/alert.anatomy.ts'\n\nexport { anatomy } from '#/components/alert/alert.anatomy.ts'\n\nexport const machine = null\n\nexport const props: readonly string[] = ['type']\n\nexport type AlertType = 'info' | 'success' | 'warning' | 'error'\n\nexport interface AlertApi {\n  type: AlertType\n  getRootProps: () => Record<string, unknown>\n  getIndicatorProps: () => Record<string, unknown>\n  getTitleProps: () => Record<string, unknown>\n  getDescriptionProps: () => Record<string, unknown>\n}\n\nconst ALERT_TYPES: readonly AlertType[] = ['info', 'success', 'warning', 'error']\n\nconst toType = (value: unknown): AlertType =>\n  ALERT_TYPES.find((candidate) => candidate === value) ?? 'info'\n\nexport function connect(machineProps: Readonly<Record<string, unknown>>): AlertApi {\n  const type = toType(machineProps['type'])\n  return {\n    type,\n    getRootProps: () => ({\n      ...parts.root.attrs,\n      role: type === 'error' ? 'alert' : 'status',\n      'data-type': type,\n    }),\n    getIndicatorProps: () => ({ ...parts.indicator.attrs, 'aria-hidden': true, 'data-type': type }),\n    getTitleProps: () => ({ ...parts.title.attrs }),\n    getDescriptionProps: () => ({ ...parts.description.attrs }),\n  }\n}\n"],"mappings":";;;;;;;;;AAMA,MAAa,QAA2B,CAAC,MAAM;AAY/C,MAAM,cAAoC;CAAC;CAAQ;CAAW;CAAW;AAAO;AAEhF,MAAM,UAAU,UACd,YAAY,MAAM,cAAc,cAAc,KAAK,KAAK;AAE1D,SAAgB,QAAQ,cAA2D;CACjF,MAAM,OAAO,OAAO,aAAa,OAAO;CACxC,OAAO;EACL;EACA,qBAAqB;GACnB,GAAG,MAAM,KAAK;GACd,MAAM,SAAS,UAAU,UAAU;GACnC,aAAa;EACf;EACA,0BAA0B;GAAE,GAAG,MAAM,UAAU;GAAO,eAAe;GAAM,aAAa;EAAK;EAC7F,sBAAsB,EAAE,GAAG,MAAM,MAAM,MAAM;EAC7C,4BAA4B,EAAE,GAAG,MAAM,YAAY,MAAM;CAC3D;AACF"}

package/dist/components/alert/alert.d.mts

@@ -0,0 +1,14 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { AlertType } from "./alert.connect.mjs";
+//#region src/components/alert/alert.d.ts
+export interface AlertRootProps {
+  /** 알리는 조건의 수준. 색, 기본 아이콘, 역할을 함께 정합니다. `error`는 `alert` 역할로 즉시 알리고 나머지는 `status`로 조용히 알립니다. 기본값은 `info`입니다. */
+  type?: AlertType;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+}
+export declare const Alert: SynapseComponent<"description" | "indicator" | "root" | "title", "root", AlertRootProps, never>;
+//#endregion
+export type { AlertType };
+//# sourceMappingURL=alert.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.mts","names":[],"sources":["../../../src/components/alert/alert.tsx"],"mappings":";;;;iBAciB;;EAEf,OAAO;;EAEP,OAAO;;qBAUI,OAAK,yEAAA"}

package/dist/components/alert/alert.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import { error } from "../../icons/src/error.mjs";
+import { info } from "../../icons/src/info.mjs";
+import { warning } from "../../icons/src/warning.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { alert_connect_exports } from "./alert.connect.mjs";
+import { alertRecipe } from "./alert.recipe.mjs";
+import { createElement } from "react";
+//#region src/components/alert/alert.tsx
+const ALERT_ICON = {
+	info,
+	success: checkmark,
+	warning,
+	error
+};
+const Alert = defineComponent()({
+	name: "Alert",
+	module: alert_connect_exports,
+	rootPart: "root",
+	rootElement: "div",
+	elements: {
+		indicator: "span",
+		title: "div",
+		description: "div"
+	},
+	defaultContent: { indicator: (api) => createElement(Icon, { icon: ALERT_ICON[api.type] }) },
+	variantProps: ["size"],
+	slots: (props) => alertRecipe({ size: resolveSize(props.size, "Alert") })
+});
+//#endregion
+export { Alert };
+
+//# sourceMappingURL=alert.mjs.map

package/dist/components/alert/alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.mjs","names":["alert"],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, error, info, warning, type IconGeometry } from '@neurocle/synapse-icons'\nimport { createElement } from 'react'\n\nimport * as alert from '#/components/alert/alert.connect.ts'\nimport type { AlertType } from '#/components/alert/alert.connect.ts'\nimport { alertRecipe } from '#/components/alert/alert.recipe.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 type { AlertType } from '#/components/alert/alert.connect.ts'\n\nexport interface AlertRootProps {\n  /** 알리는 조건의 수준. 색, 기본 아이콘, 역할을 함께 정합니다. `error`는 `alert` 역할로 즉시 알리고 나머지는 `status`로 조용히 알립니다. 기본값은 `info`입니다. */\n  type?: AlertType\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n}\n\nconst ALERT_ICON: Readonly<Record<AlertType, IconGeometry>> = {\n  info,\n  success: checkmark,\n  warning,\n  error,\n}\n\nexport const Alert = defineComponent<AlertRootProps>()({\n  name: 'Alert',\n  module: alert,\n  rootPart: 'root',\n  rootElement: 'div',\n  elements: { indicator: 'span', title: 'div', description: 'div' },\n  defaultContent: { indicator: (api) => createElement(Icon, { icon: ALERT_ICON[api.type] }) },\n  variantProps: ['size'],\n  slots: (props: AlertRootProps) => alertRecipe({ size: resolveSize(props.size, 'Alert') }),\n})\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,aAAwD;CAC5D;CACA,SAAS;CACT;CACA;AACF;AAEA,MAAa,QAAQ,gBAAgC,CAAC,CAAC;CACrD,MAAM;CACN,QAAQA;CACR,UAAU;CACV,aAAa;CACb,UAAU;EAAE,WAAW;EAAQ,OAAO;EAAO,aAAa;CAAM;CAChE,gBAAgB,EAAE,YAAY,QAAQ,cAAc,MAAM,EAAE,MAAM,WAAW,IAAI,MAAM,CAAC,EAAE;CAC1F,cAAc,CAAC,MAAM;CACrB,QAAQ,UAA0B,YAAY,EAAE,MAAM,YAAY,MAAM,MAAM,OAAO,EAAE,CAAC;AAC1F,CAAC"}