@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/color-picker/color-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.mjs","names":[],"sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["'use client'\n\nimport { checkmark, eyedropper } from '@neurocle/synapse-icons'\nimport * as colorPicker from '@zag-js/color-picker'\nimport { createElement, useState } from 'react'\n\nimport { colorPickerRecipe } from '#/components/color-picker/color-picker.recipe.ts'\nimport type { OpenChangeDetails } from '#/components/details.ts'\nimport type { TranslationKey, TranslationOverrides, Translator } from '#/provider/translations.ts'\nimport { buttonPartClass } from '#/shared/button-style.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { inputPartClass } from '#/shared/input-style.ts'\nimport { withSelectIndicator } from '#/shared/select-indicator.tsx'\nimport { resolveSize, type Size, sizeBelow } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport const COLOR_PICKER_FORMATS: readonly ['rgba', 'hsla', 'hsba'] = ['rgba', 'hsla', 'hsba']\n\nexport type ColorPickerFormat = (typeof COLOR_PICKER_FORMATS)[number]\n\nexport interface ColorPickerPositioning {\n  placement?:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'right'\n  gutter?: number\n  flip?: boolean\n}\n\nexport interface ColorPickerValueChangeDetails {\n  readonly value: string\n}\n\nexport interface ColorPickerFormatChangeDetails {\n  readonly format: ColorPickerFormat\n}\n\nexport interface ColorPickerRootProps {\n  /** 제어되는 색이며, 어떤 CSS 색 문자열이든 됩니다. */\n  value?: string\n  /** 비제어 초기 색. `value`가 주어지면 무시됩니다. */\n  defaultValue?: string\n  /** 드래그의 매 단계를 포함해, 값이 바뀔 때마다 알림을 받습니다. */\n  onValueChange?: (details: ColorPickerValueChangeDetails) => void\n  /** 드래그가 끝난 뒤 한 번 알림을 받습니다 — 저장할 때 쓸 콜백입니다. */\n  onValueChangeEnd?: (details: ColorPickerValueChangeDetails) => void\n  /** 제어되는 떠 있는 레이어의 열림 상태. */\n  open?: boolean\n  /** 비제어 초기 열림 상태. */\n  defaultOpen?: boolean\n  /** 피커가 열리거나 닫힐 때마다 알림을 받습니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /** 숫자 입력과 슬라이더가 다루는, 제어되는 채널 형식. */\n  format?: ColorPickerFormat\n  /** 비제어 초기 형식. 기본값은 `rgba`입니다. */\n  defaultFormat?: ColorPickerFormat\n  /** 형식이 바뀔 때마다 알림을 받습니다. */\n  onFormatChange?: (details: ColorPickerFormatChangeDetails) => void\n  /** 피커를 떠 있는 레이어가 아니라 제자리에 렌더링합니다. */\n  inline?: boolean\n  /** 색 견본을 고르면 떠 있는 레이어를 닫습니다. 기본값은 false입니다. */\n  closeOnSelect?: boolean\n  /** 열릴 때 포커스를 콘텐츠 안으로 옮깁니다. 기본값은 true입니다. */\n  openAutoFocus?: boolean\n  /** 떠 있는 레이어가 놓이는 위치. */\n  positioning?: ColorPickerPositioning\n  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 비활성화된 ColorPicker는 제출되지 않고 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 ColorPicker는 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알려집니다. */\n  invalid?: boolean\n  /** 제약 검증: 폼이 제출되려면 색이 골라져 있어야 합니다. */\n  required?: boolean\n  /** 이 ColorPicker에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\ninterface MachineValueDetails {\n  value: colorPicker.Color\n  valueAsString: string\n}\n\nconst useColorPickerMachineProps = (props: ColorPickerRootProps): Record<string, unknown> => {\n  const [emitted] = useState(() => new Map<string, colorPicker.Color>())\n  const remember = (details: MachineValueDetails): void => {\n    emitted.clear()\n    emitted.set(details.valueAsString, details.value)\n  }\n  const resolve = (value: string): colorPicker.Color =>\n    emitted.get(value) ?? colorPicker.parse(value)\n  return {\n    ...(props.value === undefined ? {} : { value: resolve(props.value) }),\n    ...(props.defaultValue === undefined\n      ? {}\n      : { defaultValue: colorPicker.parse(props.defaultValue) }),\n    onValueChange: (details: MachineValueDetails) => {\n      remember(details)\n      props.onValueChange?.({ value: details.valueAsString })\n    },\n    onValueChangeEnd: (details: MachineValueDetails) => {\n      remember(details)\n      props.onValueChangeEnd?.({ value: details.valueAsString })\n    },\n  }\n}\n\nconst CHANNEL_LABELS: Readonly<Record<string, TranslationKey>> = {\n  hue: 'colorPicker.channelSlider.hue',\n  saturation: 'colorPicker.channelSlider.saturation',\n  brightness: 'colorPicker.channelSlider.brightness',\n  lightness: 'colorPicker.channelSlider.lightness',\n  red: 'colorPicker.channelSlider.red',\n  green: 'colorPicker.channelSlider.green',\n  blue: 'colorPicker.channelSlider.blue',\n  alpha: 'colorPicker.channelSlider.alpha',\n  hex: 'colorPicker.channelSlider.hex',\n  css: 'colorPicker.channelSlider.css',\n}\n\nconst channelLabel = (channel: unknown, translate: Translator): string => {\n  const key = typeof channel === 'string' ? CHANNEL_LABELS[channel] : undefined\n  return key === undefined ? String(channel) : translate(key)\n}\n\nconst invalidOf = (behaviorProps: Readonly<Record<string, unknown>>): true | undefined =>\n  behaviorProps['data-invalid'] === '' ? true : undefined\n\nconst PERCENT_CHANNELS = new Set(['saturation', 'brightness', 'lightness'])\n\nconst channelValueText = (\n  channel: string,\n  value: number,\n  translate: Translator,\n): string | undefined => {\n  if (Number.isNaN(value)) return undefined\n  if (channel === 'hue') {\n    return translate('colorPicker.channelSliderThumb.degrees', { value: Math.round(value) })\n  }\n  if (channel === 'alpha') {\n    return translate('colorPicker.channelSliderThumb.percent', { value: Math.round(value * 100) })\n  }\n  if (PERCENT_CHANNELS.has(channel)) {\n    return translate('colorPicker.channelSliderThumb.percent', { value: Math.round(value) })\n  }\n  return String(Math.round(value))\n}\n\nconst MACHINE_FORMATS: readonly ['hsba', 'hsla', 'rgba'] = ['hsba', 'hsla', 'rgba']\n\nconst COLOR_CHANNELS: readonly colorPicker.ColorChannel[] = [\n  'hue',\n  'saturation',\n  'brightness',\n  'lightness',\n  'red',\n  'green',\n  'blue',\n  'alpha',\n]\n\nconst channelOr = (value: unknown, fallback: colorPicker.ColorChannel): colorPicker.ColorChannel =>\n  COLOR_CHANNELS.find((channel) => channel === value) ?? fallback\n\nconst formatOptions = (): ReturnType<typeof createElement>[] =>\n  COLOR_PICKER_FORMATS.map((format) =>\n    createElement('option', { key: format, value: format }, format),\n  )\n\nexport const ColorPicker = defineComponent<ColorPickerRootProps>()({\n  name: 'ColorPicker',\n  module: colorPicker,\n  rootPart: 'root',\n  elements: {\n    valueText: 'span',\n    channelSliderLabel: 'span',\n    channelSliderValueText: 'span',\n    swatchIndicator: 'span',\n    channelInput: 'input',\n    formatSelect: 'select',\n  },\n  getterProps: {\n    area: ['xChannel', 'yChannel'],\n    areaBackground: ['xChannel', 'yChannel'],\n    areaThumb: ['xChannel', 'yChannel'],\n    channelSlider: ['channel', 'orientation', 'format'],\n    channelSliderTrack: ['channel', 'orientation', 'format'],\n    channelSliderThumb: ['channel', 'orientation', 'format'],\n    channelSliderLabel: ['channel', 'orientation'],\n    channelSliderValueText: ['channel', 'orientation'],\n    channelInput: ['channel', 'orientation'],\n    swatchTrigger: ['value', 'disabled'],\n    swatch: ['value', 'respectAlpha'],\n    swatchIndicator: ['value', 'respectAlpha'],\n  },\n  defaultContent: {\n    formatSelect: formatOptions,\n    valueText: (api) => api.valueAsString,\n    eyeDropperTrigger: () => <Icon icon={eyedropper} />,\n    swatchIndicator: () => <Icon icon={checkmark} />,\n  },\n  rootOwnedGetters: [\n    {\n      name: 'hiddenInput',\n      getter: 'getHiddenInputProps',\n      element: 'input',\n    },\n  ],\n  amendBehaviorProps: {\n    trigger: (behaviorProps, api, _args, translate) => ({\n      'aria-label': translate('colorPicker.trigger.label', {\n        value: api.valueAsString,\n      }),\n      'aria-invalid': invalidOf(behaviorProps),\n    }),\n    areaThumb: (behaviorProps, api, getterArgs, translate) => {\n      const { value, format } = api\n      const area = value.toFormat(format.startsWith('hsl') ? 'hsla' : 'hsba')\n      const [, defaultX, defaultY] = area.getChannels()\n      const xChannel = channelOr(getterArgs['xChannel'], defaultX)\n      const yChannel = channelOr(getterArgs['yChannel'], defaultY)\n      const x = channelLabel(xChannel, translate)\n      const y = channelLabel(yChannel, translate)\n      return {\n        'aria-label': translate('colorPicker.areaThumb.label', { xChannel: x, yChannel: y }),\n        'aria-roledescription': translate('colorPicker.areaThumb.roleDescription'),\n        'aria-valuetext': translate('colorPicker.areaThumb.valueText', {\n          xChannel: x,\n          xValue: String(area.getChannelValue(xChannel)),\n          yChannel: y,\n          yValue: String(area.getChannelValue(yChannel)),\n        }),\n        'aria-invalid': invalidOf(behaviorProps),\n      }\n    },\n    channelSliderThumb: (behaviorProps, _api, getterArgs, translate) => ({\n      'aria-label': channelLabel(getterArgs['channel'], translate),\n      'aria-valuetext': channelValueText(\n        String(getterArgs['channel']),\n        Number(behaviorProps['aria-valuenow']),\n        translate,\n      ),\n      'aria-invalid': invalidOf(behaviorProps),\n    }),\n    channelInput: (behaviorProps, _api, getterArgs, translate) => ({\n      'aria-label': channelLabel(getterArgs['channel'], translate),\n      'aria-invalid': invalidOf(behaviorProps),\n    }),\n    eyeDropperTrigger: (_behaviorProps, _api, _args, translate) => ({\n      'aria-label': translate('colorPicker.eyeDropperTrigger.label'),\n    }),\n    swatchTrigger: (behaviorProps, _api, _args, translate) => ({\n      'aria-label': translate('colorPicker.swatchTrigger.label', {\n        value: String(behaviorProps['data-value']),\n      }),\n    }),\n    formatTrigger: (_behaviorProps, api, _args, translate) => {\n      const index = MACHINE_FORMATS.indexOf(api.format)\n      const next = MACHINE_FORMATS[(index + 1) % MACHINE_FORMATS.length] ?? MACHINE_FORMATS[0]\n      return { 'aria-label': translate('colorPicker.formatTrigger.label', { format: next }) }\n    },\n    formatSelect: (_behaviorProps, _api, _args, translate) => ({\n      'aria-label': translate('colorPicker.formatSelect.label'),\n    }),\n    // zag의 `getPositionerProps()`는 `inline`일 때도 style을 돌려줘서 positioner가 뷰포트 높이만큼\n    // 위에 놓입니다. `inline`이면 이 style을 걷어내 흐름 안에 놓이게 합니다.\n    positioner: (_behaviorProps, api) => (api.inline ? { style: undefined } : {}),\n  },\n  field: {\n    ids: (field) => ({ label: field.label, trigger: field.control }),\n    describe: ['trigger', 'channelInput', 'areaThumb', 'channelSliderThumb'],\n    labelable: false,\n  },\n  machineTranslations: null,\n  variantProps: ['value', 'defaultValue', 'onValueChange', 'onValueChangeEnd', 'size'],\n  useMachineProps: useColorPickerMachineProps,\n  slots: (props: ColorPickerRootProps) => {\n    const size = resolveSize(props.size, 'ColorPicker')\n    const raw = colorPickerRecipe.raw({ size })\n    return {\n      ...colorPickerRecipe({ size }),\n      eyeDropperTrigger: buttonPartClass(\n        { variant: 'ghost', tone: 'neutral', size },\n        raw.eyeDropperTrigger,\n      ),\n      formatTrigger: buttonPartClass(\n        { variant: 'ghost', tone: 'neutral', size: sizeBelow(size) },\n        raw.formatTrigger,\n      ),\n      channelInput: inputPartClass(size, raw.channelInput),\n    }\n  },\n})\n\nObject.assign(ColorPicker, {\n  FormatSelect: withSelectIndicator(ColorPicker.FormatSelect),\n})\n"],"mappings":"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"}

