@sanity/ui 4.0.0-v4.1 → 4.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Sanity.io
+Copyright (c) 2026 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -6,7 +6,7 @@ The Sanity UI components.
 npm install @sanity/ui
 
 # Install peer dependencies
-npm install react react-dom react-is
+npm install react react-dom styled-components
 ```
 
 [![npm version](https://img.shields.io/npm/v/@sanity/ui.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui)
@@ -14,18 +14,36 @@ npm install react react-dom react-is
 ## Usage
 
 ```jsx
-import '@sanity/ui/css/index.css'
-
-import {Button, Root} from '@sanity/ui'
+import {Button, ThemeProvider} from '@sanity/ui'
+import {buildTheme} from '@sanity/ui/theme'
 import {createRoot} from 'react-dom/client'
 
-createRoot(document).render(
-  <Root lang="en">
+// 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()
+
+root.render(
+  <ThemeProvider theme={theme}>
     <Button text="Hello, world" />
-  </Root>,
+  </ThemeProvider>,
 )
 ```
 
+## Contributing and releasing new versions to npm
+
+This package lives in the [`sanity-io/ui` monorepo](https://github.com/sanity-io/ui) and uses [Changesets](https://github.com/changesets/changesets) to manage versioning and publishing.
+
+When you make a change that should be released, add a changeset to your pull request:
+
+```sh
+pnpm changeset
+```
+
+Once pull requests with changesets are merged into the `main` branch, a "Version Packages" pull request is opened (and kept up to date) that bumps the affected package versions and updates their changelogs. Merging that pull request publishes the packages to npm through the [`Release` workflow](https://github.com/sanity-io/ui/actions/workflows/release.yml), which uses npm [Trusted Publishing](https://docs.npmjs.com/trusted-publishers) (OIDC).
+
 ## License
 
 MIT-licensed. See LICENSE.

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-CHE8-_G7.js

@@ -0,0 +1,161 @@
+import { _ as useTheme_v2, d as createGlobalScopedContext, f as globalScope, r as isRecord } from "./useLayer-BAVfmbNN.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-e0ij84-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-e0ij84-1"
+})`stroke:var(--card-shadow-outline-color);`, ShapePath = styled.path.withConfig({
+	displayName: "ShapePath",
+	componentId: "sc-e0ij84-2"
+})`fill:var(--card-bg-color);`;
+/** @internal */
+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-CHE8-_G7.js.map

package/dist/arrow-CHE8-_G7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-CHE8-_G7.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 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-ChlP9Ik6.js";
+import { n as ButtonOwnProps, u as BoxProps } from "./button-dnqMFkWg.js";
+import { n as PopoverProps } from "./popover-CMlQeKn0.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 function 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;;;;;;;;iBAec,aAAa,eAAe,wBAC1C,OAAO,kBAAkB,UACvB,KACE,UAAU,gSAmBX,IAAA"}