@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/timer/timer.mjs

@@ -0,0 +1,98 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { pause } from "../../icons/src/pause.mjs";
+import { play } from "../../icons/src/play.mjs";
+import { reset } from "../../icons/src/reset.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { buttonPartClass } from "../../shared/button-style.mjs";
+import { timerRecipe } from "./timer.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { visuallyHiddenStyle } from "@zag-js/dom-query";
+import * as timer from "@zag-js/timer";
+//#region src/components/timer/timer.tsx
+const TIMER_PARTS = [
+	"days",
+	"hours",
+	"minutes",
+	"seconds",
+	"milliseconds"
+];
+const partOf = (value) => TIMER_PARTS.find((part) => part === value) ?? null;
+const TIMER_ACTIONS = [
+	"start",
+	"pause",
+	"resume",
+	"reset",
+	"restart"
+];
+const actionOf = (value) => TIMER_ACTIONS.find((action) => action === value) ?? null;
+const PART_LABELS = {
+	days: "timer.itemLabel.days",
+	hours: "timer.itemLabel.hours",
+	minutes: "timer.itemLabel.minutes",
+	seconds: "timer.itemLabel.seconds",
+	milliseconds: "timer.itemLabel.milliseconds"
+};
+const ACTION_LABELS = {
+	start: "timer.actionTrigger.start",
+	pause: "timer.actionTrigger.pause",
+	resume: "timer.actionTrigger.resume",
+	reset: "timer.actionTrigger.reset",
+	restart: "timer.actionTrigger.restart"
+};
+const Timer = defineComponent()({
+	name: "Timer",
+	module: timer,
+	rootPart: "root",
+	elements: {
+		control: "div",
+		item: "span",
+		itemValue: "span",
+		itemLabel: "span",
+		separator: "span"
+	},
+	defaultContent: {
+		itemValue: (api, _translate, getterArgs) => {
+			const part = partOf(getterArgs["type"]);
+			return part === null ? "" : api.formattedTime[part];
+		},
+		itemLabel: (_api, translate, getterArgs) => {
+			const part = partOf(getterArgs["type"]);
+			return part === null ? "" : translate(PART_LABELS[part]);
+		},
+		actionTrigger: (_api, translate, getterArgs) => {
+			const action = actionOf(getterArgs["action"]);
+			const icon = action === "pause" ? pause : action === "reset" || action === "restart" ? reset : play;
+			const key = action === null ? void 0 : ACTION_LABELS[action];
+			return [/* @__PURE__ */ jsx(Icon, { icon }, "icon"), key === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				style: visuallyHiddenStyle,
+				children: translate(key)
+			}, "label")];
+		}
+	},
+	getterProps: {
+		item: ["type"],
+		itemValue: ["type"],
+		itemLabel: ["type"],
+		actionTrigger: ["action"]
+	},
+	machineTranslations: { areaLabel: (t) => () => t("timer.area.label") },
+	variantProps: ["size"],
+	slots: (props) => {
+		const size = resolveSize(props.size, "Timer");
+		return {
+			...timerRecipe({ size }),
+			actionTrigger: buttonPartClass({
+				variant: "outline",
+				tone: "neutral",
+				size
+			}, timerRecipe.raw({ size }).actionTrigger)
+		};
+	}
+});
+//#endregion
+export { Timer };
+
+//# sourceMappingURL=timer.mjs.map

