@neurocle/synapse-react 0.0.0-stage → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.recipe.mjs","names":[],"sources":["../../../src/components/floating-panel/floating-panel.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const floatingPanelRecipe = sva({\n  slots: [\n    'trigger',\n    'positioner',\n    'content',\n    'header',\n    'body',\n    'title',\n    'resizeTrigger',\n    'dragTrigger',\n    'stageTrigger',\n    'closeTrigger',\n    'control',\n  ],\n  base: {\n    trigger: {},\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      overflow: 'hidden',\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    header: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: 'gap.related',\n      paddingInlineStart: 'inset.surface',\n      paddingInlineEnd: 'inset.control',\n      paddingBlock: 'inset.compact',\n      borderBlockEndWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'border.muted',\n      color: 'foreground.default',\n    },\n    body: {\n      flex: '1',\n      overflow: 'auto',\n      padding: 'inset.surface',\n      color: 'foreground.muted',\n    },\n    title: {\n      margin: 'inset.none',\n      textStyle: 'label',\n      color: 'foreground.default',\n      overflowWrap: 'anywhere',\n    },\n    resizeTrigger: {\n      position: 'absolute',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      touchAction: 'none',\n      '&:is([data-axis=\"n\"], [data-axis=\"s\"])': { cursor: 'ns-resize' },\n      '&:is([data-axis=\"e\"], [data-axis=\"w\"])': { cursor: 'ew-resize' },\n      '&:is([data-axis=\"se\"], [data-axis=\"nw\"])': { cursor: 'nwse-resize' },\n      '&:is([data-axis=\"ne\"], [data-axis=\"sw\"])': { cursor: 'nesw-resize' },\n    },\n    dragTrigger: {\n      flexShrink: 0,\n      minHeight: 'target.minimum',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      cursor: 'grab',\n      touchAction: 'none',\n      _dragging: { cursor: 'grabbing' },\n    },\n    stageTrigger: {},\n    closeTrigger: {},\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      flexShrink: 0,\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        header: {\n          paddingInlineStart: 'inset.control',\n          paddingInlineEnd: 'inset.compact',\n          paddingBlock: 'inset.none',\n        },\n        body: { padding: 'inset.control', textStyle: 'caption' },\n        title: { textStyle: 'caption' },\n      },\n      sm: {\n        header: {\n          paddingInlineStart: 'inset.overlay',\n          paddingInlineEnd: 'inset.compact',\n          paddingBlock: 'inset.none',\n        },\n        body: { padding: 'inset.overlay', textStyle: 'detail' },\n        title: { textStyle: 'detail' },\n      },\n      md: {\n        header: { paddingBlock: 'inset.compact' },\n        body: { padding: 'inset.surface', textStyle: 'body' },\n        title: { textStyle: 'label' },\n      },\n      lg: {\n        header: { paddingInlineStart: 'rhythm.normal', paddingBlock: 'inset.control' },\n        body: { padding: 'rhythm.normal', textStyle: 'body' },\n        title: { textStyle: 'subtitle' },\n      },\n      xl: {\n        header: {\n          paddingInlineStart: 'rhythm.normal',\n          paddingInlineEnd: 'inset.overlay',\n          paddingBlock: 'inset.overlay',\n        },\n        body: { padding: 'rhythm.normal', textStyle: 'subtitle' },\n        title: { textStyle: 'title' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,sBAAsB,IAAI;CACrC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,SAAS,CAAC;EACV,YAAY,EACV,QAAQ,gEACV;EACA,SAAS;GACP,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,eAAe;GACf,UAAU;GACV,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,OAAO;GACP,WAAW;GACX,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,oBAAoB;GACpB,kBAAkB;GAClB,cAAc;GACd,qBAAqB;GACrB,aAAa;GACb,aAAa;GACb,OAAO;EACT;EACA,MAAM;GACJ,MAAM;GACN,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA,OAAO;GACL,QAAQ;GACR,WAAW;GACX,OAAO;GACP,cAAc;EAChB;EACA,eAAe;GACb,UAAU;GACV,UAAU;GACV,WAAW;GACX,aAAa;GACb,8CAA0C,EAAE,QAAQ,YAAY;GAChE,8CAA0C,EAAE,QAAQ,YAAY;GAChE,gDAA4C,EAAE,QAAQ,cAAc;GACpE,gDAA4C,EAAE,QAAQ,cAAc;EACtE;EACA,aAAa;GACX,YAAY;GACZ,WAAW;GACX,SAAS;GACT,eAAe;GACf,gBAAgB;GAChB,QAAQ;GACR,aAAa;GACb,WAAW,EAAE,QAAQ,WAAW;EAClC;EACA,cAAc,CAAC;EACf,cAAc,CAAC;EACf,SAAS;GACP,SAAS;GACT,YAAY;GACZ,KAAK;GACL,YAAY;EACd;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IACN,oBAAoB;IACpB,kBAAkB;IAClB,cAAc;GAChB;GACA,MAAM;IAAE,SAAS;IAAiB,WAAW;GAAU;GACvD,OAAO,EAAE,WAAW,UAAU;EAChC;EACA,IAAI;GACF,QAAQ;IACN,oBAAoB;IACpB,kBAAkB;IAClB,cAAc;GAChB;GACA,MAAM;IAAE,SAAS;IAAiB,WAAW;GAAS;GACtD,OAAO,EAAE,WAAW,SAAS;EAC/B;EACA,IAAI;GACF,QAAQ,EAAE,cAAc,gBAAgB;GACxC,MAAM;IAAE,SAAS;IAAiB,WAAW;GAAO;GACpD,OAAO,EAAE,WAAW,QAAQ;EAC9B;EACA,IAAI;GACF,QAAQ;IAAE,oBAAoB;IAAiB,cAAc;GAAgB;GAC7E,MAAM;IAAE,SAAS;IAAiB,WAAW;GAAO;GACpD,OAAO,EAAE,WAAW,WAAW;EACjC;EACA,IAAI;GACF,QAAQ;IACN,oBAAoB;IACpB,kBAAkB;IAClB,cAAc;GAChB;GACA,MAAM;IAAE,SAAS;IAAiB,WAAW;GAAW;GACxD,OAAO,EAAE,WAAW,QAAQ;EAC9B;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { FloatingPanel, FloatingPanelDimensions, FloatingPanelDimensionsChangeDetails, FloatingPanelPosition, FloatingPanelPositionChangeDetails, FloatingPanelResizeAxis, FloatingPanelRootProps, FloatingPanelStage, FloatingPanelStageChangeDetails } from "./floating-panel.mjs";
+export { FloatingPanel, type FloatingPanelDimensions, type FloatingPanelDimensionsChangeDetails, type FloatingPanelPosition, type FloatingPanelPositionChangeDetails, type FloatingPanelResizeAxis, type FloatingPanelRootProps, type FloatingPanelStage, type FloatingPanelStageChangeDetails };

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

@@ -0,0 +1,2 @@
+import { FloatingPanel } from "./floating-panel.mjs";
+export { FloatingPanel };

package/dist/components/hover-card/hover-card.d.mts

@@ -0,0 +1,48 @@
+import { SynapseComponent } from "../../system/types.mjs";
+import { OpenChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/hover-card/hover-card.d.ts
+export type HoverCardPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export interface HoverCardPositioning {
+  placement?: HoverCardPlacement;
+  gutter?: number;
+  flip?: boolean;
+}
+export interface HoverCardTriggerValueChangeDetails {
+  readonly value: string | null;
+}
+export interface HoverCardRootProps {
+  /** 제어되는 열림 상태. */
+  open?: boolean;
+  /** 비제어 초기 열림 상태. `open`이 주어지면 무시됩니다. */
+  defaultOpen?: boolean;
+  /** 제어 여부와 무관하게 카드가 열리거나 닫힐 때마다 알림을 받습니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /**
+   * 여러 trigger 가운데 지금 카드를 소유한 trigger.
+   *
+   * HoverCard 하나가 링크 목록 전체를 담당할 수 있습니다: 각 `HoverCard.Trigger`가 `value`를
+   * 받고, 콘텐츠는 그중 이 값에 해당하는 trigger를 기준으로 배치됩니다. trigger가 하나뿐인
+   * 카드에는 이 prop이 전혀 필요 없습니다.
+   */
+  triggerValue?: string | null;
+  /** 비제어 초기 소유 trigger. */
+  defaultTriggerValue?: string | null;
+  /** 소유 trigger가 바뀔 때 알림을 받습니다. */
+  onTriggerValueChange?: (details: HoverCardTriggerValueChangeDetails) => void;
+  /** 떠 있는 레이어가 놓이는 위치. */
+  positioning?: HoverCardPositioning;
+  /** 열리기까지 포인터가 trigger 위에 머물러야 하는 밀리초. 기본값은 700입니다. */
+  openDelay?: number;
+  /** 포인터가 떠난 뒤 닫히기까지의 밀리초. 기본값은 300입니다. */
+  closeDelay?: number;
+  /** 비활성화된 HoverCard는 열리지 않습니다. */
+  disabled?: boolean;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const HoverCard: SynapseComponent<"arrow" | "arrowTip" | "content" | "positioner" | "trigger", null, HoverCardRootProps, never>;
+//#endregion
+//# sourceMappingURL=hover-card.d.mts.map

package/dist/components/hover-card/hover-card.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.mts","names":[],"sources":["../../../src/components/hover-card/hover-card.tsx"],"mappings":";;;;YAWY;iBAcK;EACf,YAAY;EACZ;EACA;;iBAGe;WACN;;iBAGM;;EAEf;;EAEA;;EAEA,gBAAgB,SAAS;;;;;;;;EAQzB;;EAEA;;EAEA,wBAAwB,SAAS;;EAEjC,cAAc;;EAEd;;EAEA;;EAEA;;EAEA,OAAO;;EAEP;;qBAoCW,WAAS,oFAAA"}

package/dist/components/hover-card/hover-card.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { devWarn } from "../../system/dev-warn.mjs";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { hoverCardRecipe } from "./hover-card.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as hoverCard from "@zag-js/hover-card";
+//#region src/components/hover-card/hover-card.tsx
+const base = defineComponent()({
+	name: "HoverCard",
+	module: hoverCard,
+	rootPart: null,
+	elements: { trigger: "a" },
+	getterProps: { trigger: ["value"] },
+	unstyledWhenAsChild: ["trigger"],
+	machineTranslations: null,
+	variantProps: ["size"],
+	slots: (props) => hoverCardRecipe({ size: resolveSize(props.size, "HoverCard") })
+});
+const BaseTrigger = base.Trigger;
+function HoverCardTrigger(props) {
+	devWarn(props.asChild !== true && props["href"] === void 0, "<HoverCard.Trigger> renders an `<a>`, and an `<a>` without `href` is not focusable, so keyboard and touch users can never open the card. Give it the `href` of the page the card previews, or use `asChild` with an element that is focusable.");
+	return /* @__PURE__ */ jsx(BaseTrigger, { ...props });
+}
+HoverCardTrigger.displayName = BaseTrigger.displayName;
+Object.assign(base, { Trigger: HoverCardTrigger });
+const HoverCard = base;
+//#endregion
+export { HoverCard };
+
+//# sourceMappingURL=hover-card.mjs.map

package/dist/components/hover-card/hover-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.mjs","names":[],"sources":["../../../src/components/hover-card/hover-card.tsx"],"sourcesContent":["'use client'\n\nimport * as hoverCard from '@zag-js/hover-card'\nimport type { ReactNode } from 'react'\n\nimport type { OpenChangeDetails } from '#/components/details.ts'\nimport { hoverCardRecipe } from '#/components/hover-card/hover-card.recipe.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport { devWarn } from '#/system/dev-warn.ts'\n\nexport type HoverCardPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n\nexport interface HoverCardPositioning {\n  placement?: HoverCardPlacement\n  gutter?: number\n  flip?: boolean\n}\n\nexport interface HoverCardTriggerValueChangeDetails {\n  readonly value: string | null\n}\n\nexport interface HoverCardRootProps {\n  /** 제어되는 열림 상태. */\n  open?: boolean\n  /** 비제어 초기 열림 상태. `open`이 주어지면 무시됩니다. */\n  defaultOpen?: boolean\n  /** 제어 여부와 무관하게 카드가 열리거나 닫힐 때마다 알림을 받습니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /**\n   * 여러 trigger 가운데 지금 카드를 소유한 trigger.\n   *\n   * HoverCard 하나가 링크 목록 전체를 담당할 수 있습니다: 각 `HoverCard.Trigger`가 `value`를\n   * 받고, 콘텐츠는 그중 이 값에 해당하는 trigger를 기준으로 배치됩니다. trigger가 하나뿐인\n   * 카드에는 이 prop이 전혀 필요 없습니다.\n   */\n  triggerValue?: string | null\n  /** 비제어 초기 소유 trigger. */\n  defaultTriggerValue?: string | null\n  /** 소유 trigger가 바뀔 때 알림을 받습니다. */\n  onTriggerValueChange?: (details: HoverCardTriggerValueChangeDetails) => void\n  /** 떠 있는 레이어가 놓이는 위치. */\n  positioning?: HoverCardPositioning\n  /** 열리기까지 포인터가 trigger 위에 머물러야 하는 밀리초. 기본값은 700입니다. */\n  openDelay?: number\n  /** 포인터가 떠난 뒤 닫히기까지의 밀리초. 기본값은 300입니다. */\n  closeDelay?: number\n  /** 비활성화된 HoverCard는 열리지 않습니다. */\n  disabled?: boolean\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nconst base = defineComponent<HoverCardRootProps>()({\n  name: 'HoverCard',\n  module: hoverCard,\n  rootPart: null,\n  elements: {\n    trigger: 'a',\n  },\n  getterProps: {\n    trigger: ['value'],\n  },\n  // NOTE: asChild trigger는 사용처의 요소가 모양을 소유합니다. 링크 모양을 자식에 입히지 않습니다.\n  unstyledWhenAsChild: ['trigger'],\n  machineTranslations: null,\n  variantProps: ['size'],\n  slots: (props: HoverCardRootProps) =>\n    hoverCardRecipe({ size: resolveSize(props.size, 'HoverCard') }),\n})\n\nconst BaseTrigger = base.Trigger\n\nfunction HoverCardTrigger(props: Parameters<typeof BaseTrigger>[0]): ReactNode {\n  devWarn(\n    props.asChild !== true && props['href'] === undefined,\n    '<HoverCard.Trigger> renders an `<a>`, and an `<a>` without `href` is not focusable, so ' +\n      'keyboard and touch users can never open the card. Give it the `href` of the page the ' +\n      'card previews, or use `asChild` with an element that is focusable.',\n  )\n  return <BaseTrigger {...props} />\n}\nHoverCardTrigger.displayName = BaseTrigger.displayName\n\nObject.assign(base, { Trigger: HoverCardTrigger })\n\nexport const HoverCard = base\n"],"mappings":";;;;;;;;AAoEA,MAAM,OAAO,gBAAoC,CAAC,CAAC;CACjD,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EACR,SAAS,IACX;CACA,aAAa,EACX,SAAS,CAAC,OAAO,EACnB;CAEA,qBAAqB,CAAC,SAAS;CAC/B,qBAAqB;CACrB,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,gBAAgB,EAAE,MAAM,YAAY,MAAM,MAAM,WAAW,EAAE,CAAC;AAClE,CAAC;AAED,MAAM,cAAc,KAAK;AAEzB,SAAS,iBAAiB,OAAqD;CAC7E,QACE,MAAM,YAAY,QAAQ,MAAM,YAAY,KAAA,GAC5C,gPAGF;CACA,OAAO,oBAAC,aAAD,EAAa,GAAI,MAAQ,CAAA;AAClC;AACA,iBAAiB,cAAc,YAAY;AAE3C,OAAO,OAAO,MAAM,EAAE,SAAS,iBAAiB,CAAC;AAEjD,MAAa,YAAY"}

package/dist/components/hover-card/hover-card.recipe.mjs

@@ -0,0 +1,133 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/hover-card/hover-card.recipe.ts
+const hoverCardRecipe = sva({
+	slots: [
+		"arrow",
+		"arrowTip",
+		"trigger",
+		"positioner",
+		"content"
+	],
+	base: {
+		arrow: {
+			"--arrow-size": "sizes.icon.xs",
+			"--arrow-background": "colors.surface.overlay"
+		},
+		arrowTip: {
+			boxShadow: "overlay",
+			clipPath: "polygon(-100% -100%, 200% -100%, -100% 200%)"
+		},
+		trigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "gap.inline",
+			minHeight: "target.minimum",
+			rounded: "control",
+			color: "primary.onSurface",
+			textDecoration: "underline",
+			transitionProperty: "colors",
+			transitionDuration: "interaction",
+			transitionTimingFunction: "interaction",
+			outlineColor: "border.focus",
+			cursor: "pointer",
+			_hover: { color: "primary.hover" },
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		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"
+			}
+		}
+	},
+	variants: { size: {
+		xs: {
+			trigger: {
+				minHeight: "control.xs",
+				textStyle: "caption"
+			},
+			content: {
+				padding: "inset.compact",
+				gap: "gap.inline",
+				textStyle: "caption"
+			},
+			arrow: { "--arrow-size": "sizes.icon.xs" }
+		},
+		sm: {
+			trigger: {
+				minHeight: "control.sm",
+				textStyle: "detail"
+			},
+			content: {
+				padding: "inset.control",
+				gap: "gap.inline",
+				textStyle: "detail"
+			},
+			arrow: { "--arrow-size": "sizes.icon.xs" }
+		},
+		md: {
+			trigger: {
+				minHeight: "control.md",
+				textStyle: "body"
+			},
+			content: {
+				padding: "inset.overlay",
+				gap: "gap.related",
+				textStyle: "body"
+			},
+			arrow: { "--arrow-size": "sizes.icon.xs" }
+		},
+		lg: {
+			trigger: {
+				minHeight: "control.lg",
+				textStyle: "body"
+			},
+			content: {
+				padding: "inset.surface",
+				gap: "rhythm.tight",
+				textStyle: "body"
+			},
+			arrow: { "--arrow-size": "sizes.icon.sm" }
+		},
+		xl: {
+			trigger: {
+				minHeight: "control.xl",
+				textStyle: "subtitle"
+			},
+			content: {
+				padding: "rhythm.normal",
+				gap: "gap.distinct",
+				textStyle: "subtitle"
+			},
+			arrow: { "--arrow-size": "sizes.icon.sm" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { hoverCardRecipe };
+
+//# sourceMappingURL=hover-card.recipe.mjs.map

package/dist/components/hover-card/hover-card.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.recipe.mjs","names":[],"sources":["../../../src/components/hover-card/hover-card.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const hoverCardRecipe = sva({\n  slots: ['arrow', 'arrowTip', 'trigger', 'positioner', 'content'],\n  base: {\n    arrow: {\n      '--arrow-size': 'sizes.icon.xs',\n      '--arrow-background': 'colors.surface.overlay',\n    },\n    arrowTip: {\n      boxShadow: 'overlay',\n      clipPath: 'polygon(-100% -100%, 200% -100%, -100% 200%)',\n    },\n    trigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      minHeight: 'target.minimum',\n      rounded: 'control',\n      color: 'primary.onSurface',\n      textDecoration: 'underline',\n      transitionProperty: 'colors',\n      transitionDuration: 'interaction',\n      transitionTimingFunction: 'interaction',\n      outlineColor: 'border.focus',\n      cursor: 'pointer',\n      _hover: { color: 'primary.hover' },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\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  },\n  variants: {\n    size: {\n      xs: {\n        trigger: { minHeight: 'control.xs', textStyle: 'caption' },\n        content: { padding: 'inset.compact', gap: 'gap.inline', textStyle: 'caption' },\n        arrow: { '--arrow-size': 'sizes.icon.xs' },\n      },\n      sm: {\n        trigger: { minHeight: 'control.sm', textStyle: 'detail' },\n        content: { padding: 'inset.control', gap: 'gap.inline', textStyle: 'detail' },\n        arrow: { '--arrow-size': 'sizes.icon.xs' },\n      },\n      md: {\n        trigger: { minHeight: 'control.md', textStyle: 'body' },\n        content: { padding: 'inset.overlay', gap: 'gap.related', textStyle: 'body' },\n        arrow: { '--arrow-size': 'sizes.icon.xs' },\n      },\n      lg: {\n        trigger: { minHeight: 'control.lg', textStyle: 'body' },\n        content: { padding: 'inset.surface', gap: 'rhythm.tight', textStyle: 'body' },\n        arrow: { '--arrow-size': 'sizes.icon.sm' },\n      },\n      xl: {\n        trigger: { minHeight: 'control.xl', textStyle: 'subtitle' },\n        content: { padding: 'rhythm.normal', gap: 'gap.distinct', textStyle: 'subtitle' },\n        arrow: { '--arrow-size': 'sizes.icon.sm' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,kBAAkB,IAAI;CACjC,OAAO;EAAC;EAAS;EAAY;EAAW;EAAc;CAAS;CAC/D,MAAM;EACJ,OAAO;GACL,gBAAgB;GAChB,sBAAsB;EACxB;EACA,UAAU;GACR,WAAW;GACX,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,KAAK;GACL,WAAW;GACX,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,QAAQ;GACR,QAAQ,EAAE,OAAO,gBAAgB;GACjC,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;EACA,YAAY,EACV,QAAQ,gEACV;EACA,SAAS;GACP,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,eAAe;GACf,KAAK;GACL,UAAU;GACV,UAAU;GACV,SAAS;GACT,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,IAAI;GACJ,OAAO;GACP,WAAW;GACX,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,WAAW;GAAU;GACzD,SAAS;IAAE,SAAS;IAAiB,KAAK;IAAc,WAAW;GAAU;GAC7E,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,WAAW;GAAS;GACxD,SAAS;IAAE,SAAS;IAAiB,KAAK;IAAc,WAAW;GAAS;GAC5E,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,WAAW;GAAO;GACtD,SAAS;IAAE,SAAS;IAAiB,KAAK;IAAe,WAAW;GAAO;GAC3E,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,WAAW;GAAO;GACtD,SAAS;IAAE,SAAS;IAAiB,KAAK;IAAgB,WAAW;GAAO;GAC5E,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;EACA,IAAI;GACF,SAAS;IAAE,WAAW;IAAc,WAAW;GAAW;GAC1D,SAAS;IAAE,SAAS;IAAiB,KAAK;IAAgB,WAAW;GAAW;GAChF,OAAO,EAAE,gBAAgB,gBAAgB;EAC3C;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/components/hover-card/index.d.mts

@@ -0,0 +1,2 @@
+import { HoverCard, HoverCardPlacement, HoverCardPositioning, HoverCardRootProps, HoverCardTriggerValueChangeDetails } from "./hover-card.mjs";
+export { HoverCard, type HoverCardPlacement, type HoverCardPositioning, type HoverCardRootProps, type HoverCardTriggerValueChangeDetails };

package/dist/components/hover-card/index.mjs

@@ -0,0 +1,2 @@
+import { HoverCard } from "./hover-card.mjs";
+export { HoverCard };

package/dist/components/image-cropper/image-cropper.d.mts

@@ -0,0 +1,111 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+import { Controller } from "../../shared/controller.mjs";
+//#region src/components/image-cropper/image-cropper.d.ts
+export interface ImageCropperRect {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+export interface ImageCropperCropChangeDetails {
+  readonly crop: ImageCropperRect;
+}
+export interface ImageCropperZoomChangeDetails {
+  readonly zoom: number;
+}
+export interface ImageCropperRotationChangeDetails {
+  readonly rotation: number;
+}
+export interface ImageCropperFlipChangeDetails {
+  readonly flip: {
+    readonly horizontal: boolean;
+    readonly vertical: boolean;
+  };
+}
+export type ImageCropperShape = 'rect' | 'circle';
+export type ImageCropperHandlePosition = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
+export declare const IMAGE_CROPPER_HANDLES: readonly ImageCropperHandlePosition[];
+export interface ImageCropperRootProps {
+  /** 시작할 잘라내기 사각형. 기본값은 종횡비가 허용하는 가장 큰 사각형입니다. */
+  initialCrop?: ImageCropperRect;
+  /** 잘라내기 영역이 움직이거나 크기가 바뀔 때 알림을 받습니다. */
+  onCropChange?: (details: ImageCropperCropChangeDetails) => void;
+  /** 잘라내기 영역의 비율을 고정합니다 — 정사각형은 1, 영상은 16 / 9입니다. */
+  aspectRatio?: number;
+  /** 잘라내기 영역의 윤곽. 기본값은 `rect`입니다. */
+  cropShape?: ImageCropperShape;
+  /** 잘라내기 영역을 고정하고, 그 아래의 이미지만 옮기고 확대·축소할 수 있게 둡니다. */
+  fixedCropArea?: boolean;
+  /** 잘라내기 영역의 최소 크기이며, 단위는 픽셀입니다. */
+  minWidth?: number;
+  /** 잘라내기 영역의 최소 크기이며, 단위는 픽셀입니다. */
+  minHeight?: number;
+  /** 잘라내기 영역의 최대 크기이며, 단위는 픽셀입니다. */
+  maxWidth?: number;
+  /** 잘라내기 영역의 최대 크기이며, 단위는 픽셀입니다. */
+  maxHeight?: number;
+  /** 제어되는 확대 배율이며, 1이 이미지의 본래 크기입니다. */
+  zoom?: number;
+  /** 비제어 초기 확대 배율. `zoom`이 주어지면 무시됩니다. */
+  defaultZoom?: number;
+  /** 확대 배율이 바뀔 때 알림을 받습니다. */
+  onZoomChange?: (details: ImageCropperZoomChangeDetails) => void;
+  /** 허용되는 최소 확대 배율. */
+  minZoom?: number;
+  /** 허용되는 최대 확대 배율. */
+  maxZoom?: number;
+  /** 확대 한 단계가 움직이는 폭. */
+  zoomStep?: number;
+  /** 휠이나 핀치 제스처가 얼마나 확대·축소하는지. */
+  zoomSensitivity?: number;
+  /** 제어되는 회전이며, 단위는 도입니다. */
+  rotation?: number;
+  /** 비제어 초기 회전. */
+  defaultRotation?: number;
+  /** 회전이 바뀔 때 알림을 받습니다. */
+  onRotationChange?: (details: ImageCropperRotationChangeDetails) => void;
+  /** 제어되는 좌우/상하 반전. */
+  flip?: {
+    readonly horizontal: boolean;
+    readonly vertical: boolean;
+  };
+  /** 비제어 초기 반전. */
+  defaultFlip?: {
+    readonly horizontal: boolean;
+    readonly vertical: boolean;
+  };
+  /** 반전이 바뀔 때 알림을 받습니다. */
+  onFlipChange?: (details: ImageCropperFlipChangeDetails) => void;
+  /** 화살표 키 한 번이 잘라내기 영역을 옮기는 거리이며, 단위는 픽셀입니다. */
+  nudgeStep?: number;
+  /** Shift-화살표가 잘라내기 영역을 옮기는 거리. */
+  nudgeStepShift?: number;
+  /** Ctrl-화살표가 잘라내기 영역을 옮기는 거리. */
+  nudgeStepCtrl?: number;
+  /** 이 ImageCropper에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export interface ImageCropperExportOptions {
+  type?: string;
+  quality?: number;
+  maxSize?: {
+    width: number;
+    height: number;
+  };
+  output?: 'blob' | 'dataUrl';
+}
+interface ImageCropperCommands {
+  getCroppedImage: (options?: ImageCropperExportOptions) => Promise<Blob | string | null>;
+  getCropData: () => ImageCropperRect;
+  reset: () => void;
+}
+export declare const ImageCropper: SynapseComponent<"grid" | "handle" | "image" | "root" | "selection" | "viewport", "root", ImageCropperRootProps, never>;
+export declare const useImageCropper: () => Controller<ImageCropperCommands, keyof ImageCropperCommands>;
+//#endregion
+//# sourceMappingURL=image-cropper.d.mts.map

package/dist/components/image-cropper/image-cropper.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.d.mts","names":[],"sources":["../../../src/components/image-cropper/image-cropper.tsx"],"mappings":";;;;;iBAUiB;WACN;WACA;WACA;WACA;;iBAGM;WACN,MAAM;;iBAGA;WACN;;iBAGM;WACN;;iBAGM;WACN;aAAiB;aAA8B;;;YAG9C;YAEA;qBAEC,gCAAgC;iBAW5B;;EAEf,cAAc;;EAEd,gBAAgB,SAAS;;EAEzB;;EAEA,YAAY;;EAEZ;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,oBAAoB,SAAS;;EAE7B;aAAkB;aAA8B;;;EAEhD;aAAyB;aAA8B;;;EAEvD,gBAAgB,SAAS;;EAEzB;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;iBAGe;EACf;EACA;EACA;IAAY;IAAe;;EAC3B;;UAGQ;EACR,kBAAkB,UAAU,8BAA8B,QAAQ;EAClE,mBAAmB;EACnB;;qBA8BW,cAAY,0FAAA;qBAiDZ,uBAAe,WAAA,4BAAA"}

package/dist/components/image-cropper/image-cropper.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { resolveSize } from "../../shared/size-scale.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { createControllerHook, defineController } from "../../shared/controller.mjs";
+import { imageCropperRecipe } from "./image-cropper.recipe.mjs";
+import * as imageCropper from "@zag-js/image-cropper";
+//#region src/components/image-cropper/image-cropper.tsx
+const IMAGE_CROPPER_HANDLES = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+];
+const finite = (value, fallback) => value !== null && Number.isFinite(value) ? value : fallback;
+const imageCropperController = defineController({
+	component: "ImageCropper",
+	root: "ImageCropper.Root",
+	hook: "useImageCropper",
+	commands: [
+		"getCroppedImage",
+		"getCropData",
+		"reset"
+	]
+});
+const ImageCropper = defineComponent()({
+	name: "ImageCropper",
+	module: imageCropper,
+	rootPart: "root",
+	elements: { image: "img" },
+	getterProps: {
+		handle: ["position"],
+		grid: ["axis"]
+	},
+	machineTranslations: {
+		rootLabel: "imageCropper.root.label",
+		rootRoleDescription: "imageCropper.root.roleDescription",
+		previewLoading: "imageCropper.image.loading",
+		selectionRoleDescription: "imageCropper.selection.roleDescription",
+		selectionInstructions: "imageCropper.selection.instructions",
+		previewDescription: (t) => (details) => t("imageCropper.root.description", {
+			zoom: finite(details.zoom, 1).toFixed(2),
+			rotation: Math.round(finite(details.rotation, 0)),
+			x: Math.round(details.crop.x),
+			y: Math.round(details.crop.y),
+			width: Math.round(details.crop.width),
+			height: Math.round(details.crop.height)
+		}),
+		selectionLabel: (t) => (details) => t(details.shape === "circle" ? "imageCropper.selection.circleLabel" : "imageCropper.selection.rectangleLabel"),
+		selectionValueText: (t) => (details) => details.shape === "circle" ? t("imageCropper.selection.circleValue", {
+			x: details.x,
+			y: details.y,
+			diameter: details.width
+		}) : t("imageCropper.selection.rectangleValue", {
+			x: details.x,
+			y: details.y,
+			width: details.width,
+			height: details.height
+		})
+	},
+	variantProps: ["size"],
+	slots: (props) => imageCropperRecipe({ size: resolveSize(props.size, "ImageCropper") })
+});
+const useImageCropper = createControllerHook(ImageCropper, imageCropperController);
+//#endregion
+export { IMAGE_CROPPER_HANDLES, ImageCropper, useImageCropper };
+
+//# sourceMappingURL=image-cropper.mjs.map

package/dist/components/image-cropper/image-cropper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.mjs","names":[],"sources":["../../../src/components/image-cropper/image-cropper.tsx"],"sourcesContent":["'use client'\n\nimport * as imageCropper from '@zag-js/image-cropper'\n\nimport { imageCropperRecipe } from '#/components/image-cropper/image-cropper.recipe.ts'\nimport type { TranslationOverrides, Translator } from '#/provider/translations.ts'\nimport { createControllerHook, defineController } from '#/shared/controller.ts'\nimport { resolveSize, type Size } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\n\nexport interface ImageCropperRect {\n  readonly x: number\n  readonly y: number\n  readonly width: number\n  readonly height: number\n}\n\nexport interface ImageCropperCropChangeDetails {\n  readonly crop: ImageCropperRect\n}\n\nexport interface ImageCropperZoomChangeDetails {\n  readonly zoom: number\n}\n\nexport interface ImageCropperRotationChangeDetails {\n  readonly rotation: number\n}\n\nexport interface ImageCropperFlipChangeDetails {\n  readonly flip: { readonly horizontal: boolean; readonly vertical: boolean }\n}\n\nexport type ImageCropperShape = 'rect' | 'circle'\n\nexport type ImageCropperHandlePosition = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'\n\nexport const IMAGE_CROPPER_HANDLES: readonly ImageCropperHandlePosition[] = [\n  'nw',\n  'n',\n  'ne',\n  'e',\n  'se',\n  's',\n  'sw',\n  'w',\n]\n\nexport interface ImageCropperRootProps {\n  /** 시작할 잘라내기 사각형. 기본값은 종횡비가 허용하는 가장 큰 사각형입니다. */\n  initialCrop?: ImageCropperRect\n  /** 잘라내기 영역이 움직이거나 크기가 바뀔 때 알림을 받습니다. */\n  onCropChange?: (details: ImageCropperCropChangeDetails) => void\n  /** 잘라내기 영역의 비율을 고정합니다 — 정사각형은 1, 영상은 16 / 9입니다. */\n  aspectRatio?: number\n  /** 잘라내기 영역의 윤곽. 기본값은 `rect`입니다. */\n  cropShape?: ImageCropperShape\n  /** 잘라내기 영역을 고정하고, 그 아래의 이미지만 옮기고 확대·축소할 수 있게 둡니다. */\n  fixedCropArea?: boolean\n  /** 잘라내기 영역의 최소 크기이며, 단위는 픽셀입니다. */\n  minWidth?: number\n  /** 잘라내기 영역의 최소 크기이며, 단위는 픽셀입니다. */\n  minHeight?: number\n  /** 잘라내기 영역의 최대 크기이며, 단위는 픽셀입니다. */\n  maxWidth?: number\n  /** 잘라내기 영역의 최대 크기이며, 단위는 픽셀입니다. */\n  maxHeight?: number\n  /** 제어되는 확대 배율이며, 1이 이미지의 본래 크기입니다. */\n  zoom?: number\n  /** 비제어 초기 확대 배율. `zoom`이 주어지면 무시됩니다. */\n  defaultZoom?: number\n  /** 확대 배율이 바뀔 때 알림을 받습니다. */\n  onZoomChange?: (details: ImageCropperZoomChangeDetails) => void\n  /** 허용되는 최소 확대 배율. */\n  minZoom?: number\n  /** 허용되는 최대 확대 배율. */\n  maxZoom?: number\n  /** 확대 한 단계가 움직이는 폭. */\n  zoomStep?: number\n  /** 휠이나 핀치 제스처가 얼마나 확대·축소하는지. */\n  zoomSensitivity?: number\n  /** 제어되는 회전이며, 단위는 도입니다. */\n  rotation?: number\n  /** 비제어 초기 회전. */\n  defaultRotation?: number\n  /** 회전이 바뀔 때 알림을 받습니다. */\n  onRotationChange?: (details: ImageCropperRotationChangeDetails) => void\n  /** 제어되는 좌우/상하 반전. */\n  flip?: { readonly horizontal: boolean; readonly vertical: boolean }\n  /** 비제어 초기 반전. */\n  defaultFlip?: { readonly horizontal: boolean; readonly vertical: boolean }\n  /** 반전이 바뀔 때 알림을 받습니다. */\n  onFlipChange?: (details: ImageCropperFlipChangeDetails) => void\n  /** 화살표 키 한 번이 잘라내기 영역을 옮기는 거리이며, 단위는 픽셀입니다. */\n  nudgeStep?: number\n  /** Shift-화살표가 잘라내기 영역을 옮기는 거리. */\n  nudgeStepShift?: number\n  /** Ctrl-화살표가 잘라내기 영역을 옮기는 거리. */\n  nudgeStepCtrl?: number\n  /** 이 ImageCropper에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nexport interface ImageCropperExportOptions {\n  type?: string\n  quality?: number\n  maxSize?: { width: number; height: number }\n  output?: 'blob' | 'dataUrl'\n}\n\ninterface ImageCropperCommands {\n  getCroppedImage: (options?: ImageCropperExportOptions) => Promise<Blob | string | null>\n  getCropData: () => ImageCropperRect\n  reset: () => void\n}\n\ninterface CropperRectDetails {\n  readonly x: number\n  readonly y: number\n  readonly width: number\n  readonly height: number\n}\n\ninterface CropperPreviewDetails {\n  readonly zoom: number | null\n  readonly rotation: number | null\n  readonly crop: CropperRectDetails\n}\n\ninterface CropperSelectionDetails extends CropperRectDetails {\n  readonly shape: 'rectangle' | 'circle'\n}\n\nconst finite = (value: number | null, fallback: number): number =>\n  value !== null && Number.isFinite(value) ? value : fallback\n\nconst imageCropperController = defineController<ImageCropperCommands, keyof ImageCropperCommands>({\n  component: 'ImageCropper',\n  root: 'ImageCropper.Root',\n  hook: 'useImageCropper',\n  commands: ['getCroppedImage', 'getCropData', 'reset'],\n})\n\nexport const ImageCropper = defineComponent<ImageCropperRootProps>()({\n  name: 'ImageCropper',\n  module: imageCropper,\n  rootPart: 'root',\n  elements: { image: 'img' },\n  getterProps: {\n    handle: ['position'],\n    grid: ['axis'],\n  },\n  machineTranslations: {\n    rootLabel: 'imageCropper.root.label',\n    rootRoleDescription: 'imageCropper.root.roleDescription',\n    previewLoading: 'imageCropper.image.loading',\n    selectionRoleDescription: 'imageCropper.selection.roleDescription',\n    selectionInstructions: 'imageCropper.selection.instructions',\n    previewDescription: (t: Translator) => (details: CropperPreviewDetails) =>\n      t('imageCropper.root.description', {\n        zoom: finite(details.zoom, 1).toFixed(2),\n        rotation: Math.round(finite(details.rotation, 0)),\n        x: Math.round(details.crop.x),\n        y: Math.round(details.crop.y),\n        width: Math.round(details.crop.width),\n        height: Math.round(details.crop.height),\n      }),\n    selectionLabel: (t: Translator) => (details: { readonly shape: 'rectangle' | 'circle' }) =>\n      t(\n        details.shape === 'circle'\n          ? 'imageCropper.selection.circleLabel'\n          : 'imageCropper.selection.rectangleLabel',\n      ),\n    selectionValueText: (t: Translator) => (details: CropperSelectionDetails) =>\n      details.shape === 'circle'\n        ? t('imageCropper.selection.circleValue', {\n            x: details.x,\n            y: details.y,\n            diameter: details.width,\n          })\n        : t('imageCropper.selection.rectangleValue', {\n            x: details.x,\n            y: details.y,\n            width: details.width,\n            height: details.height,\n          }),\n  },\n  variantProps: ['size'],\n  slots: (props: ImageCropperRootProps) =>\n    imageCropperRecipe({ size: resolveSize(props.size, 'ImageCropper') }),\n})\n\nexport const useImageCropper = createControllerHook(ImageCropper, imageCropperController)\n"],"mappings":";;;;;;;AAqCA,MAAa,wBAA+D;CAC1E;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AA2FA,MAAM,UAAU,OAAsB,aACpC,UAAU,QAAQ,OAAO,SAAS,KAAK,IAAI,QAAQ;AAErD,MAAM,yBAAyB,iBAAmE;CAChG,WAAW;CACX,MAAM;CACN,MAAM;CACN,UAAU;EAAC;EAAmB;EAAe;CAAO;AACtD,CAAC;AAED,MAAa,eAAe,gBAAuC,CAAC,CAAC;CACnE,MAAM;CACN,QAAQ;CACR,UAAU;CACV,UAAU,EAAE,OAAO,MAAM;CACzB,aAAa;EACX,QAAQ,CAAC,UAAU;EACnB,MAAM,CAAC,MAAM;CACf;CACA,qBAAqB;EACnB,WAAW;EACX,qBAAqB;EACrB,gBAAgB;EAChB,0BAA0B;EAC1B,uBAAuB;EACvB,qBAAqB,OAAmB,YACtC,EAAE,iCAAiC;GACjC,MAAM,OAAO,QAAQ,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;GACvC,UAAU,KAAK,MAAM,OAAO,QAAQ,UAAU,CAAC,CAAC;GAChD,GAAG,KAAK,MAAM,QAAQ,KAAK,CAAC;GAC5B,GAAG,KAAK,MAAM,QAAQ,KAAK,CAAC;GAC5B,OAAO,KAAK,MAAM,QAAQ,KAAK,KAAK;GACpC,QAAQ,KAAK,MAAM,QAAQ,KAAK,MAAM;EACxC,CAAC;EACH,iBAAiB,OAAmB,YAClC,EACE,QAAQ,UAAU,WACd,uCACA,uCACN;EACF,qBAAqB,OAAmB,YACtC,QAAQ,UAAU,WACd,EAAE,sCAAsC;GACtC,GAAG,QAAQ;GACX,GAAG,QAAQ;GACX,UAAU,QAAQ;EACpB,CAAC,IACD,EAAE,yCAAyC;GACzC,GAAG,QAAQ;GACX,GAAG,QAAQ;GACX,OAAO,QAAQ;GACf,QAAQ,QAAQ;EAClB,CAAC;CACT;CACA,cAAc,CAAC,MAAM;CACrB,QAAQ,UACN,mBAAmB,EAAE,MAAM,YAAY,MAAM,MAAM,cAAc,EAAE,CAAC;AACxE,CAAC;AAED,MAAa,kBAAkB,qBAAqB,cAAc,sBAAsB"}

package/dist/components/image-cropper/image-cropper.recipe.mjs

@@ -0,0 +1,126 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/image-cropper/image-cropper.recipe.ts
+const imageCropperRecipe = sva({
+	slots: [
+		"root",
+		"viewport",
+		"image",
+		"selection",
+		"handle",
+		"grid"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			minHeight: "target.minimum",
+			rounded: "surface",
+			overflow: "hidden",
+			bg: "background.inverse",
+			touchAction: "none"
+		},
+		viewport: {
+			position: "relative",
+			overflow: "hidden",
+			width: "fill"
+		},
+		image: {
+			display: "block",
+			maxWidth: "fill",
+			userSelect: "none",
+			pointerEvents: "none"
+		},
+		selection: {
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "foreground.onEmphasis",
+			cursor: "move",
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			},
+			"&[data-shape=\"circle\"]": { rounded: "pill" },
+			_disabled: { cursor: "not-allowed" }
+		},
+		handle: {
+			position: "absolute",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			_before: {
+				content: "\"\"",
+				display: "block",
+				width: "icon.xs",
+				height: "icon.xs",
+				rounded: "pill",
+				bg: "foreground.onEmphasis",
+				borderWidth: "hairline",
+				borderStyle: "solid",
+				borderColor: "border.strong",
+				boxShadow: "raised"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "inset.compact",
+				outlineColor: "border.focus"
+			}
+		},
+		grid: {
+			position: "absolute",
+			borderColor: "foreground.onEmphasis",
+			borderStyle: "dashed",
+			borderWidth: "none",
+			pointerEvents: "none",
+			"&[data-axis=horizontal]": { borderBlockWidth: "hairline" },
+			"&[data-axis=vertical]": { borderInlineWidth: "hairline" }
+		}
+	},
+	variants: { size: {
+		xs: {
+			handle: { _before: {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			root: { minHeight: "control.xs" }
+		},
+		sm: {
+			handle: { _before: {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			root: { minHeight: "control.sm" }
+		},
+		md: {
+			handle: { _before: {
+				width: "icon.xs",
+				height: "icon.xs"
+			} },
+			root: { minHeight: "control.md" }
+		},
+		lg: {
+			handle: { _before: {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			root: { minHeight: "control.lg" }
+		},
+		xl: {
+			handle: { _before: {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			root: { minHeight: "control.xl" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { imageCropperRecipe };
+
+//# sourceMappingURL=image-cropper.recipe.mjs.map

package/dist/components/image-cropper/image-cropper.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.recipe.mjs","names":[],"sources":["../../../src/components/image-cropper/image-cropper.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const imageCropperRecipe = sva({\n  slots: ['root', 'viewport', 'image', 'selection', 'handle', 'grid'],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      minHeight: 'target.minimum',\n      rounded: 'surface',\n      overflow: 'hidden',\n      bg: 'background.inverse',\n      touchAction: 'none',\n    },\n    viewport: {\n      position: 'relative',\n      overflow: 'hidden',\n      width: 'fill',\n    },\n    image: {\n      display: 'block',\n      maxWidth: 'fill',\n      userSelect: 'none',\n      pointerEvents: 'none',\n    },\n    selection: {\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'foreground.onEmphasis',\n      cursor: 'move',\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n      '&[data-shape=\"circle\"]': { rounded: 'pill' },\n      _disabled: { cursor: 'not-allowed' },\n    },\n    handle: {\n      position: 'absolute',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      _before: {\n        content: '\"\"',\n        display: 'block',\n        width: 'icon.xs',\n        height: 'icon.xs',\n        rounded: 'pill',\n        bg: 'foreground.onEmphasis',\n        borderWidth: 'hairline',\n        borderStyle: 'solid',\n        borderColor: 'border.strong',\n        boxShadow: 'raised',\n      },\n      _focusVisible: {\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: 'inset.compact',\n        outlineColor: 'border.focus',\n      },\n    },\n    grid: {\n      position: 'absolute',\n      borderColor: 'foreground.onEmphasis',\n      borderStyle: 'dashed',\n      borderWidth: 'none',\n      pointerEvents: 'none',\n      '&[data-axis=horizontal]': { borderBlockWidth: 'hairline' },\n      '&[data-axis=vertical]': { borderInlineWidth: 'hairline' },\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        handle: { _before: { width: 'icon.xs', height: 'icon.xs' } },\n        root: { minHeight: 'control.xs' },\n      },\n      sm: {\n        handle: { _before: { width: 'icon.xs', height: 'icon.xs' } },\n        root: { minHeight: 'control.sm' },\n      },\n      md: {\n        handle: { _before: { width: 'icon.xs', height: 'icon.xs' } },\n        root: { minHeight: 'control.md' },\n      },\n      lg: {\n        handle: { _before: { width: 'icon.sm', height: 'icon.sm' } },\n        root: { minHeight: 'control.lg' },\n      },\n      xl: {\n        handle: { _before: { width: 'icon.md', height: 'icon.md' } },\n        root: { minHeight: 'control.xl' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,qBAAqB,IAAI;CACpC,OAAO;EAAC;EAAQ;EAAY;EAAS;EAAa;EAAU;CAAM;CAClE,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GACT,UAAU;GACV,IAAI;GACJ,aAAa;EACf;EACA,UAAU;GACR,UAAU;GACV,UAAU;GACV,OAAO;EACT;EACA,OAAO;GACL,SAAS;GACT,UAAU;GACV,YAAY;GACZ,eAAe;EACjB;EACA,WAAW;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,QAAQ;GACR,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;GACA,4BAA0B,EAAE,SAAS,OAAO;GAC5C,WAAW,EAAE,QAAQ,cAAc;EACrC;EACA,QAAQ;GACN,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,WAAW;GACX,SAAS;IACP,SAAS;IACT,SAAS;IACT,OAAO;IACP,QAAQ;IACR,SAAS;IACT,IAAI;IACJ,aAAa;IACb,aAAa;IACb,aAAa;IACb,WAAW;GACb;GACA,eAAe;IACb,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;GAChB;EACF;EACA,MAAM;GACJ,UAAU;GACV,aAAa;GACb,aAAa;GACb,aAAa;GACb,eAAe;GACf,2BAA2B,EAAE,kBAAkB,WAAW;GAC1D,yBAAyB,EAAE,mBAAmB,WAAW;EAC3D;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC3D,MAAM,EAAE,WAAW,aAAa;EAClC;EACA,IAAI;GACF,QAAQ,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC3D,MAAM,EAAE,WAAW,aAAa;EAClC;EACA,IAAI;GACF,QAAQ,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC3D,MAAM,EAAE,WAAW,aAAa;EAClC;EACA,IAAI;GACF,QAAQ,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC3D,MAAM,EAAE,WAAW,aAAa;EAClC;EACA,IAAI;GACF,QAAQ,EAAE,SAAS;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC3D,MAAM,EAAE,WAAW,aAAa;EAClC;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/components/image-cropper/index.d.mts

@@ -0,0 +1,2 @@
+import { IMAGE_CROPPER_HANDLES, ImageCropper, ImageCropperCropChangeDetails, ImageCropperExportOptions, ImageCropperFlipChangeDetails, ImageCropperHandlePosition, ImageCropperRect, ImageCropperRootProps, ImageCropperRotationChangeDetails, ImageCropperShape, ImageCropperZoomChangeDetails, useImageCropper } from "./image-cropper.mjs";
+export { IMAGE_CROPPER_HANDLES, ImageCropper, type ImageCropperCropChangeDetails, type ImageCropperExportOptions, type ImageCropperFlipChangeDetails, type ImageCropperHandlePosition, type ImageCropperRect, type ImageCropperRootProps, type ImageCropperRotationChangeDetails, type ImageCropperShape, type ImageCropperZoomChangeDetails, useImageCropper };

package/dist/components/image-cropper/index.mjs

@@ -0,0 +1,2 @@
+import { IMAGE_CROPPER_HANDLES, ImageCropper, useImageCropper } from "./image-cropper.mjs";
+export { IMAGE_CROPPER_HANDLES, ImageCropper, useImageCropper };

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

@@ -0,0 +1,2 @@
+import { Input, InputRootProps, InputType } from "./input.mjs";
+export { Input, type InputRootProps, type InputType };

package/dist/components/input/index.mjs

@@ -0,0 +1,2 @@
+import { Input } from "./input.mjs";
+export { Input };