@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/shared/controller.mjs

@@ -0,0 +1,53 @@
+"use client";
+import { devWarn } from "../system/dev-warn.mjs";
+import { rootContextOf } from "../system/context.mjs";
+//#region src/shared/controller.ts
+const isObjectLike = (value) => typeof value === "object" && value !== null || typeof value === "function";
+function isController(value, commands) {
+	return commands.every((name) => typeof value[name] === "function");
+}
+const RENDERING_MEMBER = /^(get[A-Z][A-Za-z]*Props|render|children|element|ref)$/;
+function defineController(definition) {
+	const { component, root, hook, commands } = definition;
+	const rendering = commands.filter((name) => RENDERING_MEMBER.test(name));
+	if (rendering.length > 0) throw new Error(`[synapse] ${component}: a controller may not expose ${rendering.join(", ")}. A controller commands; it does not render. Render through the component's parts instead.`);
+	const duplicates = commands.filter((name, index) => commands.indexOf(name) !== index);
+	if (duplicates.length > 0) throw new Error(`[synapse] ${component}: duplicate controller command ${duplicates[0]}.`);
+	const cache = /* @__PURE__ */ new WeakMap();
+	const from = (api) => {
+		if (api === null || api === void 0) throw new Error(`[synapse] ${hook}() was called outside <${root}>. Render <${root}> above the component that calls ${hook}().`);
+		const cacheable = isObjectLike(api);
+		if (cacheable) {
+			const cached = cache.get(api);
+			if (cached) return cached;
+		}
+		const projected = {};
+		for (const name of commands) {
+			const member = cacheable ? Reflect.get(api, name) : void 0;
+			if (typeof member !== "function") throw new Error(`[synapse] ${component}: controller command "${name}" is not a function on the machine api. A controller exposes only commands the machine already provides.`);
+			projected[name] = (...args) => Reflect.apply(member, api, args);
+		}
+		devWarn(commands.length === 0, `${component}: controller exposes no commands, so ${hook}() can do nothing.`);
+		const controller = Object.freeze(projected);
+		if (!isController(controller, commands)) throw new Error(`[synapse] ${component}: the controller lost a command while it was built.`);
+		if (cacheable) cache.set(api, controller);
+		return controller;
+	};
+	return {
+		component,
+		commands,
+		from
+	};
+}
+function createControllerHook(component, convention) {
+	const context = rootContextOf(component);
+	if (context === null) throw new Error(`[synapse] ${convention.component}: createControllerHook was given something this factory did not build, so there is no context to read the machine from.`);
+	return function useController() {
+		const value = context.useRootValue();
+		return convention.from(value === null ? null : value.api);
+	};
+}
+//#endregion
+export { createControllerHook, defineController };
+
+//# sourceMappingURL=controller.mjs.map