package/dist/components/color-picker/color-picker.recipe.mjs

@@ -0,0 +1,345 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/color-picker/color-picker.recipe.ts
+const colorPickerRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"control",
+		"trigger",
+		"positioner",
+		"content",
+		"area",
+		"areaThumb",
+		"valueText",
+		"areaBackground",
+		"channelSlider",
+		"channelSliderLabel",
+		"channelSliderTrack",
+		"channelSliderThumb",
+		"channelSliderValueText",
+		"channelInput",
+		"transparencyGrid",
+		"swatchGroup",
+		"swatchTrigger",
+		"swatchIndicator",
+		"swatch",
+		"eyeDropperTrigger",
+		"formatTrigger",
+		"formatSelect"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline",
+			color: "foreground.default",
+			_disabled: { color: "foreground.disabled" }
+		},
+		label: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		control: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline"
+		},
+		trigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			padding: "inset.none",
+			overflow: "hidden",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			bg: "surface.raised",
+			cursor: "default",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled], [data-readonly], [data-invalid], [aria-invalid=true], :focus-visible, [data-state=open]):hover": { borderColor: "primary.default" },
+			"&:is(:focus-visible, [data-state=open])": {
+				borderColor: "border.focus",
+				outlineStyle: "solid",
+				outlineWidth: "hairline",
+				outlineOffset: "inset.none",
+				outlineColor: "border.focus"
+			},
+			"&[data-invalid]": {
+				borderColor: "error.default",
+				outlineStyle: "solid",
+				outlineWidth: "hairline",
+				outlineOffset: "inset.none",
+				outlineColor: "error.default",
+				"&:is(:focus-visible, [data-state=open])": {
+					borderColor: "error.default",
+					outlineWidth: "focus",
+					outlineColor: "border.focus"
+				}
+			},
+			"&[data-readonly]": { borderStyle: "dashed" },
+			_disabled: {
+				bg: "secondary.default",
+				borderColor: "border.default",
+				cursor: "not-allowed",
+				_highContrast: { borderColor: "system.grayText" }
+			}
+		},
+		positioner: { zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))" },
+		content: {
+			layerStyle: "reveal",
+			zIndex: "calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))",
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.related",
+			minWidth: "surface.overlayMin",
+			maxWidth: "surface.overlayMax",
+			padding: "inset.overlay",
+			rounded: "overlay",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.overlay",
+			bg: "surface.overlay",
+			color: "foreground.default",
+			boxShadow: "overlay",
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		area: {
+			position: "relative",
+			width: "fill",
+			height: "surface.overlayMin",
+			rounded: "inset",
+			overflow: "hidden",
+			touchAction: "none"
+		},
+		areaThumb: {
+			width: "icon.sm",
+			height: "icon.sm",
+			rounded: "pill",
+			_before: {
+				content: "\"\"",
+				position: "absolute",
+				inset: "-inset.compact",
+				rounded: "pill"
+			},
+			borderWidth: "emphasis",
+			borderStyle: "solid",
+			borderColor: "foreground.onEmphasis",
+			boxShadow: "raised",
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		valueText: {
+			textStyle: "detail",
+			color: "foreground.muted"
+		},
+		areaBackground: {
+			position: "absolute",
+			width: "fill",
+			height: "fill",
+			rounded: "inset"
+		},
+		channelSlider: {
+			display: "flex",
+			alignItems: "center",
+			minHeight: "target.minimum",
+			touchAction: "none"
+		},
+		channelSliderLabel: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			minWidth: "icon.xl"
+		},
+		channelSliderTrack: {
+			width: "fill",
+			height: "icon.xs",
+			rounded: "pill",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.muted"
+		},
+		channelSliderThumb: {
+			width: "icon.sm",
+			height: "icon.sm",
+			transform: "translate(-50%, -50%)",
+			rounded: "pill",
+			_before: {
+				content: "\"\"",
+				position: "absolute",
+				inset: "-inset.compact",
+				rounded: "pill"
+			},
+			borderWidth: "emphasis",
+			borderStyle: "solid",
+			borderColor: "foreground.onEmphasis",
+			boxShadow: "raised",
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				borderColor: "border.muted",
+				boxShadow: "flat",
+				cursor: "not-allowed"
+			}
+		},
+		channelSliderValueText: {
+			textStyle: "detail",
+			color: "foreground.muted"
+		},
+		channelInput: { fontVariantNumeric: "tabular-nums" },
+		transparencyGrid: { pointerEvents: "none" },
+		swatchGroup: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: "gap.inline"
+		},
+		swatchTrigger: {
+			display: "inline-grid",
+			placeItems: "center",
+			flexShrink: 0,
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			padding: "inset.none",
+			overflow: "hidden",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.muted",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled], [data-invalid], [aria-invalid=true], [data-state=checked]):hover": { borderColor: "border.strong" },
+			"&[data-state=checked]": {
+				borderWidth: "emphasis",
+				borderColor: "foreground.default",
+				_highContrast: { borderColor: "system.highlight" }
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				borderColor: "border.muted",
+				cursor: "not-allowed",
+				_highContrast: { borderColor: "system.grayText" }
+			}
+		},
+		swatchIndicator: {
+			gridArea: "1 / 1",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: "inset.compact",
+			rounded: "pill",
+			bg: "surface.overlay",
+			color: "foreground.default",
+			pointerEvents: "none",
+			"& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			},
+			_hidden: { display: "none" }
+		},
+		swatch: {
+			gridArea: "1 / 1",
+			width: "fill",
+			height: "fill",
+			alignSelf: "stretch",
+			justifySelf: "stretch"
+		},
+		eyeDropperTrigger: { flexShrink: 0 },
+		formatTrigger: { flexShrink: 0 },
+		formatSelect: {
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			paddingInline: "inset.control",
+			"--select-indicator-room": "calc(token(spacing.inset.compact) * 2 + token(sizes.icon.sm))",
+			paddingInlineEnd: "var(--select-indicator-room)",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			bg: "surface.raised",
+			color: "foreground.muted",
+			textStyle: "detail",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not(:disabled, [data-disabled], [data-invalid], [aria-invalid=true], :focus-visible):hover": { borderColor: "primary.default" },
+			_focusVisible: {
+				borderColor: "border.focus",
+				outlineStyle: "solid",
+				outlineWidth: "hairline",
+				outlineOffset: "inset.none",
+				outlineColor: "border.focus"
+			},
+			_disabled: {
+				bg: "secondary.default",
+				color: "foreground.disabled",
+				cursor: "not-allowed"
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			root: { textStyle: "detail" },
+			trigger: {
+				width: "control.xs",
+				height: "control.xs"
+			}
+		},
+		sm: {
+			root: { textStyle: "body" },
+			trigger: {
+				width: "control.sm",
+				height: "control.sm"
+			}
+		},
+		md: {
+			root: { textStyle: "body" },
+			trigger: {
+				width: "control.md",
+				height: "control.md"
+			}
+		},
+		lg: {
+			root: { textStyle: "body" },
+			trigger: {
+				width: "control.lg",
+				height: "control.lg"
+			}
+		},
+		xl: {
+			root: { textStyle: "subtitle" },
+			trigger: {
+				width: "control.xl",
+				height: "control.xl"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { colorPickerRecipe };
+
+//# sourceMappingURL=color-picker.recipe.mjs.map

package/dist/components/color-picker/color-picker.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.recipe.mjs","names":[],"sources":["../../../src/components/color-picker/color-picker.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const colorPickerRecipe = sva({\n  slots: [\n    'root',\n    'label',\n    'control',\n    'trigger',\n    'positioner',\n    'content',\n    'area',\n    'areaThumb',\n    'valueText',\n    'areaBackground',\n    'channelSlider',\n    'channelSliderLabel',\n    'channelSliderTrack',\n    'channelSliderThumb',\n    'channelSliderValueText',\n    'channelInput',\n    'transparencyGrid',\n    'swatchGroup',\n    'swatchTrigger',\n    'swatchIndicator',\n    'swatch',\n    'eyeDropperTrigger',\n    'formatTrigger',\n    'formatSelect',\n  ],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n      color: 'foreground.default',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    label: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n    },\n    trigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      padding: 'inset.none',\n      overflow: 'hidden',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      bg: 'surface.raised',\n      cursor: 'default',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled], [data-readonly], [data-invalid], [aria-invalid=true], :focus-visible, [data-state=open]):hover':\n        { borderColor: 'primary.default' },\n      '&:is(:focus-visible, [data-state=open])': {\n        borderColor: 'border.focus',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'border.focus',\n      },\n      '&[data-invalid]': {\n        borderColor: 'error.default',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'error.default',\n        '&:is(:focus-visible, [data-state=open])': {\n          borderColor: 'error.default',\n          outlineWidth: 'focus',\n          outlineColor: 'border.focus',\n        },\n      },\n      '&[data-readonly]': {\n        borderStyle: 'dashed',\n      },\n      _disabled: {\n        bg: 'secondary.default',\n        borderColor: 'border.default',\n        cursor: 'not-allowed',\n        _highContrast: { borderColor: 'system.grayText' },\n      },\n    },\n    positioner: {\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n    },\n    content: {\n      layerStyle: 'reveal',\n      zIndex: 'calc(var(--synapse-layer-base, 1000) + var(--layer-index, 0))',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.related',\n      minWidth: 'surface.overlayMin',\n      maxWidth: 'surface.overlayMax',\n      padding: 'inset.overlay',\n      rounded: 'overlay',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.overlay',\n      bg: 'surface.overlay',\n      color: 'foreground.default',\n      boxShadow: 'overlay',\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    area: {\n      position: 'relative',\n      width: 'fill',\n      height: 'surface.overlayMin',\n      rounded: 'inset',\n      overflow: 'hidden',\n      touchAction: 'none',\n    },\n    areaThumb: {\n      width: 'icon.sm',\n      height: 'icon.sm',\n      rounded: 'pill',\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        inset: '-inset.compact',\n        rounded: 'pill',\n      },\n      borderWidth: 'emphasis',\n      borderStyle: 'solid',\n      borderColor: 'foreground.onEmphasis',\n      boxShadow: 'raised',\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    valueText: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n    },\n    areaBackground: {\n      position: 'absolute',\n      width: 'fill',\n      height: 'fill',\n      rounded: 'inset',\n    },\n    channelSlider: {\n      display: 'flex',\n      alignItems: 'center',\n      minHeight: 'target.minimum',\n      touchAction: 'none',\n    },\n    channelSliderLabel: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      minWidth: 'icon.xl',\n    },\n    channelSliderTrack: {\n      width: 'fill',\n      height: 'icon.xs',\n      rounded: 'pill',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.muted',\n    },\n    channelSliderThumb: {\n      width: 'icon.sm',\n      height: 'icon.sm',\n      transform: 'translate(-50%, -50%)',\n      rounded: 'pill',\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        inset: '-inset.compact',\n        rounded: 'pill',\n      },\n      borderWidth: 'emphasis',\n      borderStyle: 'solid',\n      borderColor: 'foreground.onEmphasis',\n      boxShadow: 'raised',\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _disabled: { borderColor: 'border.muted', boxShadow: 'flat', cursor: 'not-allowed' },\n    },\n    channelSliderValueText: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n    },\n    channelInput: {\n      fontVariantNumeric: 'tabular-nums',\n    },\n    transparencyGrid: {\n      pointerEvents: 'none',\n    },\n    swatchGroup: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      gap: 'gap.inline',\n    },\n    swatchTrigger: {\n      display: 'inline-grid',\n      placeItems: 'center',\n      flexShrink: 0,\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      padding: 'inset.none',\n      overflow: 'hidden',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.muted',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled], [data-invalid], [aria-invalid=true], [data-state=checked]):hover':\n        {\n          borderColor: 'border.strong',\n        },\n      '&[data-state=checked]': {\n        borderWidth: 'emphasis',\n        borderColor: 'foreground.default',\n        _highContrast: { borderColor: 'system.highlight' },\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _disabled: {\n        borderColor: 'border.muted',\n        cursor: 'not-allowed',\n        _highContrast: { borderColor: 'system.grayText' },\n      },\n    },\n    swatchIndicator: {\n      gridArea: '1 / 1',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: 'inset.compact',\n      rounded: 'pill',\n      bg: 'surface.overlay',\n      color: 'foreground.default',\n      pointerEvents: 'none',\n      '& svg': { width: 'icon.xs', height: 'icon.xs' },\n      _hidden: { display: 'none' },\n    },\n    swatch: {\n      gridArea: '1 / 1',\n      width: 'fill',\n      height: 'fill',\n      alignSelf: 'stretch',\n      justifySelf: 'stretch',\n    },\n    eyeDropperTrigger: { flexShrink: 0 },\n    formatTrigger: { flexShrink: 0 },\n    formatSelect: {\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.control',\n      '--select-indicator-room': 'calc(token(spacing.inset.compact) * 2 + token(sizes.icon.sm))',\n      paddingInlineEnd: 'var(--select-indicator-room)',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      bg: 'surface.raised',\n      color: 'foreground.muted',\n      textStyle: 'detail',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not(:disabled, [data-disabled], [data-invalid], [aria-invalid=true], :focus-visible):hover':\n        { borderColor: 'primary.default' },\n      _focusVisible: {\n        borderColor: 'border.focus',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'border.focus',\n      },\n      _disabled: {\n        bg: 'secondary.default',\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n      },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        root: { textStyle: 'detail' },\n        trigger: { width: 'control.xs', height: 'control.xs' },\n      },\n      sm: {\n        root: { textStyle: 'body' },\n        trigger: { width: 'control.sm', height: 'control.sm' },\n      },\n      md: {\n        root: { textStyle: 'body' },\n        trigger: { width: 'control.md', height: 'control.md' },\n      },\n      lg: {\n        root: { textStyle: 'body' },\n        trigger: { width: 'control.lg', height: 'control.lg' },\n      },\n      xl: {\n        root: { textStyle: 'subtitle' },\n        trigger: { width: 'control.xl', height: 'control.xl' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":"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"}

package/dist/components/color-picker/index.d.mts

@@ -0,0 +1,2 @@
+import { COLOR_PICKER_FORMATS, ColorPicker, ColorPickerFormat, ColorPickerFormatChangeDetails, ColorPickerPositioning, ColorPickerRootProps, ColorPickerValueChangeDetails } from "./color-picker.mjs";
+export { COLOR_PICKER_FORMATS, ColorPicker, type ColorPickerFormat, type ColorPickerFormatChangeDetails, type ColorPickerPositioning, type ColorPickerRootProps, type ColorPickerValueChangeDetails };

package/dist/components/color-picker/index.mjs

@@ -0,0 +1,2 @@
+import { COLOR_PICKER_FORMATS, ColorPicker } from "./color-picker.mjs";
+export { COLOR_PICKER_FORMATS, ColorPicker };

package/dist/components/combobox/combobox.d.mts

@@ -0,0 +1,129 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { DomAttributes, PartComponent, PartOwnProps, SynapseComponentMeta } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { SynapseCollection } from "../../shared/collection.mjs";
+import { ReactNode } from "react";
+//#region src/components/combobox/combobox.d.ts
+export interface ComboboxPositioning {
+  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+  gutter?: number;
+  sameWidth?: boolean;
+}
+export interface ComboboxValueChangeDetails {
+  readonly value: readonly string[];
+}
+export interface ComboboxInputValueChangeDetails {
+  readonly inputValue: string;
+}
+export interface ComboboxHighlightChangeDetails {
+  readonly highlightedValue: string | null;
+}
+export type ComboboxInputBehavior = 'none' | 'autohighlight' | 'autocomplete';
+export type ComboboxSelectionBehavior = 'replace' | 'clear' | 'preserve';
+export interface ComboboxRootProps<TItem> {
+  /**
+   * 제시할 컬렉션이며, `createCollection`으로 만듭니다.
+   *
+   * 필터링은 사용처의 몫입니다: 질의가 바뀌는 대로 컬렉션을 좁히고 — `withItems`는 새 컬렉션을
+   * 돌려주고 이것은 건드리지 않습니다 — 그 결과를 넘기면 됩니다. 컴포넌트는 사용처를 대신해
+   * 필터링하지 않는데, 일치가 "~로 시작"인지 "~를 포함"인지 "퍼지"인지 "서버가 말한 대로"인지
+   * 알 수 없기 때문입니다.
+   */
+  collection: SynapseCollection<TItem>;
+  /** 제어되는 선택. */
+  value?: readonly string[];
+  /** 비제어 초기 선택. `value`가 주어지면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 제어 여부와 무관하게 선택이 바뀔 때마다 알림을 받습니다. */
+  onValueChange?: (details: ComboboxValueChangeDetails) => void;
+  /** 제어되는 필드 안의 텍스트. 선택된 것을 뜻하는 `value`와는 별개입니다. */
+  inputValue?: string;
+  /** 비제어 초기 필드 텍스트. */
+  defaultInputValue?: string;
+  /** 텍스트가 바뀔 때 알림을 받습니다 — 사용처가 컬렉션을 다시 거르는 지점입니다. */
+  onInputValueChange?: (details: ComboboxInputValueChangeDetails) => void;
+  /** 제어되는 하이라이트 아이템 — `aria-activedescendant`가 가리키는 대상입니다. */
+  highlightedValue?: string | null;
+  /** 비제어 초기 하이라이트 아이템. */
+  defaultHighlightedValue?: string | null;
+  /** 하이라이트가 움직일 때 알림을 받으며, 한 번도 렌더된 적 없는 아이템으로 갈 때도 받습니다. */
+  onHighlightChange?: (details: ComboboxHighlightChangeDetails) => void;
+  /** 제어되는 목록의 열림 상태. */
+  open?: boolean;
+  /** 비제어 초기 열림 상태. */
+  defaultOpen?: boolean;
+  /** 목록이 열리거나 닫힐 때마다 알림을 받습니다. */
+  onOpenChange?: (details: {
+    open: boolean;
+  }) => void;
+  /**
+   * 요청이 진행 중입니다.
+   *
+   * 이 컴포넌트가 스스로 답할 수 없는 유일한 상태 part 사실입니다. `Combobox.Loading`을
+   * 움직이며, `Combobox.Empty`보다 우선합니다 — 결과가 아직 도착하지 않아 비어 있는 컬렉션은
+   * 결과가 없는 컬렉션이 아닙니다.
+   */
+  loading?: boolean;
+  /** 둘 이상을 선택할 수 있게 합니다. */
+  multiple?: boolean;
+  /** 어떤 아이템과도 일치하지 않는 텍스트도 값으로 받아들입니다. */
+  allowCustomValue?: boolean;
+  /** 선택하면 목록을 닫습니다. 단일 선택 Combobox에서는 기본값이 true입니다. */
+  closeOnSelect?: boolean;
+  /** 필터링 말고도 타이핑이 무엇을 하는지. 기본값은 `none`입니다. */
+  inputBehavior?: ComboboxInputBehavior;
+  /** 선택하면 필드의 텍스트가 어떻게 되는지. 기본값은 `replace`입니다. */
+  selectionBehavior?: ComboboxSelectionBehavior;
+  /** 필드를 클릭하면 목록을 엽니다. */
+  openOnClick?: boolean;
+  /** 텍스트가 바뀌는 즉시 목록을 엽니다. 기본값은 true입니다. */
+  openOnChange?: boolean;
+  /** 키보드 이동이 양 끝을 넘어가면 반대편으로 이어집니다. */
+  loopFocus?: boolean;
+  /** 필드의 placeholder 텍스트. */
+  placeholder?: string;
+  /** 목록이 놓이는 위치. */
+  positioning?: ComboboxPositioning;
+  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 폼 바깥에 렌더된 Combobox를 id로 폼과 연결합니다. */
+  form?: string;
+  /** 비활성화된 Combobox는 제출되지 않고 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 Combobox는 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알려집니다. */
+  invalid?: boolean;
+  /** 제약 검증: 폼이 제출되려면 무언가가 선택되어 있어야 합니다. */
+  required?: boolean;
+  /** 마운트될 때 포커스를 필드 안으로 옮깁니다. */
+  autoFocus?: boolean;
+  /** 이 Combobox에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+declare function ComboboxRoot<TItem>(props: ComboboxRootProps<TItem> & PartOwnProps<HTMLElement> & DomAttributes): ReactNode;
+export declare const Combobox: {
+  meta: SynapseComponentMeta;
+  Root: typeof ComboboxRoot;
+  ClearTrigger: PartComponent<HTMLElement, Record<string, unknown>>;
+  Content: PartComponent<HTMLElement, Record<string, unknown>>;
+  Control: PartComponent<HTMLElement, Record<string, unknown>>;
+  Empty: PartComponent<HTMLElement, Record<string, unknown>>;
+  Input: PartComponent<HTMLElement, Record<string, unknown>>;
+  Item: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemGroup: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemGroupLabel: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemIndicator: PartComponent<HTMLElement, Record<string, unknown>>;
+  ItemText: PartComponent<HTMLElement, Record<string, unknown>>;
+  Label: PartComponent<HTMLElement, Record<string, unknown>>;
+  List: PartComponent<HTMLElement, Record<string, unknown>>;
+  Loading: PartComponent<HTMLElement, Record<string, unknown>>;
+  Positioner: PartComponent<HTMLElement, Record<string, unknown>>;
+  Trigger: PartComponent<HTMLElement, Record<string, unknown>>;
+};
+//#endregion
+//# sourceMappingURL=combobox.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.mts","names":[],"sources":["../../../src/components/combobox/combobox.tsx"],"mappings":";;;;;;iBAuBiB;EACf;EACA;EACA;;iBAGe;WACN;;iBAGM;WACN;;iBAGM;WACN;;YAGC;YAEA;iBAEK,kBAAkB;;;;;;;;;EASjC,YAAY,kBAAkB;;EAE9B;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,sBAAsB,SAAS;;EAE/B;;EAEA;;EAEA,qBAAqB,SAAS;;EAE9B;;EAEA;;EAEA,gBAAgB;IAAW;;;;;;;;;EAQ3B;;EAEA;;EAEA;;EAEA;;EAEA,gBAAgB;;EAEhB,oBAAoB;;EAEpB;;EAEA;;EAEA;;EAEA;;EAEA,cAAc;;EAEd;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;iBA6EO,aAAa,OACpB,OAAO,kBAAkB,SAAS,aAAa,eAAe,gBAC7D;qBAMU;QAAA"}

package/dist/components/combobox/combobox.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { chevronsUpDown } from "../../icons/src/chevrons-up-down.mjs";
+import { close } from "../../icons/src/close.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { createStateParts } from "../../shared/state-parts.mjs";
+import { pinnedRowProps, positionProps, rememberCollection, windowedContent } from "../collection-window.mjs";
+import { comboboxRecipe, comboboxStateSlots } from "./combobox.recipe.mjs";
+import { createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as combobox from "@zag-js/combobox";
+//#region src/components/combobox/combobox.tsx
+const base = defineComponent()({
+	name: "Combobox",
+	module: combobox,
+	rootPart: "root",
+	field: {
+		ids: (field) => ({
+			label: field.label,
+			input: field.control
+		}),
+		describe: ["input"]
+	},
+	elements: {
+		itemText: "span",
+		itemIndicator: "span",
+		input: "input"
+	},
+	defaultContent: {
+		trigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronsUpDown }),
+		clearTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close }),
+		list: windowedContent({ renderRow: (row, hidden, collection) => /* @__PURE__ */ jsxs(base.Item, {
+			item: row.item,
+			...positionProps(row.position),
+			...pinnedRowProps(hidden),
+			children: [/* @__PURE__ */ jsx(base.ItemText, {
+				item: row.item,
+				children: collection.labelOf(row.value)
+			}), /* @__PURE__ */ jsx(base.ItemIndicator, { item: row.item })]
+		}, row.value) })
+	},
+	getterProps: {
+		item: ["item", "persistFocus"],
+		itemText: ["item"],
+		itemIndicator: ["item"],
+		itemGroup: ["id"],
+		itemGroupLabel: ["htmlFor"],
+		trigger: ["focusable"]
+	},
+	machineTranslations: {
+		triggerLabel: "combobox.trigger.label",
+		clearTriggerLabel: "combobox.clearTrigger.label"
+	},
+	variantProps: ["size", "loading"],
+	slots: (props) => {
+		const size = resolveSize(props.size, "Combobox");
+		return {
+			...comboboxRecipe({ size }),
+			control: inputPartClass(size, comboboxRecipe.raw({ size }).control)
+		};
+	}
+});
+const state = createStateParts({
+	component: "Combobox",
+	when: {
+		empty: (props) => props.collection.size === 0,
+		loading: (props) => props.loading === true
+	},
+	absent: { error: "A Combobox does not perform the request whose failure this would report. The consumer fetches and filters, so the consumer is the only party that knows a request failed — and the place to say so is beside the field, not inside a list the component opens and closes on its own schedule." },
+	slots: () => comboboxStateSlots
+});
+const StatefulRoot = state.wrapRoot(base.Root);
+function ComboboxRoot(props) {
+	const { collection, ...rest } = props;
+	return createElement(StatefulRoot, {
+		...rest,
+		collection: rememberCollection(collection)
+	});
+}
+ComboboxRoot.displayName = StatefulRoot.displayName;
+const Combobox = {
+	...base,
+	...state.parts,
+	Root: ComboboxRoot
+};
+//#endregion
+export { Combobox };
+
+//# sourceMappingURL=combobox.mjs.map