@neurocle/synapse-react 0.0.0-bootstrap

package/dist/components/clipboard/clipboard.d.mts

@@ -0,0 +1,26 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { ValueChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/clipboard/clipboard.d.ts
+export interface ClipboardStatusChangeDetails {
+  readonly copied: boolean;
+}
+export interface ClipboardRootProps {
+  /** 복사되는 문자열이며, 제어됩니다. */
+  value?: string;
+  /** 비제어 초기 문자열. `value`가 주어지면 무시됩니다. */
+  defaultValue?: string;
+  /** 제어 여부와 무관하게 문자열이 바뀔 때마다 알림을 받습니다. */
+  onValueChange?: (details: ValueChangeDetails<string>) => void;
+  /** 복사가 성공할 때, 그리고 확인 표시가 사라질 때 다시 알림을 받습니다. */
+  onStatusChange?: (details: ClipboardStatusChangeDetails) => void;
+  /** 확인 표시가 유지되는 시간이며, 밀리초 단위입니다. 기본값은 3000입니다. */
+  timeout?: number;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const Clipboard: SynapseComponent<"control" | "indicator" | "input" | "label" | "root" | "trigger", "root", ClipboardRootProps, never>;
+//#endregion
+//# sourceMappingURL=clipboard.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.mts","names":[],"sources":["../../../src/components/clipboard/clipboard.tsx"],"mappings":";;;;iBAgBiB;WACN;;iBAGM;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,kBAAkB,SAAS;;EAE3B;;EAEA,OAAO;;EAEP;;qBAmCW,WAAS,2FAAA"}

package/dist/components/clipboard/clipboard.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import { copy } from "../../icons/src/copy.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { rootContextOf } from "../../system/context.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { buttonPartClass } from "../../shared/button-style.mjs";
+import { clipboardRecipe } from "./clipboard.recipe.mjs";
+import { Children, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import { visuallyHiddenStyle } from "@zag-js/dom-query";
+import * as clipboard from "@zag-js/clipboard";
+//#region src/components/clipboard/clipboard.tsx
+const hasText = (node) => Children.toArray(node).some((child) => {
+	if (typeof child === "string" || typeof child === "number") return String(child).trim() !== "";
+	if (!isValidElement(child)) return false;
+	return hasText(child.props.children);
+});
+const isIndicatorOnly = (children) => {
+	const nodes = Children.toArray(children);
+	return nodes.length > 0 && !hasText(children) && nodes.every((node) => isValidElement(node) && typeof node.type !== "string" && "displayName" in node.type && node.type.displayName === "Clipboard.Indicator");
+};
+function CopyStatus({ copied }) {
+	const translate = useClipboardRootValue()?.translate;
+	return /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"data-visually-hidden": "",
+		style: visuallyHiddenStyle,
+		children: copied && translate !== void 0 ? translate("clipboard.trigger.copiedLabel") : ""
+	});
+}
+const Clipboard = defineComponent()({
+	name: "Clipboard",
+	module: clipboard,
+	rootPart: "root",
+	elements: {
+		control: "div",
+		input: "input",
+		indicator: "span"
+	},
+	getterProps: { indicator: ["copied"] },
+	defaultContent: { indicator: (api, _t, args) => {
+		const copied = args["copied"] ?? api.copied;
+		return /* @__PURE__ */ jsx(Icon, { icon: copied === true ? checkmark : copy });
+	} },
+	amendBehaviorProps: {
+		trigger: (_behaviorProps, _api, _args, _translate, children) => isIndicatorOnly(children) ? { "data-icon-only": "" } : {},
+		indicator: (_behaviorProps, _api, args) => args["copied"] === void 0 ? { hidden: false } : {}
+	},
+	rootOwnedGetters: [{
+		name: "status",
+		getter: "getIndicatorProps",
+		getterArgs: () => [{ copied: true }],
+		render: (_props, api) => /* @__PURE__ */ jsx(CopyStatus, { copied: api.copied })
+	}],
+	machineTranslations: { triggerLabel: (t) => (copied) => copied ? t("clipboard.trigger.copiedLabel") : t("clipboard.trigger.label") },
+	variantProps: ["size"],
+	slots: (props) => {
+		const size = resolveSize(props.size, "Clipboard");
+		return {
+			...clipboardRecipe({ size }),
+			trigger: buttonPartClass({
+				variant: "outline",
+				tone: "neutral",
+				size
+			}, clipboardRecipe.raw({ size }).trigger)
+		};
+	}
+});
+const useClipboardRootValue = rootContextOf(Clipboard)?.useRootValue ?? (() => null);
+//#endregion
+export { Clipboard };
+
+//# sourceMappingURL=clipboard.mjs.map

package/dist/components/clipboard/clipboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.mjs","names":[],"sources":["../../../src/components/clipboard/clipboard.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, copy } from '@neurocle/synapse-icons'\nimport * as clipboard from '@zag-js/clipboard'\nimport { visuallyHiddenStyle } from '@zag-js/dom-query'\nimport { Children, isValidElement, type ReactNode } from 'react'\n\nimport { clipboardRecipe } from '#/components/clipboard/clipboard.recipe.ts'\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport type { Translator } from '#/provider/translations.ts'\nimport { buttonPartClass } from '#/shared/button-style.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { rootContextOf } from '#/system/context.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface ClipboardStatusChangeDetails {\n  readonly copied: boolean\n}\n\nexport interface ClipboardRootProps {\n  /** 복사되는 문자열이며, 제어됩니다. */\n  value?: string\n  /** 비제어 초기 문자열. `value`가 주어지면 무시됩니다. */\n  defaultValue?: string\n  /** 제어 여부와 무관하게 문자열이 바뀔 때마다 알림을 받습니다. */\n  onValueChange?: (details: ValueChangeDetails<string>) => void\n  /** 복사가 성공할 때, 그리고 확인 표시가 사라질 때 다시 알림을 받습니다. */\n  onStatusChange?: (details: ClipboardStatusChangeDetails) => void\n  /** 확인 표시가 유지되는 시간이며, 밀리초 단위입니다. 기본값은 3000입니다. */\n  timeout?: number\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\n// 노드 아래 어디에 있든 텍스트를 찾습니다. indicator 옆의 레이블일 수도, 그 안의 텍스트일 수도 있습니다.\nconst hasText = (node: ReactNode): boolean =>\n  Children.toArray(node).some((child) => {\n    if (typeof child === 'string' || typeof child === 'number') return String(child).trim() !== ''\n    if (!isValidElement<{ children?: ReactNode }>(child)) return false\n    return hasText(child.props.children)\n  })\n\nconst isIndicatorOnly = (children: ReactNode): boolean => {\n  const nodes = Children.toArray(children)\n  return (\n    nodes.length > 0 &&\n    !hasText(children) &&\n    nodes.every(\n      (node) =>\n        isValidElement(node) &&\n        typeof node.type !== 'string' &&\n        'displayName' in node.type &&\n        node.type.displayName === 'Clipboard.Indicator',\n    )\n  )\n}\n\nfunction CopyStatus({ copied }: { copied: boolean }): ReactNode {\n  const translate = useClipboardRootValue()?.translate\n  return (\n    <span role=\"status\" data-visually-hidden=\"\" style={visuallyHiddenStyle}>\n      {copied && translate !== undefined ? translate('clipboard.trigger.copiedLabel') : ''}\n    </span>\n  )\n}\n\nexport const Clipboard = defineComponent<ClipboardRootProps>()({\n  name: 'Clipboard',\n  module: clipboard,\n  rootPart: 'root',\n  elements: { control: 'div', input: 'input', indicator: 'span' },\n  getterProps: { indicator: ['copied'] },\n  defaultContent: {\n    indicator: (api, _t, args) => {\n      const copied = args['copied'] ?? api.copied\n      return <Icon icon={copied === true ? checkmark : copy} />\n    },\n  },\n  amendBehaviorProps: {\n    // indicator만 담은 trigger는 아이콘 버튼이라 정사각형으로 그리고, 옆에 텍스트 레이블이 있으면\n    // 텍스트 버튼입니다. CSS는 텍스트 노드를 볼 수 없어서 part가 직접 알립니다.\n    trigger: (_behaviorProps, _api, _args, _translate, children) =>\n      isIndicatorOnly(children) ? { 'data-icon-only': '' } : {},\n    indicator: (_behaviorProps, _api, args) =>\n      args['copied'] === undefined ? { hidden: false } : {},\n  },\n  rootOwnedGetters: [\n    {\n      name: 'status',\n      getter: 'getIndicatorProps',\n      getterArgs: () => [{ copied: true }],\n      render: (_props, api) => <CopyStatus copied={api.copied} />,\n    },\n  ],\n  machineTranslations: {\n    triggerLabel:\n      (t: Translator) =>\n      (copied: boolean): string =>\n        copied ? t('clipboard.trigger.copiedLabel') : t('clipboard.trigger.label'),\n  },\n  variantProps: ['size'],\n  slots: (props: ClipboardRootProps) => {\n    const size = resolveSize(props.size, 'Clipboard')\n    return {\n      ...clipboardRecipe({ size }),\n      trigger: buttonPartClass(\n        { variant: 'outline', tone: 'neutral', size },\n        clipboardRecipe.raw({ size }).trigger,\n      ),\n    }\n  },\n})\n\nconst useClipboardRootValue = rootContextOf(Clipboard)?.useRootValue ?? (() => null)\n"],"mappings":";;;;;;;;;;;;;;;AAsCA,MAAM,WAAW,SACf,SAAS,QAAQ,IAAI,CAAC,CAAC,MAAM,UAAU;CACrC,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU,OAAO,OAAO,KAAK,CAAC,CAAC,KAAK,MAAM;CAC5F,IAAI,CAAC,eAAyC,KAAK,GAAG,OAAO;CAC7D,OAAO,QAAQ,MAAM,MAAM,QAAQ;AACrC,CAAC;AAEH,MAAM,mBAAmB,aAAiC;CACxD,MAAM,QAAQ,SAAS,QAAQ,QAAQ;CACvC,OACE,MAAM,SAAS,KACf,CAAC,QAAQ,QAAQ,KACjB,MAAM,OACH,SACC,eAAe,IAAI,KACnB,OAAO,KAAK,SAAS,YACrB,iBAAiB,KAAK,QACtB,KAAK,KAAK,gBAAgB,qBAC9B;AAEJ;AAEA,SAAS,WAAW,EAAE,UAA0C;CAC9D,MAAM,YAAY,sBAAsB,CAAC,EAAE;CAC3C,OACE,oBAAC,QAAD;EAAM,MAAK;EAAS,wBAAqB;EAAG,OAAO;EAChD,UAAA,UAAU,cAAc,KAAA,IAAY,UAAU,+BAA+B,IAAI;CAC9E,CAAA;AAEV;AAEA,MAAa,YAAY,gBAAoC,CAAC,CAAC;CAC7D,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EAAE,SAAS;EAAO,OAAO;EAAS,WAAW;CAAO;CAC9D,aAAa,EAAE,WAAW,CAAC,QAAQ,EAAE;CACrC,gBAAgB,EACd,YAAY,KAAK,IAAI,SAAS;EAC5B,MAAM,SAAS,KAAK,aAAa,IAAI;EACrC,OAAO,oBAAC,MAAD,EAAM,MAAM,WAAW,OAAO,YAAY,KAAO,CAAA;CAC1D,EACF;CACA,oBAAoB;EAGlB,UAAU,gBAAgB,MAAM,OAAO,YAAY,aACjD,gBAAgB,QAAQ,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAC;EAC1D,YAAY,gBAAgB,MAAM,SAChC,KAAK,cAAc,KAAA,IAAY,EAAE,QAAQ,MAAM,IAAI,CAAC;CACxD;CACA,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,kBAAkB,CAAC,EAAE,QAAQ,KAAK,CAAC;EACnC,SAAS,QAAQ,QAAQ,oBAAC,YAAD,EAAY,QAAQ,IAAI,OAAS,CAAA;CAC5D,CACF;CACA,qBAAqB,EACnB,eACG,OACA,WACC,SAAS,EAAE,+BAA+B,IAAI,EAAE,yBAAyB,EAC/E;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UAA8B;EACpC,MAAM,OAAO,YAAY,MAAM,MAAM,WAAW;EAChD,OAAO;GACL,GAAG,gBAAgB,EAAE,KAAK,CAAC;GAC3B,SAAS,gBACP;IAAE,SAAS;IAAW,MAAM;IAAW;GAAK,GAC5C,gBAAgB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAChC;EACF;CACF;AACF,CAAC;AAED,MAAM,wBAAwB,cAAc,SAAS,CAAC,EAAE,uBAAuB"}