package/dist/shared/controller.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.mjs","names":[],"sources":["../../src/shared/controller.ts"],"sourcesContent":["'use client'\n\nimport { rootContextOf } from '#/system/context.ts'\nimport { devWarn } from '#/system/dev-warn.ts'\n\ntype AnyCommand = (...args: never[]) => unknown\n\nexport type CommandKeys<TApi> = {\n  [K in keyof TApi]-?: TApi[K] extends AnyCommand ? K : never\n}[keyof TApi] &\n  string\n\nexport type Controller<TApi, TCommand extends keyof TApi> = {\n  readonly [K in TCommand]: TApi[K]\n}\n\nexport interface ControllerDefinition<TCommand extends string> {\n  readonly component: string\n  readonly root: string\n  readonly hook: string\n  readonly commands: readonly TCommand[]\n}\n\nexport interface ControllerConvention<TApi, TCommand extends keyof TApi & string> {\n  readonly component: string\n  readonly commands: readonly TCommand[]\n  from: (api: unknown) => Controller<TApi, TCommand>\n}\n\nconst isObjectLike = (value: unknown): value is object =>\n  (typeof value === 'object' && value !== null) || typeof value === 'function'\n\nfunction isController<TApi, TCommand extends keyof TApi & string>(\n  value: Readonly<Record<string, unknown>>,\n  commands: readonly TCommand[],\n): value is Readonly<Record<string, unknown>> & Controller<TApi, TCommand> {\n  return commands.every((name) => typeof value[name] === 'function')\n}\n\nconst RENDERING_MEMBER = /^(get[A-Z][A-Za-z]*Props|render|children|element|ref)$/\n\nexport function defineController<TApi, const TCommand extends CommandKeys<TApi>>(\n  definition: ControllerDefinition<TCommand>,\n): ControllerConvention<TApi, TCommand> {\n  const { component, root, hook, commands } = definition\n\n  const rendering = commands.filter((name) => RENDERING_MEMBER.test(name))\n  if (rendering.length > 0) {\n    throw new Error(\n      `[synapse] ${component}: a controller may not expose ${rendering.join(', ')}. ` +\n        'A controller commands; it does not render. Render through the ' +\n        \"component's parts instead.\",\n    )\n  }\n\n  const duplicates = commands.filter((name, index) => commands.indexOf(name) !== index)\n  if (duplicates.length > 0) {\n    throw new Error(`[synapse] ${component}: duplicate controller command ${duplicates[0]}.`)\n  }\n\n  const cache = new WeakMap<object, Controller<TApi, TCommand>>()\n\n  const from = (api: unknown): Controller<TApi, TCommand> => {\n    if (api === null || api === undefined) {\n      throw new Error(\n        `[synapse] ${hook}() was called outside <${root}>. ` +\n          `Render <${root}> above the component that calls ${hook}().`,\n      )\n    }\n\n    const cacheable = isObjectLike(api)\n    if (cacheable) {\n      const cached = cache.get(api)\n      if (cached) return cached\n    }\n\n    const projected: Record<string, AnyCommand> = {}\n    for (const name of commands) {\n      const member: unknown = cacheable ? Reflect.get(api, name) : undefined\n      if (typeof member !== 'function') {\n        throw new Error(\n          `[synapse] ${component}: controller command \"${name}\" is not a function on the ` +\n            'machine api. A controller exposes only commands the machine already provides.',\n        )\n      }\n      projected[name] = (...args: never[]): unknown => Reflect.apply(member, api, args)\n    }\n\n    devWarn(\n      commands.length === 0,\n      `${component}: controller exposes no commands, so ${hook}() can do nothing.`,\n    )\n\n    const controller = Object.freeze(projected)\n    if (!isController<TApi, TCommand>(controller, commands)) {\n      throw new Error(`[synapse] ${component}: the controller lost a command while it was built.`)\n    }\n    if (cacheable) cache.set(api, controller)\n    return controller\n  }\n\n  return { component, commands, from }\n}\n\nexport function createControllerHook<TApi, TCommand extends keyof TApi & string>(\n  component: object,\n  convention: ControllerConvention<TApi, TCommand>,\n): () => Controller<TApi, TCommand> {\n  const context = rootContextOf(component)\n  if (context === null) {\n    throw new Error(\n      `[synapse] ${convention.component}: createControllerHook was given something this ` +\n        'factory did not build, so there is no context to read the machine from.',\n    )\n  }\n\n  return function useController(): Controller<TApi, TCommand> {\n    const value = context.useRootValue()\n    return convention.from(value === null ? null : value.api)\n  }\n}\n"],"mappings":";;;;AA6BA,MAAM,gBAAgB,UACnB,OAAO,UAAU,YAAY,UAAU,QAAS,OAAO,UAAU;AAEpE,SAAS,aACP,OACA,UACyE;CACzE,OAAO,SAAS,OAAO,SAAS,OAAO,MAAM,UAAU,UAAU;AACnE;AAEA,MAAM,mBAAmB;AAEzB,SAAgB,iBACd,YACsC;CACtC,MAAM,EAAE,WAAW,MAAM,MAAM,aAAa;CAE5C,MAAM,YAAY,SAAS,QAAQ,SAAS,iBAAiB,KAAK,IAAI,CAAC;CACvE,IAAI,UAAU,SAAS,GACrB,MAAM,IAAI,MACR,aAAa,UAAU,gCAAgC,UAAU,KAAK,IAAI,EAAE,2FAG9E;CAGF,MAAM,aAAa,SAAS,QAAQ,MAAM,UAAU,SAAS,QAAQ,IAAI,MAAM,KAAK;CACpF,IAAI,WAAW,SAAS,GACtB,MAAM,IAAI,MAAM,aAAa,UAAU,iCAAiC,WAAW,GAAG,EAAE;CAG1F,MAAM,wBAAQ,IAAI,QAA4C;CAE9D,MAAM,QAAQ,QAA6C;EACzD,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GAC1B,MAAM,IAAI,MACR,aAAa,KAAK,yBAAyB,KAAK,aACnC,KAAK,mCAAmC,KAAK,IAC5D;EAGF,MAAM,YAAY,aAAa,GAAG;EAClC,IAAI,WAAW;GACb,MAAM,SAAS,MAAM,IAAI,GAAG;GAC5B,IAAI,QAAQ,OAAO;EACrB;EAEA,MAAM,YAAwC,CAAC;EAC/C,KAAK,MAAM,QAAQ,UAAU;GAC3B,MAAM,SAAkB,YAAY,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAA;GAC7D,IAAI,OAAO,WAAW,YACpB,MAAM,IAAI,MACR,aAAa,UAAU,wBAAwB,KAAK,yGAEtD;GAEF,UAAU,SAAS,GAAG,SAA2B,QAAQ,MAAM,QAAQ,KAAK,IAAI;EAClF;EAEA,QACE,SAAS,WAAW,GACpB,GAAG,UAAU,uCAAuC,KAAK,mBAC3D;EAEA,MAAM,aAAa,OAAO,OAAO,SAAS;EAC1C,IAAI,CAAC,aAA6B,YAAY,QAAQ,GACpD,MAAM,IAAI,MAAM,aAAa,UAAU,oDAAoD;EAE7F,IAAI,WAAW,MAAM,IAAI,KAAK,UAAU;EACxC,OAAO;CACT;CAEA,OAAO;EAAE;EAAW;EAAU;CAAK;AACrC;AAEA,SAAgB,qBACd,WACA,YACkC;CAClC,MAAM,UAAU,cAAc,SAAS;CACvC,IAAI,YAAY,MACd,MAAM,IAAI,MACR,aAAa,WAAW,UAAU,wHAEpC;CAGF,OAAO,SAAS,gBAA4C;EAC1D,MAAM,QAAQ,QAAQ,aAAa;EACnC,OAAO,WAAW,KAAK,UAAU,OAAO,OAAO,MAAM,GAAG;CAC1D;AACF"}

package/dist/shared/field-context.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from "react";
+//#region src/shared/field-context.ts
+const FIELD_STATES = [
+	"invalid",
+	"required",
+	"disabled",
+	"readOnly"
+];
+const FieldContext = createContext(null);
+FieldContext.displayName = "FieldContext";
+function useFieldContext() {
+	return useContext(FieldContext);
+}
+const DescriptionContext = createContext(null);
+DescriptionContext.displayName = "DescriptionContext";
+function useDescriptionRegistry() {
+	const [ids, setIds] = useState([]);
+	const register = useCallback((id) => {
+		setIds((current) => current.includes(id) ? current : [...current, id]);
+		return () => {
+			setIds((current) => current.filter((existing) => existing !== id));
+		};
+	}, []);
+	return useMemo(() => ({
+		describedBy: ids.length === 0 ? void 0 : ids.join(" "),
+		register
+	}), [ids, register]);
+}
+function useRegisteredDescription(id) {
+	const register = useContext(DescriptionContext)?.register;
+	useLayoutEffect(() => {
+		if (register === void 0 || typeof id !== "string") return void 0;
+		return register(id);
+	}, [register, id]);
+}
+function useLabelability(field, labelable) {
+	const markUnlabelable = field?.markUnlabelable;
+	useLayoutEffect(() => {
+		if (markUnlabelable === void 0 || labelable) return void 0;
+		return markUnlabelable();
+	}, [markUnlabelable, labelable]);
+}
+//#endregion
+export { DescriptionContext, FIELD_STATES, FieldContext, useDescriptionRegistry, useFieldContext, useLabelability, useRegisteredDescription };
+
+//# sourceMappingURL=field-context.mjs.map

package/dist/shared/field-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.mjs","names":[],"sources":["../../src/shared/field-context.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react'\n\nexport type FieldState = 'invalid' | 'required' | 'disabled' | 'readOnly'\n\nexport const FIELD_STATES: readonly FieldState[] = ['invalid', 'required', 'disabled', 'readOnly']\n\nexport interface FieldIds {\n  readonly label: string\n  readonly control: string\n}\n\nexport interface FieldContextValue {\n  readonly ids: FieldIds\n  readonly invalid: boolean\n  readonly required: boolean\n  readonly disabled: boolean\n  readonly readOnly: boolean\n  readonly describedBy: string | undefined\n  readonly markUnlabelable: () => () => void\n}\n\nexport const FieldContext = createContext<FieldContextValue | null>(null)\nFieldContext.displayName = 'FieldContext'\n\nexport function useFieldContext(): FieldContextValue | null {\n  return useContext(FieldContext)\n}\n\nexport interface DescriptionRegistry {\n  readonly describedBy: string | undefined\n  readonly register: (id: string) => () => void\n}\n\nexport const DescriptionContext = createContext<DescriptionRegistry | null>(null)\nDescriptionContext.displayName = 'DescriptionContext'\n\nexport function useDescriptionRegistry(): DescriptionRegistry {\n  const [ids, setIds] = useState<readonly string[]>([])\n\n  const register = useCallback((id: string) => {\n    setIds((current) => (current.includes(id) ? current : [...current, id]))\n    return () => {\n      setIds((current) => current.filter((existing) => existing !== id))\n    }\n  }, [])\n\n  return useMemo(\n    () => ({ describedBy: ids.length === 0 ? undefined : ids.join(' '), register }),\n    [ids, register],\n  )\n}\n\nexport function useRegisteredDescription(id: unknown): void {\n  const register = useContext(DescriptionContext)?.register\n  useLayoutEffect(() => {\n    if (register === undefined || typeof id !== 'string') return undefined\n    return register(id)\n  }, [register, id])\n}\n\nexport function useLabelability(field: FieldContextValue | null, labelable: boolean): void {\n  const markUnlabelable = field?.markUnlabelable\n  useLayoutEffect(() => {\n    if (markUnlabelable === undefined || labelable) return undefined\n    return markUnlabelable()\n  }, [markUnlabelable, labelable])\n}\n"],"mappings":";;;AAMA,MAAa,eAAsC;CAAC;CAAW;CAAY;CAAY;AAAU;AAiBjG,MAAa,eAAe,cAAwC,IAAI;AACxE,aAAa,cAAc;AAE3B,SAAgB,kBAA4C;CAC1D,OAAO,WAAW,YAAY;AAChC;AAOA,MAAa,qBAAqB,cAA0C,IAAI;AAChF,mBAAmB,cAAc;AAEjC,SAAgB,yBAA8C;CAC5D,MAAM,CAAC,KAAK,UAAU,SAA4B,CAAC,CAAC;CAEpD,MAAM,WAAW,aAAa,OAAe;EAC3C,QAAQ,YAAa,QAAQ,SAAS,EAAE,IAAI,UAAU,CAAC,GAAG,SAAS,EAAE,CAAE;EACvE,aAAa;GACX,QAAQ,YAAY,QAAQ,QAAQ,aAAa,aAAa,EAAE,CAAC;EACnE;CACF,GAAG,CAAC,CAAC;CAEL,OAAO,eACE;EAAE,aAAa,IAAI,WAAW,IAAI,KAAA,IAAY,IAAI,KAAK,GAAG;EAAG;CAAS,IAC7E,CAAC,KAAK,QAAQ,CAChB;AACF;AAEA,SAAgB,yBAAyB,IAAmB;CAC1D,MAAM,WAAW,WAAW,kBAAkB,CAAC,EAAE;CACjD,sBAAsB;EACpB,IAAI,aAAa,KAAA,KAAa,OAAO,OAAO,UAAU,OAAO,KAAA;EAC7D,OAAO,SAAS,EAAE;CACpB,GAAG,CAAC,UAAU,EAAE,CAAC;AACnB;AAEA,SAAgB,gBAAgB,OAAiC,WAA0B;CACzF,MAAM,kBAAkB,OAAO;CAC/B,sBAAsB;EACpB,IAAI,oBAAoB,KAAA,KAAa,WAAW,OAAO,KAAA;EACvD,OAAO,gBAAgB;CACzB,GAAG,CAAC,iBAAiB,SAAS,CAAC;AACjC"}

package/dist/shared/field-description.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { useRegisteredDescription } from "./field-context.mjs";
+import { createElement } from "react";
+//#region src/shared/field-description.tsx
+function FieldDescription(props) {
+	useRegisteredDescription(props.hidden === true ? void 0 : props.id);
+	if (props.hidden === true) return null;
+	return createElement("div", props);
+}
+//#endregion
+export { FieldDescription };
+
+//# sourceMappingURL=field-description.mjs.map

package/dist/shared/field-description.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-description.mjs","names":[],"sources":["../../src/shared/field-description.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, type ComponentProps, type ReactNode } from 'react'\n\nimport { useRegisteredDescription } from '#/shared/field-context.ts'\n\nexport function FieldDescription(props: ComponentProps<'div'>): ReactNode {\n  useRegisteredDescription(props.hidden === true ? undefined : props.id)\n  if (props.hidden === true) return null\n  return createElement('div', props)\n}\n"],"mappings":";;;;AAMA,SAAgB,iBAAiB,OAAyC;CACxE,yBAAyB,MAAM,WAAW,OAAO,KAAA,IAAY,MAAM,EAAE;CACrE,IAAI,MAAM,WAAW,MAAM,OAAO;CAClC,OAAO,cAAc,OAAO,KAAK;AACnC"}

