@sanity/ui 4.0.0-next.4 → 4.0.0-next.5

package/README.md

@@ -18,6 +18,10 @@ import {Button, ThemeProvider} from '@sanity/ui'
 import {buildTheme} from '@sanity/ui/theme'
 import {createRoot} from 'react-dom/client'
 
+// Static styles are shipped as a plain stylesheet (not injected at runtime) —
+// import it once, wherever your app loads global CSS
+import '@sanity/ui/styles.css'
+
 const root = createRoot(document.getElementById('root'))
 const theme = buildTheme()
 

package/dist/_system-CTe2lb5l.d.ts

@@ -0,0 +1,40 @@
+/** @public */
+declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark'];
+/** @public */
+declare const THEME_COLOR_BLEND_MODES: readonly ['multiply', 'screen'];
+/** @public */
+declare const THEME_COLOR_CARD_TONES: readonly ['transparent', 'default', 'neutral', 'primary', 'suggest', 'positive', 'caution', 'critical'];
+/** @public */
+declare const THEME_COLOR_STATE_TONES: readonly ['default', 'neutral', 'primary', 'suggest', 'positive', 'caution', 'critical'];
+/** @public */
+declare const THEME_COLOR_STATES: readonly ['enabled', 'hovered', 'pressed', 'selected', 'disabled'];
+/** @public */
+declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed'];
+/** @public */
+declare const THEME_COLOR_INPUT_MODES: readonly ['default', 'invalid'];
+/** @public */
+declare const THEME_COLOR_INPUT_STATES: readonly ['enabled', 'hovered', 'readOnly', 'disabled'];
+/** @public */
+declare const THEME_COLOR_AVATAR_COLORS: import("@sanity/color").ColorHueKey[];
+/**
+ * @public
+ */
+type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number];
+/** @public */
+type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number];
+/** @public */
+type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number];
+/** @public */
+type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number];
+/** @public */
+type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number];
+/** @public */
+type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number];
+/** @public */
+type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number];
+/** @public */
+type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number];
+/** @public */
+type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number];
+export { THEME_COLOR_STATES as _, ThemeColorInputModeKey as a, ThemeColorStateKey as c, THEME_COLOR_BLEND_MODES as d, THEME_COLOR_BUTTON_MODES as f, THEME_COLOR_SCHEMES as g, THEME_COLOR_INPUT_STATES as h, ThemeColorCardToneKey as i, ThemeColorStateToneKey as l, THEME_COLOR_INPUT_MODES as m, ThemeColorBlendModeKey as n, ThemeColorInputStateKey as o, THEME_COLOR_CARD_TONES as p, ThemeColorButtonModeKey as r, ThemeColorSchemeKey as s, ThemeColorAvatarColorKey as t, THEME_COLOR_AVATAR_COLORS as u, THEME_COLOR_STATE_TONES as v };
+//# sourceMappingURL=_system-CTe2lb5l.d.ts.map

package/dist/_system-CTe2lb5l.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_system-CTe2lb5l.d.ts","names":[],"sources":["../src/theme/system/color/_constants.ts","../src/theme/system/color/_system.ts"],"mappings":"AAGA;cAAa;;cAGA;;cAGA;;cAYA;;cAWA;;cAGA;;cAGA;;cAGA;;cAGA,mDAAyB;;;;KC7B1B,8BAA8B;;KAG9B,iCAAiC;;KAGjC,gCAAgC;;KAGhC,kCAAkC;;KAGlC,6BAA6B;;KAG7B,iCAAiC;;KAGjC,iCAAiC;;KAGjC,kCAAkC;;KAGlC,mCAAmC"}

package/dist/arrow-BG0EMNiC.js

