@neurocle/synapse-react 0.0.0-bootstrap

package/dist/components/alert/alert.recipe.mjs

@@ -0,0 +1,141 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/alert/alert.recipe.ts
+const alertRecipe = sva({
+	slots: [
+		"root",
+		"indicator",
+		"title",
+		"description"
+	],
+	base: {
+		root: {
+			display: "grid",
+			gridTemplateColumns: "auto minmax(0, 1fr)",
+			rowGap: "gap.inline",
+			alignItems: "start",
+			width: "fill",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			color: "foreground.default",
+			"&:not(:has(> [data-part=\"indicator\"]))": { gridTemplateColumns: "minmax(0, 1fr)" },
+			"&[data-type=\"info\"]": {
+				bg: "info.subtle",
+				borderColor: "info.muted"
+			},
+			"&[data-type=\"success\"]": {
+				bg: "success.subtle",
+				borderColor: "success.muted"
+			},
+			"&[data-type=\"warning\"]": {
+				bg: "warning.subtle",
+				borderColor: "warning.muted"
+			},
+			"&[data-type=\"error\"]": {
+				bg: "error.subtle",
+				borderColor: "error.muted"
+			},
+			_highContrast: { borderColor: "system.canvasText" }
+		},
+		indicator: {
+			display: "inline-flex",
+			gridColumn: "1",
+			gridRow: "span 2",
+			flexShrink: 0,
+			"--alert-icon-nudge": "calc((1lh - var(--alert-icon)) / 2)",
+			marginBlockStart: "var(--alert-icon-nudge)",
+			"&[data-type=\"info\"]": { color: "info.default" },
+			"&[data-type=\"success\"]": { color: "success.default" },
+			"&[data-type=\"warning\"]": { color: "warning.default" },
+			"&[data-type=\"error\"]": { color: "error.default" }
+		},
+		title: {
+			gridColumn: "-2",
+			margin: "inset.none",
+			fontWeight: "medium",
+			color: "foreground.default"
+		},
+		description: {
+			gridColumn: "-2",
+			margin: "inset.none",
+			color: "foreground.default"
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: {
+				padding: "inset.control",
+				columnGap: "gap.inline",
+				textStyle: "detail",
+				"--alert-icon": "token(sizes.icon.xs)"
+			},
+			indicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			title: { textStyle: "detail" },
+			description: { textStyle: "detail" }
+		},
+		sm: {
+			root: {
+				padding: "inset.control",
+				columnGap: "gap.related",
+				textStyle: "label",
+				"--alert-icon": "token(sizes.icon.sm)"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			title: { textStyle: "label" },
+			description: { textStyle: "detail" }
+		},
+		md: {
+			root: {
+				padding: "inset.overlay",
+				columnGap: "gap.related",
+				textStyle: "label",
+				"--alert-icon": "token(sizes.icon.sm)"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			title: { textStyle: "label" },
+			description: { textStyle: "body" }
+		},
+		lg: {
+			root: {
+				padding: "inset.surface",
+				columnGap: "gap.related",
+				textStyle: "body",
+				"--alert-icon": "token(sizes.icon.md)"
+			},
+			indicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			title: { textStyle: "body" },
+			description: { textStyle: "body" }
+		},
+		xl: {
+			root: {
+				padding: "inset.surface",
+				columnGap: "rhythm.tight",
+				textStyle: "subtitle",
+				"--alert-icon": "token(sizes.icon.lg)"
+			},
+			indicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} },
+			title: { textStyle: "subtitle" },
+			description: { textStyle: "body" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { alertRecipe };
+
+//# sourceMappingURL=alert.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.recipe.mjs","names":[],"sources":["../../../src/components/alert/alert.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const alertRecipe = sva({\n  slots: ['root', 'indicator', 'title', 'description'],\n  base: {\n    root: {\n      display: 'grid',\n      gridTemplateColumns: 'auto minmax(0, 1fr)',\n      rowGap: 'gap.inline',\n      alignItems: 'start',\n      width: 'fill',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      color: 'foreground.default',\n      '&:not(:has(> [data-part=\"indicator\"]))': { gridTemplateColumns: 'minmax(0, 1fr)' },\n      '&[data-type=\"info\"]': { bg: 'info.subtle', borderColor: 'info.muted' },\n      '&[data-type=\"success\"]': { bg: 'success.subtle', borderColor: 'success.muted' },\n      '&[data-type=\"warning\"]': { bg: 'warning.subtle', borderColor: 'warning.muted' },\n      '&[data-type=\"error\"]': { bg: 'error.subtle', borderColor: 'error.muted' },\n      _highContrast: { borderColor: 'system.canvasText' },\n    },\n    indicator: {\n      display: 'inline-flex',\n      gridColumn: '1',\n      gridRow: 'span 2',\n      flexShrink: 0,\n      '--alert-icon-nudge': 'calc((1lh - var(--alert-icon)) / 2)',\n      marginBlockStart: 'var(--alert-icon-nudge)',\n      '&[data-type=\"info\"]': { color: 'info.default' },\n      '&[data-type=\"success\"]': { color: 'success.default' },\n      '&[data-type=\"warning\"]': { color: 'warning.default' },\n      '&[data-type=\"error\"]': { color: 'error.default' },\n    },\n    title: {\n      gridColumn: '-2',\n      margin: 'inset.none',\n      fontWeight: 'medium',\n      color: 'foreground.default',\n    },\n    description: {\n      gridColumn: '-2',\n      margin: 'inset.none',\n      color: 'foreground.default',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: {\n          padding: 'inset.control',\n          columnGap: 'gap.inline',\n          textStyle: 'detail',\n          '--alert-icon': 'token(sizes.icon.xs)',\n        },\n        indicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        title: { textStyle: 'detail' },\n        description: { textStyle: 'detail' },\n      },\n      sm: {\n        root: {\n          padding: 'inset.control',\n          columnGap: 'gap.related',\n          textStyle: 'label',\n          '--alert-icon': 'token(sizes.icon.sm)',\n        },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        title: { textStyle: 'label' },\n        description: { textStyle: 'detail' },\n      },\n      md: {\n        root: {\n          padding: 'inset.overlay',\n          columnGap: 'gap.related',\n          textStyle: 'label',\n          '--alert-icon': 'token(sizes.icon.sm)',\n        },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        title: { textStyle: 'label' },\n        description: { textStyle: 'body' },\n      },\n      lg: {\n        root: {\n          padding: 'inset.surface',\n          columnGap: 'gap.related',\n          textStyle: 'body',\n          '--alert-icon': 'token(sizes.icon.md)',\n        },\n        indicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n        title: { textStyle: 'body' },\n        description: { textStyle: 'body' },\n      },\n      xl: {\n        root: {\n          padding: 'inset.surface',\n          columnGap: 'rhythm.tight',\n          textStyle: 'subtitle',\n          '--alert-icon': 'token(sizes.icon.lg)',\n        },\n        indicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n        title: { textStyle: 'subtitle' },\n        description: { textStyle: 'body' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,cAAc,IAAI;CAC7B,OAAO;EAAC;EAAQ;EAAa;EAAS;CAAa;CACnD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,qBAAqB;GACrB,QAAQ;GACR,YAAY;GACZ,OAAO;GACP,SAAS;GACT,aAAa;GACb,aAAa;GACb,OAAO;GACP,4CAA0C,EAAE,qBAAqB,iBAAiB;GAClF,yBAAuB;IAAE,IAAI;IAAe,aAAa;GAAa;GACtE,4BAA0B;IAAE,IAAI;IAAkB,aAAa;GAAgB;GAC/E,4BAA0B;IAAE,IAAI;IAAkB,aAAa;GAAgB;GAC/E,0BAAwB;IAAE,IAAI;IAAgB,aAAa;GAAc;GACzE,eAAe,EAAE,aAAa,oBAAoB;EACpD;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,sBAAsB;GACtB,kBAAkB;GAClB,yBAAuB,EAAE,OAAO,eAAe;GAC/C,4BAA0B,EAAE,OAAO,kBAAkB;GACrD,4BAA0B,EAAE,OAAO,kBAAkB;GACrD,0BAAwB,EAAE,OAAO,gBAAgB;EACnD;EACA,OAAO;GACL,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,OAAO;EACT;EACA,aAAa;GACX,YAAY;GACZ,QAAQ;GACR,OAAO;EACT;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM;IACJ,SAAS;IACT,WAAW;IACX,WAAW;IACX,gBAAgB;GAClB;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC9D,OAAO,EAAE,WAAW,SAAS;GAC7B,aAAa,EAAE,WAAW,SAAS;EACrC;EACA,IAAI;GACF,MAAM;IACJ,SAAS;IACT,WAAW;IACX,WAAW;IACX,gBAAgB;GAClB;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC9D,OAAO,EAAE,WAAW,QAAQ;GAC5B,aAAa,EAAE,WAAW,SAAS;EACrC;EACA,IAAI;GACF,MAAM;IACJ,SAAS;IACT,WAAW;IACX,WAAW;IACX,gBAAgB;GAClB;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC9D,OAAO,EAAE,WAAW,QAAQ;GAC5B,aAAa,EAAE,WAAW,OAAO;EACnC;EACA,IAAI;GACF,MAAM;IACJ,SAAS;IACT,WAAW;IACX,WAAW;IACX,gBAAgB;GAClB;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC9D,OAAO,EAAE,WAAW,OAAO;GAC3B,aAAa,EAAE,WAAW,OAAO;EACnC;EACA,IAAI;GACF,MAAM;IACJ,SAAS;IACT,WAAW;IACX,WAAW;IACX,gBAAgB;GAClB;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC9D,OAAO,EAAE,WAAW,WAAW;GAC/B,aAAa,EAAE,WAAW,OAAO;EACnC;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,3 @@
+import { AlertType } from "./alert.connect.mjs";
+import { Alert, AlertRootProps } from "./alert.mjs";
+export { Alert, type AlertRootProps, type AlertType };

package/dist/components/alert/index.mjs

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

package/dist/components/angle-slider/angle-slider.d.mts

@@ -0,0 +1,35 @@
+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/angle-slider/angle-slider.d.ts
+export type AngleSliderValueChangeDetails = ValueChangeDetails<number>;
+export interface AngleSliderRootProps {
+  /** 제어되는 각도이며, 단위는 도입니다. */
+  value?: number;
+  /** 비제어 초기 각도. `value`가 주어지면 무시됩니다. */
+  defaultValue?: number;
+  /** 드래그의 매 단계를 포함해, 값이 바뀔 때마다 알림을 받습니다. */
+  onValueChange?: (details: AngleSliderValueChangeDetails) => void;
+  /** 드래그나 키 반복이 끝난 뒤 한 번 알림을 받습니다 — 저장할 때 쓸 콜백입니다. */
+  onValueChangeEnd?: (details: AngleSliderValueChangeDetails) => void;
+  /** 화살표 키의 이동 단위이며, 단위는 도입니다. 기본값은 1입니다. */
+  step?: number;
+  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 비활성화된 AngleSlider는 반응하지 않고 탭 순서에도 들어가지 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 AngleSlider는 포커스하고 읽을 수 있지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알려집니다. */
+  invalid?: boolean;
+  /** 이 AngleSlider에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const AngleSlider: SynapseComponent<"control" | "label" | "marker" | "markerGroup" | "root" | "thumb" | "track" | "valueText", "root", AngleSliderRootProps, "track">;
+//#endregion
+//# sourceMappingURL=angle-slider.d.mts.map

package/dist/components/angle-slider/angle-slider.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"angle-slider.d.mts","names":[],"sources":["../../../src/components/angle-slider/angle-slider.tsx"],"mappings":";;;;;YAWY,gCAAgC;iBAE3B;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,oBAAoB,SAAS;;EAE7B;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBAGW,aAAW,oHAAA"}

package/dist/components/angle-slider/angle-slider.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { angleSliderRecipe } from "./angle-slider.recipe.mjs";
+import { createElement } from "react";
+import * as angleSlider from "@zag-js/angle-slider";
+//#region src/components/angle-slider/angle-slider.tsx
+const AngleSlider = defineComponent()({
+	name: "AngleSlider",
+	module: angleSlider,
+	rootPart: "root",
+	elements: { valueText: "span" },
+	defaultContent: { valueText: (api) => `${api.value}°` },
+	getterProps: { marker: ["value"] },
+	field: {
+		ids: (field) => ({ label: field.label }),
+		describe: ["thumb"],
+		labelable: false
+	},
+	amendBehaviorProps: { thumb: (behaviorProps, api, _args, translate) => ({
+		"aria-valuetext": translate("angleSlider.thumb.valueText", { value: api.value }),
+		"aria-disabled": behaviorProps["data-disabled"] === "" ? true : void 0,
+		"aria-readonly": behaviorProps["data-readonly"] === "" ? true : void 0,
+		"aria-invalid": behaviorProps["data-invalid"] === "" ? true : void 0
+	}) },
+	unrenderedParts: ["track"],
+	rootOwnedGetters: [{
+		name: "hiddenInput",
+		getter: "getHiddenInputProps",
+		render: (props) => createElement("input", {
+			...props,
+			"data-synapse-form-field": ""
+		})
+	}],
+	variantProps: ["size"],
+	slots: (props) => angleSliderRecipe({ size: resolveSize(props.size, "AngleSlider") })
+});
+//#endregion
+export { AngleSlider };
+
+//# sourceMappingURL=angle-slider.mjs.map

package/dist/components/angle-slider/angle-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"angle-slider.mjs","names":[],"sources":["../../../src/components/angle-slider/angle-slider.tsx"],"sourcesContent":["'use client'\n\nimport * as angleSlider from '@zag-js/angle-slider'\nimport { createElement } from 'react'\n\nimport { angleSliderRecipe } from '#/components/angle-slider/angle-slider.recipe.ts'\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport type AngleSliderValueChangeDetails = ValueChangeDetails<number>\n\nexport interface AngleSliderRootProps {\n  /** 제어되는 각도이며, 단위는 도입니다. */\n  value?: number\n  /** 비제어 초기 각도. `value`가 주어지면 무시됩니다. */\n  defaultValue?: number\n  /** 드래그의 매 단계를 포함해, 값이 바뀔 때마다 알림을 받습니다. */\n  onValueChange?: (details: AngleSliderValueChangeDetails) => void\n  /** 드래그나 키 반복이 끝난 뒤 한 번 알림을 받습니다 — 저장할 때 쓸 콜백입니다. */\n  onValueChangeEnd?: (details: AngleSliderValueChangeDetails) => void\n  /** 화살표 키의 이동 단위이며, 단위는 도입니다. 기본값은 1입니다. */\n  step?: number\n  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 비활성화된 AngleSlider는 반응하지 않고 탭 순서에도 들어가지 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 AngleSlider는 포커스하고 읽을 수 있지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알려집니다. */\n  invalid?: boolean\n  /** 이 AngleSlider에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nexport const AngleSlider = defineComponent<AngleSliderRootProps>()({\n  name: 'AngleSlider',\n  module: angleSlider,\n  rootPart: 'root',\n  elements: {\n    valueText: 'span',\n  },\n  defaultContent: {\n    valueText: (api) => `${api.value}°`,\n  },\n  getterProps: {\n    marker: ['value'],\n  },\n  field: { ids: (field) => ({ label: field.label }), describe: ['thumb'], labelable: false },\n  amendBehaviorProps: {\n    thumb: (behaviorProps, api, _args, translate) => ({\n      'aria-valuetext': translate('angleSlider.thumb.valueText', {\n        value: api.value,\n      }),\n      'aria-disabled': behaviorProps['data-disabled'] === '' ? true : undefined,\n      'aria-readonly': behaviorProps['data-readonly'] === '' ? true : undefined,\n      'aria-invalid': behaviorProps['data-invalid'] === '' ? true : undefined,\n    }),\n  },\n  unrenderedParts: ['track'],\n  rootOwnedGetters: [\n    {\n      name: 'hiddenInput',\n      getter: 'getHiddenInputProps',\n      render: (props) => createElement('input', { ...props, 'data-synapse-form-field': '' }),\n    },\n  ],\n  variantProps: ['size'],\n  slots: (props: AngleSliderRootProps) =>\n    angleSliderRecipe({ size: resolveSize(props.size, 'AngleSlider') }),\n})\n"],"mappings":";;;;;;;AAwCA,MAAa,cAAc,gBAAsC,CAAC,CAAC;CACjE,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EACR,WAAW,OACb;CACA,gBAAgB,EACd,YAAY,QAAQ,GAAG,IAAI,MAAM,GACnC;CACA,aAAa,EACX,QAAQ,CAAC,OAAO,EAClB;CACA,OAAO;EAAE,MAAM,WAAW,EAAE,OAAO,MAAM,MAAM;EAAI,UAAU,CAAC,OAAO;EAAG,WAAW;CAAM;CACzF,oBAAoB,EAClB,QAAQ,eAAe,KAAK,OAAO,eAAe;EAChD,kBAAkB,UAAU,+BAA+B,EACzD,OAAO,IAAI,MACb,CAAC;EACD,iBAAiB,cAAc,qBAAqB,KAAK,OAAO,KAAA;EAChE,iBAAiB,cAAc,qBAAqB,KAAK,OAAO,KAAA;EAChE,gBAAgB,cAAc,oBAAoB,KAAK,OAAO,KAAA;CAChE,GACF;CACA,iBAAiB,CAAC,OAAO;CACzB,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,SAAS,UAAU,cAAc,SAAS;GAAE,GAAG;GAAO,2BAA2B;EAAG,CAAC;CACvF,CACF;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,kBAAkB,EAAE,MAAM,YAAY,MAAM,MAAM,aAAa,EAAE,CAAC;AACtE,CAAC"}

package/dist/components/angle-slider/angle-slider.recipe.mjs

@@ -0,0 +1,201 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/angle-slider/angle-slider.recipe.ts
+const angleSliderRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"thumb",
+		"valueText",
+		"control",
+		"track",
+		"markerGroup",
+		"marker"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: "gap.related",
+			color: "foreground.default"
+		},
+		label: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		thumb: {
+			position: "absolute",
+			insetBlockStart: "inset.none",
+			insetInlineStart: "inset.none",
+			width: "fill",
+			height: "fill",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			paddingBlockStart: "inset.control",
+			rounded: "pill",
+			pointerEvents: "none",
+			outline: "none",
+			"&:not([data-synapse-input=pointer] *):focus-visible": {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			"&::before": {
+				content: "\"\"",
+				flex: "1",
+				borderInlineStartWidth: "emphasis",
+				borderInlineStartStyle: "solid",
+				borderInlineStartColor: "primary.default",
+				rounded: "pill"
+			},
+			"&::after": {
+				content: "\"\"",
+				flex: "1"
+			},
+			"&[data-invalid]::before": { borderInlineStartColor: "error.default" },
+			"&[data-disabled]::before": { borderInlineStartColor: "border.strong" }
+		},
+		valueText: {
+			textStyle: "label",
+			color: "foreground.muted",
+			fontVariantNumeric: "tabular-nums",
+			"[data-disabled] > &": { color: "foreground.disabled" }
+		},
+		control: {
+			position: "relative",
+			boxSizing: "content-box",
+			display: "grid",
+			placeItems: "center",
+			rounded: "pill",
+			touchAction: "none",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			bg: "surface.raised",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&:not([data-disabled], [data-readonly], [data-invalid]):hover": { borderColor: "primary.default" },
+			"&[data-invalid]": {
+				borderColor: "error.default",
+				outlineStyle: "solid",
+				outlineWidth: "hairline",
+				outlineOffset: "inset.none",
+				outlineColor: "error.default"
+			},
+			_readOnly: {
+				bg: "background.subtle",
+				borderStyle: "dashed",
+				cursor: "default"
+			},
+			_disabled: {
+				bg: "background.muted",
+				borderColor: "border.default",
+				cursor: "not-allowed",
+				_highContrast: { borderColor: "system.grayText" }
+			},
+			"&::after": {
+				content: "\"\"",
+				rounded: "pill",
+				borderWidth: "emphasis",
+				borderStyle: "solid",
+				borderColor: "primary.default",
+				pointerEvents: "none"
+			},
+			"&[data-invalid]::after": { borderColor: "error.default" },
+			"&[data-disabled]::after": { borderColor: "border.strong" }
+		},
+		track: {
+			position: "absolute",
+			insetBlockStart: "inset.none",
+			insetInlineStart: "inset.none",
+			width: "fill",
+			height: "fill",
+			rounded: "pill",
+			pointerEvents: "none"
+		},
+		markerGroup: {
+			position: "absolute",
+			insetBlockStart: "inset.none",
+			insetInlineStart: "inset.none",
+			width: "fill",
+			height: "fill",
+			pointerEvents: "none"
+		},
+		marker: {
+			position: "absolute",
+			insetBlockStart: "inset.none",
+			insetInlineStart: "inset.none",
+			width: "fill",
+			height: "fill",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			paddingBlockStart: "inset.compact",
+			"&::before": {
+				content: "\"\"",
+				paddingBlockStart: "inset.compact",
+				borderInlineStartWidth: "hairline",
+				borderInlineStartStyle: "solid",
+				borderInlineStartColor: "border.strong",
+				transitionProperty: "colors",
+				transitionDuration: "interaction",
+				transitionTimingFunction: "interaction"
+			},
+			"&[data-state=at-value]::before": { borderInlineStartColor: "primary.default" },
+			"&[data-disabled]::before": { borderInlineStartColor: "border.muted" }
+		}
+	},
+	variants: { size: {
+		xs: {
+			control: {
+				width: "control.md",
+				height: "control.md"
+			},
+			valueText: { textStyle: "detail" }
+		},
+		sm: {
+			control: {
+				width: "control.lg",
+				height: "control.lg"
+			},
+			valueText: { textStyle: "body" }
+		},
+		md: {
+			control: {
+				width: "control.xl",
+				height: "control.xl"
+			},
+			valueText: { textStyle: "body" }
+		},
+		lg: {
+			control: {
+				width: "control.xl",
+				height: "control.xl",
+				padding: "inset.control"
+			},
+			valueText: { textStyle: "body" }
+		},
+		xl: {
+			control: {
+				width: "control.xl",
+				height: "control.xl",
+				padding: "inset.surface"
+			},
+			label: { textStyle: "body" },
+			valueText: { textStyle: "subtitle" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { angleSliderRecipe };
+
+//# sourceMappingURL=angle-slider.recipe.mjs.map

package/dist/components/angle-slider/angle-slider.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"angle-slider.recipe.mjs","names":[],"sources":["../../../src/components/angle-slider/angle-slider.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const angleSliderRecipe = sva({\n  slots: ['root', 'label', 'thumb', 'valueText', 'control', 'track', 'markerGroup', 'marker'],\n  base: {\n    root: {\n      display: 'inline-flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: 'gap.related',\n      color: 'foreground.default',\n    },\n    label: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    thumb: {\n      position: 'absolute',\n      insetBlockStart: 'inset.none',\n      insetInlineStart: 'inset.none',\n      width: 'fill',\n      height: 'fill',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      paddingBlockStart: 'inset.control',\n      rounded: 'pill',\n      pointerEvents: 'none',\n      outline: 'none',\n      '&:not([data-synapse-input=pointer] *):focus-visible': {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      '&::before': {\n        content: '\"\"',\n        flex: '1',\n        borderInlineStartWidth: 'emphasis',\n        borderInlineStartStyle: 'solid',\n        borderInlineStartColor: 'primary.default',\n        rounded: 'pill',\n      },\n      '&::after': { content: '\"\"', flex: '1' },\n      '&[data-invalid]::before': { borderInlineStartColor: 'error.default' },\n      '&[data-disabled]::before': { borderInlineStartColor: 'border.strong' },\n    },\n    valueText: {\n      textStyle: 'label',\n      color: 'foreground.muted',\n      fontVariantNumeric: 'tabular-nums',\n      '[data-disabled] > &': { color: 'foreground.disabled' },\n    },\n    control: {\n      position: 'relative',\n      boxSizing: 'content-box',\n      display: 'grid',\n      placeItems: 'center',\n      rounded: 'pill',\n      touchAction: 'none',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      bg: 'surface.raised',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&:not([data-disabled], [data-readonly], [data-invalid]):hover': {\n        borderColor: 'primary.default',\n      },\n      '&[data-invalid]': {\n        borderColor: 'error.default',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'error.default',\n      },\n      _readOnly: {\n        bg: 'background.subtle',\n        borderStyle: 'dashed',\n        cursor: 'default',\n      },\n      _disabled: {\n        bg: 'background.muted',\n        borderColor: 'border.default',\n        cursor: 'not-allowed',\n        _highContrast: { borderColor: 'system.grayText' },\n      },\n      '&::after': {\n        content: '\"\"',\n        rounded: 'pill',\n        borderWidth: 'emphasis',\n        borderStyle: 'solid',\n        borderColor: 'primary.default',\n        pointerEvents: 'none',\n      },\n      '&[data-invalid]::after': { borderColor: 'error.default' },\n      '&[data-disabled]::after': { borderColor: 'border.strong' },\n    },\n    track: {\n      position: 'absolute',\n      insetBlockStart: 'inset.none',\n      insetInlineStart: 'inset.none',\n      width: 'fill',\n      height: 'fill',\n      rounded: 'pill',\n      pointerEvents: 'none',\n    },\n    markerGroup: {\n      position: 'absolute',\n      insetBlockStart: 'inset.none',\n      insetInlineStart: 'inset.none',\n      width: 'fill',\n      height: 'fill',\n      pointerEvents: 'none',\n    },\n    marker: {\n      position: 'absolute',\n      insetBlockStart: 'inset.none',\n      insetInlineStart: 'inset.none',\n      width: 'fill',\n      height: 'fill',\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      paddingBlockStart: 'inset.compact',\n      '&::before': {\n        content: '\"\"',\n        paddingBlockStart: 'inset.compact',\n        borderInlineStartWidth: 'hairline',\n        borderInlineStartStyle: 'solid',\n        borderInlineStartColor: 'border.strong',\n        transitionProperty: 'colors',\n        transitionDuration: 'interaction',\n        transitionTimingFunction: 'interaction',\n      },\n      '&[data-state=at-value]::before': { borderInlineStartColor: 'primary.default' },\n      '&[data-disabled]::before': { borderInlineStartColor: 'border.muted' },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        control: { width: 'control.md', height: 'control.md' },\n        valueText: { textStyle: 'detail' },\n      },\n      sm: {\n        control: { width: 'control.lg', height: 'control.lg' },\n        valueText: { textStyle: 'body' },\n      },\n      md: {\n        control: { width: 'control.xl', height: 'control.xl' },\n        valueText: { textStyle: 'body' },\n      },\n      lg: {\n        control: { width: 'control.xl', height: 'control.xl', padding: 'inset.control' },\n        valueText: { textStyle: 'body' },\n      },\n      xl: {\n        control: { width: 'control.xl', height: 'control.xl', padding: 'inset.surface' },\n        label: { textStyle: 'body' },\n        valueText: { textStyle: 'subtitle' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

package/dist/components/angle-slider/index.d.mts

@@ -0,0 +1,2 @@
+import { AngleSlider, AngleSliderRootProps, AngleSliderValueChangeDetails } from "./angle-slider.mjs";
+export { AngleSlider, type AngleSliderRootProps, type AngleSliderValueChangeDetails };

package/dist/components/angle-slider/index.mjs

@@ -0,0 +1,2 @@
+import { AngleSlider } from "./angle-slider.mjs";
+export { AngleSlider };

package/dist/components/avatar/avatar.d.mts

@@ -0,0 +1,18 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/avatar/avatar.d.ts
+export type AvatarLoadStatus = 'error' | 'loaded';
+export interface AvatarStatusChangeDetails {
+  readonly status: AvatarLoadStatus;
+}
+export interface AvatarRootProps {
+  /** 이미지가 로드되거나 실패할 때 알림을 받습니다. */
+  onStatusChange?: (details: AvatarStatusChangeDetails) => void;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const Avatar: SynapseComponent<"fallback" | "image" | "root", "root", AvatarRootProps, never>;
+//#endregion
+//# sourceMappingURL=avatar.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.mts","names":[],"sources":["../../../src/components/avatar/avatar.tsx"],"mappings":";;;YAaY;iBAEK;WACN,QAAQ;;iBAGF;;EAEf,kBAAkB,SAAS;;EAE3B,OAAO;;EAEP;;qBAYW,QAAM,wDAAA"}

package/dist/components/avatar/avatar.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { devWarn } from "../../system/dev-warn.mjs";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { user } from "../../icons/src/user.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { avatarRecipe } from "./avatar.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { visuallyHiddenStyle } from "@zag-js/dom-query";
+import * as avatar from "@zag-js/avatar";
+//#region src/components/avatar/avatar.tsx
+function AvatarImage(props) {
+	devWarn(props.alt === void 0, "<Avatar.Image> was rendered without `alt`. Name the person the picture shows, or pass `alt=\"\"` when a name is already written next to the avatar.");
+	return /* @__PURE__ */ jsx("img", { ...props });
+}
+const Avatar = defineComponent()({
+	name: "Avatar",
+	module: avatar,
+	rootPart: "root",
+	elements: {
+		image: AvatarImage,
+		fallback: "span"
+	},
+	defaultContent: { fallback: (_api, translate) => [/* @__PURE__ */ jsx(Icon, { icon: user }, "icon"), /* @__PURE__ */ jsx("span", {
+		style: visuallyHiddenStyle,
+		children: translate("avatar.fallback.label")
+	}, "label")] },
+	variantProps: ["size"],
+	slots: (props) => avatarRecipe({ size: resolveSize(props.size, "Avatar") })
+});
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=avatar.mjs.map

package/dist/components/avatar/avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.mjs","names":[],"sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["'use client'\n\nimport { user } from '@neurocle/synapse-icons'\nimport * as avatar from '@zag-js/avatar'\nimport { visuallyHiddenStyle } from '@zag-js/dom-query'\nimport type { ComponentProps, ReactNode } from 'react'\n\nimport { avatarRecipe } from '#/components/avatar/avatar.recipe.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport { devWarn } from '#/system/dev-warn.ts'\n\nexport type AvatarLoadStatus = 'error' | 'loaded'\n\nexport interface AvatarStatusChangeDetails {\n  readonly status: AvatarLoadStatus\n}\n\nexport interface AvatarRootProps {\n  /** 이미지가 로드되거나 실패할 때 알림을 받습니다. */\n  onStatusChange?: (details: AvatarStatusChangeDetails) => void\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nfunction AvatarImage(props: ComponentProps<'img'>): ReactNode {\n  devWarn(\n    props.alt === undefined,\n    '<Avatar.Image> was rendered without `alt`. Name the person the picture shows, or pass ' +\n      '`alt=\"\"` when a name is already written next to the avatar.',\n  )\n  return <img {...props} />\n}\n\nexport const Avatar = defineComponent<AvatarRootProps>()({\n  name: 'Avatar',\n  module: avatar,\n  rootPart: 'root',\n  elements: { image: AvatarImage, fallback: 'span' },\n  defaultContent: {\n    fallback: (_api, translate) => [\n      <Icon key=\"icon\" icon={user} />,\n      <span key=\"label\" style={visuallyHiddenStyle}>\n        {translate('avatar.fallback.label')}\n      </span>,\n    ],\n  },\n  variantProps: ['size'],\n  slots: (props: AvatarRootProps) => avatarRecipe({ size: resolveSize(props.size, 'Avatar') }),\n})\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAS,YAAY,OAAyC;CAC5D,QACE,MAAM,QAAQ,KAAA,GACd,qJAEF;CACA,OAAO,oBAAC,OAAD,EAAK,GAAI,MAAQ,CAAA;AAC1B;AAEA,MAAa,SAAS,gBAAiC,CAAC,CAAC;CACvD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EAAE,OAAO;EAAa,UAAU;CAAO;CACjD,gBAAgB,EACd,WAAW,MAAM,cAAc,CAC7B,oBAAC,MAAD,EAAiB,MAAM,KAAO,GAApB,MAAoB,GAC9B,oBAAC,QAAD;EAAkB,OAAO;EACtB,UAAA,UAAU,uBAAuB;CAC9B,GAFI,OAEJ,CACR,EACF;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UAA2B,aAAa,EAAE,MAAM,YAAY,MAAM,MAAM,QAAQ,EAAE,CAAC;AAC7F,CAAC"}

package/dist/components/avatar/avatar.recipe.mjs

@@ -0,0 +1,113 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/avatar/avatar.recipe.ts
+const avatarRecipe = sva({
+	slots: [
+		"root",
+		"image",
+		"fallback"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			overflow: "hidden",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			rounded: "pill",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			bg: "secondary.default",
+			color: "secondary.foreground",
+			userSelect: "none"
+		},
+		image: {
+			width: "fill",
+			height: "fill",
+			objectFit: "cover"
+		},
+		fallback: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "fill",
+			height: "fill",
+			textTransform: "uppercase"
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: {
+				width: "control.xs",
+				height: "control.xs"
+			},
+			fallback: {
+				textStyle: "caption",
+				"& svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			}
+		},
+		sm: {
+			root: {
+				width: "control.sm",
+				height: "control.sm"
+			},
+			fallback: {
+				textStyle: "caption",
+				"& svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				}
+			}
+		},
+		md: {
+			root: {
+				width: "control.md",
+				height: "control.md"
+			},
+			fallback: {
+				textStyle: "label",
+				"& svg": {
+					width: "icon.md",
+					height: "icon.md"
+				}
+			}
+		},
+		lg: {
+			root: {
+				width: "control.lg",
+				height: "control.lg"
+			},
+			fallback: {
+				textStyle: "label",
+				"& svg": {
+					width: "icon.lg",
+					height: "icon.lg"
+				}
+			}
+		},
+		xl: {
+			root: {
+				width: "control.xl",
+				height: "control.xl"
+			},
+			fallback: {
+				textStyle: "subtitle",
+				"& svg": {
+					width: "icon.xl",
+					height: "icon.xl"
+				}
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { avatarRecipe };
+
+//# sourceMappingURL=avatar.recipe.mjs.map