package/dist/shared/icon.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { iconAttributes } from "../icons/src/index.mjs";
+import { css } from "../react/styled-system/css/css.mjs";
+import { cx } from "../react/styled-system/css/cx.mjs";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/shared/icon.tsx
+const mirrored = css({ _rtl: { transform: "scaleX(-1)" } });
+function Icon({ icon, className }) {
+	const classes = icon.directional ? cx(mirrored, className) : className;
+	return /* @__PURE__ */ jsx("svg", {
+		...iconAttributes(icon),
+		...classes === void 0 ? {} : { className: classes },
+		children: icon.nodes.map(([tag, attributes]) => createElement(tag, {
+			key: `${tag}:${JSON.stringify(attributes)}`,
+			...attributes
+		}))
+	});
+}
+//#endregion
+export { Icon };
+
+//# sourceMappingURL=icon.mjs.map

package/dist/shared/icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.mjs","names":[],"sources":["../../src/shared/icon.tsx"],"sourcesContent":["'use client'\n\nimport { type IconGeometry, iconAttributes } from '@neurocle/synapse-icons'\nimport { createElement, type ReactNode } from 'react'\n\nimport { css, cx } from '#styled-system/css/index.js'\n\nexport interface IconProps {\n  icon: IconGeometry\n  className?: string\n}\n\nconst mirrored = css({ _rtl: { transform: 'scaleX(-1)' } })\n\nexport function Icon({ icon, className }: IconProps): ReactNode {\n  const classes = icon.directional ? cx(mirrored, className) : className\n  return (\n    <svg {...iconAttributes(icon)} {...(classes === undefined ? {} : { className: classes })}>\n      {icon.nodes.map(([tag, attributes]) =>\n        createElement(tag, { key: `${tag}:${JSON.stringify(attributes)}`, ...attributes }),\n      )}\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;AAYA,MAAM,WAAW,IAAI,EAAE,MAAM,EAAE,WAAW,aAAa,EAAE,CAAC;AAE1D,SAAgB,KAAK,EAAE,MAAM,aAAmC;CAC9D,MAAM,UAAU,KAAK,cAAc,GAAG,UAAU,SAAS,IAAI;CAC7D,OACE,oBAAC,OAAD;EAAK,GAAI,eAAe,IAAI;EAAG,GAAK,YAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,QAAQ;EACnF,UAAA,KAAK,MAAM,KAAK,CAAC,KAAK,gBACrB,cAAc,KAAK;GAAE,KAAK,GAAG,IAAI,GAAG,KAAK,UAAU,UAAU;GAAK,GAAG;EAAW,CAAC,CACnF;CACG,CAAA;AAET"}

package/dist/shared/input-modality.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { useEffect } from "react";
+//#region src/shared/input-modality.ts
+const INPUT_MODALITY_ATTRIBUTE = "data-synapse-input";
+let subscribers = 0;
+let stopTracking = null;
+function track(doc) {
+	const root = doc.documentElement;
+	const onPointerDown = () => {
+		root.setAttribute(INPUT_MODALITY_ATTRIBUTE, "pointer");
+	};
+	const onPointerMove = (event) => {
+		if (event.movementX === 0 && event.movementY === 0) return;
+		if (root.getAttribute("data-synapse-input") === "pointer") return;
+		root.setAttribute(INPUT_MODALITY_ATTRIBUTE, "pointer");
+	};
+	const onKeyDown = (event) => {
+		if (event.metaKey || event.ctrlKey || event.altKey) return;
+		root.setAttribute(INPUT_MODALITY_ATTRIBUTE, "keyboard");
+	};
+	doc.addEventListener("pointerdown", onPointerDown, true);
+	doc.addEventListener("pointermove", onPointerMove, true);
+	doc.addEventListener("keydown", onKeyDown, true);
+	return () => {
+		doc.removeEventListener("pointerdown", onPointerDown, true);
+		doc.removeEventListener("pointermove", onPointerMove, true);
+		doc.removeEventListener("keydown", onKeyDown, true);
+		root.removeAttribute(INPUT_MODALITY_ATTRIBUTE);
+	};
+}
+function useInputModality() {
+	useEffect(() => {
+		subscribers += 1;
+		if (subscribers === 1) stopTracking = track(document);
+		return () => {
+			subscribers -= 1;
+			if (subscribers === 0) {
+				stopTracking?.();
+				stopTracking = null;
+			}
+		};
+	}, []);
+}
+//#endregion
+export { INPUT_MODALITY_ATTRIBUTE, useInputModality };
+
+//# sourceMappingURL=input-modality.mjs.map

package/dist/shared/input-modality.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-modality.mjs","names":[],"sources":["../../src/shared/input-modality.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nexport const INPUT_MODALITY_ATTRIBUTE = 'data-synapse-input'\n\nlet subscribers = 0\nlet stopTracking: (() => void) | null = null\n\nfunction track(doc: Document): () => void {\n  const root = doc.documentElement\n  const onPointerDown = (): void => {\n    root.setAttribute(INPUT_MODALITY_ATTRIBUTE, 'pointer')\n  }\n  const onPointerMove = (event: PointerEvent): void => {\n    if (event.movementX === 0 && event.movementY === 0) return\n    if (root.getAttribute(INPUT_MODALITY_ATTRIBUTE) === 'pointer') return\n    root.setAttribute(INPUT_MODALITY_ATTRIBUTE, 'pointer')\n  }\n  const onKeyDown = (event: KeyboardEvent): void => {\n    if (event.metaKey || event.ctrlKey || event.altKey) return\n    root.setAttribute(INPUT_MODALITY_ATTRIBUTE, 'keyboard')\n  }\n  doc.addEventListener('pointerdown', onPointerDown, true)\n  doc.addEventListener('pointermove', onPointerMove, true)\n  doc.addEventListener('keydown', onKeyDown, true)\n  return () => {\n    doc.removeEventListener('pointerdown', onPointerDown, true)\n    doc.removeEventListener('pointermove', onPointerMove, true)\n    doc.removeEventListener('keydown', onKeyDown, true)\n    root.removeAttribute(INPUT_MODALITY_ATTRIBUTE)\n  }\n}\n\nexport function useInputModality(): void {\n  useEffect(() => {\n    subscribers += 1\n    if (subscribers === 1) stopTracking = track(document)\n    return () => {\n      subscribers -= 1\n      if (subscribers === 0) {\n        stopTracking?.()\n        stopTracking = null\n      }\n    }\n  }, [])\n}\n"],"mappings":";;;AAIA,MAAa,2BAA2B;AAExC,IAAI,cAAc;AAClB,IAAI,eAAoC;AAExC,SAAS,MAAM,KAA2B;CACxC,MAAM,OAAO,IAAI;CACjB,MAAM,sBAA4B;EAChC,KAAK,aAAa,0BAA0B,SAAS;CACvD;CACA,MAAM,iBAAiB,UAA8B;EACnD,IAAI,MAAM,cAAc,KAAK,MAAM,cAAc,GAAG;EACpD,IAAI,KAAK,aAAA,oBAAqC,MAAM,WAAW;EAC/D,KAAK,aAAa,0BAA0B,SAAS;CACvD;CACA,MAAM,aAAa,UAA+B;EAChD,IAAI,MAAM,WAAW,MAAM,WAAW,MAAM,QAAQ;EACpD,KAAK,aAAa,0BAA0B,UAAU;CACxD;CACA,IAAI,iBAAiB,eAAe,eAAe,IAAI;CACvD,IAAI,iBAAiB,eAAe,eAAe,IAAI;CACvD,IAAI,iBAAiB,WAAW,WAAW,IAAI;CAC/C,aAAa;EACX,IAAI,oBAAoB,eAAe,eAAe,IAAI;EAC1D,IAAI,oBAAoB,eAAe,eAAe,IAAI;EAC1D,IAAI,oBAAoB,WAAW,WAAW,IAAI;EAClD,KAAK,gBAAgB,wBAAwB;CAC/C;AACF;AAEA,SAAgB,mBAAyB;CACvC,gBAAgB;EACd,eAAe;EACf,IAAI,gBAAgB,GAAG,eAAe,MAAM,QAAQ;EACpD,aAAa;GACX,eAAe;GACf,IAAI,gBAAgB,GAAG;IACrB,eAAe;IACf,eAAe;GACjB;EACF;CACF,GAAG,CAAC,CAAC;AACP"}

package/dist/shared/input-style.mjs

@@ -0,0 +1,10 @@
+import { css } from "../react/styled-system/css/css.mjs";
+import { inputRecipe } from "../components/input/input.recipe.mjs";
+//#region src/shared/input-style.ts
+function inputPartClass(size, own) {
+	return css(inputRecipe.raw({ size }).root, own);
+}
+//#endregion
+export { inputPartClass };
+
+//# sourceMappingURL=input-style.mjs.map

package/dist/shared/input-style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-style.mjs","names":[],"sources":["../../src/shared/input-style.ts"],"sourcesContent":["import { inputRecipe } from '#/components/input/input.recipe.ts'\nimport type { Size } from '#/shared/size-scale.ts'\nimport { css } from '#styled-system/css/index.js'\nimport type { SystemStyleObject } from '#styled-system/types/index.js'\n\nexport function inputPartClass(size: Size, own?: SystemStyleObject): string {\n  return css(inputRecipe.raw({ size }).root, own)\n}\n"],"mappings":";;;AAKA,SAAgB,eAAe,MAAY,KAAiC;CAC1E,OAAO,IAAI,YAAY,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,GAAG;AAChD"}

package/dist/shared/layering.d.mts

@@ -0,0 +1,17 @@
+import { CSSProperties, ReactNode } from "react";
+//#region src/shared/layering.d.ts
+export declare const LAYER_BASE_VAR = "--synapse-layer-base";
+export declare const DEFAULT_LAYER_BASE = 1000;
+export interface LayerContainerProviderProps {
+  getContainer: () => Element | null;
+  children?: ReactNode;
+}
+export declare function LayerContainerProvider(props: LayerContainerProviderProps): ReactNode;
+export interface PortalProps {
+  children?: ReactNode;
+  container?: Element | null;
+  disabled?: boolean;
+}
+export declare function Portal(props: PortalProps): ReactNode;
+//#endregion
+//# sourceMappingURL=layering.d.mts.map

package/dist/shared/layering.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layering.d.mts","names":[],"sources":["../../src/shared/layering.ts"],"mappings":";;qBAea;qBAEA;iBAWI;EACf,oBAAoB;EACpB,WAAW;;wBAGG,uBAAuB,OAAO,8BAA8B;iBAY3D;EACf,WAAW;EACX,YAAY;EACZ;;wBAGc,OAAO,OAAO,cAAc"}

package/dist/shared/layering.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { useLocale } from "../provider/locale-context.mjs";
+import { getThemeScopeProps, getThemeScopeStyle, useTheme } from "../provider/use-theme.mjs";
+import { createContext, createElement, useContext, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+//#region src/shared/layering.ts
+const LAYER_BASE_VAR = "--synapse-layer-base";
+const DEFAULT_LAYER_BASE = 1e3;
+const LayerContainerContext = createContext(null);
+function LayerContainerProvider(props) {
+	return createElement(LayerContainerContext.Provider, { value: props.getContainer }, props.children);
+}
+const subscribeToNothing = () => () => void 0;
+const clientSnapshot = () => true;
+const serverSnapshot = () => false;
+function Portal(props) {
+	const { children, container, disabled } = props;
+	const getContainer = useContext(LayerContainerContext);
+	const { theme } = useTheme();
+	const { locale, direction } = useLocale();
+	const resolved = !useSyncExternalStore(subscribeToNothing, clientSnapshot, serverSnapshot) ? null : container ?? getContainer?.() ?? globalThis.document?.body ?? null;
+	const scope = createElement("div", {
+		...getThemeScopeProps(theme),
+		dir: direction,
+		lang: locale,
+		"data-synapse-scope": "",
+		"data-synapse-layer": "",
+		style: getThemeScopeStyle(theme)
+	}, children);
+	if (disabled === true) return scope;
+	if (resolved === null) return null;
+	return createPortal(scope, resolved);
+}
+//#endregion
+export { DEFAULT_LAYER_BASE, LAYER_BASE_VAR, LayerContainerProvider, Portal };
+
+//# sourceMappingURL=layering.mjs.map

package/dist/shared/layering.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layering.mjs","names":[],"sources":["../../src/shared/layering.ts"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  createElement,\n  useContext,\n  useSyncExternalStore,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useLocale } from '#/provider/locale-context.ts'\nimport { getThemeScopeProps, getThemeScopeStyle, useTheme } from '#/provider/use-theme.ts'\n\nexport const LAYER_BASE_VAR = '--synapse-layer-base'\n\nexport const DEFAULT_LAYER_BASE = 1000\n\nexport function layerStyle(): CSSProperties {\n  const style: CSSProperties = {\n    zIndex: `calc(var(${LAYER_BASE_VAR}, ${DEFAULT_LAYER_BASE}) + var(--layer-index, 0))`,\n  }\n  return style\n}\n\nconst LayerContainerContext = createContext<(() => Element | null) | null>(null)\n\nexport interface LayerContainerProviderProps {\n  getContainer: () => Element | null\n  children?: ReactNode\n}\n\nexport function LayerContainerProvider(props: LayerContainerProviderProps): ReactNode {\n  return createElement(\n    LayerContainerContext.Provider,\n    { value: props.getContainer },\n    props.children,\n  )\n}\n\nconst subscribeToNothing = (): (() => void) => () => undefined\nconst clientSnapshot = (): boolean => true\nconst serverSnapshot = (): boolean => false\n\nexport interface PortalProps {\n  children?: ReactNode\n  container?: Element | null\n  disabled?: boolean\n}\n\nexport function Portal(props: PortalProps): ReactNode {\n  const { children, container, disabled } = props\n  const getContainer = useContext(LayerContainerContext)\n  const { theme } = useTheme()\n  const { locale, direction } = useLocale()\n\n  const mounted = useSyncExternalStore(subscribeToNothing, clientSnapshot, serverSnapshot)\n  const resolved: Element | null = !mounted\n    ? null\n    : (container ?? getContainer?.() ?? globalThis.document?.body ?? null)\n\n  const scope = createElement(\n    'div',\n    {\n      ...getThemeScopeProps(theme),\n      dir: direction,\n      lang: locale,\n      'data-synapse-scope': '',\n      'data-synapse-layer': '',\n      style: getThemeScopeStyle(theme),\n    },\n    children,\n  )\n\n  if (disabled === true) return scope\n  if (resolved === null) return null\n  return createPortal(scope, resolved)\n}\n"],"mappings":";;;;;;AAeA,MAAa,iBAAiB;AAE9B,MAAa,qBAAqB;AASlC,MAAM,wBAAwB,cAA6C,IAAI;AAO/E,SAAgB,uBAAuB,OAA+C;CACpF,OAAO,cACL,sBAAsB,UACtB,EAAE,OAAO,MAAM,aAAa,GAC5B,MAAM,QACR;AACF;AAEA,MAAM,iCAA+C,KAAA;AACrD,MAAM,uBAAgC;AACtC,MAAM,uBAAgC;AAQtC,SAAgB,OAAO,OAA+B;CACpD,MAAM,EAAE,UAAU,WAAW,aAAa;CAC1C,MAAM,eAAe,WAAW,qBAAqB;CACrD,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,QAAQ,cAAc,UAAU;CAGxC,MAAM,WAA2B,CADjB,qBAAqB,oBAAoB,gBAAgB,cACjC,IACpC,OACC,aAAa,eAAe,KAAK,WAAW,UAAU,QAAQ;CAEnE,MAAM,QAAQ,cACZ,OACA;EACE,GAAG,mBAAmB,KAAK;EAC3B,KAAK;EACL,MAAM;EACN,sBAAsB;EACtB,sBAAsB;EACtB,OAAO,mBAAmB,KAAK;CACjC,GACA,QACF;CAEA,IAAI,aAAa,MAAM,OAAO;CAC9B,IAAI,aAAa,MAAM,OAAO;CAC9B,OAAO,aAAa,OAAO,QAAQ;AACrC"}

package/dist/shared/notification.d.mts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+//#region src/shared/notification.d.ts
+export type NotificationPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
+export type NotificationType = 'info' | 'success' | 'error' | 'warning' | 'loading';
+export interface NotificationAction {
+  label: string;
+  onClick: () => void;
+}
+//#endregion
+//# sourceMappingURL=notification.d.mts.map

package/dist/shared/notification.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.d.mts","names":[],"sources":["../../src/shared/notification.tsx"],"mappings":";;YASY;YAQA;iBAEK;EACf;EACA"}

package/dist/shared/notification.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { Icon } from "./icon.mjs";
+import { isReactNode } from "../system/react-node.mjs";
+import { createElement, useMemo } from "react";
+import { visuallyHiddenStyle } from "@zag-js/dom-query";
+//#region src/shared/notification.tsx
+const NOTIFICATION_GROUP_MACHINE_PROPS = [
+	"store",
+	"dir",
+	"id",
+	"getRootNode"
+];
+const NOTIFICATION_MACHINE_PROPS = [
+	"id",
+	"title",
+	"description",
+	"type",
+	"duration",
+	"removeDelay",
+	"priority",
+	"onStatusChange",
+	"action",
+	"closable",
+	"meta",
+	"parent",
+	"index",
+	"gap",
+	"translations",
+	"dir",
+	"getRootNode"
+];
+const toMachineOptions = (message) => ({
+	...message.title === void 0 ? {} : { title: message.title },
+	...message.type === void 0 ? {} : { type: message.type },
+	...message.duration === void 0 ? message.action === void 0 ? {} : { duration: Number.POSITIVE_INFINITY } : { duration: message.duration },
+	...message.id === void 0 ? {} : { id: message.id },
+	closable: message.closable,
+	...message.onStatusChange === void 0 ? {} : { onStatusChange: message.onStatusChange },
+	...message.action === void 0 ? {} : { action: {
+		label: message.action.label,
+		onClick: message.action.onClick
+	} }
+});
+const isRecord = (value) => typeof value === "object" && value !== null;
+const hiddenStyle = visuallyHiddenStyle;
+const isIconGeometry = (value) => isRecord(value) && typeof value["name"] === "string" && typeof value["viewBox"] === "string" && Array.isArray(value["nodes"]);
+const titleWithStatus = (notification, translate, icons, labels) => {
+	const type = isRecord(notification) ? notification["type"] : void 0;
+	const rawTitle = isRecord(notification) ? notification["title"] : void 0;
+	const title = isReactNode(rawTitle) ? rawTitle : null;
+	const candidate = typeof type === "string" ? icons[type] : void 0;
+	const icon = isIconGeometry(candidate) ? candidate : void 0;
+	const label = typeof type === "string" ? labels[type] : void 0;
+	if (icon === void 0 || label === void 0) return title;
+	return [
+		createElement(Icon, {
+			key: "status",
+			icon
+		}),
+		createElement("span", {
+			key: "status-label",
+			style: hiddenStyle
+		}, `${translate(label)} `),
+		title
+	];
+};
+const isGroupService = (value) => {
+	if (!isRecord(value)) return false;
+	const context = value["context"];
+	return isRecord(context) && typeof context["get"] === "function" && typeof context["set"] === "function";
+};
+const isHeight = (value) => isRecord(value) && typeof value["id"] === "string" && typeof value["height"] === "number";
+const isHeightList = (value) => Array.isArray(value) && value.every(isHeight);
+const isQueuedNotification = (value) => isRecord(value) && (value["id"] === void 0 || typeof value["id"] === "string");
+const queuedOf = (value) => Array.isArray(value) ? value.filter(isQueuedNotification) : [];
+const inQueueOrder = (heights, toasts) => {
+	const rank = new Map(toasts.map((queued, index) => [queued.id, index]));
+	return heights.toSorted((a, b) => (rank.get(a.id) ?? toasts.length) - (rank.get(b.id) ?? toasts.length));
+};
+function useQueueOrderedParent(service) {
+	return useMemo(() => {
+		if (!isGroupService(service)) return service;
+		const group = service;
+		return {
+			...group,
+			context: {
+				...group.context,
+				set: (key, value) => {
+					if (key !== "heights") {
+						group.context.set(key, value);
+						return;
+					}
+					group.context.set(key, (prev) => {
+						const next = typeof value === "function" ? Reflect.apply(value, void 0, [prev]) : value;
+						return isHeightList(next) ? inQueueOrder(next, queuedOf(group.context.get("toasts"))) : next;
+					});
+				}
+			}
+		};
+	}, [service]);
+}
+//#endregion
+export { NOTIFICATION_GROUP_MACHINE_PROPS, NOTIFICATION_MACHINE_PROPS, titleWithStatus, toMachineOptions, useQueueOrderedParent };
+
+//# sourceMappingURL=notification.mjs.map

package/dist/shared/notification.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.mjs","names":[],"sources":["../../src/shared/notification.tsx"],"sourcesContent":["'use client'\n\nimport { visuallyHiddenStyle } from '@zag-js/dom-query'\nimport { createElement, useMemo, type CSSProperties, type ReactNode } from 'react'\n\nimport type { TranslationKey, Translator } from '#/provider/translations.ts'\nimport { Icon, type IconProps } from '#/shared/icon.tsx'\nimport { isReactNode } from '#/system/react-node.ts'\n\nexport type NotificationPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n\nexport type NotificationType = 'info' | 'success' | 'error' | 'warning' | 'loading'\n\nexport interface NotificationAction {\n  label: string\n  onClick: () => void\n}\n\nexport interface NotificationMessage {\n  title?: ReactNode\n  type?: NotificationType\n  duration?: number\n  id?: string\n  onStatusChange?: (details: { status: string }) => void\n  closable: boolean\n  action?: NotificationAction\n}\n\nexport interface NotificationStoreCommands {\n  create: (options: Record<string, unknown>) => string\n  update: (id: string, options: Record<string, unknown>) => string\n  dismiss: (id?: string) => void\n  remove: (id?: string) => void\n}\n\nexport interface QueuedNotification {\n  id?: string | undefined\n  title?: unknown\n  closable?: boolean | undefined\n  type?: string | undefined\n  action?: { label?: unknown } | undefined\n}\n\nexport interface NotificationQueue {\n  getToasts: () => readonly QueuedNotification[]\n}\n\nexport const DEFAULT_REMOVE_DELAY = 120\n\nexport const DEFAULT_GAP = 8\n\nexport const NOTIFICATION_GROUP_MACHINE_PROPS: readonly string[] = [\n  'store',\n  'dir',\n  'id',\n  'getRootNode',\n]\n\nexport const NOTIFICATION_MACHINE_PROPS: readonly string[] = [\n  'id',\n  'title',\n  'description',\n  'type',\n  'duration',\n  'removeDelay',\n  'priority',\n  'onStatusChange',\n  'action',\n  'closable',\n  'meta',\n  'parent',\n  'index',\n  'gap',\n  'translations',\n  'dir',\n  'getRootNode',\n]\n\nexport const toMachineOptions = (message: NotificationMessage): Record<string, unknown> => ({\n  ...(message.title === undefined ? {} : { title: message.title }),\n  ...(message.type === undefined ? {} : { type: message.type }),\n  ...(message.duration === undefined\n    ? message.action === undefined\n      ? {}\n      : { duration: Number.POSITIVE_INFINITY }\n    : { duration: message.duration }),\n  ...(message.id === undefined ? {} : { id: message.id }),\n  closable: message.closable,\n  ...(message.onStatusChange === undefined ? {} : { onStatusChange: message.onStatusChange }),\n  ...(message.action === undefined\n    ? {}\n    : { action: { label: message.action.label, onClick: message.action.onClick } }),\n})\n\nconst isRecord = (value: unknown): value is Readonly<Record<string, unknown>> =>\n  typeof value === 'object' && value !== null\n\nconst hiddenStyle: CSSProperties = visuallyHiddenStyle\n\nconst isIconGeometry = (value: unknown): value is IconProps['icon'] =>\n  isRecord(value) &&\n  typeof value['name'] === 'string' &&\n  typeof value['viewBox'] === 'string' &&\n  Array.isArray(value['nodes'])\n\nexport const titleWithStatus = (\n  notification: unknown,\n  translate: Translator,\n  icons: Readonly<Record<string, object>>,\n  labels: Readonly<Record<string, TranslationKey>>,\n): ReactNode => {\n  const type = isRecord(notification) ? notification['type'] : undefined\n  const rawTitle = isRecord(notification) ? notification['title'] : undefined\n  const title = isReactNode(rawTitle) ? rawTitle : null\n  const candidate = typeof type === 'string' ? icons[type] : undefined\n  const icon = isIconGeometry(candidate) ? candidate : undefined\n  const label = typeof type === 'string' ? labels[type] : undefined\n  if (icon === undefined || label === undefined) return title\n  return [\n    createElement(Icon, { key: 'status', icon }),\n    createElement('span', { key: 'status-label', style: hiddenStyle }, `${translate(label)} `),\n    title,\n  ]\n}\n\ninterface NotificationHeight {\n  id: string\n  height: number\n}\n\ninterface NotificationGroupService {\n  context: {\n    get: (key: string) => unknown\n    set: (key: string, value: unknown) => void\n  }\n}\n\nconst isGroupService = (value: unknown): value is NotificationGroupService => {\n  if (!isRecord(value)) return false\n  const context = value['context']\n  return (\n    isRecord(context) &&\n    typeof context['get'] === 'function' &&\n    typeof context['set'] === 'function'\n  )\n}\n\nconst isHeight = (value: unknown): value is NotificationHeight =>\n  isRecord(value) && typeof value['id'] === 'string' && typeof value['height'] === 'number'\n\nconst isHeightList = (value: unknown): value is NotificationHeight[] =>\n  Array.isArray(value) && value.every(isHeight)\n\nconst isQueuedNotification = (value: unknown): value is QueuedNotification =>\n  isRecord(value) && (value['id'] === undefined || typeof value['id'] === 'string')\n\nconst queuedOf = (value: unknown): readonly QueuedNotification[] =>\n  Array.isArray(value) ? value.filter(isQueuedNotification) : []\n\nconst inQueueOrder = (\n  heights: readonly NotificationHeight[],\n  toasts: readonly QueuedNotification[],\n): NotificationHeight[] => {\n  const rank = new Map(toasts.map((queued, index) => [queued.id, index]))\n  return heights.toSorted(\n    (a, b) => (rank.get(a.id) ?? toasts.length) - (rank.get(b.id) ?? toasts.length),\n  )\n}\n\nexport function useQueueOrderedParent(service: unknown): unknown {\n  return useMemo(() => {\n    if (!isGroupService(service)) return service\n    const group = service\n    return {\n      ...group,\n      context: {\n        ...group.context,\n        set: (key: string, value: unknown) => {\n          if (key !== 'heights') {\n            group.context.set(key, value)\n            return\n          }\n          group.context.set(key, (prev: unknown) => {\n            const next: unknown =\n              typeof value === 'function' ? Reflect.apply(value, undefined, [prev]) : value\n            return isHeightList(next)\n              ? inQueueOrder(next, queuedOf(group.context.get('toasts')))\n              : next\n          })\n        },\n      },\n    }\n  }, [service])\n}\n"],"mappings":"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"}

package/dist/shared/reduced-motion.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { useSyncExternalStore } from "react";
+//#region src/shared/reduced-motion.ts
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+const reducedMotionQuery = () => typeof window === "undefined" || typeof window.matchMedia !== "function" ? null : window.matchMedia(REDUCED_MOTION);
+const subscribeReducedMotion = (onChange) => {
+	const query = reducedMotionQuery();
+	query?.addEventListener("change", onChange);
+	return () => query?.removeEventListener("change", onChange);
+};
+const prefersReducedMotion = () => reducedMotionQuery()?.matches ?? false;
+const serverSnapshot = () => false;
+function useReducedMotion() {
+	return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverSnapshot);
+}
+//#endregion
+export { prefersReducedMotion, useReducedMotion };
+
+//# sourceMappingURL=reduced-motion.mjs.map

