@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/file-upload/file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.mjs","names":["fileIcon"],"sources":["../../../src/components/file-upload/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport { close, file as fileIcon, trash } from '@neurocle/synapse-icons'\nimport * as fileUpload from '@zag-js/file-upload'\nimport { createElement, type ComponentProps, type ReactNode } from 'react'\n\nimport {\n  fileUploadRecipe,\n  fileUploadStateSlots,\n} from '#/components/file-upload/file-upload.recipe.ts'\nimport { resolveMachineTranslations } from '#/components/machine-translations.ts'\nimport { useTranslations } from '#/provider/locale-context.ts'\nimport type { TranslationKey, TranslationOverrides } from '#/provider/translations.ts'\nimport { buttonPartClass, type ButtonStyle } from '#/shared/button-style.ts'\nimport { useFieldContext } from '#/shared/field-context.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { resolveSize, sizeBelow, type Size } from '#/shared/size-scale.ts'\nimport { createStateParts } from '#/shared/state-parts.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport type FileUploadRejectReason =\n  | 'TOO_MANY_FILES'\n  | 'FILE_INVALID_TYPE'\n  | 'FILE_TOO_LARGE'\n  | 'FILE_TOO_SMALL'\n  | 'FILE_INVALID'\n  | 'FILE_EXISTS'\n\nexport interface FileUploadRejection {\n  readonly file: File\n  readonly errors: readonly FileUploadRejectReason[]\n}\n\nexport interface FileUploadChangeDetails {\n  readonly acceptedFiles: readonly File[]\n  readonly rejectedFiles: readonly FileUploadRejection[]\n}\n\nexport interface FileUploadAcceptDetails {\n  readonly files: readonly File[]\n}\n\nexport interface FileUploadRejectDetails {\n  readonly files: readonly FileUploadRejection[]\n}\n\nexport interface FileUploadRootProps {\n  /** 제어되는 수락된 파일. */\n  acceptedFiles?: readonly File[]\n  /** 비제어 초기 파일. `acceptedFiles`가 주어지면 무시됩니다. */\n  defaultAcceptedFiles?: readonly File[]\n  /** 쥐고 있는 파일이 바뀔 때마다 알림을 받으며, 수락이든 거부든 마찬가지입니다. */\n  onFileChange?: (details: FileUploadChangeDetails) => void\n  /** 파일이 수락될 때 알림을 받습니다. */\n  onFileAccept?: (details: FileUploadAcceptDetails) => void\n  /** 파일이 거부될 때 각각의 이유와 함께 알림을 받습니다. */\n  onFileReject?: (details: FileUploadRejectDetails) => void\n  /**\n   * 업로드가 진행 중입니다.\n   *\n   * 컴포넌트는 파일을 받아들이고 업로드는 사용처가 하므로, 이 사실은 사용처만 압니다.\n   * `FileUpload.Loading`을 움직입니다.\n   */\n  loading?: boolean\n  /**\n   * 업로드가 실패했습니다.\n   *\n   * `FileUpload.Error`를 움직이며, `loading`보다 우선합니다 — 실패한 요청은 대기 중인 요청이\n   * 아닙니다. 문구는 사용처의 몫이며, 이 컴포넌트는 문구를 싣지 않습니다.\n   */\n  error?: boolean\n  /** 선택기가 무엇을 제시하는지이며, MIME 타입이나 확장자로 줍니다. */\n  accept?: string | readonly string[] | Record<string, readonly string[]>\n  /** 쥘 수 있는 파일의 최대 개수. 기본값은 1입니다. */\n  maxFiles?: number\n  /** 파일 하나의 최대 크기이며, 단위는 바이트입니다. */\n  maxFileSize?: number\n  /** 파일 하나의 최소 크기이며, 단위는 바이트입니다. */\n  minFileSize?: number\n  /** 파일이 수락되기 전에 거부합니다. 이유를 돌려주거나, 수락하려면 null을 돌려줍니다. */\n  validate?: (file: File) => readonly FileUploadRejectReason[] | null\n  /** 들어오는 파일을 다시 씁니다 — 이를테면 압축하거나 이름을 바꿉니다. */\n  transformFiles?: (files: readonly File[]) => Promise<readonly File[]>\n  /** 파일뿐 아니라 끌어다 놓은 디렉터리도 받아들입니다. */\n  directory?: boolean\n  /** 모바일 선택기가 어느 카메라를 여는지. */\n  capture?: 'user' | 'environment'\n  /** 끌어다 놓기를 허용합니다. 기본값은 true입니다. */\n  allowDrop?: boolean\n  /** 페이지의 다른 곳에 파일을 떨어뜨렸을 때 페이지가 이동해 버리는 것을 막습니다. */\n  preventDocumentDrop?: boolean\n  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 비활성화된 FileUpload는 제출되지 않고 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 FileUpload는 가진 파일을 보여 주지만 더 받아들이지는 않습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알려집니다. */\n  invalid?: boolean\n  /** 제약 검증: 폼이 제출되려면 파일이 있어야 합니다. */\n  required?: boolean\n  /** 파일 크기를 표기할 때 쓰는 로캘. 기본값은 provider의 로캘입니다. */\n  locale?: string\n  /** 이 FileUpload에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nconst MACHINE_STRINGS: Readonly<Record<string, TranslationKey>> = {\n  dropzone: 'fileUpload.dropzone.label',\n}\n\nfunction FileUploadDropzone(props: ComponentProps<'div'>): ReactNode {\n  const field = useFieldContext()\n  return createElement('div', {\n    ...props,\n    'aria-labelledby': props['aria-labelledby'] ?? field?.ids.label,\n  })\n}\n\nconst base = defineComponent<FileUploadRootProps>()({\n  name: 'FileUpload',\n  module: fileUpload,\n  rootPart: 'root',\n  elements: {\n    dropzone: FileUploadDropzone,\n    itemPreviewImage: 'img',\n    itemName: 'span',\n    itemSizeText: 'span',\n  },\n  defaultContent: {\n    clearTrigger: () => <Icon icon={close} />,\n    itemDeleteTrigger: () => <Icon icon={trash} />,\n    itemPreview: () => <Icon icon={fileIcon} />,\n    itemName: (_api, _t, args) => (args['file'] instanceof File ? args['file'].name : null),\n    itemSizeText: (api, _t, args) =>\n      args['file'] instanceof File ? api.getFileSize(args['file']) : null,\n  },\n  getterProps: {\n    dropzone: ['disableClick'],\n    itemGroup: ['type'],\n    item: ['file', 'type'],\n    itemName: ['file', 'type'],\n    itemPreview: ['file', 'type'],\n    itemPreviewImage: ['file', 'type', 'url'],\n    itemSizeText: ['file', 'type'],\n    itemDeleteTrigger: ['file', 'type'],\n  },\n  rootOwnedGetters: [\n    {\n      name: 'hiddenInput',\n      getter: 'getHiddenInputProps',\n      render: (props) => createElement('input', { ...props, 'data-synapse-form-field': '' }),\n    },\n  ],\n  amendBehaviorProps: {\n    dropzone: (behaviorProps) => ({\n      'aria-invalid': behaviorProps['data-invalid'] === '' ? true : undefined,\n    }),\n    trigger: (behaviorProps) => ({\n      'aria-invalid': behaviorProps['data-invalid'] === '' ? true : undefined,\n    }),\n    clearTrigger: (_behaviorProps, _api, _args, translate) => ({\n      'aria-label': translate('fileUpload.clearTrigger.label'),\n    }),\n  },\n  machineTranslations: MACHINE_STRINGS,\n  field: {\n    ids: (field) => ({ label: field.label }),\n    describe: ['dropzone', 'trigger'],\n    labelable: false,\n  },\n  useMachineProps: (props: FileUploadRootProps) => {\n    const translate = useTranslations(props.translations)\n    return {\n      translations: {\n        ...resolveMachineTranslations(MACHINE_STRINGS, translate),\n        itemPreview: (file: File) => translate('fileUpload.item.preview', { name: file.name }),\n        deleteFile: (file: File) =>\n          translate('fileUpload.deleteTrigger.label', { name: file.name }),\n      },\n    }\n  },\n  variantProps: ['size', 'loading', 'error'],\n  slots: (props: FileUploadRootProps) => {\n    const size = resolveSize(props.size, 'FileUpload')\n    const own = fileUploadRecipe.raw({ size })\n    const compact: ButtonStyle = { variant: 'ghost', tone: 'neutral', size: sizeBelow(size) }\n    return {\n      ...fileUploadRecipe({ size }),\n      trigger: buttonPartClass({ variant: 'outline', tone: 'neutral', size }, own.trigger),\n      clearTrigger: buttonPartClass(compact, own.clearTrigger),\n      itemDeleteTrigger: buttonPartClass(compact, own.itemDeleteTrigger),\n    }\n  },\n})\n\nconst state = createStateParts<FileUploadRootProps, 'loading' | 'error'>({\n  component: 'FileUpload',\n  when: {\n    error: (props) => props.error === true,\n    loading: (props) => props.loading === true,\n  },\n  absent: {\n    empty:\n      'A FileUpload with no files is not an empty state: the dropzone is already on the page ' +\n      'telling the user what to do, and a second region saying the same thing would tell them ' +\n      'twice that they have not yet done it. The list of chosen files simply has no rows.',\n  },\n  slots: () => fileUploadStateSlots,\n})\n\nexport const FileUpload = {\n  ...base,\n  ...state.parts,\n  Root: state.wrapRoot(base.Root),\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+GA,MAAM,kBAA4D,EAChE,UAAU,4BACZ;AAEA,SAAS,mBAAmB,OAAyC;CACnE,MAAM,QAAQ,gBAAgB;CAC9B,OAAO,cAAc,OAAO;EAC1B,GAAG;EACH,mBAAmB,MAAM,sBAAsB,OAAO,IAAI;CAC5D,CAAC;AACH;AAEA,MAAM,OAAO,gBAAqC,CAAC,CAAC;CAClD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU;EACR,UAAU;EACV,kBAAkB;EAClB,UAAU;EACV,cAAc;CAChB;CACA,gBAAgB;EACd,oBAAoB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;EACxC,yBAAyB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;EAC7C,mBAAmB,oBAAC,MAAD,EAAM,MAAMA,KAAW,CAAA;EAC1C,WAAW,MAAM,IAAI,SAAU,KAAK,mBAAmB,OAAO,KAAK,OAAO,CAAC,OAAO;EAClF,eAAe,KAAK,IAAI,SACtB,KAAK,mBAAmB,OAAO,IAAI,YAAY,KAAK,OAAO,IAAI;CACnE;CACA,aAAa;EACX,UAAU,CAAC,cAAc;EACzB,WAAW,CAAC,MAAM;EAClB,MAAM,CAAC,QAAQ,MAAM;EACrB,UAAU,CAAC,QAAQ,MAAM;EACzB,aAAa,CAAC,QAAQ,MAAM;EAC5B,kBAAkB;GAAC;GAAQ;GAAQ;EAAK;EACxC,cAAc,CAAC,QAAQ,MAAM;EAC7B,mBAAmB,CAAC,QAAQ,MAAM;CACpC;CACA,kBAAkB,CAChB;EACE,MAAM;EACN,QAAQ;EACR,SAAS,UAAU,cAAc,SAAS;GAAE,GAAG;GAAO,2BAA2B;EAAG,CAAC;CACvF,CACF;CACA,oBAAoB;EAClB,WAAW,mBAAmB,EAC5B,gBAAgB,cAAc,oBAAoB,KAAK,OAAO,KAAA,EAChE;EACA,UAAU,mBAAmB,EAC3B,gBAAgB,cAAc,oBAAoB,KAAK,OAAO,KAAA,EAChE;EACA,eAAe,gBAAgB,MAAM,OAAO,eAAe,EACzD,cAAc,UAAU,+BAA+B,EACzD;CACF;CACA,qBAAqB;CACrB,OAAO;EACL,MAAM,WAAW,EAAE,OAAO,MAAM,MAAM;EACtC,UAAU,CAAC,YAAY,SAAS;EAChC,WAAW;CACb;CACA,kBAAkB,UAA+B;EAC/C,MAAM,YAAY,gBAAgB,MAAM,YAAY;EACpD,OAAO,EACL,cAAc;GACZ,GAAG,2BAA2B,iBAAiB,SAAS;GACxD,cAAc,SAAe,UAAU,2BAA2B,EAAE,MAAM,KAAK,KAAK,CAAC;GACrF,aAAa,SACX,UAAU,kCAAkC,EAAE,MAAM,KAAK,KAAK,CAAC;EACnE,EACF;CACF;CACA,cAAc;EAAC;EAAQ;EAAW;CAAO;CACzC,QAAQ,UAA+B;EACrC,MAAM,OAAO,YAAY,MAAM,MAAM,YAAY;EACjD,MAAM,MAAM,iBAAiB,IAAI,EAAE,KAAK,CAAC;EACzC,MAAM,UAAuB;GAAE,SAAS;GAAS,MAAM;GAAW,MAAM,UAAU,IAAI;EAAE;EACxF,OAAO;GACL,GAAG,iBAAiB,EAAE,KAAK,CAAC;GAC5B,SAAS,gBAAgB;IAAE,SAAS;IAAW,MAAM;IAAW;GAAK,GAAG,IAAI,OAAO;GACnF,cAAc,gBAAgB,SAAS,IAAI,YAAY;GACvD,mBAAmB,gBAAgB,SAAS,IAAI,iBAAiB;EACnE;CACF;AACF,CAAC;AAED,MAAM,QAAQ,iBAA2D;CACvE,WAAW;CACX,MAAM;EACJ,QAAQ,UAAU,MAAM,UAAU;EAClC,UAAU,UAAU,MAAM,YAAY;CACxC;CACA,QAAQ,EACN,OACE,kQAGJ;CACA,aAAa;AACf,CAAC;AAED,MAAa,aAAa;CACxB,GAAG;CACH,GAAG,MAAM;CACT,MAAM,MAAM,SAAS,KAAK,IAAI;AAChC"}