package/dist/components/timer/timer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.mjs","names":[],"sources":["../../../src/components/timer/timer.tsx"],"sourcesContent":["'use client'\n\nimport { pause, play, reset } from '@neurocle/synapse-icons'\nimport { visuallyHiddenStyle } from '@zag-js/dom-query'\nimport * as timer from '@zag-js/timer'\n\nimport { timerRecipe } from '#/components/timer/timer.recipe.ts'\nimport type { TranslationKey, 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 { defineComponent } from '#/system/create-component.ts'\n\nexport type TimerPart = 'days' | 'hours' | 'minutes' | 'seconds' | 'milliseconds'\n\nexport type TimerAction = 'start' | 'pause' | 'resume' | 'reset' | 'restart'\n\nexport interface TimerTickDetails {\n  readonly value: number\n}\n\nconst TIMER_PARTS: readonly TimerPart[] = ['days', 'hours', 'minutes', 'seconds', 'milliseconds']\n\nconst partOf = (value: unknown): TimerPart | null =>\n  TIMER_PARTS.find((part) => part === value) ?? null\n\nconst TIMER_ACTIONS: readonly TimerAction[] = ['start', 'pause', 'resume', 'reset', 'restart']\n\nconst actionOf = (value: unknown): TimerAction | null =>\n  TIMER_ACTIONS.find((action) => action === value) ?? null\n\nconst PART_LABELS: Readonly<Record<TimerPart, TranslationKey>> = {\n  days: 'timer.itemLabel.days',\n  hours: 'timer.itemLabel.hours',\n  minutes: 'timer.itemLabel.minutes',\n  seconds: 'timer.itemLabel.seconds',\n  milliseconds: 'timer.itemLabel.milliseconds',\n}\n\nconst ACTION_LABELS: Readonly<Record<TimerAction, TranslationKey>> = {\n  start: 'timer.actionTrigger.start',\n  pause: 'timer.actionTrigger.pause',\n  resume: 'timer.actionTrigger.resume',\n  reset: 'timer.actionTrigger.reset',\n  restart: 'timer.actionTrigger.restart',\n}\n\nexport interface TimerRootProps {\n  /** 올려 세지 않고 내려 세요. */\n  countdown?: boolean\n  /** 세기가 시작되는 지점(밀리초). */\n  startMs?: number\n  /** 세기가 끝나는 지점(밀리초). */\n  targetMs?: number\n  /** 마운트되자마자 시작합니다. */\n  autoStart?: boolean\n  /** 셈이 갱신되는 주기(밀리초). 기본값은 1000입니다. */\n  interval?: number\n  /** 매 틱마다 호출됩니다. */\n  onTick?: (details: TimerTickDetails) => void\n  /** 목표 지점에 닿았을 때 한 번 호출됩니다. */\n  onComplete?: () => void\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const Timer = defineComponent<TimerRootProps>()({\n  name: 'Timer',\n  module: timer,\n  rootPart: 'root',\n  elements: {\n    control: 'div',\n    item: 'span',\n    itemValue: 'span',\n    itemLabel: 'span',\n    separator: 'span',\n  },\n  defaultContent: {\n    itemValue: (api, _translate, getterArgs) => {\n      const part = partOf(getterArgs['type'])\n      return part === null ? '' : api.formattedTime[part]\n    },\n    itemLabel: (_api, translate, getterArgs) => {\n      const part = partOf(getterArgs['type'])\n      return part === null ? '' : translate(PART_LABELS[part])\n    },\n    actionTrigger: (_api, translate, getterArgs) => {\n      const action = actionOf(getterArgs['action'])\n      const icon =\n        action === 'pause' ? pause : action === 'reset' || action === 'restart' ? reset : play\n      const key = action === null ? undefined : ACTION_LABELS[action]\n      return [\n        <Icon key=\"icon\" icon={icon} />,\n        key === undefined ? null : (\n          <span key=\"label\" style={visuallyHiddenStyle}>\n            {translate(key)}\n          </span>\n        ),\n      ]\n    },\n  },\n  getterProps: {\n    item: ['type'],\n    itemValue: ['type'],\n    itemLabel: ['type'],\n    actionTrigger: ['action'],\n  },\n  machineTranslations: {\n    areaLabel: (t: Translator) => () => t('timer.area.label'),\n  },\n  variantProps: ['size'],\n  slots: (props: TimerRootProps) => {\n    const size = resolveSize(props.size, 'Timer')\n    return {\n      ...timerRecipe({ size }),\n      actionTrigger: buttonPartClass(\n        { variant: 'outline', tone: 'neutral', size },\n        timerRecipe.raw({ size }).actionTrigger,\n      ),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAM,cAAoC;CAAC;CAAQ;CAAS;CAAW;CAAW;AAAc;AAEhG,MAAM,UAAU,UACd,YAAY,MAAM,SAAS,SAAS,KAAK,KAAK;AAEhD,MAAM,gBAAwC;CAAC;CAAS;CAAS;CAAU;CAAS;AAAS;AAE7F,MAAM,YAAY,UAChB,cAAc,MAAM,WAAW,WAAW,KAAK,KAAK;AAEtD,MAAM,cAA2D;CAC/D,MAAM;CACN,OAAO;CACP,SAAS;CACT,SAAS;CACT,cAAc;AAChB;AAEA,MAAM,gBAA+D;CACnE,OAAO;CACP,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAuBA,MAAa,QAAQ,gBAAgC,CAAC,CAAC;CACrD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,SAAS;EACT,MAAM;EACN,WAAW;EACX,WAAW;EACX,WAAW;CACb;CACA,gBAAgB;EACd,YAAY,KAAK,YAAY,eAAe;GAC1C,MAAM,OAAO,OAAO,WAAW,OAAO;GACtC,OAAO,SAAS,OAAO,KAAK,IAAI,cAAc;EAChD;EACA,YAAY,MAAM,WAAW,eAAe;GAC1C,MAAM,OAAO,OAAO,WAAW,OAAO;GACtC,OAAO,SAAS,OAAO,KAAK,UAAU,YAAY,KAAK;EACzD;EACA,gBAAgB,MAAM,WAAW,eAAe;GAC9C,MAAM,SAAS,SAAS,WAAW,SAAS;GAC5C,MAAM,OACJ,WAAW,UAAU,QAAQ,WAAW,WAAW,WAAW,YAAY,QAAQ;GACpF,MAAM,MAAM,WAAW,OAAO,KAAA,IAAY,cAAc;GACxD,OAAO,CACL,oBAAC,MAAD,EAAuB,KAAO,GAApB,MAAoB,GAC9B,QAAQ,KAAA,IAAY,OAClB,oBAAC,QAAD;IAAkB,OAAO;IACtB,UAAA,UAAU,GAAG;GACV,GAFI,OAEJ,CAEV;EACF;CACF;CACA,aAAa;EACX,MAAM,CAAC,MAAM;EACb,WAAW,CAAC,MAAM;EAClB,WAAW,CAAC,MAAM;EAClB,eAAe,CAAC,QAAQ;CAC1B;CACA,qBAAqB,EACnB,YAAY,YAAwB,EAAE,kBAAkB,EAC1D;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UAA0B;EAChC,MAAM,OAAO,YAAY,MAAM,MAAM,OAAO;EAC5C,OAAO;GACL,GAAG,YAAY,EAAE,KAAK,CAAC;GACvB,eAAe,gBACb;IAAE,SAAS;IAAW,MAAM;IAAW;GAAK,GAC5C,YAAY,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,aAC5B;EACF;CACF;AACF,CAAC"}

package/dist/components/timer/timer.recipe.mjs

@@ -0,0 +1,99 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/timer/timer.recipe.ts
+const timerRecipe = sva({
+	slots: [
+		"root",
+		"area",
+		"control",
+		"item",
+		"itemValue",
+		"itemLabel",
+		"actionTrigger",
+		"separator"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: "gap.related",
+			color: "foreground.default"
+		},
+		area: {
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "gap.inline"
+		},
+		control: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline"
+		},
+		item: {
+			display: "inline-flex",
+			flexDirection: "column",
+			alignItems: "center"
+		},
+		itemValue: {
+			fontVariantNumeric: "tabular-nums",
+			color: "foreground.default"
+		},
+		itemLabel: {
+			textStyle: "caption",
+			color: "foreground.subtle"
+		},
+		actionTrigger: { minWidth: "target.minimum" },
+		separator: {
+			color: "foreground.subtle",
+			fontVariantNumeric: "tabular-nums"
+		}
+	},
+	variants: { size: {
+		xs: {
+			actionTrigger: { "&:has(> svg[data-synapse-icon])": {
+				width: "control.xs",
+				paddingInline: "inset.none"
+			} },
+			itemValue: { textStyle: "label" },
+			separator: { textStyle: "label" }
+		},
+		sm: {
+			actionTrigger: { "&:has(> svg[data-synapse-icon])": {
+				width: "control.sm",
+				paddingInline: "inset.none"
+			} },
+			itemValue: { textStyle: "body" },
+			separator: { textStyle: "body" }
+		},
+		md: {
+			actionTrigger: { "&:has(> svg[data-synapse-icon])": {
+				width: "control.md",
+				paddingInline: "inset.none"
+			} },
+			itemValue: { textStyle: "subtitle" },
+			separator: { textStyle: "subtitle" }
+		},
+		lg: {
+			actionTrigger: { "&:has(> svg[data-synapse-icon])": {
+				width: "control.lg",
+				paddingInline: "inset.none"
+			} },
+			itemValue: { textStyle: "title" },
+			separator: { textStyle: "title" }
+		},
+		xl: {
+			actionTrigger: { "&:has(> svg[data-synapse-icon])": {
+				width: "control.xl",
+				paddingInline: "inset.none"
+			} },
+			itemValue: { textStyle: "display" },
+			itemLabel: { textStyle: "label" },
+			separator: { textStyle: "display" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { timerRecipe };
+
+//# sourceMappingURL=timer.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timer.recipe.mjs","names":[],"sources":["../../../src/components/timer/timer.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const timerRecipe = sva({\n  slots: [\n    'root',\n    'area',\n    'control',\n    'item',\n    'itemValue',\n    'itemLabel',\n    'actionTrigger',\n    'separator',\n  ],\n  base: {\n    root: {\n      display: 'inline-flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: 'gap.related',\n      color: 'foreground.default',\n    },\n    area: {\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: 'gap.inline',\n    },\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n    },\n    item: {\n      display: 'inline-flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n    },\n    itemValue: {\n      fontVariantNumeric: 'tabular-nums',\n      color: 'foreground.default',\n    },\n    itemLabel: {\n      textStyle: 'caption',\n      color: 'foreground.subtle',\n    },\n    actionTrigger: { minWidth: 'target.minimum' },\n    separator: {\n      color: 'foreground.subtle',\n      fontVariantNumeric: 'tabular-nums',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        actionTrigger: {\n          '&:has(> svg[data-synapse-icon])': { width: 'control.xs', paddingInline: 'inset.none' },\n        },\n        itemValue: { textStyle: 'label' },\n        separator: { textStyle: 'label' },\n      },\n      sm: {\n        actionTrigger: {\n          '&:has(> svg[data-synapse-icon])': { width: 'control.sm', paddingInline: 'inset.none' },\n        },\n        itemValue: { textStyle: 'body' },\n        separator: { textStyle: 'body' },\n      },\n      md: {\n        actionTrigger: {\n          '&:has(> svg[data-synapse-icon])': { width: 'control.md', paddingInline: 'inset.none' },\n        },\n        itemValue: { textStyle: 'subtitle' },\n        separator: { textStyle: 'subtitle' },\n      },\n      lg: {\n        actionTrigger: {\n          '&:has(> svg[data-synapse-icon])': { width: 'control.lg', paddingInline: 'inset.none' },\n        },\n        itemValue: { textStyle: 'title' },\n        separator: { textStyle: 'title' },\n      },\n      xl: {\n        actionTrigger: {\n          '&:has(> svg[data-synapse-icon])': { width: 'control.xl', paddingInline: 'inset.none' },\n        },\n        itemValue: { textStyle: 'display' },\n        itemLabel: { textStyle: 'label' },\n        separator: { textStyle: 'display' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,cAAc,IAAI;CAC7B,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK;GACL,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;EACd;EACA,WAAW;GACT,oBAAoB;GACpB,OAAO;EACT;EACA,WAAW;GACT,WAAW;GACX,OAAO;EACT;EACA,eAAe,EAAE,UAAU,iBAAiB;EAC5C,WAAW;GACT,OAAO;GACP,oBAAoB;EACtB;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,eAAe,EACb,mCAAmC;IAAE,OAAO;IAAc,eAAe;GAAa,EACxF;GACA,WAAW,EAAE,WAAW,QAAQ;GAChC,WAAW,EAAE,WAAW,QAAQ;EAClC;EACA,IAAI;GACF,eAAe,EACb,mCAAmC;IAAE,OAAO;IAAc,eAAe;GAAa,EACxF;GACA,WAAW,EAAE,WAAW,OAAO;GAC/B,WAAW,EAAE,WAAW,OAAO;EACjC;EACA,IAAI;GACF,eAAe,EACb,mCAAmC;IAAE,OAAO;IAAc,eAAe;GAAa,EACxF;GACA,WAAW,EAAE,WAAW,WAAW;GACnC,WAAW,EAAE,WAAW,WAAW;EACrC;EACA,IAAI;GACF,eAAe,EACb,mCAAmC;IAAE,OAAO;IAAc,eAAe;GAAa,EACxF;GACA,WAAW,EAAE,WAAW,QAAQ;GAChC,WAAW,EAAE,WAAW,QAAQ;EAClC;EACA,IAAI;GACF,eAAe,EACb,mCAAmC;IAAE,OAAO;IAAc,eAAe;GAAa,EACxF;GACA,WAAW,EAAE,WAAW,UAAU;GAClC,WAAW,EAAE,WAAW,QAAQ;GAChC,WAAW,EAAE,WAAW,UAAU;EACpC;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { Toast, ToastAction, ToastOptions, ToastPlacement, ToastProvider, ToastProviderProps, ToastRootProps, ToastType, Toaster, ToasterOptions, createToaster, useToast } from "./toast.mjs";
+export { Toast, type ToastAction, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastRootProps, type ToastType, type Toaster, type ToasterOptions, createToaster, useToast };

package/dist/components/toast/index.mjs

@@ -0,0 +1,2 @@
+import { Toast, ToastProvider, createToaster, useToast } from "./toast.mjs";
+export { Toast, ToastProvider, createToaster, useToast };

package/dist/components/toast/toast.d.mts

@@ -0,0 +1,55 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { NotificationAction, NotificationPlacement, NotificationType } from "../../shared/notification.mjs";
+import { ReactNode } from "react";
+//#region src/components/toast/toast.d.ts
+export type ToastPlacement = NotificationPlacement;
+export type ToastType = NotificationType;
+export type ToastAction = NotificationAction;
+export interface ToastOptions {
+  title?: ReactNode;
+  type?: ToastType;
+  duration?: number;
+  id?: string;
+  onStatusChange?: (details: {
+    status: string;
+  }) => void;
+}
+export interface ToasterOptions {
+  placement?: ToastPlacement;
+  duration?: number;
+  removeDelay?: number;
+  pauseOnPageIdle?: boolean;
+}
+export interface Toaster {
+  create: (options: ToastOptions) => string;
+  update: (id: string, options: ToastOptions) => string;
+  dismiss: (id?: string) => void;
+  remove: (id?: string) => void;
+}
+export interface ToastRootProps {
+  /**
+   * 이 영역이 렌더하는 토스터입니다.
+   *
+   * 선택 사항인 이유는 보통 `ToastProvider`로 들어오기 때문입니다. 트리를 감싼 제품은 어느 큐인지
+   * 이미 말한 셈이고, 영역에서 그것을 되풀이하면 둘이 어긋날 수 있는 자리가 하나 더 생깁니다.
+   */
+  toaster?: Toaster;
+  /** 이 영역에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare function createToaster(options?: ToasterOptions): Toaster;
+export interface ToastProviderProps {
+  toaster: Toaster;
+  children?: ReactNode;
+}
+export declare function ToastProvider({ toaster, children }: ToastProviderProps): ReactNode;
+export declare const Toast: SynapseComponent<"actionTrigger" | "closeTrigger" | "description" | "group" | "root" | "title", "group", ToastRootProps, "actionTrigger" | "closeTrigger" | "description" | "root" | "title">;
+export declare function useToast(): Toaster;
+//#endregion
+//# sourceMappingURL=toast.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.mts","names":[],"sources":["../../../src/components/toast/toast.tsx"],"mappings":";;;;;;YA4BY,iBAAiB;YAEjB,YAAY;YAEZ,cAAc;iBAET;EACf,QAAQ;EACR,OAAO;EACP;EACA;EACA,kBAAkB;IAAW;;;iBAGd;EACf,YAAY;EACZ;EACA;EACA;;iBAGe;EACf,SAAS,SAAS;EAClB,SAAS,YAAY,SAAS;EAC9B,UAAU;EACV,SAAS;;iBAGM;;;;;;;EAOf,UAAU;;EAEV,eAAe;;EAEf,OAAO;;EAEP;;wBASc,cAAc,UAAS,iBAAsB;iBAyC5C;EACf,SAAS;EACT,WAAW;;wBAGG,gBAAgB,SAAS,YAAY,qBAAqB;qBA2C7D,OAAK,yGAAA;wBA6GF,YAAY"}

package/dist/components/toast/toast.mjs

@@ -0,0 +1,194 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import { close } from "../../icons/src/close.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 { rootContextOf } from "../../system/context.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { DEFAULT_LAYER_BASE, LAYER_BASE_VAR } from "../../shared/layering.mjs";
+import { defineController } from "../../shared/controller.mjs";
+import { toastRecipe } from "./toast.recipe.mjs";
+import { NOTIFICATION_GROUP_MACHINE_PROPS, NOTIFICATION_MACHINE_PROPS, titleWithStatus, toMachineOptions, useQueueOrderedParent } from "../../shared/notification.mjs";
+import { createContext, createElement, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as toast from "@zag-js/toast";
+//#region src/components/toast/toast.tsx
+const storeOf = /* @__PURE__ */ new WeakMap();
+const toasterOf = /* @__PURE__ */ new WeakMap();
+const TOAST_DURATION = 3e3;
+function createToaster(options = {}) {
+	return toasterFor(toast.createStore({
+		placement: options.placement ?? "bottom",
+		max: 1,
+		overlap: false,
+		duration: options.duration ?? TOAST_DURATION,
+		gap: 8,
+		removeDelay: options.removeDelay ?? 120,
+		pauseOnPageIdle: options.pauseOnPageIdle ?? true
+	}));
+}
+function toasterFor(store) {
+	const cached = toasterOf.get(store);
+	if (cached !== void 0) return cached;
+	const commands = store;
+	const toaster = Object.freeze({
+		create: (given) => {
+			commands.dismiss();
+			return commands.create(toMachineOptions({
+				...given,
+				closable: true
+			}));
+		},
+		update: (id, given) => commands.update(id, toMachineOptions({
+			...given,
+			closable: true
+		})),
+		dismiss: (id) => {
+			commands.dismiss(id);
+		},
+		remove: (id) => {
+			commands.remove(id);
+		}
+	});
+	storeOf.set(toaster, store);
+	toasterOf.set(store, toaster);
+	return toaster;
+}
+const ToasterContext = createContext(null);
+function ToastProvider({ toaster, children }) {
+	return createElement(ToasterContext.Provider, { value: toaster }, children);
+}
+const TOAST_ICON = {
+	success: checkmark,
+	error,
+	warning,
+	info
+};
+const STATUS_LABEL = {
+	success: "toast.title.success",
+	error: "toast.title.error",
+	warning: "toast.title.warning",
+	info: "toast.title.info"
+};
+const isRecord = (value) => typeof value === "object" && value !== null;
+function toastItems(api) {
+	return api.getToasts().map((queued, index) => /* @__PURE__ */ jsx(ToastItemView, {
+		toast: queued,
+		index
+	}, queued.id ?? String(index)));
+}
+function ToastItemView({ toast: queued, index }) {
+	return /* @__PURE__ */ jsxs(ToastItem.Root, {
+		toast: queued,
+		index,
+		children: [/* @__PURE__ */ jsx(ToastItem.Title, {}), queued.closable === false ? null : /* @__PURE__ */ jsx(ToastItem.CloseTrigger, {})]
+	});
+}
+const Toast = defineComponent()({
+	name: "Toast",
+	module: {
+		machine: toast.group.machine,
+		connect: toast.group.connect,
+		anatomy: toast.anatomy
+	},
+	rootPart: "group",
+	machineProps: [...NOTIFICATION_GROUP_MACHINE_PROPS],
+	amendBehaviorProps: { group: (behaviorProps, _api, _args, translate) => ({
+		"aria-label": translate("toast.group.label"),
+		style: {
+			...isRecord(behaviorProps["style"]) ? behaviorProps["style"] : {},
+			zIndex: `calc(var(${LAYER_BASE_VAR}, ${DEFAULT_LAYER_BASE}) + ${DEFAULT_LAYER_BASE})`
+		}
+	}) },
+	unrenderedParts: [
+		"root",
+		"title",
+		"description",
+		"actionTrigger",
+		"closeTrigger"
+	],
+	defaultContent: { group: toastItems },
+	machineTranslations: null,
+	variantProps: ["toaster", "size"],
+	useMachineProps: (props) => {
+		const provided = useContext(ToasterContext);
+		const toaster = props.toaster ?? provided;
+		if (toaster === null) throw new Error("[synapse] <Toast.Root> has no toaster. Pass one, or wrap the tree in <ToastProvider toaster={createToaster()}>.");
+		return { store: storeOf.get(toaster) };
+	},
+	slots: (props) => toastRecipe({ size: resolveSize(props.size, "Toast") })
+});
+const ToastItem = defineComponent()({
+	name: "ToastItem",
+	module: {
+		machine: toast.machine,
+		connect: toast.connect,
+		anatomy: toast.anatomy
+	},
+	rootPart: "root",
+	machineProps: [...NOTIFICATION_MACHINE_PROPS],
+	unrenderedParts: ["group"],
+	elements: { title: "div" },
+	amendBehaviorProps: { root: (behaviorProps) => ({
+		...behaviorProps["data-type"] === "error" ? { role: "alert" } : {},
+		style: {
+			...isRecord(behaviorProps["style"]) ? behaviorProps["style"] : {},
+			zIndex: "var(--z-index)"
+		}
+	}) },
+	defaultContent: {
+		title: (api, t) => titleWithStatus(api, t, TOAST_ICON, STATUS_LABEL),
+		closeTrigger: () => createElement(Icon, { icon: close })
+	},
+	rootOwnedGetters: [{
+		name: "ghostBefore",
+		getter: "getGhostBeforeProps"
+	}, {
+		name: "ghostAfter",
+		getter: "getGhostAfterProps"
+	}],
+	machineTranslations: { closeTriggerLabel: "toast.closeTrigger.label" },
+	variantProps: ["toast"],
+	slots: useGroupSlotClasses,
+	useMachineProps: (props) => ({
+		...props.toast,
+		index: props.index,
+		parent: useQueueOrderedParent(useParentService())
+	})
+});
+function useGroupSlotClasses() {
+	const value = rootContextOf(Toast)?.useRootValue() ?? null;
+	const classes = {};
+	if (value === null) return classes;
+	for (const [slot, className] of Object.entries(value.slotClasses)) if (className !== void 0) classes[slot] = className;
+	return classes;
+}
+function useParentService() {
+	const context = rootContextOf(Toast);
+	if (context === null) throw new Error("[synapse] Toast: the group context is missing, so no toast can be rendered.");
+	const value = context.useRootValue();
+	if (value === null) throw new Error("[synapse] ToastItem must be rendered inside <Toast.Root>.");
+	return value.service;
+}
+const toastController = defineController({
+	component: "Toast",
+	root: "ToastProvider",
+	hook: "useToast",
+	commands: [
+		"create",
+		"update",
+		"dismiss",
+		"remove"
+	]
+});
+function useToast() {
+	return toastController.from(useContext(ToasterContext));
+}
+//#endregion
+export { Toast, ToastProvider, createToaster, useToast };
+
+//# sourceMappingURL=toast.mjs.map

package/dist/components/toast/toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.mjs","names":[],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, close, error, info, warning, type IconGeometry } from '@neurocle/synapse-icons'\nimport * as toast from '@zag-js/toast'\nimport { createContext, createElement, useContext, type ReactNode } from 'react'\n\nimport { toastRecipe } from '#/components/toast/toast.recipe.ts'\nimport type { TranslationKey, TranslationOverrides } from '#/provider/translations.ts'\nimport { defineController } from '#/shared/controller.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { DEFAULT_LAYER_BASE, LAYER_BASE_VAR } from '#/shared/layering.ts'\nimport {\n  DEFAULT_GAP,\n  DEFAULT_REMOVE_DELAY,\n  NOTIFICATION_GROUP_MACHINE_PROPS,\n  NOTIFICATION_MACHINE_PROPS,\n  titleWithStatus,\n  toMachineOptions,\n  type NotificationAction,\n  type NotificationPlacement,\n  type NotificationStoreCommands,\n  type NotificationType,\n  useQueueOrderedParent,\n} from '#/shared/notification.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 type ToastPlacement = NotificationPlacement\n\nexport type ToastType = NotificationType\n\nexport type ToastAction = NotificationAction\n\nexport interface ToastOptions {\n  title?: ReactNode\n  type?: ToastType\n  duration?: number\n  id?: string\n  onStatusChange?: (details: { status: string }) => void\n}\n\nexport interface ToasterOptions {\n  placement?: ToastPlacement\n  duration?: number\n  removeDelay?: number\n  pauseOnPageIdle?: boolean\n}\n\nexport interface Toaster {\n  create: (options: ToastOptions) => string\n  update: (id: string, options: ToastOptions) => string\n  dismiss: (id?: string) => void\n  remove: (id?: string) => void\n}\n\nexport interface ToastRootProps {\n  /**\n   * 이 영역이 렌더하는 토스터입니다.\n   *\n   * 선택 사항인 이유는 보통 `ToastProvider`로 들어오기 때문입니다. 트리를 감싼 제품은 어느 큐인지\n   * 이미 말한 셈이고, 영역에서 그것을 되풀이하면 둘이 어긋날 수 있는 자리가 하나 더 생깁니다.\n   */\n  toaster?: Toaster\n  /** 이 영역에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst storeOf = new WeakMap<Toaster, object>()\n\nconst toasterOf = new WeakMap<object, Toaster>()\n\nconst TOAST_DURATION = 3000\n\nexport function createToaster(options: ToasterOptions = {}): Toaster {\n  return toasterFor(\n    toast.createStore({\n      placement: options.placement ?? 'bottom',\n      max: 1,\n      overlap: false,\n      duration: options.duration ?? TOAST_DURATION,\n      gap: DEFAULT_GAP,\n      removeDelay: options.removeDelay ?? DEFAULT_REMOVE_DELAY,\n      pauseOnPageIdle: options.pauseOnPageIdle ?? true,\n    }),\n  )\n}\n\nfunction toasterFor(store: toast.Store): Toaster {\n  const cached = toasterOf.get(store)\n  if (cached !== undefined) return cached\n\n  const commands: NotificationStoreCommands = store\n  const toaster: Toaster = Object.freeze({\n    create: (given: ToastOptions) => {\n      commands.dismiss()\n      return commands.create(toMachineOptions({ ...given, closable: true }))\n    },\n    update: (id: string, given: ToastOptions) =>\n      commands.update(id, toMachineOptions({ ...given, closable: true })),\n    dismiss: (id?: string) => {\n      commands.dismiss(id)\n    },\n    remove: (id?: string) => {\n      commands.remove(id)\n    },\n  })\n\n  storeOf.set(toaster, store)\n  toasterOf.set(store, toaster)\n  return toaster\n}\n\nconst ToasterContext = createContext<Toaster | null>(null)\n\nexport interface ToastProviderProps {\n  toaster: Toaster\n  children?: ReactNode\n}\n\nexport function ToastProvider({ toaster, children }: ToastProviderProps): ReactNode {\n  return createElement(ToasterContext.Provider, { value: toaster }, children)\n}\n\nconst TOAST_ICON: Readonly<Record<string, IconGeometry>> = {\n  success: checkmark,\n  error,\n  warning,\n  info,\n}\n\nconst STATUS_LABEL: Readonly<Record<string, TranslationKey>> = {\n  success: 'toast.title.success',\n  error: 'toast.title.error',\n  warning: 'toast.title.warning',\n  info: 'toast.title.info',\n}\n\nconst isRecord = (value: unknown): value is Readonly<Record<string, unknown>> =>\n  typeof value === 'object' && value !== null\n\ninterface ToastItemProps {\n  toast: toast.Props\n  index: number\n}\n\nfunction toastItems(api: toast.GroupApi): ReactNode {\n  return api\n    .getToasts()\n    .map((queued, index) => (\n      <ToastItemView key={queued.id ?? String(index)} toast={queued} index={index} />\n    ))\n}\n\nfunction ToastItemView({ toast: queued, index }: ToastItemProps): ReactNode {\n  return (\n    <ToastItem.Root toast={queued} index={index}>\n      <ToastItem.Title />\n      {queued.closable === false ? null : <ToastItem.CloseTrigger />}\n    </ToastItem.Root>\n  )\n}\n\nexport const Toast = defineComponent<ToastRootProps>()({\n  name: 'Toast',\n  module: {\n    machine: toast.group.machine,\n    connect: toast.group.connect,\n    anatomy: toast.anatomy,\n  },\n  rootPart: 'group',\n  machineProps: [...NOTIFICATION_GROUP_MACHINE_PROPS],\n  amendBehaviorProps: {\n    group: (behaviorProps, _api, _args, translate) => ({\n      'aria-label': translate('toast.group.label'),\n      style: {\n        ...(isRecord(behaviorProps['style']) ? behaviorProps['style'] : {}),\n        zIndex: `calc(var(${LAYER_BASE_VAR}, ${DEFAULT_LAYER_BASE}) + ${DEFAULT_LAYER_BASE})`,\n      },\n    }),\n  },\n  unrenderedParts: ['root', 'title', 'description', 'actionTrigger', 'closeTrigger'],\n  defaultContent: {\n    group: toastItems,\n  },\n  machineTranslations: null,\n  variantProps: ['toaster', 'size'],\n  useMachineProps: (props: ToastRootProps) => {\n    const provided = useContext(ToasterContext)\n    const toaster = props.toaster ?? provided\n    if (toaster === null) {\n      throw new Error(\n        '[synapse] <Toast.Root> has no toaster. Pass one, or wrap the tree in ' +\n          '<ToastProvider toaster={createToaster()}>.',\n      )\n    }\n    return { store: storeOf.get(toaster) }\n  },\n  slots: (props: ToastRootProps) => toastRecipe({ size: resolveSize(props.size, 'Toast') }),\n})\n\nconst ToastItem = defineComponent<ToastItemProps>()({\n  name: 'ToastItem',\n  module: {\n    machine: toast.machine,\n    connect: toast.connect,\n    anatomy: toast.anatomy,\n  },\n  rootPart: 'root',\n  machineProps: [...NOTIFICATION_MACHINE_PROPS],\n  unrenderedParts: ['group'],\n  elements: {\n    title: 'div',\n  },\n  amendBehaviorProps: {\n    root: (behaviorProps) => ({\n      ...(behaviorProps['data-type'] === 'error' ? { role: 'alert' } : {}),\n      style: {\n        ...(isRecord(behaviorProps['style']) ? behaviorProps['style'] : {}),\n        zIndex: 'var(--z-index)',\n      },\n    }),\n  },\n  defaultContent: {\n    title: (api, t) => titleWithStatus(api, t, TOAST_ICON, STATUS_LABEL),\n    closeTrigger: () => createElement(Icon, { icon: close }),\n  },\n  rootOwnedGetters: [\n    { name: 'ghostBefore', getter: 'getGhostBeforeProps' },\n    { name: 'ghostAfter', getter: 'getGhostAfterProps' },\n  ],\n  machineTranslations: {\n    closeTriggerLabel: 'toast.closeTrigger.label',\n  },\n  variantProps: ['toast'],\n  slots: useGroupSlotClasses,\n  useMachineProps: (props: ToastItemProps) => ({\n    ...props.toast,\n    index: props.index,\n    parent: useQueueOrderedParent(useParentService()),\n  }),\n})\n\nfunction useGroupSlotClasses(): Record<string, string> {\n  const value = rootContextOf(Toast)?.useRootValue() ?? null\n  const classes: Record<string, string> = {}\n  if (value === null) return classes\n  for (const [slot, className] of Object.entries(value.slotClasses)) {\n    if (className !== undefined) classes[slot] = className\n  }\n  return classes\n}\n\nfunction useParentService(): unknown {\n  const context = rootContextOf(Toast)\n  if (context === null) {\n    throw new Error('[synapse] Toast: the group context is missing, so no toast can be rendered.')\n  }\n  const value = context.useRootValue()\n  if (value === null) {\n    throw new Error('[synapse] ToastItem must be rendered inside <Toast.Root>.')\n  }\n  return value.service\n}\n\nconst toastController = defineController<Toaster, keyof Toaster>({\n  component: 'Toast',\n  root: 'ToastProvider',\n  hook: 'useToast',\n  commands: ['create', 'update', 'dismiss', 'remove'],\n})\n\nexport function useToast(): Toaster {\n  return toastController.from(useContext(ToasterContext))\n}\n"],"mappings":"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"}