package/dist/shared/reduced-motion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduced-motion.mjs","names":[],"sources":["../../src/shared/reduced-motion.ts"],"sourcesContent":["'use client'\n\nimport { useSyncExternalStore } from 'react'\n\nconst REDUCED_MOTION = '(prefers-reduced-motion: reduce)'\n\nconst reducedMotionQuery = (): MediaQueryList | null =>\n  typeof window === 'undefined' || typeof window.matchMedia !== 'function'\n    ? null\n    : window.matchMedia(REDUCED_MOTION)\n\nconst subscribeReducedMotion = (onChange: () => void): (() => void) => {\n  const query = reducedMotionQuery()\n  query?.addEventListener('change', onChange)\n  return () => query?.removeEventListener('change', onChange)\n}\n\nexport const prefersReducedMotion = (): boolean => reducedMotionQuery()?.matches ?? false\n\nconst serverSnapshot = (): boolean => false\n\nexport function useReducedMotion(): boolean {\n  return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverSnapshot)\n}\n"],"mappings":";;;AAIA,MAAM,iBAAiB;AAEvB,MAAM,2BACJ,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aAC1D,OACA,OAAO,WAAW,cAAc;AAEtC,MAAM,0BAA0B,aAAuC;CACrE,MAAM,QAAQ,mBAAmB;CACjC,OAAO,iBAAiB,UAAU,QAAQ;CAC1C,aAAa,OAAO,oBAAoB,UAAU,QAAQ;AAC5D;AAEA,MAAa,6BAAsC,mBAAmB,CAAC,EAAE,WAAW;AAEpF,MAAM,uBAAgC;AAEtC,SAAgB,mBAA4B;CAC1C,OAAO,qBAAqB,wBAAwB,sBAAsB,cAAc;AAC1F"}