@@ -0,0 +1,159 @@
+import { _ as useTheme_v2, d as createGlobalScopedContext, f as globalScope, r as isRecord } from "./useLayer-9Pz-GG0r.js";
+import { c } from "react/compiler-runtime";
+import { useContext } from "react";
+import { css, styled } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null), DEFAULT_VALUE = {
+	version: 0,
+	element: null
+};
+/**
+* @public
+*/
+function useBoundaryElement() {
+	let value = useContext(BoundaryElementContext);
+	if (value && (!isRecord(value) || value.version !== 0)) throw Error("useBoundaryElement(): the context value is not compatible");
+	return value || DEFAULT_VALUE;
+}
+const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
+globalScope[elementKey] = null;
+const PortalContext = createGlobalScopedContext(key, {
+	version: 0,
+	boundaryElement: null,
+	get element() {
+		return typeof document > "u" ? null : globalScope[elementKey] ? globalScope[elementKey] : (globalScope[elementKey] = document.createElement("div"), globalScope[elementKey].setAttribute("data-portal", ""), document.body.appendChild(globalScope[elementKey]), globalScope[elementKey]);
+	}
+});
+/**
+* @public
+*/
+function usePortal() {
+	let value = useContext(PortalContext);
+	if (!value) throw Error("usePortal(): missing context value");
+	if (!isRecord(value) || value.version !== 0) throw Error("usePortal(): the context value is not compatible");
+	return value;
+}
+/**
+* @public
+*/
+function Portal(props) {
+	let $ = c(3), { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
+	if (!portalElement) return null;
+	let t0;
+	return $[0] !== children || $[1] !== portalElement ? (t0 = createPortal(children, portalElement), $[0] = children, $[1] = portalElement, $[2] = t0) : t0 = $[2], t0;
+}
+function moveTowardsLength(movingPoint, targetPoint, amount) {
+	let width = targetPoint.x - movingPoint.x, height = targetPoint.y - movingPoint.y, distance = Math.sqrt(width * width + height * height);
+	return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
+}
+function moveTowardsFractional(movingPoint, targetPoint, fraction) {
+	return {
+		x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+		y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
+	};
+}
+function getRoundedCommands(points) {
+	let len = points.length, cmds = [];
+	for (let i = 0; i < len; i += 1) {
+		let point = points[i], prevPoint = points[i - 1], nextPoint = points[i + 1];
+		if (prevPoint && point.radius) {
+			let curveStart = moveTowardsLength(point, prevPoint, point.radius), curveEnd = moveTowardsLength(point, nextPoint, point.radius), startControl = moveTowardsFractional(curveStart, point, .5), endControl = moveTowardsFractional(point, curveEnd, .5);
+			cmds.push({
+				type: "point",
+				...curveStart
+			}), cmds.push({
+				type: "curve",
+				curveEnd,
+				startControl,
+				endControl
+			});
+		} else cmds.push({
+			type: "point",
+			...point
+		});
+	}
+	return cmds;
+}
+function compileCommands(cmds) {
+	return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
+}
+const StyledArrow = /* @__PURE__ */ styled.div.withConfig({
+	displayName: "StyledArrow",
+	componentId: "sc-gl2lu8-0"
+})(({ $w: w }) => css`position:absolute;width:${w}px;height:${w}px;:empty + &{display:none;}& > svg{display:block;line-height:0;transform-origin:${w / 2}px ${w / 2}px;}[data-placement^='top'] > &{bottom:-${w}px;& > svg{transform:rotate(0);}}[data-placement^='right'] > &{left:-${w}px;& > svg{transform:rotate(90deg);}}[data-placement^='left'] > &{right:-${w}px;& > svg{transform:rotate(-90deg);}}[data-placement^='bottom'] > &{top:-${w}px;& > svg{transform:rotate(180deg);}}`), StrokePath = styled.path.withConfig({
+	displayName: "StrokePath",
+	componentId: "sc-gl2lu8-1"
+})`stroke:var(--card-shadow-outline-color);`, ShapePath = styled.path.withConfig({
+	displayName: "ShapePath",
+	componentId: "sc-gl2lu8-2"
+})`fill:var(--card-bg-color);`, Arrow = function Arrow(props) {
+	let $ = c(30), h, ref, restProps, t0, w;
+	$[0] === props ? (h = $[1], ref = $[2], restProps = $[3], t0 = $[4], w = $[5]) : ({width: w, height: h, radius: t0, ref, ...restProps} = props, $[0] = props, $[1] = h, $[2] = ref, $[3] = restProps, $[4] = t0, $[5] = w);
+	let radius = t0 === void 0 ? 0 : t0, { card } = useTheme_v2(), strokeWidth = card.shadow.outline, center = w / 2, t1;
+	$[6] !== center || $[7] !== h || $[8] !== radius || $[9] !== w ? (t1 = compileCommands(getRoundedCommands([
+		{
+			x: 0,
+			y: 0
+		},
+		{
+			x: radius,
+			y: 0,
+			radius
+		},
+		{
+			x: center,
+			y: h - 1,
+			radius
+		},
+		{
+			x: w - radius,
+			y: 0,
+			radius
+		},
+		{
+			x: w,
+			y: 0
+		}
+	])), $[6] = center, $[7] = h, $[8] = radius, $[9] = w, $[10] = t1) : t1 = $[10];
+	let path = t1, strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`, t2 = `0 0 ${w} ${w}`, t3;
+	$[11] !== strokeWidth || $[12] !== w ? (t3 = /* @__PURE__ */ jsx("mask", {
+		id: "stroke-mask",
+		children: /* @__PURE__ */ jsx("rect", {
+			x: 0,
+			y: strokeWidth,
+			width: w,
+			height: w,
+			fill: "white"
+		})
+	}), $[11] = strokeWidth, $[12] = w, $[13] = t3) : t3 = $[13];
+	let t4 = strokeWidth * 2, t5;
+	$[14] !== strokePath || $[15] !== t4 ? (t5 = /* @__PURE__ */ jsx(StrokePath, {
+		d: strokePath,
+		mask: "url(#stroke-mask)",
+		strokeWidth: t4
+	}), $[14] = strokePath, $[15] = t4, $[16] = t5) : t5 = $[16];
+	let t6;
+	$[17] === fillPath ? t6 = $[18] : (t6 = /* @__PURE__ */ jsx(ShapePath, { d: fillPath }), $[17] = fillPath, $[18] = t6);
+	let t7;
+	$[19] !== t2 || $[20] !== t3 || $[21] !== t5 || $[22] !== t6 || $[23] !== w ? (t7 = /* @__PURE__ */ jsxs("svg", {
+		width: w,
+		height: w,
+		viewBox: t2,
+		children: [
+			t3,
+			t5,
+			t6
+		]
+	}), $[19] = t2, $[20] = t3, $[21] = t5, $[22] = t6, $[23] = w, $[24] = t7) : t7 = $[24];
+	let t8;
+	return $[25] !== ref || $[26] !== restProps || $[27] !== t7 || $[28] !== w ? (t8 = /* @__PURE__ */ jsx(StyledArrow, {
+		...restProps,
+		$w: w,
+		ref,
+		children: t7
+	}), $[25] = ref, $[26] = restProps, $[27] = t7, $[28] = w, $[29] = t8) : t8 = $[29], t8;
+};
+export { useBoundaryElement as a, PortalContext as i, Portal as n, BoundaryElementContext as o, usePortal as r, Arrow as t };
+
+//# sourceMappingURL=arrow-BG0EMNiC.js.map

package/dist/arrow-BG0EMNiC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-BG0EMNiC.js","names":["createGlobalScopedContext","BoundaryElementContextValue","BoundaryElementContext","useContext","isRecord","BoundaryElementContext","BoundaryElementContextValue","DEFAULT_VALUE","version","element","useBoundaryElement","value","Error","createGlobalScopedContext","globalScope","PortalContextValue","key","elementKey","Symbol","for","defaultContextValue","version","boundaryElement","element","document","createElement","setAttribute","body","appendChild","PortalContext","useContext","isRecord","PortalContext","PortalContextValue","usePortal","value","Error","version","createPortal","usePortal","PortalProps","children","React","ReactNode","__unstable_name","Portal","props","$","_c","name","portal","portalElement","elements","element","default","t0","PointCmd","type","x","y","radius","CurveCmd","startControl","Point","endControl","curveEnd","Cmd","moveTowardsLength","movingPoint","targetPoint","amount","width","height","distance","Math","sqrt","moveTowardsFractional","min","fraction","getRoundedCommands","points","len","length","cmds","i","point","prevPoint","nextPoint","curveStart","push","compileCommands","map","n","idx","join","HTMLProps","css","styled","useTheme_v2","compileCommands","getRoundedCommands","Point","StyledArrow","div","$w","w","StrokePath","path","ShapePath","Arrow","props","$","_c","h","ref","restProps","t0","width","height","radius","undefined","card","strokeWidth","shadow","outline","center","t1","points","x","y","cmds","strokePath","fillPath","t2","t3","t4","t5","t6","t7","t8"],"sources":["../src/core/utils/boundaryElement/boundaryElementContext.ts","../src/core/utils/boundaryElement/useBoundaryElement.ts","../src/core/utils/portal/portalContext.ts","../src/core/utils/portal/usePortal.ts","../src/core/utils/portal/portal.ts","../src/core/utils/arrow/cmds.ts","../src/core/utils/arrow/arrow.tsx"],"sourcesContent":["import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {BoundaryElementContextValue} from './types'\n\nexport const BoundaryElementContext = createGlobalScopedContext<BoundaryElementContextValue | null>(\n  '@sanity/ui/context/boundaryElement',\n  null,\n)\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {BoundaryElementContext} from './boundaryElementContext'\nimport {BoundaryElementContextValue} from './types'\n\nconst DEFAULT_VALUE: BoundaryElementContextValue = {\n  version: 0.0,\n  element: null,\n}\n\n/**\n * @public\n */\nexport function useBoundaryElement(): BoundaryElementContextValue {\n  const value = useContext(BoundaryElementContext)\n\n  // NOTE: This check is for future-compatiblity\n  // - If the value is not an object, it’s not compatible with the current version\n  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n  if (value && (!isRecord(value) || value.version !== 0.0)) {\n    throw new Error('useBoundaryElement(): the context value is not compatible')\n  }\n\n  return value || DEFAULT_VALUE\n}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {globalScope} from '../../lib/globalScope'\nimport {PortalContextValue} from './types'\n\nconst key = '@sanity/ui/context/portal'\nconst elementKey = Symbol.for(`${key}/element`)\n\nglobalScope[elementKey] = null\n\nconst defaultContextValue: PortalContextValue = {\n  version: 0.0,\n  boundaryElement: null,\n  get element() {\n    if (typeof document === 'undefined') {\n      return null\n    }\n\n    if (globalScope[elementKey]) {\n      return globalScope[elementKey]\n    }\n\n    globalScope[elementKey] = document.createElement('div')\n    globalScope[elementKey].setAttribute('data-portal', '')\n\n    document.body.appendChild(globalScope[elementKey])\n\n    return globalScope[elementKey]\n  },\n}\n\nexport const PortalContext = createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {PortalContext} from './portalContext'\nimport {PortalContextValue} from './types'\n\n/**\n * @public\n */\nexport function usePortal(): PortalContextValue {\n  const value = useContext(PortalContext)\n\n  if (!value) {\n    throw new Error('usePortal(): missing context value')\n  }\n\n  // NOTE: This check is for future-compatiblity\n  // - If the value is not an object, it’s not compatible with the current version\n  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n  if (!isRecord(value) || value.version !== 0.0) {\n    throw new Error('usePortal(): the context value is not compatible')\n  }\n\n  return value\n}\n","import {createPortal} from 'react-dom'\n\nimport {usePortal} from './usePortal'\n\n/**\n * @public\n */\nexport interface PortalProps {\n  children: React.ReactNode\n  /**\n   * @beta This API might change. DO NOT USE IN PRODUCTION.\n   */\n  __unstable_name?: string\n}\n\n/**\n * @public\n */\nexport function Portal(props: PortalProps): React.ReactPortal | null {\n  const {children, __unstable_name: name} = props\n  const portal = usePortal()\n  const portalElement =\n    (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default\n\n  if (!portalElement) {\n    return null\n  }\n\n  return createPortal(children, portalElement)\n}\n","interface PointCmd {\n  type: 'point'\n  x: number\n  y: number\n  radius?: number\n}\n\ninterface CurveCmd {\n  type: 'curve'\n  startControl: Point\n  endControl: Point\n  curveEnd: Point\n}\n\nexport type Cmd = PointCmd | CurveCmd\n\nexport interface Point {\n  x: number\n  y: number\n  radius?: number\n}\n\nfunction moveTowardsLength(movingPoint: Point, targetPoint: Point, amount: number) {\n  const width = targetPoint.x - movingPoint.x\n  const height = targetPoint.y - movingPoint.y\n\n  const distance = Math.sqrt(width * width + height * height)\n\n  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance))\n}\n\nfunction moveTowardsFractional(movingPoint: Point, targetPoint: Point, fraction: number): Point {\n  return {\n    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,\n    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction,\n  }\n}\n\nexport function getRoundedCommands(points: Point[]): Cmd[] {\n  const len = points.length\n\n  const cmds: Cmd[] = []\n\n  for (let i = 0; i < len; i += 1) {\n    const point = points[i]\n    const prevPoint = points[i - 1]\n    const nextPoint = points[i + 1]\n\n    if (prevPoint && point.radius) {\n      const curveStart = moveTowardsLength(point, prevPoint, point.radius)\n      const curveEnd = moveTowardsLength(point, nextPoint, point.radius)\n      const startControl = moveTowardsFractional(curveStart, point, 0.5)\n      const endControl = moveTowardsFractional(point, curveEnd, 0.5)\n\n      cmds.push({\n        type: 'point',\n        ...curveStart,\n      })\n\n      cmds.push({\n        type: 'curve',\n        curveEnd,\n        startControl,\n        endControl,\n      })\n    } else {\n      cmds.push({\n        type: 'point',\n        ...point,\n      })\n    }\n  }\n\n  return cmds\n}\n\nexport function compileCommands(cmds: Cmd[]): string {\n  return cmds\n    .map((n, idx) => {\n      if (n.type === 'point') {\n        return `${idx === 0 ? 'M' : 'L'} ${n.x} ${n.y}`\n      }\n\n      if (n.type === 'curve') {\n        return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`\n      }\n\n      return ``\n    })\n    .join(' ')\n}\n","import {HTMLProps} from 'react'\nimport {css, styled} from 'styled-components'\n\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {compileCommands, getRoundedCommands, Point} from './cmds'\n\nconst StyledArrow = styled.div<{$w: number}>(\n  ({$w: w}) => css`\n    position: absolute;\n    width: ${w}px;\n    height: ${w}px;\n\n    :empty + & {\n      display: none;\n    }\n\n    & > svg {\n      display: block;\n      line-height: 0;\n      transform-origin: ${w / 2}px ${w / 2}px;\n    }\n\n    [data-placement^='top'] > & {\n      bottom: -${w}px;\n\n      & > svg {\n        transform: rotate(0);\n      }\n    }\n\n    [data-placement^='right'] > & {\n      left: -${w}px;\n\n      & > svg {\n        transform: rotate(90deg);\n      }\n    }\n\n    [data-placement^='left'] > & {\n      right: -${w}px;\n\n      & > svg {\n        transform: rotate(-90deg);\n      }\n    }\n\n    [data-placement^='bottom'] > & {\n      top: -${w}px;\n\n      & > svg {\n        transform: rotate(180deg);\n      }\n    }\n  `,\n)\n\nconst StrokePath = styled.path`\n  stroke: var(--card-shadow-outline-color);\n`\n\nconst ShapePath = styled.path`\n  fill: var(--card-bg-color);\n`\n\n/** @internal */\nexport const Arrow = function Arrow(\n  props: {width: number; height: number; radius?: number} & Omit<\n    HTMLProps<HTMLDivElement>,\n    'width' | 'height'\n  >,\n): React.JSX.Element {\n  const {width: w, height: h, radius = 0, ref, ...restProps} = props\n  const {card} = useTheme_v2()\n  const strokeWidth = card.shadow.outline\n\n  const center = w / 2\n\n  const points: Point[] = [\n    {\n      x: 0,\n      y: 0,\n    },\n    {\n      x: radius,\n      y: 0,\n      radius,\n    },\n    {\n      x: center,\n      y: h - 1,\n      radius,\n    },\n    {\n      x: w - radius,\n      y: 0,\n      radius,\n    },\n    {\n      x: w,\n      y: 0,\n    },\n  ]\n\n  const cmds = getRoundedCommands(points)\n  const path = compileCommands(cmds)\n\n  // oxlint-disable-next-line no-unnecessary-template-expression\n  const strokePath = `${path}`\n  const fillPath = `${path} M ${w} -1 M 0 -1 Z`\n\n  return (\n    <StyledArrow {...restProps} $w={w} ref={ref}>\n      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n        <mask id=\"stroke-mask\">\n          <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n        </mask>\n        <StrokePath d={strokePath} mask=\"url(#stroke-mask)\" strokeWidth={strokeWidth * 2} />\n        <ShapePath d={fillPath} />\n      </svg>\n    </StyledArrow>\n  )\n}\n"],"mappings":"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"}

package/dist/autocomplete.d.ts

@@ -0,0 +1,140 @@
+import { g as Radius } from "./layer-BQfdK7rt.js";
+import { n as ButtonOwnProps, u as BoxProps } from "./button-BzoZs3Sl.js";
+import { n as PopoverProps } from "./popover-DmmmSNzL.js";
+import { ElementType, HTMLProps, ReactNode, Ref } from "react";
+/**
+ * @public
+ */
+type AutocompleteOpenButtonProps = ButtonOwnProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>;
+/**
+ * @public
+ */
+interface BaseAutocompleteOption {
+  value: string;
+}
+/**
+ * @internal
+ */
+interface AutocompleteState {
+  activeValue: string | null;
+  focused: boolean;
+  listFocused: boolean;
+  query: string | null;
+  value: string | null;
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootBlurMsg {
+  type: 'root/blur';
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootClearMsg {
+  type: 'root/clear';
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootEscapeMsg {
+  type: 'root/escape';
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootOpenMsg {
+  type: 'root/open';
+  query: string | null;
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootSetActiveValueMsg {
+  type: 'root/setActiveValue';
+  value: string;
+  listFocused?: boolean;
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootSetListFocusedMsg {
+  type: 'root/setListFocused';
+  listFocused: boolean;
+}
+/**
+ * @internal
+ */
+interface AutocompleteInputChangeMsg {
+  type: 'input/change';
+  query: string | null;
+}
+/**
+ * @internal
+ */
+interface AutocompleteInputFoocusMsg {
+  type: 'input/focus';
+}
+/**
+ * @internal
+ */
+interface AutocompleteValueChangeMsg {
+  type: 'value/change';
+  value: string | null;
+}
+/**
+ * @internal
+ */
+type AutocompleteMsg = AutocompleteRootBlurMsg | AutocompleteRootClearMsg | AutocompleteRootEscapeMsg | AutocompleteRootOpenMsg | AutocompleteRootSetActiveValueMsg | AutocompleteRootSetListFocusedMsg | AutocompleteInputChangeMsg | AutocompleteInputFoocusMsg | AutocompleteValueChangeMsg;
+/**
+ * @public
+ */
+interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
+  border?: boolean;
+  customValidity?: string;
+  filterOption?: (query: string, option: Option) => boolean;
+  fontSize?: number | number[];
+  icon?: ElementType | ReactNode;
+  id: string;
+  /** @beta */
+  listBox?: BoxProps;
+  loading?: boolean;
+  onChange?: (value: string) => void;
+  onQueryChange?: (query: string | null) => void;
+  onSelect?: (value: string) => void;
+  /** @beta */
+  openButton?: boolean | AutocompleteOpenButtonProps;
+  /** @beta */
+  openOnFocus?: boolean;
+  /** The options to render. */
+  options?: Option[];
+  padding?: number | number[];
+  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> & Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>;
+  prefix?: ReactNode;
+  radius?: Radius | Radius[];
+  /** @beta */
+  relatedElements?: HTMLElement[];
+  /** The callback function for rendering each option. */
+  renderOption?: (option: Option) => React.JSX.Element;
+  /** @beta */
+  renderPopover?: (props: {
+    content: React.JSX.Element | null;
+    hidden: boolean;
+    inputElement: HTMLInputElement | null;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+  }, ref: Ref<HTMLDivElement>) => ReactNode;
+  renderValue?: (value: string, option?: Option) => string;
+  suffix?: ReactNode;
+  /** The current value. */
+  value?: string;
+}
+/**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
+ * @public
+ */
+declare const Autocomplete: <Option extends BaseAutocompleteOption>(props: AutocompleteProps<Option> & Omit<HTMLProps<HTMLInputElement>, 'aria-activedescendant' | 'aria-autocomplete' | 'aria-expanded' | 'aria-owns' | 'as' | 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'id' | 'inputMode' | 'onChange' | 'onSelect' | 'popover' | 'prefix' | 'role' | 'spellCheck' | 'type' | 'value'>) => import("react").JSX.Element;
+export { Autocomplete, type AutocompleteInputChangeMsg, type AutocompleteInputFoocusMsg, type AutocompleteMsg, type AutocompleteOpenButtonProps, type AutocompleteProps, type AutocompleteRootBlurMsg, type AutocompleteRootClearMsg, type AutocompleteRootEscapeMsg, type AutocompleteRootOpenMsg, type AutocompleteRootSetActiveValueMsg, type AutocompleteRootSetListFocusedMsg, type AutocompleteState, type AutocompleteValueChangeMsg, type BaseAutocompleteOption };
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","names":[],"sources":["../src/core/components/autocomplete/types.ts","../src/core/components/autocomplete/autocomplete.tsx"],"mappings":";;;;;;;KAKY,8BAA8B,iBACxC,KAAK,MAAM,UAAU;;;;UAKN;EACf;;;;;UAMe;EACf;EACA;EACA;EACA;EACA;;;;;UAMe;EACf;;;;;UAMe;EACf;;;;;UAMe;EACf;;;;;UAMe;EACf;EACA;;;;;UAMe;EACf;EACA;EACA;;;;;UAMe;EACf;EACA;;;;;UAMe;EACf;EACA;;;;;UAMe;EACf;;;;;UAMe;EACf;EACA;;;;;KAMU,kBACR,0BACA,2BACA,4BACA,0BACA,oCACA,oCACA,6BACA,6BACA;;;;UC7Da,kBAAkB,eAAe,yBAAyB;EACzE;EACA;EACA,gBAAgB,eAAe,QAAQ;EACvC;EAEA,OAAO,cAAc;EACrB;;EAEA,UAAU;EACV;EACA,YAAY;EACZ,iBAAiB;EACjB,YAAY;;EAEZ,uBAAuB;;EAEvB;;EAEA,UAAU;EACV;EACA,UAAU,KAAK,sEACb,KAAK,UAAU;EACjB,SAAS;EACT,SAAS,SAAS;;EAElB,kBAAkB;;EAElB,gBAAgB,QAAQ,WAAW,MAAM,IAAI;;EAE7C,iBACE;IACE,SAAS,MAAM,IAAI;IACnB;IACA,cAAc;IACd;IACA;KAEF,KAAK,IAAI,oBACN;EACL,eAAe,eAAe,SAAS;EACvC,SAAS;;EAET;;;;;;;;cAeW,eAAqC,eAAe,wBAAsB,OAC9E,kBAAkB,UACvB,KACE,UAAU,kSAmBX,IAAA"}