package/dist/components/clipboard/clipboard.recipe.mjs

@@ -0,0 +1,119 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/clipboard/clipboard.recipe.ts
+const clipboardRecipe = sva({
+	slots: [
+		"root",
+		"control",
+		"trigger",
+		"indicator",
+		"input",
+		"label"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline",
+			width: "fill",
+			color: "foreground.default"
+		},
+		control: {
+			display: "flex",
+			alignItems: "stretch",
+			gap: "gap.related",
+			width: "fill",
+			minHeight: "target.minimum"
+		},
+		trigger: { "&[data-copied] svg": { color: "success.default" } },
+		indicator: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "gap.inline",
+			flexShrink: 0,
+			pointerEvents: "none",
+			_empty: { display: "none" }
+		},
+		input: {
+			flex: "1",
+			minWidth: "target.minimum",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			bg: "surface.raised",
+			color: "foreground.default",
+			textStyle: "code",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			"&:hover:not(:disabled, [data-disabled], :focus)": { borderColor: "primary.default" },
+			_focus: {
+				borderColor: "border.focus",
+				outlineStyle: "solid",
+				outlineWidth: "hairline",
+				outlineOffset: "inset.none",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				bg: "background.muted",
+				color: "foreground.disabled"
+			}
+		},
+		label: { color: "foreground.muted" }
+	},
+	variants: { size: {
+		xs: {
+			label: { textStyle: "caption" },
+			control: { height: "control.xs" },
+			input: { paddingInline: "inset.compact" },
+			indicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			label: { textStyle: "caption" },
+			control: { height: "control.sm" },
+			input: { paddingInline: "inset.control" },
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			label: { textStyle: "detail" },
+			control: { height: "control.md" },
+			input: { paddingInline: "inset.control" },
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			label: { textStyle: "detail" },
+			control: { height: "control.lg" },
+			input: { paddingInline: "inset.overlay" },
+			indicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			label: { textStyle: "body" },
+			control: { height: "control.xl" },
+			input: { paddingInline: "inset.surface" },
+			indicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { clipboardRecipe };
+
+//# sourceMappingURL=clipboard.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.recipe.mjs","names":[],"sources":["../../../src/components/clipboard/clipboard.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const clipboardRecipe = sva({\n  slots: ['root', 'control', 'trigger', 'indicator', 'input', 'label'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n      width: 'fill',\n      color: 'foreground.default',\n    },\n    control: {\n      display: 'flex',\n      alignItems: 'stretch',\n      gap: 'gap.related',\n      width: 'fill',\n      minHeight: 'target.minimum',\n    },\n    trigger: {\n      '&[data-copied] svg': { color: 'success.default' },\n    },\n    indicator: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 'gap.inline',\n      flexShrink: 0,\n      pointerEvents: 'none',\n      _empty: { display: 'none' },\n    },\n    input: {\n      flex: '1',\n      minWidth: 'target.minimum',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      bg: 'surface.raised',\n      color: 'foreground.default',\n      textStyle: 'code',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      '&:hover:not(:disabled, [data-disabled], :focus)': {\n        borderColor: 'primary.default',\n      },\n      _focus: {\n        borderColor: 'border.focus',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'border.focus',\n      },\n      _disabled: {\n        bg: 'background.muted',\n        color: 'foreground.disabled',\n      },\n    },\n    label: {\n      color: 'foreground.muted',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        label: { textStyle: 'caption' },\n        control: { height: 'control.xs' },\n        input: { paddingInline: 'inset.compact' },\n        indicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        label: { textStyle: 'caption' },\n        control: { height: 'control.sm' },\n        input: { paddingInline: 'inset.control' },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        label: { textStyle: 'detail' },\n        control: { height: 'control.md' },\n        input: { paddingInline: 'inset.control' },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        label: { textStyle: 'detail' },\n        control: { height: 'control.lg' },\n        input: { paddingInline: 'inset.overlay' },\n        indicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        label: { textStyle: 'body' },\n        control: { height: 'control.xl' },\n        input: { paddingInline: 'inset.surface' },\n        indicator: { '& 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;EAAW;EAAW;EAAa;EAAS;CAAO;CACnE,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;GACP,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,KAAK;GACL,OAAO;GACP,WAAW;EACb;EACA,SAAS,EACP,sBAAsB,EAAE,OAAO,kBAAkB,EACnD;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,eAAe;GACf,QAAQ,EAAE,SAAS,OAAO;EAC5B;EACA,OAAO;GACL,MAAM;GACN,UAAU;GACV,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,OAAO;GACP,WAAW;GACX,UAAU;GACV,cAAc;GACd,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,mDAAmD,EACjD,aAAa,kBACf;GACA,QAAQ;IACN,aAAa;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,WAAW;IACT,IAAI;IACJ,OAAO;GACT;EACF;EACA,OAAO,EACL,OAAO,mBACT;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,OAAO,EAAE,WAAW,UAAU;GAC9B,SAAS,EAAE,QAAQ,aAAa;GAChC,OAAO,EAAE,eAAe,gBAAgB;GACxC,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,OAAO,EAAE,WAAW,UAAU;GAC9B,SAAS,EAAE,QAAQ,aAAa;GAChC,OAAO,EAAE,eAAe,gBAAgB;GACxC,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,OAAO,EAAE,WAAW,SAAS;GAC7B,SAAS,EAAE,QAAQ,aAAa;GAChC,OAAO,EAAE,eAAe,gBAAgB;GACxC,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,OAAO,EAAE,WAAW,SAAS;GAC7B,SAAS,EAAE,QAAQ,aAAa;GAChC,OAAO,EAAE,eAAe,gBAAgB;GACxC,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,OAAO,EAAE,WAAW,OAAO;GAC3B,SAAS,EAAE,QAAQ,aAAa;GAChC,OAAO,EAAE,eAAe,gBAAgB;GACxC,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Clipboard, ClipboardRootProps, ClipboardStatusChangeDetails } from "./clipboard.mjs";
+export { Clipboard, type ClipboardRootProps, type ClipboardStatusChangeDetails };

package/dist/components/clipboard/index.mjs

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

package/dist/components/collapsible/collapsible.d.mts

@@ -0,0 +1,21 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { OpenChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/collapsible/collapsible.d.ts
+export interface CollapsibleRootProps {
+  /** 제어되는 열림 상태. */
+  open?: boolean;
+  /** 비제어 초기 열림 상태. `open`이 주어지면 무시됩니다. */
+  defaultOpen?: boolean;
+  /** 제어 여부와 무관하게 공개 영역이 열리거나 닫힐 때마다 알림을 받습니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /** 비활성화된 Collapsible은 자신의 trigger에 반응하지 않습니다. */
+  disabled?: boolean;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const Collapsible: SynapseComponent<"content" | "indicator" | "root" | "trigger", "root", CollapsibleRootProps, never>;
+//#endregion
+//# sourceMappingURL=collapsible.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.mts","names":[],"sources":["../../../src/components/collapsible/collapsible.tsx"],"mappings":";;;;iBAWiB;;EAEf;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB;;EAEA,OAAO;;EAEP;;qBAGW,aAAW,uEAAA"}

package/dist/components/collapsible/collapsible.mjs

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

package/dist/components/collapsible/collapsible.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.mjs","names":[],"sources":["../../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["'use client'\n\nimport { chevronDown } from '@neurocle/synapse-icons'\nimport * as collapsible from '@zag-js/collapsible'\n\nimport { collapsibleRecipe } from '#/components/collapsible/collapsible.recipe.ts'\nimport type { OpenChangeDetails } 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'\n\nexport interface CollapsibleRootProps {\n  /** 제어되는 열림 상태. */\n  open?: boolean\n  /** 비제어 초기 열림 상태. `open`이 주어지면 무시됩니다. */\n  defaultOpen?: boolean\n  /** 제어 여부와 무관하게 공개 영역이 열리거나 닫힐 때마다 알림을 받습니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /** 비활성화된 Collapsible은 자신의 trigger에 반응하지 않습니다. */\n  disabled?: boolean\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nexport const Collapsible = defineComponent<CollapsibleRootProps>()({\n  name: 'Collapsible',\n  module: collapsible,\n  rootPart: 'root',\n  elements: { indicator: 'span' },\n  defaultContent: { indicator: () => <Icon icon={chevronDown} /> },\n  variantProps: ['size'],\n  slots: (props: CollapsibleRootProps) =>\n    collapsibleRecipe({ size: resolveSize(props.size, 'Collapsible') }),\n})\n"],"mappings":";;;;;;;;;;AA0BA,MAAa,cAAc,gBAAsC,CAAC,CAAC;CACjE,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EAAE,WAAW,OAAO;CAC9B,gBAAgB,EAAE,iBAAiB,oBAAC,MAAD,EAAM,MAAM,YAAc,CAAA,EAAE;CAC/D,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,kBAAkB,EAAE,MAAM,YAAY,MAAM,MAAM,aAAa,EAAE,CAAC;AACtE,CAAC"}

package/dist/components/collapsible/collapsible.recipe.mjs

@@ -0,0 +1,159 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/collapsible/collapsible.recipe.ts
+const collapsibleRecipe = sva({
+	slots: [
+		"root",
+		"trigger",
+		"content",
+		"indicator"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			width: "fill"
+		},
+		trigger: {
+			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" }
+			}
+		},
+		content: {
+			overflow: "hidden",
+			color: "foreground.muted",
+			animationDuration: "expand",
+			animationTimingFunction: "interaction",
+			_open: { animationName: "expand" },
+			_closed: { animationName: "collapse" }
+		},
+		indicator: {
+			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: {
+			trigger: {
+				minHeight: "control.xs",
+				paddingInline: "inset.compact",
+				textStyle: "caption"
+			},
+			content: {
+				paddingBlockEnd: "inset.compact",
+				paddingInline: "inset.compact",
+				textStyle: "caption"
+			},
+			indicator: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} }
+		},
+		sm: {
+			trigger: {
+				minHeight: "control.sm",
+				paddingInline: "inset.control",
+				textStyle: "detail"
+			},
+			content: {
+				paddingBlockEnd: "inset.control",
+				paddingInline: "inset.control",
+				textStyle: "caption"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		md: {
+			trigger: {
+				minHeight: "control.md",
+				paddingInline: "inset.control",
+				textStyle: "label"
+			},
+			content: {
+				paddingBlockEnd: "inset.control",
+				paddingInline: "inset.control",
+				textStyle: "detail"
+			},
+			indicator: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		lg: {
+			trigger: {
+				minHeight: "control.lg",
+				paddingInline: "inset.overlay",
+				textStyle: "label"
+			},
+			content: {
+				paddingBlockEnd: "inset.overlay",
+				paddingInline: "inset.overlay",
+				textStyle: "body"
+			},
+			indicator: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} }
+		},
+		xl: {
+			trigger: {
+				minHeight: "control.xl",
+				paddingInline: "inset.surface",
+				textStyle: "subtitle"
+			},
+			content: {
+				paddingBlockEnd: "inset.surface",
+				paddingInline: "inset.surface",
+				textStyle: "body"
+			},
+			indicator: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { collapsibleRecipe };
+
+//# sourceMappingURL=collapsible.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.recipe.mjs","names":[],"sources":["../../../src/components/collapsible/collapsible.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const collapsibleRecipe = sva({\n  slots: ['root', 'trigger', 'content', 'indicator'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      width: 'fill',\n    },\n    trigger: {\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    content: {\n      overflow: 'hidden',\n      color: 'foreground.muted',\n      animationDuration: 'expand',\n      animationTimingFunction: 'interaction',\n      _open: { animationName: 'expand' },\n      _closed: { animationName: 'collapse' },\n    },\n    indicator: {\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        trigger: { minHeight: 'control.xs', paddingInline: 'inset.compact', textStyle: 'caption' },\n        content: {\n          paddingBlockEnd: 'inset.compact',\n          paddingInline: 'inset.compact',\n          textStyle: 'caption',\n        },\n        indicator: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      sm: {\n        trigger: { minHeight: 'control.sm', paddingInline: 'inset.control', textStyle: 'detail' },\n        content: {\n          paddingBlockEnd: 'inset.control',\n          paddingInline: 'inset.control',\n          textStyle: 'caption',\n        },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      md: {\n        trigger: { minHeight: 'control.md', paddingInline: 'inset.control', textStyle: 'label' },\n        content: {\n          paddingBlockEnd: 'inset.control',\n          paddingInline: 'inset.control',\n          textStyle: 'detail',\n        },\n        indicator: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      lg: {\n        trigger: { minHeight: 'control.lg', paddingInline: 'inset.overlay', textStyle: 'label' },\n        content: {\n          paddingBlockEnd: 'inset.overlay',\n          paddingInline: 'inset.overlay',\n          textStyle: 'body',\n        },\n        indicator: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n      },\n      xl: {\n        trigger: { minHeight: 'control.xl', paddingInline: 'inset.surface', textStyle: 'subtitle' },\n        content: {\n          paddingBlockEnd: 'inset.surface',\n          paddingInline: 'inset.surface',\n          textStyle: 'body',\n        },\n        indicator: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,oBAAoB,IAAI;CACnC,OAAO;EAAC;EAAQ;EAAW;EAAW;CAAW;CACjD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,OAAO;EACT;EACA,SAAS;GACP,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,SAAS;GACP,UAAU;GACV,OAAO;GACP,mBAAmB;GACnB,yBAAyB;GACzB,OAAO,EAAE,eAAe,SAAS;GACjC,SAAS,EAAE,eAAe,WAAW;EACvC;EACA,WAAW;GACT,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,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAU;GACzF,SAAS;IACP,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAS;GACxF,SAAS;IACP,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAQ;GACvF,SAAS;IACP,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAQ;GACvF,SAAS;IACP,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,eAAe;IAAiB,WAAW;GAAW;GAC1F,SAAS;IACP,iBAAiB;IACjB,eAAe;IACf,WAAW;GACb;GACA,WAAW,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;EAChE;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Collapsible, CollapsibleRootProps } from "./collapsible.mjs";
+export { Collapsible, type CollapsibleRootProps };

package/dist/components/collapsible/index.mjs

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