package/dist/shared/select-indicator.mjs

@@ -0,0 +1,40 @@
+import { chevronsUpDown } from "../icons/src/chevrons-up-down.mjs";
+import "../icons/src/index.mjs";
+import { css } from "../react/styled-system/css/css.mjs";
+import { Icon } from "./icon.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/shared/select-indicator.tsx
+const frame = css({
+	display: "inline-grid",
+	gridTemplateAreas: "\"stack\"",
+	alignItems: "center",
+	verticalAlign: "middle",
+	"& > *": { gridArea: "stack" },
+	"& > select": { appearance: "none" },
+	"& > svg": {
+		justifySelf: "end",
+		width: "icon.sm",
+		height: "icon.sm",
+		marginInlineEnd: "inset.compact",
+		color: "foreground.muted",
+		pointerEvents: "none"
+	},
+	"&:has(> select:disabled) > svg": {
+		color: "foreground.disabled",
+		_highContrast: { color: "system.grayText" }
+	}
+});
+function withSelectIndicator(Part) {
+	function Framed(props) {
+		return /* @__PURE__ */ jsxs("span", {
+			className: frame,
+			children: [/* @__PURE__ */ jsx(Part, { ...props }), /* @__PURE__ */ jsx(Icon, { icon: chevronsUpDown })]
+		});
+	}
+	Framed.displayName = Part.displayName;
+	return Framed;
+}
+//#endregion
+export { withSelectIndicator };
+
+//# sourceMappingURL=select-indicator.mjs.map

