@neurocle/synapse-react 0.0.0-bootstrap → 0.0.0-stage

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

@@ -1 +0,0 @@
-{"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":"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"}

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

@@ -1,236 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,2 +0,0 @@
-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

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

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

@@ -1,87 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,89 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,156 +0,0 @@
-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