@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/slider/slider.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { sliderRecipe } from "./slider.recipe.mjs";
+import * as slider from "@zag-js/slider";
+//#region src/components/slider/slider.tsx
+const Slider = defineComponent()({
+	name: "Slider",
+	module: slider,
+	rootPart: "root",
+	elements: {
+		valueText: "span",
+		marker: "span"
+	},
+	defaultContent: { valueText: (api) => api.value.join(" – ") },
+	getterProps: {
+		thumb: ["index", "name"],
+		marker: ["value"],
+		draggingIndicator: ["index"]
+	},
+	unrenderedGetters: ["getHiddenInputProps"],
+	field: {
+		ids: (field) => ({ label: field.label }),
+		describe: ["thumb"],
+		labelable: false
+	},
+	variantProps: ["size"],
+	useMachineProps: (props) => ({ thumbAlignment: props.thumbAlignment ?? "center" }),
+	slots: (props) => sliderRecipe({ size: resolveSize(props.size, "Slider") })
+});
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=slider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.mjs","names":[],"sources":["../../../src/components/slider/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as slider from '@zag-js/slider'\n\nimport type { ValueChangeDetails } from '#/components/details.ts'\nimport { sliderRecipe } from '#/components/slider/slider.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport type { Orientation } from '#/system/types.ts'\n\nexport type SliderValueChangeDetails = ValueChangeDetails<readonly number[]>\n\nexport interface SliderFocusChangeDetails {\n  readonly focusedIndex: number\n  readonly value: readonly number[]\n}\n\nexport interface SliderValueTextDetails {\n  readonly value: number\n  readonly index: number\n}\n\nexport type SliderOrigin = 'start' | 'center' | 'end'\n\nexport type SliderThumbAlignment = 'contain' | 'center'\n\nexport type SliderThumbCollisionBehavior = 'none' | 'push' | 'swap'\n\nexport interface SliderRootProps {\n  /**\n   * 제어되는 값이며, 언제나 배열입니다. 범위 패턴은 별도 컴포넌트가 아니라 같은 Slider의\n   * variant라서 값의 형태도 하나입니다. 항목이 하나면 단일 값 패턴이고, 둘이면 범위 패턴이며,\n   * machine은 그보다 많은 경우도 지원합니다.\n   */\n  value?: readonly number[]\n  /** 비제어 모드의 초기 값. `value`를 주면 무시됩니다. */\n  defaultValue?: readonly number[]\n  /** 값이 바뀔 때마다 호출됩니다. 드래그 도중의 각 단계도 포함합니다. */\n  onValueChange?: (details: SliderValueChangeDetails) => void\n  /** 드래그나 키 반복이 가라앉은 뒤 호출됩니다. 값을 저장할 시점은 이쪽입니다. */\n  onValueChangeEnd?: (details: SliderValueChangeDetails) => void\n  /** 범위 Slider에서 키보드가 썸 사이를 오갈 때 호출됩니다. */\n  onFocusChange?: (details: SliderFocusChangeDetails) => void\n  /** 가장 낮은 값. 기본값은 0입니다. */\n  min?: number\n  /** 가장 높은 값. 기본값은 100입니다. */\n  max?: number\n  /** 화살표 키와 드래그의 단위. 기본값은 1입니다. */\n  step?: number\n  /** PageUp/PageDown과 Shift+화살표의 단위. 기본값은 열 스텝입니다. */\n  largeStep?: number\n  /**\n   * 범위 패턴의 두 썸이 지켜야 하는 간격이며, 스텝 수로 세요. 썸이 하나면 아무 효과가 없습니다.\n   */\n  minStepsBetweenThumbs?: number\n  /** 범위 패턴의 두 썸이 서로에게 끌려 들어갔을 때 보이는 동작. */\n  thumbCollisionBehavior?: SliderThumbCollisionBehavior\n  /** 채워진 범위가 시작되는 지점. 기본값은 `start`입니다. */\n  origin?: SliderOrigin\n  /** Slider가 배치되는 축. 기본값은 `horizontal`입니다. */\n  orientation?: Orientation\n  /** 썸을 트랙 경계 안에 붙잡아 둘지 여부. 기본값은 `center`입니다. */\n  thumbAlignment?: SliderThumbAlignment\n  /**\n   * 보조 기술에 값의 이름을 지어 줍니다 — `\"42\"`가 아니라 `\"42 percent\"`처럼.\n   *\n   * machine은 그 결과를 `aria-valuetext`에 넣고, 스크린 리더는 숫자 대신 그것을 읽습니다. 이것이\n   * 없으면 통화나 평점이 맨 정수로 읽힙니다.\n   */\n  getAriaValueText?: (details: SliderValueTextDetails) => string\n  /** 비활성화된 Slider는 반응하지 않고 탭 순서에도 들어가지 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 Slider는 포커스하고 읽을 수는 있지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알립니다. */\n  invalid?: boolean\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nexport const Slider = defineComponent<SliderRootProps>()({\n  name: 'Slider',\n  module: slider,\n  rootPart: 'root',\n  elements: {\n    valueText: 'span',\n    marker: 'span',\n  },\n  defaultContent: {\n    valueText: (api) => api.value.join(' – '),\n  },\n  getterProps: {\n    thumb: ['index', 'name'],\n    marker: ['value'],\n    draggingIndicator: ['index'],\n  },\n  unrenderedGetters: ['getHiddenInputProps'],\n  field: { ids: (field) => ({ label: field.label }), describe: ['thumb'], labelable: false },\n  variantProps: ['size'],\n  useMachineProps: (props: SliderRootProps) => ({\n    thumbAlignment: props.thumbAlignment ?? 'center',\n  }),\n  slots: (props: SliderRootProps) => sliderRecipe({ size: resolveSize(props.size, 'Slider') }),\n})\n"],"mappings":";;;;;;AAkFA,MAAa,SAAS,gBAAiC,CAAC,CAAC;CACvD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,WAAW;EACX,QAAQ;CACV;CACA,gBAAgB,EACd,YAAY,QAAQ,IAAI,MAAM,KAAK,KAAK,EAC1C;CACA,aAAa;EACX,OAAO,CAAC,SAAS,MAAM;EACvB,QAAQ,CAAC,OAAO;EAChB,mBAAmB,CAAC,OAAO;CAC7B;CACA,mBAAmB,CAAC,qBAAqB;CACzC,OAAO;EAAE,MAAM,WAAW,EAAE,OAAO,MAAM,MAAM;EAAI,UAAU,CAAC,OAAO;EAAG,WAAW;CAAM;CACzF,cAAc,CAAC,MAAM;CACrB,kBAAkB,WAA4B,EAC5C,gBAAgB,MAAM,kBAAkB,SAC1C;CACA,QAAQ,UAA2B,aAAa,EAAE,MAAM,YAAY,MAAM,MAAM,QAAQ,EAAE,CAAC;AAC7F,CAAC"}

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