package/dist/shared/select-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-indicator.mjs","names":[],"sources":["../../src/shared/select-indicator.tsx"],"sourcesContent":["import { chevronsUpDown } from '@neurocle/synapse-icons'\nimport type { ReactNode } from 'react'\n\nimport { Icon } from '#/shared/icon.tsx'\nimport { css } from '#styled-system/css/index.js'\n\nconst frame = css({\n  display: 'inline-grid',\n  gridTemplateAreas: '\"stack\"',\n  alignItems: 'center',\n  verticalAlign: 'middle',\n  '& > *': { gridArea: 'stack' },\n  '& > select': { appearance: 'none' },\n  '& > svg': {\n    justifySelf: 'end',\n    width: 'icon.sm',\n    height: 'icon.sm',\n    marginInlineEnd: 'inset.compact',\n    color: 'foreground.muted',\n    pointerEvents: 'none',\n  },\n  '&:has(> select:disabled) > svg': {\n    color: 'foreground.disabled',\n    _highContrast: { color: 'system.grayText' },\n  },\n})\n\nexport function withSelectIndicator<TProps extends object>(\n  Part: ((props: TProps) => ReactNode) & { readonly displayName: string },\n): ((props: TProps) => ReactNode) & { readonly displayName: string } {\n  function Framed(props: TProps): ReactNode {\n    return (\n      <span className={frame}>\n        <Part {...props} />\n        <Icon icon={chevronsUpDown} />\n      </span>\n    )\n  }\n  Framed.displayName = Part.displayName\n  return Framed\n}\n"],"mappings":";;;;;;AAMA,MAAM,QAAQ,IAAI;CAChB,SAAS;CACT,mBAAmB;CACnB,YAAY;CACZ,eAAe;CACf,SAAS,EAAE,UAAU,QAAQ;CAC7B,cAAc,EAAE,YAAY,OAAO;CACnC,WAAW;EACT,aAAa;EACb,OAAO;EACP,QAAQ;EACR,iBAAiB;EACjB,OAAO;EACP,eAAe;CACjB;CACA,kCAAkC;EAChC,OAAO;EACP,eAAe,EAAE,OAAO,kBAAkB;CAC5C;AACF,CAAC;AAED,SAAgB,oBACd,MACmE;CACnE,SAAS,OAAO,OAA0B;EACxC,OACE,qBAAC,QAAD;GAAM,WAAW;GAAjB,UAAA,CACE,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA,GAClB,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA,CACzB;;CAEV;CACA,OAAO,cAAc,KAAK;CAC1B,OAAO;AACT"}