package/dist/components/file-upload/file-upload.recipe.mjs

@@ -0,0 +1,236 @@
+import { css } from "../../react/styled-system/css/css.mjs";
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/file-upload/file-upload.recipe.ts
+const fileUploadRecipe = sva({
+	slots: [
+		"root",
+		"dropzone",
+		"item",
+		"itemDeleteTrigger",
+		"itemGroup",
+		"itemName",
+		"itemPreview",
+		"itemPreviewImage",
+		"itemSizeText",
+		"label",
+		"trigger",
+		"clearTrigger"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.related"
+		},
+		label: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		dropzone: {
+			"& > svg": {
+				flexShrink: 0,
+				color: "foreground.subtle"
+			},
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "gap.inline",
+			width: "fill",
+			minHeight: "target.comfortable",
+			paddingInline: "inset.surface",
+			paddingBlock: "rhythm.normal",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "dashed",
+			borderColor: "border.default",
+			bg: "background.subtle",
+			color: "foreground.muted",
+			textAlign: "center",
+			cursor: "pointer",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			"&:not([data-disabled], [data-readonly], [data-invalid], [data-dragging]):hover": { borderColor: "primary.default" },
+			"&[data-dragging]": {
+				borderColor: "primary.default",
+				bg: "primary.subtle",
+				color: "foreground.default"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			_invalid: {
+				borderColor: "error.default",
+				borderWidth: "emphasis"
+			},
+			"&[data-readonly]": {
+				borderStyle: "solid",
+				cursor: "default"
+			},
+			_disabled: {
+				borderColor: "border.default",
+				bg: "background.muted",
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: {
+					color: "system.grayText",
+					borderColor: "system.grayText"
+				}
+			}
+		},
+		trigger: {
+			alignSelf: "flex-start",
+			_invalid: {
+				borderColor: "error.default",
+				outlineStyle: "solid",
+				outlineWidth: "hairline",
+				outlineOffset: "inset.none",
+				outlineColor: "error.default",
+				_focusVisible: {
+					outlineWidth: "focus",
+					outlineOffset: "inset.compact",
+					outlineColor: "border.focus"
+				}
+			},
+			_disabled: { "&[data-readonly]": { cursor: "default" } }
+		},
+		clearTrigger: { _disabled: { "&[data-readonly]": { cursor: "default" } } },
+		itemGroup: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline"
+		},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.related",
+			minHeight: "target.minimum",
+			paddingBlock: "inset.compact",
+			paddingInline: "inset.control",
+			rounded: "control",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.default",
+			bg: "surface.raised",
+			color: "foreground.default"
+		},
+		itemPreview: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			color: "foreground.muted"
+		},
+		itemPreviewImage: {
+			width: "target.comfortable",
+			height: "target.comfortable",
+			rounded: "inset",
+			objectFit: "cover"
+		},
+		itemName: {
+			flex: "1",
+			overflowWrap: "anywhere"
+		},
+		itemSizeText: {
+			flexShrink: 0,
+			textStyle: "detail",
+			color: "foreground.subtle"
+		},
+		itemDeleteTrigger: { _disabled: { "&[data-readonly]": { cursor: "default" } } }
+	},
+	variants: { size: {
+		xs: {
+			dropzone: {
+				"& > svg": {
+					width: "icon.sm",
+					height: "icon.sm"
+				},
+				textStyle: "detail"
+			},
+			itemPreview: { "& svg": {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			itemName: { textStyle: "detail" },
+			itemSizeText: { textStyle: "detail" }
+		},
+		sm: {
+			dropzone: {
+				"& > svg": {
+					width: "icon.md",
+					height: "icon.md"
+				},
+				textStyle: "body"
+			},
+			itemPreview: { "& svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			itemName: { textStyle: "body" },
+			itemSizeText: { textStyle: "detail" }
+		},
+		md: {
+			dropzone: {
+				"& > svg": {
+					width: "icon.lg",
+					height: "icon.lg"
+				},
+				textStyle: "body"
+			},
+			itemPreview: { "& svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			itemName: { textStyle: "body" }
+		},
+		lg: {
+			dropzone: {
+				"& > svg": {
+					width: "icon.xl",
+					height: "icon.xl"
+				},
+				textStyle: "body"
+			},
+			itemPreview: { "& svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} },
+			itemName: { textStyle: "body" }
+		},
+		xl: {
+			dropzone: {
+				"& > svg": {
+					width: "icon.xl",
+					height: "icon.xl"
+				},
+				textStyle: "body"
+			},
+			itemPreview: { "& svg": {
+				width: "icon.xl",
+				height: "icon.xl"
+			} },
+			itemName: { textStyle: "body" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+const fileUploadStateSlots = {
+	loading: css({
+		textStyle: "detail",
+		color: "foreground.subtle"
+	}),
+	error: css({
+		textStyle: "detail",
+		color: "error.default"
+	})
+};
+//#endregion
+export { fileUploadRecipe, fileUploadStateSlots };
+
+//# sourceMappingURL=file-upload.recipe.mjs.map

package/dist/components/file-upload/file-upload.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.recipe.mjs","names":[],"sources":["../../../src/components/file-upload/file-upload.recipe.ts"],"sourcesContent":["import { css, sva } from '#styled-system/css/index.js'\n\nexport const fileUploadRecipe = sva({\n  slots: [\n    'root',\n    'dropzone',\n    'item',\n    'itemDeleteTrigger',\n    'itemGroup',\n    'itemName',\n    'itemPreview',\n    'itemPreviewImage',\n    'itemSizeText',\n    'label',\n    'trigger',\n    'clearTrigger',\n  ],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.related',\n    },\n    label: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    dropzone: {\n      '& > svg': { flexShrink: 0, color: 'foreground.subtle' },\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 'gap.inline',\n      width: 'fill',\n      minHeight: 'target.comfortable',\n      paddingInline: 'inset.surface',\n      paddingBlock: 'rhythm.normal',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'dashed',\n      borderColor: 'border.default',\n      bg: 'background.subtle',\n      color: 'foreground.muted',\n      textAlign: 'center',\n      cursor: 'pointer',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      '&:not([data-disabled], [data-readonly], [data-invalid], [data-dragging]):hover': {\n        borderColor: 'primary.default',\n      },\n      '&[data-dragging]': {\n        borderColor: 'primary.default',\n        bg: 'primary.subtle',\n        color: 'foreground.default',\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      _invalid: {\n        borderColor: 'error.default',\n        borderWidth: 'emphasis',\n      },\n      '&[data-readonly]': {\n        borderStyle: 'solid',\n        cursor: 'default',\n      },\n      _disabled: {\n        borderColor: 'border.default',\n        bg: 'background.muted',\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText', borderColor: 'system.grayText' },\n      },\n    },\n    trigger: {\n      alignSelf: 'flex-start',\n      _invalid: {\n        borderColor: 'error.default',\n        outlineStyle: 'solid',\n        outlineWidth: 'hairline',\n        outlineOffset: 'inset.none',\n        outlineColor: 'error.default',\n        _focusVisible: {\n          outlineWidth: 'focus',\n          outlineOffset: 'inset.compact',\n          outlineColor: 'border.focus',\n        },\n      },\n      _disabled: { '&[data-readonly]': { cursor: 'default' } },\n    },\n    clearTrigger: {\n      _disabled: { '&[data-readonly]': { cursor: 'default' } },\n    },\n    itemGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n    },\n    item: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.related',\n      minHeight: 'target.minimum',\n      paddingBlock: 'inset.compact',\n      paddingInline: 'inset.control',\n      rounded: 'control',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      bg: 'surface.raised',\n      color: 'foreground.default',\n    },\n    itemPreview: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      color: 'foreground.muted',\n    },\n    itemPreviewImage: {\n      width: 'target.comfortable',\n      height: 'target.comfortable',\n      rounded: 'inset',\n      objectFit: 'cover',\n    },\n    itemName: {\n      flex: '1',\n      overflowWrap: 'anywhere',\n    },\n    itemSizeText: {\n      flexShrink: 0,\n      textStyle: 'detail',\n      color: 'foreground.subtle',\n    },\n    itemDeleteTrigger: {\n      _disabled: { '&[data-readonly]': { cursor: 'default' } },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        dropzone: { '& > svg': { width: 'icon.sm', height: 'icon.sm' }, textStyle: 'detail' },\n        itemPreview: { '& svg': { width: 'icon.xs', height: 'icon.xs' } },\n        itemName: { textStyle: 'detail' },\n        itemSizeText: { textStyle: 'detail' },\n      },\n      sm: {\n        dropzone: { '& > svg': { width: 'icon.md', height: 'icon.md' }, textStyle: 'body' },\n        itemPreview: { '& svg': { width: 'icon.sm', height: 'icon.sm' } },\n        itemName: { textStyle: 'body' },\n        itemSizeText: { textStyle: 'detail' },\n      },\n      md: {\n        dropzone: { '& > svg': { width: 'icon.lg', height: 'icon.lg' }, textStyle: 'body' },\n        itemPreview: { '& svg': { width: 'icon.md', height: 'icon.md' } },\n        itemName: { textStyle: 'body' },\n      },\n      lg: {\n        dropzone: { '& > svg': { width: 'icon.xl', height: 'icon.xl' }, textStyle: 'body' },\n        itemPreview: { '& svg': { width: 'icon.lg', height: 'icon.lg' } },\n        itemName: { textStyle: 'body' },\n      },\n      xl: {\n        dropzone: { '& > svg': { width: 'icon.xl', height: 'icon.xl' }, textStyle: 'body' },\n        itemPreview: { '& svg': { width: 'icon.xl', height: 'icon.xl' } },\n        itemName: { textStyle: 'body' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\nexport const fileUploadStateSlots: Readonly<Record<string, string>> = {\n  loading: css({\n    textStyle: 'detail',\n    color: 'foreground.subtle',\n  }),\n  error: css({\n    textStyle: 'detail',\n    color: 'error.default',\n  }),\n}\n"],"mappings":"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"}

package/dist/components/file-upload/index.d.mts

@@ -0,0 +1,2 @@
+import { FileUpload, FileUploadAcceptDetails, FileUploadChangeDetails, FileUploadRejectDetails, FileUploadRejectReason, FileUploadRejection, FileUploadRootProps } from "./file-upload.mjs";
+export { FileUpload, type FileUploadAcceptDetails, type FileUploadChangeDetails, type FileUploadRejectDetails, type FileUploadRejectReason, type FileUploadRejection, type FileUploadRootProps };

package/dist/components/file-upload/index.mjs

@@ -0,0 +1,2 @@
+import { FileUpload } from "./file-upload.mjs";
+export { FileUpload };

package/dist/components/floating-panel/floating-panel.d.mts

@@ -0,0 +1,87 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { OpenChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/floating-panel/floating-panel.d.ts
+export interface FloatingPanelPosition {
+  x: number;
+  y: number;
+}
+export interface FloatingPanelDimensions {
+  width: number;
+  height: number;
+}
+export interface FloatingPanelPositionChangeDetails {
+  readonly position: FloatingPanelPosition;
+}
+export interface FloatingPanelDimensionsChangeDetails {
+  readonly size: FloatingPanelDimensions;
+}
+export type FloatingPanelStage = 'default' | 'minimized' | 'maximized';
+export interface FloatingPanelStageChangeDetails {
+  readonly stage: FloatingPanelStage;
+}
+export type FloatingPanelResizeAxis = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+export interface FloatingPanelRootProps {
+  /** 제어되는 열림 상태. */
+  open?: boolean;
+  /** 비제어 초기 열림 상태. `open`이 주어지면 무시됩니다. */
+  defaultOpen?: boolean;
+  /** 제어 여부와 무관하게 패널이 열리거나 닫힐 때마다 알림을 받습니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /** 제어되는 위치이며, 단위는 픽셀입니다. */
+  position?: FloatingPanelPosition;
+  /** 비제어 초기 위치. `position`이 주어지면 무시됩니다. */
+  defaultPosition?: FloatingPanelPosition;
+  /** 패널이 드래그되는 동안 알림을 받습니다. */
+  onPositionChange?: (details: FloatingPanelPositionChangeDetails) => void;
+  /** 드래그가 끝날 때 한 번 알림을 받습니다. */
+  onPositionChangeEnd?: (details: FloatingPanelPositionChangeDetails) => void;
+  /**
+   * 제어되는 너비와 높이이며, 단위는 픽셀입니다. Synapse에서 `size`는 공유 크기 척도를 뜻하므로,
+   * machine의 `size`를 `dimensions`라는 이름으로 받습니다.
+   */
+  dimensions?: FloatingPanelDimensions;
+  /** 비제어 초기 너비와 높이. `dimensions`가 주어지면 무시됩니다. */
+  defaultDimensions?: FloatingPanelDimensions;
+  /** 패널의 크기가 조절되는 동안 알림을 받습니다. */
+  onDimensionsChange?: (details: FloatingPanelDimensionsChangeDetails) => void;
+  /** 크기 조절이 끝날 때 한 번 알림을 받습니다. */
+  onDimensionsChangeEnd?: (details: FloatingPanelDimensionsChangeDetails) => void;
+  /** 패널을 줄일 수 있는 최소 크기. */
+  minDimensions?: FloatingPanelDimensions;
+  /** 패널을 키울 수 있는 최대 크기. */
+  maxDimensions?: FloatingPanelDimensions;
+  /** 패널이 최소화, 최대화되거나 원래대로 돌아올 때 알림을 받습니다. */
+  onStageChange?: (details: FloatingPanelStageChangeDetails) => void;
+  /** 패널을 드래그할 수 있는지 여부. 기본값은 true입니다. */
+  draggable?: boolean;
+  /** 패널의 크기를 조절할 수 있는지 여부. 기본값은 true입니다. */
+  resizable?: boolean;
+  /** 크기를 조절하는 동안 종횡비를 유지합니다. */
+  lockAspectRatio?: boolean;
+  /** 드래그와 크기 조절을 픽셀 격자에 맞춥니다. */
+  gridSize?: number;
+  /** 패널을 경계 밖으로 드래그할 수 있게 합니다. 기본값은 false입니다. */
+  allowOverflow?: boolean;
+  /** 닫혀도 위치와 크기를 기억합니다. */
+  persistRect?: boolean;
+  /** 비활성화된 패널은 드래그되지도 크기가 조절되지도 않습니다. */
+  disabled?: boolean;
+  /** Escape를 누르면 닫힙니다. 기본값은 false로, 넘기지 않으면 Escape로 닫히지 않습니다. */
+  closeOnEscape?: boolean;
+  /** 닫힐 때 포커스를 trigger로 되돌립니다. 기본값은 true입니다. */
+  restoreFocus?: boolean;
+  /** 이 FloatingPanel에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /**
+   * 하나의 공유 척도에서 옵니다. 패널의 너비와 높이가 아니라 header와 body의 여백, 글자 크기를
+   * 정합니다. 픽셀 크기는 `dimensions`로 정합니다.
+   */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const FloatingPanel: SynapseComponent<"body" | "closeTrigger" | "content" | "control" | "dragTrigger" | "header" | "positioner" | "resizeTrigger" | "stageTrigger" | "title" | "trigger", null, FloatingPanelRootProps, never>;
+//#endregion
+//# sourceMappingURL=floating-panel.d.mts.map

package/dist/components/floating-panel/floating-panel.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.d.mts","names":[],"sources":["../../../src/components/floating-panel/floating-panel.tsx"],"mappings":";;;;;iBAciB;EACf;EACA;;iBAGe;EACf;EACA;;iBAGe;WACN,UAAU;;iBAGJ;WACN,MAAM;;YAGL;iBAEK;WACN,OAAO;;YAGN;iBAEK;;EAEf;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB,WAAW;;EAEX,kBAAkB;;EAElB,oBAAoB,SAAS;;EAE7B,uBAAuB,SAAS;;;;;EAKhC,aAAa;;EAEb,oBAAoB;;EAEpB,sBAAsB,SAAS;;EAE/B,yBAAyB,SAAS;;EAElC,gBAAgB;;EAEhB,gBAAgB;;EAEhB,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;;;;EAKf,OAAO;;EAEP;;qBAeW,eAAa,2KAAA"}

package/dist/components/floating-panel/floating-panel.mjs

@@ -0,0 +1,89 @@
+"use client";
+import { resolveSize, sizeBelow } from "../../shared/size-scale.mjs";
+import { close } from "../../icons/src/close.mjs";
+import { maximize } from "../../icons/src/maximize.mjs";
+import { minus } from "../../icons/src/minus.mjs";
+import { restore } from "../../icons/src/restore.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 { floatingPanelRecipe } from "./floating-panel.recipe.mjs";
+import { DEFAULT_LAYER_BASE, LAYER_BASE_VAR } from "../../shared/layering.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as floatingPanel from "@zag-js/floating-panel";
+//#region src/components/floating-panel/floating-panel.tsx
+const DIMENSION_PROPS = [
+	["dimensions", "size"],
+	["defaultDimensions", "defaultSize"],
+	["onDimensionsChange", "onSizeChange"],
+	["onDimensionsChangeEnd", "onSizeChangeEnd"],
+	["minDimensions", "minSize"],
+	["maxDimensions", "maxSize"]
+];
+const isRecord = (value) => typeof value === "object" && value !== null;
+const FloatingPanel = defineComponent()({
+	name: "FloatingPanel",
+	module: floatingPanel,
+	rootPart: null,
+	elements: { title: "h2" },
+	defaultContent: {
+		closeTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close }),
+		stageTrigger: (_api, _t, args) => {
+			if (args["stage"] === "minimized") return /* @__PURE__ */ jsx(Icon, { icon: minus });
+			if (args["stage"] === "maximized") return /* @__PURE__ */ jsx(Icon, { icon: maximize });
+			return /* @__PURE__ */ jsx(Icon, { icon: restore });
+		}
+	},
+	getterProps: {
+		resizeTrigger: ["axis"],
+		stageTrigger: ["stage"]
+	},
+	amendBehaviorProps: {
+		closeTrigger: (_behaviorProps, _api, _args, translate) => ({ "aria-label": translate("floatingPanel.closeTrigger.label") }),
+		positioner: (behaviorProps) => ({ style: {
+			...isRecord(behaviorProps["style"]) ? behaviorProps["style"] : {},
+			zIndex: `calc(var(${LAYER_BASE_VAR}, ${DEFAULT_LAYER_BASE}) + var(--z-index, 0))`
+		} })
+	},
+	machineTranslations: {
+		minimize: "floatingPanel.stageTrigger.minimize",
+		maximize: "floatingPanel.stageTrigger.maximize",
+		restore: "floatingPanel.stageTrigger.restore"
+	},
+	variantProps: ["size", ...DIMENSION_PROPS.map(([synapse]) => synapse)],
+	useMachineProps: (props) => {
+		const derived = {};
+		for (const [synapseName, machineName] of DIMENSION_PROPS) {
+			const value = props[synapseName];
+			if (value !== void 0) derived[machineName] = value;
+		}
+		return derived;
+	},
+	slots: (props) => {
+		const size = resolveSize(props.size, "FloatingPanel");
+		const own = floatingPanelRecipe.raw({ size });
+		return {
+			...floatingPanelRecipe({ size }),
+			trigger: buttonPartClass({
+				variant: "outline",
+				tone: "neutral",
+				size
+			}, own.trigger),
+			stageTrigger: buttonPartClass({
+				variant: "ghost",
+				tone: "neutral",
+				size: sizeBelow(size)
+			}, own.stageTrigger),
+			closeTrigger: buttonPartClass({
+				variant: "ghost",
+				tone: "neutral",
+				size: sizeBelow(size)
+			}, own.closeTrigger)
+		};
+	}
+});
+//#endregion
+export { FloatingPanel };
+
+//# sourceMappingURL=floating-panel.mjs.map

package/dist/components/floating-panel/floating-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.mjs","names":[],"sources":["../../../src/components/floating-panel/floating-panel.tsx"],"sourcesContent":["'use client'\n\nimport { close, maximize, minus, restore } from '@neurocle/synapse-icons'\nimport * as floatingPanel from '@zag-js/floating-panel'\n\nimport type { OpenChangeDetails } from '#/components/details.ts'\nimport { floatingPanelRecipe } from '#/components/floating-panel/floating-panel.recipe.ts'\nimport type { TranslationOverrides } from '#/provider/translations.ts'\nimport { buttonPartClass } from '#/shared/button-style.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { DEFAULT_LAYER_BASE, LAYER_BASE_VAR } from '#/shared/layering.ts'\nimport { resolveSize, sizeBelow, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface FloatingPanelPosition {\n  x: number\n  y: number\n}\n\nexport interface FloatingPanelDimensions {\n  width: number\n  height: number\n}\n\nexport interface FloatingPanelPositionChangeDetails {\n  readonly position: FloatingPanelPosition\n}\n\nexport interface FloatingPanelDimensionsChangeDetails {\n  readonly size: FloatingPanelDimensions\n}\n\nexport type FloatingPanelStage = 'default' | 'minimized' | 'maximized'\n\nexport interface FloatingPanelStageChangeDetails {\n  readonly stage: FloatingPanelStage\n}\n\nexport type FloatingPanelResizeAxis = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'\n\nexport interface FloatingPanelRootProps {\n  /** 제어되는 열림 상태. */\n  open?: boolean\n  /** 비제어 초기 열림 상태. `open`이 주어지면 무시됩니다. */\n  defaultOpen?: boolean\n  /** 제어 여부와 무관하게 패널이 열리거나 닫힐 때마다 알림을 받습니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /** 제어되는 위치이며, 단위는 픽셀입니다. */\n  position?: FloatingPanelPosition\n  /** 비제어 초기 위치. `position`이 주어지면 무시됩니다. */\n  defaultPosition?: FloatingPanelPosition\n  /** 패널이 드래그되는 동안 알림을 받습니다. */\n  onPositionChange?: (details: FloatingPanelPositionChangeDetails) => void\n  /** 드래그가 끝날 때 한 번 알림을 받습니다. */\n  onPositionChangeEnd?: (details: FloatingPanelPositionChangeDetails) => void\n  /**\n   * 제어되는 너비와 높이이며, 단위는 픽셀입니다. Synapse에서 `size`는 공유 크기 척도를 뜻하므로,\n   * machine의 `size`를 `dimensions`라는 이름으로 받습니다.\n   */\n  dimensions?: FloatingPanelDimensions\n  /** 비제어 초기 너비와 높이. `dimensions`가 주어지면 무시됩니다. */\n  defaultDimensions?: FloatingPanelDimensions\n  /** 패널의 크기가 조절되는 동안 알림을 받습니다. */\n  onDimensionsChange?: (details: FloatingPanelDimensionsChangeDetails) => void\n  /** 크기 조절이 끝날 때 한 번 알림을 받습니다. */\n  onDimensionsChangeEnd?: (details: FloatingPanelDimensionsChangeDetails) => void\n  /** 패널을 줄일 수 있는 최소 크기. */\n  minDimensions?: FloatingPanelDimensions\n  /** 패널을 키울 수 있는 최대 크기. */\n  maxDimensions?: FloatingPanelDimensions\n  /** 패널이 최소화, 최대화되거나 원래대로 돌아올 때 알림을 받습니다. */\n  onStageChange?: (details: FloatingPanelStageChangeDetails) => void\n  /** 패널을 드래그할 수 있는지 여부. 기본값은 true입니다. */\n  draggable?: boolean\n  /** 패널의 크기를 조절할 수 있는지 여부. 기본값은 true입니다. */\n  resizable?: boolean\n  /** 크기를 조절하는 동안 종횡비를 유지합니다. */\n  lockAspectRatio?: boolean\n  /** 드래그와 크기 조절을 픽셀 격자에 맞춥니다. */\n  gridSize?: number\n  /** 패널을 경계 밖으로 드래그할 수 있게 합니다. 기본값은 false입니다. */\n  allowOverflow?: boolean\n  /** 닫혀도 위치와 크기를 기억합니다. */\n  persistRect?: boolean\n  /** 비활성화된 패널은 드래그되지도 크기가 조절되지도 않습니다. */\n  disabled?: boolean\n  /** Escape를 누르면 닫힙니다. 기본값은 false로, 넘기지 않으면 Escape로 닫히지 않습니다. */\n  closeOnEscape?: boolean\n  /** 닫힐 때 포커스를 trigger로 되돌립니다. 기본값은 true입니다. */\n  restoreFocus?: boolean\n  /** 이 FloatingPanel에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /**\n   * 하나의 공유 척도에서 옵니다. 패널의 너비와 높이가 아니라 header와 body의 여백, 글자 크기를\n   * 정합니다. 픽셀 크기는 `dimensions`로 정합니다.\n   */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nconst DIMENSION_PROPS: readonly (readonly [keyof FloatingPanelRootProps, string])[] = [\n  ['dimensions', 'size'],\n  ['defaultDimensions', 'defaultSize'],\n  ['onDimensionsChange', 'onSizeChange'],\n  ['onDimensionsChangeEnd', 'onSizeChangeEnd'],\n  ['minDimensions', 'minSize'],\n  ['maxDimensions', 'maxSize'],\n]\n\nconst isRecord = (value: unknown): value is Readonly<Record<string, unknown>> =>\n  typeof value === 'object' && value !== null\n\nexport const FloatingPanel = defineComponent<FloatingPanelRootProps>()({\n  name: 'FloatingPanel',\n  module: floatingPanel,\n  rootPart: null,\n  elements: {\n    title: 'h2',\n  },\n  defaultContent: {\n    closeTrigger: () => <Icon icon={close} />,\n    stageTrigger: (_api, _t, args) => {\n      if (args['stage'] === 'minimized') return <Icon icon={minus} />\n      if (args['stage'] === 'maximized') return <Icon icon={maximize} />\n      return <Icon icon={restore} />\n    },\n  },\n  getterProps: {\n    resizeTrigger: ['axis'],\n    stageTrigger: ['stage'],\n  },\n  amendBehaviorProps: {\n    closeTrigger: (_behaviorProps, _api, _args, translate) => ({\n      'aria-label': translate('floatingPanel.closeTrigger.label'),\n    }),\n    positioner: (behaviorProps) => ({\n      style: {\n        ...(isRecord(behaviorProps['style']) ? behaviorProps['style'] : {}),\n        zIndex: `calc(var(${LAYER_BASE_VAR}, ${DEFAULT_LAYER_BASE}) + var(--z-index, 0))`,\n      },\n    }),\n  },\n  machineTranslations: {\n    minimize: 'floatingPanel.stageTrigger.minimize',\n    maximize: 'floatingPanel.stageTrigger.maximize',\n    restore: 'floatingPanel.stageTrigger.restore',\n  },\n  variantProps: ['size', ...DIMENSION_PROPS.map(([synapse]) => synapse)],\n  useMachineProps: (props: FloatingPanelRootProps) => {\n    const derived: Record<string, unknown> = {}\n    for (const [synapseName, machineName] of DIMENSION_PROPS) {\n      const value = props[synapseName]\n      if (value !== undefined) derived[machineName] = value\n    }\n    return derived\n  },\n  slots: (props: FloatingPanelRootProps) => {\n    const size = resolveSize(props.size, 'FloatingPanel')\n    const own = floatingPanelRecipe.raw({ size })\n    return {\n      ...floatingPanelRecipe({ size }),\n      trigger: buttonPartClass({ variant: 'outline', tone: 'neutral', size }, own.trigger),\n      stageTrigger: buttonPartClass(\n        { variant: 'ghost', tone: 'neutral', size: sizeBelow(size) },\n        own.stageTrigger,\n      ),\n      closeTrigger: buttonPartClass(\n        { variant: 'ghost', tone: 'neutral', size: sizeBelow(size) },\n        own.closeTrigger,\n      ),\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;;AAqGA,MAAM,kBAAgF;CACpF,CAAC,cAAc,MAAM;CACrB,CAAC,qBAAqB,aAAa;CACnC,CAAC,sBAAsB,cAAc;CACrC,CAAC,yBAAyB,iBAAiB;CAC3C,CAAC,iBAAiB,SAAS;CAC3B,CAAC,iBAAiB,SAAS;AAC7B;AAEA,MAAM,YAAY,UAChB,OAAO,UAAU,YAAY,UAAU;AAEzC,MAAa,gBAAgB,gBAAwC,CAAC,CAAC;CACrE,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EACR,OAAO,KACT;CACA,gBAAgB;EACd,oBAAoB,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;EACxC,eAAe,MAAM,IAAI,SAAS;GAChC,IAAI,KAAK,aAAa,aAAa,OAAO,oBAAC,MAAD,EAAM,MAAM,MAAQ,CAAA;GAC9D,IAAI,KAAK,aAAa,aAAa,OAAO,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;GACjE,OAAO,oBAAC,MAAD,EAAM,MAAM,QAAU,CAAA;EAC/B;CACF;CACA,aAAa;EACX,eAAe,CAAC,MAAM;EACtB,cAAc,CAAC,OAAO;CACxB;CACA,oBAAoB;EAClB,eAAe,gBAAgB,MAAM,OAAO,eAAe,EACzD,cAAc,UAAU,kCAAkC,EAC5D;EACA,aAAa,mBAAmB,EAC9B,OAAO;GACL,GAAI,SAAS,cAAc,QAAQ,IAAI,cAAc,WAAW,CAAC;GACjE,QAAQ,YAAY,eAAe,IAAI,mBAAmB;EAC5D,EACF;CACF;CACA,qBAAqB;EACnB,UAAU;EACV,UAAU;EACV,SAAS;CACX;CACA,cAAc,CAAC,QAAQ,GAAG,gBAAgB,KAAK,CAAC,aAAa,OAAO,CAAC;CACrE,kBAAkB,UAAkC;EAClD,MAAM,UAAmC,CAAC;EAC1C,KAAK,MAAM,CAAC,aAAa,gBAAgB,iBAAiB;GACxD,MAAM,QAAQ,MAAM;GACpB,IAAI,UAAU,KAAA,GAAW,QAAQ,eAAe;EAClD;EACA,OAAO;CACT;CACA,QAAQ,UAAkC;EACxC,MAAM,OAAO,YAAY,MAAM,MAAM,eAAe;EACpD,MAAM,MAAM,oBAAoB,IAAI,EAAE,KAAK,CAAC;EAC5C,OAAO;GACL,GAAG,oBAAoB,EAAE,KAAK,CAAC;GAC/B,SAAS,gBAAgB;IAAE,SAAS;IAAW,MAAM;IAAW;GAAK,GAAG,IAAI,OAAO;GACnF,cAAc,gBACZ;IAAE,SAAS;IAAS,MAAM;IAAW,MAAM,UAAU,IAAI;GAAE,GAC3D,IAAI,YACN;GACA,cAAc,gBACZ;IAAE,SAAS;IAAS,MAAM;IAAW,MAAM,UAAU,IAAI;GAAE,GAC3D,IAAI,YACN;EACF;CACF;AACF,CAAC"}

package/dist/components/floating-panel/floating-panel.recipe.mjs

@@ -0,0 +1,156 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/floating-panel/floating-panel.recipe.ts
+const floatingPanelRecipe = sva({
+	slots: [
+		"trigger",
+		"positioner",
+		"content",
+		"header",
+		"body",
+		"title",
+		"resizeTrigger",
+		"dragTrigger",
+		"stageTrigger",
+		"closeTrigger",
+		"control"
+	],
+	base: {
+		trigger: {},
+		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",
+			overflow: "hidden",
+			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"
+			}
+		},
+		header: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "gap.related",
+			paddingInlineStart: "inset.surface",
+			paddingInlineEnd: "inset.control",
+			paddingBlock: "inset.compact",
+			borderBlockEndWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "border.muted",
+			color: "foreground.default"
+		},
+		body: {
+			flex: "1",
+			overflow: "auto",
+			padding: "inset.surface",
+			color: "foreground.muted"
+		},
+		title: {
+			margin: "inset.none",
+			textStyle: "label",
+			color: "foreground.default",
+			overflowWrap: "anywhere"
+		},
+		resizeTrigger: {
+			position: "absolute",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			touchAction: "none",
+			"&:is([data-axis=\"n\"], [data-axis=\"s\"])": { cursor: "ns-resize" },
+			"&:is([data-axis=\"e\"], [data-axis=\"w\"])": { cursor: "ew-resize" },
+			"&:is([data-axis=\"se\"], [data-axis=\"nw\"])": { cursor: "nwse-resize" },
+			"&:is([data-axis=\"ne\"], [data-axis=\"sw\"])": { cursor: "nesw-resize" }
+		},
+		dragTrigger: {
+			flexShrink: 0,
+			minHeight: "target.minimum",
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			cursor: "grab",
+			touchAction: "none",
+			_dragging: { cursor: "grabbing" }
+		},
+		stageTrigger: {},
+		closeTrigger: {},
+		control: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline",
+			flexShrink: 0
+		}
+	},
+	variants: { size: {
+		xs: {
+			header: {
+				paddingInlineStart: "inset.control",
+				paddingInlineEnd: "inset.compact",
+				paddingBlock: "inset.none"
+			},
+			body: {
+				padding: "inset.control",
+				textStyle: "caption"
+			},
+			title: { textStyle: "caption" }
+		},
+		sm: {
+			header: {
+				paddingInlineStart: "inset.overlay",
+				paddingInlineEnd: "inset.compact",
+				paddingBlock: "inset.none"
+			},
+			body: {
+				padding: "inset.overlay",
+				textStyle: "detail"
+			},
+			title: { textStyle: "detail" }
+		},
+		md: {
+			header: { paddingBlock: "inset.compact" },
+			body: {
+				padding: "inset.surface",
+				textStyle: "body"
+			},
+			title: { textStyle: "label" }
+		},
+		lg: {
+			header: {
+				paddingInlineStart: "rhythm.normal",
+				paddingBlock: "inset.control"
+			},
+			body: {
+				padding: "rhythm.normal",
+				textStyle: "body"
+			},
+			title: { textStyle: "subtitle" }
+		},
+		xl: {
+			header: {
+				paddingInlineStart: "rhythm.normal",
+				paddingInlineEnd: "inset.overlay",
+				paddingBlock: "inset.overlay"
+			},
+			body: {
+				padding: "rhythm.normal",
+				textStyle: "subtitle"
+			},
+			title: { textStyle: "title" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { floatingPanelRecipe };
+
+//# sourceMappingURL=floating-panel.recipe.mjs.map