@@ -0,0 +1,219 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/slider/slider.recipe.ts
+const sliderRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"thumb",
+		"valueText",
+		"track",
+		"range",
+		"control",
+		"markerGroup",
+		"marker",
+		"draggingIndicator"
+	],
+	base: {
+		root: {
+			display: "grid",
+			gridTemplateColumns: "1fr auto",
+			alignItems: "baseline",
+			columnGap: "gap.related",
+			rowGap: "inset.compact",
+			color: "foreground.default",
+			"&[data-orientation=vertical]": {
+				display: "inline-flex",
+				flexDirection: "column",
+				alignItems: "center"
+			}
+		},
+		label: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		thumb: {
+			display: "grid",
+			placeItems: "center",
+			width: "target.minimum",
+			height: "target.minimum",
+			rounded: "pill",
+			cursor: "grab",
+			outline: "none",
+			_disabled: { cursor: "not-allowed" },
+			"&[data-dragging]": { cursor: "grabbing" },
+			"&::after": {
+				content: "\"\"",
+				rounded: "pill",
+				bg: "surface.raised",
+				borderWidth: "emphasis",
+				borderStyle: "solid",
+				borderColor: "border.strong",
+				transitionProperty: "colors",
+				transitionDuration: "interaction",
+				transitionTimingFunction: "interaction"
+			},
+			"&:not([data-disabled], [data-invalid], [data-dragging]):hover::after": { bg: "secondary.default" },
+			"&[data-dragging]:not([data-invalid])::after": {
+				bg: "primary.default",
+				borderColor: "primary.default"
+			},
+			"&:not([data-synapse-input=pointer] *):focus-visible::after": {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			"&[data-invalid]::after": { borderColor: "error.default" },
+			"&[data-disabled]::after": {
+				bg: "surface.raised",
+				borderColor: "border.default",
+				_highContrast: { borderColor: "system.grayText" }
+			}
+		},
+		valueText: {
+			textStyle: "label",
+			color: "foreground.muted",
+			fontVariantNumeric: "tabular-nums",
+			justifySelf: "end",
+			_disabled: { color: "foreground.disabled" }
+		},
+		track: {
+			position: "relative",
+			flex: "1",
+			rounded: "pill",
+			bg: "secondary.default",
+			borderStyle: "solid",
+			borderWidth: "none",
+			borderColor: "secondary.default",
+			"&[data-orientation=horizontal]": { borderBlockStartWidth: "emphasis" },
+			"&[data-orientation=vertical]": {
+				height: "fill",
+				borderInlineStartWidth: "emphasis"
+			},
+			_disabled: {
+				bg: "background.muted",
+				borderColor: "background.muted"
+			}
+		},
+		range: {
+			rounded: "pill",
+			bg: "primary.default",
+			borderStyle: "solid",
+			borderWidth: "none",
+			borderColor: "primary.default",
+			"&[data-orientation=horizontal]": {
+				insetBlockEnd: "inset.none",
+				height: "fill",
+				borderBlockStartWidth: "emphasis"
+			},
+			"&[data-orientation=vertical]": {
+				insetInlineEnd: "inset.none",
+				width: "fill",
+				borderInlineStartWidth: "emphasis"
+			},
+			_highContrast: {
+				bg: "system.highlight",
+				borderColor: "system.highlight"
+			},
+			"&[data-invalid]": {
+				bg: "error.default",
+				borderColor: "error.default"
+			},
+			_disabled: {
+				bg: "border.default",
+				borderColor: "border.default",
+				_highContrast: {
+					bg: "system.grayText",
+					borderColor: "system.grayText"
+				}
+			}
+		},
+		control: {
+			gridColumn: "1 / -1",
+			display: "flex",
+			alignItems: "center",
+			minHeight: "target.minimum",
+			"&[data-orientation=vertical]": {
+				flexDirection: "column",
+				justifyContent: "center",
+				minWidth: "target.minimum",
+				height: "fill"
+			}
+		},
+		markerGroup: {
+			gridColumn: "1 / -1",
+			color: "foreground.muted"
+		},
+		marker: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			fontVariantNumeric: "tabular-nums",
+			_disabled: { color: "foreground.disabled" }
+		},
+		draggingIndicator: {
+			paddingInline: "inset.control",
+			paddingBlock: "inset.compact",
+			rounded: "control",
+			bg: "background.inverse",
+			color: "foreground.onEmphasis",
+			textStyle: "detail",
+			boxShadow: "notification"
+		}
+	},
+	variants: { size: {
+		xs: {
+			thumb: { "&::after": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			valueText: { textStyle: "caption" },
+			label: { textStyle: "caption" },
+			marker: { textStyle: "caption" }
+		},
+		sm: {
+			thumb: { "&::after": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			valueText: { textStyle: "detail" }
+		},
+		md: { thumb: { "&::after": {
+			width: "icon.xs",
+			height: "icon.xs"
+		} } },
+		lg: {
+			track: {
+				"&[data-orientation=horizontal]": { paddingBlockStart: "inset.compact" },
+				"&[data-orientation=vertical]": { paddingInlineStart: "inset.compact" }
+			},
+			thumb: { "&::after": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} }
+		},
+		xl: {
+			track: {
+				"&[data-orientation=horizontal]": { paddingBlockStart: "gap.inline" },
+				"&[data-orientation=vertical]": { paddingInlineStart: "gap.inline" }
+			},
+			thumb: {
+				width: "target.comfortable",
+				height: "target.comfortable",
+				"&::after": {
+					width: "icon.md",
+					height: "icon.md"
+				}
+			},
+			control: { minHeight: "target.comfortable" },
+			valueText: { textStyle: "body" },
+			label: { textStyle: "body" },
+			marker: { textStyle: "body" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { sliderRecipe };
+
+//# sourceMappingURL=slider.recipe.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.recipe.mjs","names":[],"sources":["../../../src/components/slider/slider.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const sliderRecipe = sva({\n  slots: [\n    'root',\n    'label',\n    'thumb',\n    'valueText',\n    'track',\n    'range',\n    'control',\n    'markerGroup',\n    'marker',\n    'draggingIndicator',\n  ],\n  base: {\n    root: {\n      display: 'grid',\n      gridTemplateColumns: '1fr auto',\n      alignItems: 'baseline',\n      columnGap: 'gap.related',\n      rowGap: 'inset.compact',\n      color: 'foreground.default',\n      '&[data-orientation=vertical]': {\n        display: 'inline-flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n      },\n    },\n    label: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    thumb: {\n      display: 'grid',\n      placeItems: 'center',\n      width: 'target.minimum',\n      height: 'target.minimum',\n      rounded: 'pill',\n      cursor: 'grab',\n      outline: 'none',\n      _disabled: { cursor: 'not-allowed' },\n      '&[data-dragging]': { cursor: 'grabbing' },\n      '&::after': {\n        content: '\"\"',\n        rounded: 'pill',\n        bg: 'surface.raised',\n        borderWidth: 'emphasis',\n        borderStyle: 'solid',\n        borderColor: 'border.strong',\n        transitionProperty: 'colors',\n        transitionDuration: 'interaction',\n        transitionTimingFunction: 'interaction',\n      },\n      '&:not([data-disabled], [data-invalid], [data-dragging]):hover::after': {\n        bg: 'secondary.default',\n      },\n      '&[data-dragging]:not([data-invalid])::after': {\n        bg: 'primary.default',\n        borderColor: 'primary.default',\n      },\n      '&:not([data-synapse-input=pointer] *):focus-visible::after': {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      '&[data-invalid]::after': { borderColor: 'error.default' },\n      '&[data-disabled]::after': {\n        bg: 'surface.raised',\n        borderColor: 'border.default',\n        _highContrast: { borderColor: 'system.grayText' },\n      },\n    },\n    valueText: {\n      textStyle: 'label',\n      color: 'foreground.muted',\n      fontVariantNumeric: 'tabular-nums',\n      justifySelf: 'end',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    track: {\n      position: 'relative',\n      flex: '1',\n      rounded: 'pill',\n      bg: 'secondary.default',\n      borderStyle: 'solid',\n      borderWidth: 'none',\n      borderColor: 'secondary.default',\n      '&[data-orientation=horizontal]': { borderBlockStartWidth: 'emphasis' },\n      '&[data-orientation=vertical]': { height: 'fill', borderInlineStartWidth: 'emphasis' },\n      _disabled: { bg: 'background.muted', borderColor: 'background.muted' },\n    },\n    range: {\n      rounded: 'pill',\n      bg: 'primary.default',\n      borderStyle: 'solid',\n      borderWidth: 'none',\n      borderColor: 'primary.default',\n      '&[data-orientation=horizontal]': {\n        insetBlockEnd: 'inset.none',\n        height: 'fill',\n        borderBlockStartWidth: 'emphasis',\n      },\n      '&[data-orientation=vertical]': {\n        insetInlineEnd: 'inset.none',\n        width: 'fill',\n        borderInlineStartWidth: 'emphasis',\n      },\n      _highContrast: { bg: 'system.highlight', borderColor: 'system.highlight' },\n      '&[data-invalid]': { bg: 'error.default', borderColor: 'error.default' },\n      _disabled: {\n        bg: 'border.default',\n        borderColor: 'border.default',\n        _highContrast: { bg: 'system.grayText', borderColor: 'system.grayText' },\n      },\n    },\n    control: {\n      gridColumn: '1 / -1',\n      display: 'flex',\n      alignItems: 'center',\n      minHeight: 'target.minimum',\n      '&[data-orientation=vertical]': {\n        flexDirection: 'column',\n        justifyContent: 'center',\n        minWidth: 'target.minimum',\n        height: 'fill',\n      },\n    },\n    markerGroup: {\n      gridColumn: '1 / -1',\n      color: 'foreground.muted',\n    },\n    marker: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      fontVariantNumeric: 'tabular-nums',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    draggingIndicator: {\n      paddingInline: 'inset.control',\n      paddingBlock: 'inset.compact',\n      rounded: 'control',\n      bg: 'background.inverse',\n      color: 'foreground.onEmphasis',\n      textStyle: 'detail',\n      boxShadow: 'notification',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        thumb: { '&::after': { width: 'icon.xs', height: 'icon.xs' } },\n        valueText: { textStyle: 'caption' },\n        label: { textStyle: 'caption' },\n        marker: { textStyle: 'caption' },\n      },\n      sm: {\n        thumb: { '&::after': { width: 'icon.xs', height: 'icon.xs' } },\n        valueText: { textStyle: 'detail' },\n      },\n      md: {\n        thumb: { '&::after': { width: 'icon.xs', height: 'icon.xs' } },\n      },\n      lg: {\n        track: {\n          '&[data-orientation=horizontal]': { paddingBlockStart: 'inset.compact' },\n          '&[data-orientation=vertical]': { paddingInlineStart: 'inset.compact' },\n        },\n        thumb: { '&::after': { width: 'icon.sm', height: 'icon.sm' } },\n      },\n      xl: {\n        track: {\n          '&[data-orientation=horizontal]': { paddingBlockStart: 'gap.inline' },\n          '&[data-orientation=vertical]': { paddingInlineStart: 'gap.inline' },\n        },\n        thumb: {\n          width: 'target.comfortable',\n          height: 'target.comfortable',\n          '&::after': { width: 'icon.md', height: 'icon.md' },\n        },\n        control: { minHeight: 'target.comfortable' },\n        valueText: { textStyle: 'body' },\n        label: { textStyle: 'body' },\n        marker: { textStyle: 'body' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Snackbar, SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarPlacement, SnackbarProvider, SnackbarProviderProps, SnackbarQueue, SnackbarRootProps, SnackbarType, createSnackbar, useSnackbar } from "./snackbar.mjs";
+export { Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarPlacement, SnackbarProvider, type SnackbarProviderProps, type SnackbarQueue, type SnackbarRootProps, type SnackbarType, createSnackbar, useSnackbar };

package/dist/components/snackbar/index.mjs

@@ -0,0 +1,2 @@
+import { Snackbar, SnackbarProvider, createSnackbar, useSnackbar } from "./snackbar.mjs";
+export { Snackbar, SnackbarProvider, createSnackbar, useSnackbar };

package/dist/components/snackbar/snackbar.d.mts

@@ -0,0 +1,57 @@
+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/snackbar/snackbar.d.ts
+export type SnackbarPlacement = NotificationPlacement;
+export type SnackbarType = NotificationType;
+export type SnackbarAction = NotificationAction;
+export interface SnackbarMessage {
+  title: ReactNode;
+  type?: SnackbarType;
+  action?: SnackbarAction;
+  duration?: number;
+  id?: string;
+  onStatusChange?: (details: {
+    status: string;
+  }) => void;
+}
+export interface SnackbarOptions {
+  placement?: SnackbarPlacement;
+  max?: number;
+  duration?: number;
+  removeDelay?: number;
+  pauseOnPageIdle?: boolean;
+}
+export interface SnackbarQueue {
+  create: (message: SnackbarMessage) => string;
+  update: (id: string, message: SnackbarMessage) => string;
+  dismiss: (id?: string) => void;
+  remove: (id?: string) => void;
+}
+export interface SnackbarRootProps {
+  /**
+   * 이 영역이 렌더하는 스낵바 큐입니다.
+   *
+   * 선택 사항인 이유는 보통 `SnackbarProvider`로 들어오기 때문입니다. 트리를 감싼 제품은 어느 큐인지
+   * 이미 말한 셈이고, 영역에서 그것을 되풀이하면 둘이 어긋날 수 있는 자리가 하나 더 생깁니다.
+   */
+  queue?: SnackbarQueue;
+  /** 이 영역에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */
+  id?: string;
+}
+export declare function createSnackbar(options?: SnackbarOptions): SnackbarQueue;
+export interface SnackbarProviderProps {
+  queue: SnackbarQueue;
+  children?: ReactNode;
+}
+export declare function SnackbarProvider({ queue, children }: SnackbarProviderProps): ReactNode;
+export declare const Snackbar: SynapseComponent<"actionTrigger" | "closeTrigger" | "description" | "group" | "root" | "title", "group", SnackbarRootProps, "actionTrigger" | "closeTrigger" | "description" | "root" | "title">;
+export declare function useSnackbar(): SnackbarQueue;
+//#endregion
+//# sourceMappingURL=snackbar.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.d.mts","names":[],"sources":["../../../src/components/snackbar/snackbar.tsx"],"mappings":";;;;;;YA8BY,oBAAoB;YAEpB,eAAe;YAEf,iBAAiB;iBAEZ;EACf,OAAO;EACP,OAAO;EACP,SAAS;EACT;EACA;EACA,kBAAkB;IAAW;;;iBAGd;EACf,YAAY;EACZ;EACA;EACA;EACA;;iBAGe;EACf,SAAS,SAAS;EAClB,SAAS,YAAY,SAAS;EAC9B,UAAU;EACV,SAAS;;iBAGM;;;;;;;EAOf,QAAQ;;EAER,eAAe;;EAEf,OAAO;;EAEP;;wBAQc,eAAe,UAAS,kBAAuB;iBA4B9C;EACf,OAAO;EACP,WAAW;;wBAGG,mBAAmB,OAAO,YAAY,wBAAwB;qBAgDjE,UAAQ,yGAAA;wBAgJL,eAAe"}

package/dist/components/snackbar/snackbar.mjs

@@ -0,0 +1,226 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import { close } from "../../icons/src/close.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 { buttonPartClass } from "../../shared/button-style.mjs";
+import { DEFAULT_LAYER_BASE, LAYER_BASE_VAR } from "../../shared/layering.mjs";
+import { defineController } from "../../shared/controller.mjs";
+import { NOTIFICATION_GROUP_MACHINE_PROPS, NOTIFICATION_MACHINE_PROPS, titleWithStatus, toMachineOptions, useQueueOrderedParent } from "../../shared/notification.mjs";
+import { snackbarRecipe } from "./snackbar.recipe.mjs";
+import { createContext, createElement, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as toast from "@zag-js/toast";
+//#region src/components/snackbar/snackbar.tsx
+const storeOf = /* @__PURE__ */ new WeakMap();
+const toMessageOptions = (message) => toMachineOptions({
+	...message,
+	closable: true
+});
+function createSnackbar(options = {}) {
+	const store = toast.createStore({
+		placement: options.placement ?? "bottom-end",
+		...options.max === void 0 ? {} : { max: options.max },
+		overlap: true,
+		gap: 8,
+		duration: options.duration ?? Number.POSITIVE_INFINITY,
+		removeDelay: options.removeDelay ?? 120,
+		...options.pauseOnPageIdle === void 0 ? {} : { pauseOnPageIdle: options.pauseOnPageIdle }
+	});
+	const commands = store;
+	const queue = Object.freeze({
+		create: (message) => commands.create(toMessageOptions(message)),
+		update: (id, message) => commands.update(id, toMessageOptions(message)),
+		dismiss: (id) => {
+			commands.dismiss(id);
+		},
+		remove: (id) => {
+			commands.remove(id);
+		}
+	});
+	storeOf.set(queue, store);
+	return queue;
+}
+const SnackbarQueueContext = createContext(null);
+function SnackbarProvider({ queue, children }) {
+	return createElement(SnackbarQueueContext.Provider, { value: queue }, children);
+}
+const SNACKBAR_ICON = {
+	success: checkmark,
+	error: warning,
+	warning,
+	info
+};
+const STATUS_LABEL = {
+	success: "snackbar.title.success",
+	error: "snackbar.title.error",
+	warning: "snackbar.title.warning",
+	info: "snackbar.title.info"
+};
+const isRecord = (value) => typeof value === "object" && value !== null;
+function snackbarItems(api) {
+	return api.getToasts().map((queued, index) => /* @__PURE__ */ jsx(SnackbarItemView, {
+		toast: queued,
+		index
+	}, queued.id ?? String(index)));
+}
+function SnackbarItemView({ toast: queued, index }) {
+	const label = queued.action?.label;
+	return /* @__PURE__ */ jsxs(SnackbarItem.Root, {
+		toast: queued,
+		index,
+		children: [
+			/* @__PURE__ */ jsx(SnackbarItem.Title, {}),
+			label === void 0 ? null : /* @__PURE__ */ jsx(SnackbarItem.ActionTrigger, { children: label }),
+			/* @__PURE__ */ jsx("span", {
+				"data-snackbar-separator": "",
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx(SnackbarItem.CloseTrigger, {})
+		]
+	});
+}
+const Snackbar = defineComponent()({
+	name: "Snackbar",
+	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("snackbar.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: snackbarItems },
+	machineTranslations: null,
+	variantProps: ["queue", "size"],
+	useMachineProps: (props) => {
+		const provided = useContext(SnackbarQueueContext);
+		const queue = props.queue ?? provided;
+		if (queue === null) throw new Error("[synapse] <Snackbar.Root> has no queue. Pass one, or wrap the tree in <SnackbarProvider queue={createSnackbar()}>.");
+		return { store: storeOf.get(queue) };
+	},
+	slots: (props) => {
+		const size = resolveSize(props.size, "Snackbar");
+		const own = snackbarRecipe.raw({ size }).actionTrigger;
+		const actionTriggerOf = (tone) => buttonPartClass({
+			variant: "soft",
+			tone,
+			size: ACTION_SIZE[size]
+		}, own);
+		const classes = { ...snackbarRecipe({ size }) };
+		for (const [type, tone] of ACTION_TONES) classes[actionSlotOf(type)] = actionTriggerOf(tone);
+		classes["actionTrigger"] = actionTriggerOf("info");
+		return classes;
+	}
+});
+const SnackbarItem = defineComponent()({
+	name: "SnackbarItem",
+	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, SNACKBAR_ICON, STATUS_LABEL),
+		closeTrigger: () => createElement(Icon, { icon: close })
+	},
+	rootOwnedGetters: [{
+		name: "ghostBefore",
+		getter: "getGhostBeforeProps"
+	}, {
+		name: "ghostAfter",
+		getter: "getGhostAfterProps"
+	}],
+	machineTranslations: { closeTriggerLabel: "snackbar.closeTrigger.label" },
+	variantProps: ["toast"],
+	slots: useItemSlotClasses,
+	useMachineProps: (props) => ({
+		...props.toast,
+		index: props.index,
+		parent: useQueueOrderedParent(useParentService())
+	})
+});
+const ACTION_SIZE = {
+	xs: "xs",
+	sm: "sm",
+	md: "sm",
+	lg: "md",
+	xl: "lg"
+};
+const ACTION_TONES = /* @__PURE__ */ new Map([
+	["info", "info"],
+	["success", "success"],
+	["error", "danger"],
+	["warning", "warning"],
+	["loading", "info"]
+]);
+const actionSlotOf = (type) => `actionTrigger:${type}`;
+function useItemSlotClasses(props) {
+	const classes = useGroupSlotClasses();
+	const typed = props.toast.type === void 0 ? void 0 : classes[actionSlotOf(props.toast.type)];
+	return typed === void 0 ? classes : {
+		...classes,
+		actionTrigger: typed
+	};
+}
+function useGroupSlotClasses() {
+	const value = rootContextOf(Snackbar)?.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(Snackbar);
+	if (context === null) throw new Error("[synapse] Snackbar: the group context is missing, so no snackbar can be rendered.");
+	const value = context.useRootValue();
+	if (value === null) throw new Error("[synapse] SnackbarItem must be rendered inside <Snackbar.Root>.");
+	return value.service;
+}
+const snackbarController = defineController({
+	component: "Snackbar",
+	root: "SnackbarProvider",
+	hook: "useSnackbar",
+	commands: [
+		"create",
+		"update",
+		"dismiss",
+		"remove"
+	]
+});
+function useSnackbar() {
+	return snackbarController.from(useContext(SnackbarQueueContext));
+}
+//#endregion
+export { Snackbar, SnackbarProvider, createSnackbar, useSnackbar };
+
+//# sourceMappingURL=snackbar.mjs.map

package/dist/components/snackbar/snackbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.mjs","names":[],"sources":["../../../src/components/snackbar/snackbar.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, close, 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 type { ButtonTone } from '#/components/button/button.tsx'\nimport { snackbarRecipe } from '#/components/snackbar/snackbar.recipe.ts'\nimport type { TranslationKey, TranslationOverrides } from '#/provider/translations.ts'\nimport { buttonPartClass } from '#/shared/button-style.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 SnackbarPlacement = NotificationPlacement\n\nexport type SnackbarType = NotificationType\n\nexport type SnackbarAction = NotificationAction\n\nexport interface SnackbarMessage {\n  title: ReactNode\n  type?: SnackbarType\n  action?: SnackbarAction\n  duration?: number\n  id?: string\n  onStatusChange?: (details: { status: string }) => void\n}\n\nexport interface SnackbarOptions {\n  placement?: SnackbarPlacement\n  max?: number\n  duration?: number\n  removeDelay?: number\n  pauseOnPageIdle?: boolean\n}\n\nexport interface SnackbarQueue {\n  create: (message: SnackbarMessage) => string\n  update: (id: string, message: SnackbarMessage) => string\n  dismiss: (id?: string) => void\n  remove: (id?: string) => void\n}\n\nexport interface SnackbarRootProps {\n  /**\n   * 이 영역이 렌더하는 스낵바 큐입니다.\n   *\n   * 선택 사항인 이유는 보통 `SnackbarProvider`로 들어오기 때문입니다. 트리를 감싼 제품은 어느 큐인지\n   * 이미 말한 셈이고, 영역에서 그것을 되풀이하면 둘이 어긋날 수 있는 자리가 하나 더 생깁니다.\n   */\n  queue?: SnackbarQueue\n  /** 이 영역에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다. */\n  id?: string\n}\n\nconst storeOf = new WeakMap<SnackbarQueue, object>()\n\nconst toMessageOptions = (message: SnackbarMessage): Record<string, unknown> =>\n  toMachineOptions({ ...message, closable: true })\n\nexport function createSnackbar(options: SnackbarOptions = {}): SnackbarQueue {\n  const store = toast.createStore({\n    placement: options.placement ?? 'bottom-end',\n    ...(options.max === undefined ? {} : { max: options.max }),\n    overlap: true,\n    gap: DEFAULT_GAP,\n    duration: options.duration ?? Number.POSITIVE_INFINITY,\n    removeDelay: options.removeDelay ?? DEFAULT_REMOVE_DELAY,\n    ...(options.pauseOnPageIdle === undefined ? {} : { pauseOnPageIdle: options.pauseOnPageIdle }),\n  })\n  const commands: NotificationStoreCommands = store\n  const queue: SnackbarQueue = Object.freeze({\n    create: (message: SnackbarMessage) => commands.create(toMessageOptions(message)),\n    update: (id: string, message: SnackbarMessage) =>\n      commands.update(id, toMessageOptions(message)),\n    dismiss: (id?: string) => {\n      commands.dismiss(id)\n    },\n    remove: (id?: string) => {\n      commands.remove(id)\n    },\n  })\n  storeOf.set(queue, store)\n  return queue\n}\n\nconst SnackbarQueueContext = createContext<SnackbarQueue | null>(null)\n\nexport interface SnackbarProviderProps {\n  queue: SnackbarQueue\n  children?: ReactNode\n}\n\nexport function SnackbarProvider({ queue, children }: SnackbarProviderProps): ReactNode {\n  return createElement(SnackbarQueueContext.Provider, { value: queue }, children)\n}\n\nconst SNACKBAR_ICON: Readonly<Record<string, IconGeometry>> = {\n  success: checkmark,\n  error: warning,\n  warning,\n  info,\n}\n\nconst STATUS_LABEL: Readonly<Record<string, TranslationKey>> = {\n  success: 'snackbar.title.success',\n  error: 'snackbar.title.error',\n  warning: 'snackbar.title.warning',\n  info: 'snackbar.title.info',\n}\n\nconst isRecord = (value: unknown): value is Readonly<Record<string, unknown>> =>\n  typeof value === 'object' && value !== null\n\ninterface SnackbarItemProps {\n  toast: toast.Props\n  index: number\n}\n\nfunction snackbarItems(api: toast.GroupApi): ReactNode {\n  return api\n    .getToasts()\n    .map((queued, index) => (\n      <SnackbarItemView key={queued.id ?? String(index)} toast={queued} index={index} />\n    ))\n}\n\nfunction SnackbarItemView({ toast: queued, index }: SnackbarItemProps): ReactNode {\n  const label = queued.action?.label\n  return (\n    <SnackbarItem.Root toast={queued} index={index}>\n      <SnackbarItem.Title />\n      {label === undefined ? null : (\n        <SnackbarItem.ActionTrigger>{label}</SnackbarItem.ActionTrigger>\n      )}\n      <span data-snackbar-separator=\"\" aria-hidden />\n      <SnackbarItem.CloseTrigger />\n    </SnackbarItem.Root>\n  )\n}\n\nexport const Snackbar = defineComponent<SnackbarRootProps>()({\n  name: 'Snackbar',\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('snackbar.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: snackbarItems,\n  },\n  machineTranslations: null,\n  variantProps: ['queue', 'size'],\n  useMachineProps: (props: SnackbarRootProps) => {\n    const provided = useContext(SnackbarQueueContext)\n    const queue = props.queue ?? provided\n    if (queue === null) {\n      throw new Error(\n        '[synapse] <Snackbar.Root> has no queue. Pass one, or wrap the tree in ' +\n          '<SnackbarProvider queue={createSnackbar()}>.',\n      )\n    }\n    return { store: storeOf.get(queue) }\n  },\n  slots: (props: SnackbarRootProps) => {\n    const size = resolveSize(props.size, 'Snackbar')\n    const own = snackbarRecipe.raw({ size }).actionTrigger\n    const actionTriggerOf = (tone: ButtonTone): string =>\n      buttonPartClass({ variant: 'soft', tone, size: ACTION_SIZE[size] }, own)\n    const classes: Record<string, string> = { ...snackbarRecipe({ size }) }\n    for (const [type, tone] of ACTION_TONES) classes[actionSlotOf(type)] = actionTriggerOf(tone)\n    classes['actionTrigger'] = actionTriggerOf('info')\n    return classes\n  },\n})\n\nconst SnackbarItem = defineComponent<SnackbarItemProps>()({\n  name: 'SnackbarItem',\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, SNACKBAR_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: 'snackbar.closeTrigger.label',\n  },\n  variantProps: ['toast'],\n  slots: useItemSlotClasses,\n  useMachineProps: (props: SnackbarItemProps) => ({\n    ...props.toast,\n    index: props.index,\n    parent: useQueueOrderedParent(useParentService()),\n  }),\n})\n\nconst ACTION_SIZE: Readonly<Record<Size, Size>> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n}\n\nconst ACTION_TONES: ReadonlyMap<string, ButtonTone> = new Map([\n  ['info', 'info'],\n  ['success', 'success'],\n  ['error', 'danger'],\n  ['warning', 'warning'],\n  ['loading', 'info'],\n])\n\nconst actionSlotOf = (type: string): string => `actionTrigger:${type}`\n\nfunction useItemSlotClasses(props: SnackbarItemProps): Record<string, string> {\n  const classes = useGroupSlotClasses()\n  const typed = props.toast.type === undefined ? undefined : classes[actionSlotOf(props.toast.type)]\n  return typed === undefined ? classes : { ...classes, actionTrigger: typed }\n}\n\nfunction useGroupSlotClasses(): Record<string, string> {\n  const value = rootContextOf(Snackbar)?.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(Snackbar)\n  if (context === null) {\n    throw new Error(\n      '[synapse] Snackbar: the group context is missing, so no snackbar can be rendered.',\n    )\n  }\n  const value = context.useRootValue()\n  if (value === null) {\n    throw new Error('[synapse] SnackbarItem must be rendered inside <Snackbar.Root>.')\n  }\n  return value.service\n}\n\nconst snackbarController = defineController<SnackbarQueue, keyof SnackbarQueue>({\n  component: 'Snackbar',\n  root: 'SnackbarProvider',\n  hook: 'useSnackbar',\n  commands: ['create', 'update', 'dismiss', 'remove'],\n})\n\nexport function useSnackbar(): SnackbarQueue {\n  return snackbarController.from(useContext(SnackbarQueueContext))\n}\n"],"mappings":"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"}