package/dist/shared/size-scale.d.mts

@@ -0,0 +1,6 @@
+//#region src/shared/size-scale.d.ts
+export declare const SIZE_SCALE: readonly ['xs', 'sm', 'md', 'lg', 'xl'];
+export type Size = (typeof SIZE_SCALE)[number];
+export declare const DEFAULT_SIZE: Size;
+//#endregion
+//# sourceMappingURL=size-scale.d.mts.map

package/dist/shared/size-scale.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size-scale.d.mts","names":[],"sources":["../../src/shared/size-scale.ts"],"mappings":";qBAEa;YAED,eAAe;qBAEd,cAAc"}

package/dist/shared/size-scale.mjs

@@ -0,0 +1,28 @@
+import { devWarn } from "../system/dev-warn.mjs";
+//#region src/shared/size-scale.ts
+const SIZE_SCALE = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+const DEFAULT_SIZE = "md";
+function isSize(value) {
+	return SIZE_SCALE.some((size) => size === value);
+}
+function sizeIndex(size) {
+	return SIZE_SCALE.indexOf(size);
+}
+function sizeBelow(size) {
+	return SIZE_SCALE[sizeIndex(size) - 1] ?? size;
+}
+function resolveSize(size, component = "component") {
+	if (size === void 0) return "md";
+	devWarn(!isSize(size), `${component}: size "${String(size)}" is not on the shared scale (${SIZE_SCALE.join(", ")}). Rendering at "md".`);
+	return isSize(size) ? size : "md";
+}
+//#endregion
+export { DEFAULT_SIZE, SIZE_SCALE, isSize, resolveSize, sizeBelow, sizeIndex };
+
+//# sourceMappingURL=size-scale.mjs.map

package/dist/shared/size-scale.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"size-scale.mjs","names":[],"sources":["../../src/shared/size-scale.ts"],"sourcesContent":["import { devWarn } from '#/system/dev-warn.ts'\n\nexport const SIZE_SCALE: readonly ['xs', 'sm', 'md', 'lg', 'xl'] = ['xs', 'sm', 'md', 'lg', 'xl']\n\nexport type Size = (typeof SIZE_SCALE)[number]\n\nexport const DEFAULT_SIZE: Size = 'md'\n\nexport const FORBIDDEN_VARIANT_AXES: readonly [\n  'emphasis',\n  'prominence',\n  'importance',\n  'variant',\n  'appearance',\n  'kind',\n  'tone',\n] = ['emphasis', 'prominence', 'importance', 'variant', 'appearance', 'kind', 'tone']\n\nexport type ForbiddenVariantAxis = (typeof FORBIDDEN_VARIANT_AXES)[number]\n\nexport interface EmphasisAxisException {\n  readonly axes: readonly ForbiddenVariantAxis[]\n  readonly reason: string\n}\n\nexport const EMPHASIS_AXIS_EXCEPTIONS: Readonly<Record<string, EmphasisAxisException>> = {\n  Button: {\n    axes: ['variant', 'tone'],\n    reason:\n      '다른 컴포넌트는 역할이 곧 강조를 정하지만, Button은 같은 역할의 동작 여럿이 한 화면에 나란히 놓이며 ' +\n      '그중 무엇이 주된 동작이고 무엇이 되돌릴 수 없는 동작인지는 페이지만 압니다. 위치만으로는 이를 구별할 ' +\n      '수 없으므로 모양(`variant`)과 성격(`tone`)을 사용처가 고르게 합니다.',\n  },\n}\n\nexport function permittedEmphasisAxes(component: string): readonly ForbiddenVariantAxis[] {\n  return EMPHASIS_AXIS_EXCEPTIONS[component]?.axes ?? []\n}\n\nexport type SizeSupport =\n  | { readonly sizes: readonly string[]; readonly defaultSize: string }\n  | { readonly sizes: 'not-applicable'; readonly reason: string }\n\nexport function isSize(value: unknown): value is Size {\n  return SIZE_SCALE.some((size) => size === value)\n}\n\nexport function sizeIndex(size: Size): number {\n  return SIZE_SCALE.indexOf(size)\n}\n\nexport function sizeBelow(size: Size): Size {\n  return SIZE_SCALE[sizeIndex(size) - 1] ?? size\n}\n\nexport function resolveSize(size: Size | undefined, component = 'component'): Size {\n  if (size === undefined) return DEFAULT_SIZE\n  devWarn(\n    !isSize(size),\n    `${component}: size \"${String(size)}\" is not on the shared scale ` +\n      `(${SIZE_SCALE.join(', ')}). Rendering at \"${DEFAULT_SIZE}\".`,\n  )\n  return isSize(size) ? size : DEFAULT_SIZE\n}\n\nexport interface SizeSupportProblem {\n  readonly code: 'unknown-size' | 'non-contiguous' | 'default-not-offered' | 'empty' | 'no-reason'\n  readonly message: string\n}\n\nexport function checkSizeSupport(component: string, support: SizeSupport): SizeSupportProblem[] {\n  const problems: SizeSupportProblem[] = []\n  const at = (message: string) => `${component}: ${message}`\n\n  if (support.sizes === 'not-applicable') {\n    if (support.reason.trim() === '') {\n      problems.push({\n        code: 'no-reason',\n        message: at('declares size not-applicable without saying why'),\n      })\n    }\n    return problems\n  }\n\n  if (support.sizes.length === 0) {\n    problems.push({\n      code: 'empty',\n      message: at(\"offers no sizes; declare sizes: 'not-applicable' with a reason instead\"),\n    })\n    return problems\n  }\n\n  const unknown = support.sizes.filter((size) => !isSize(size))\n  if (unknown.length > 0) {\n    problems.push({\n      code: 'unknown-size',\n      message: at(`offers ${unknown.join(', ')}, which is not on the shared scale`),\n    })\n  }\n\n  const indices = support.sizes\n    .map((size) => SIZE_SCALE.findIndex((entry) => entry === size))\n    .filter((index) => index !== -1)\n    .toSorted((a, b) => a - b)\n  const contiguous = indices.every((index, position) => index === (indices[0] ?? 0) + position)\n  if (!contiguous) {\n    problems.push({\n      code: 'non-contiguous',\n      message: at(`offers a scale with a hole in it: ${support.sizes.join(', ')}`),\n    })\n  }\n\n  if (!support.sizes.includes(support.defaultSize)) {\n    problems.push({\n      code: 'default-not-offered',\n      message: at(`defaults to ${support.defaultSize}, which it does not offer`),\n    })\n  }\n\n  return problems\n}\n"],"mappings":";;AAEA,MAAa,aAAsD;CAAC;CAAM;CAAM;CAAM;CAAM;AAAI;AAIhG,MAAa,eAAqB;AAqClC,SAAgB,OAAO,OAA+B;CACpD,OAAO,WAAW,MAAM,SAAS,SAAS,KAAK;AACjD;AAEA,SAAgB,UAAU,MAAoB;CAC5C,OAAO,WAAW,QAAQ,IAAI;AAChC;AAEA,SAAgB,UAAU,MAAkB;CAC1C,OAAO,WAAW,UAAU,IAAI,IAAI,MAAM;AAC5C;AAEA,SAAgB,YAAY,MAAwB,YAAY,aAAmB;CACjF,IAAI,SAAS,KAAA,GAAW,OAAA;CACxB,QACE,CAAC,OAAO,IAAI,GACZ,GAAG,UAAU,UAAU,OAAO,IAAI,EAAE,gCAC9B,WAAW,KAAK,IAAI,EAAE,sBAC9B;CACA,OAAO,OAAO,IAAI,IAAI,OAAA;AACxB"}