@adea-ai/ui 0.84.0 → 0.87.0

package/dist/components/layout/floating-preview/model.js

@@ -0,0 +1,146 @@
+//#region src/components/layout/floating-preview/model.ts
+var PREVIEW_MINI_PLAYER_EDGE_GAP = 12;
+var PREVIEW_MINI_PLAYER_CORNER_RADIUS = 12;
+var PREVIEW_MINI_PLAYER_DEFAULT_BOX = {
+	width: 320,
+	height: 320
+};
+var PREVIEW_MINI_PLAYER_MIN_SIZE = {
+	width: 240,
+	height: 150
+};
+var NO_PREVIEW_MINI_PLAYER_OBSTACLES = { composer: null };
+var spanOf = (x, width) => ({
+	left: x,
+	right: x + width
+});
+var spansOverlap = (a, b) => a.left < b.right && a.right > b.left;
+/** The lowest row (before the edge gap) open to a player covering these columns. */
+function floorFor(span, container, obstacles) {
+	const { composer } = obstacles;
+	return composer && spansOverlap(span, composer) ? container.height - Math.max(0, composer.height) : container.height;
+}
+/**
+* The box a stored size is fitted into. A player with a position keeps the
+* rows its own columns have, so a tall frame parked beside the composer
+* survives the next layout pass; without one it takes the rows above the
+* composer, which every column has.
+*/
+var availableArea = (container, obstacles, span) => ({
+	width: container.width - 24,
+	height: (span ? floorFor(span, container, obstacles) : container.height - Math.max(0, obstacles.composer?.height ?? 0)) - 24
+});
+/**
+* Width is the player's only free dimension; height always follows the source
+* aspect ratio so the content fills the box without letterboxing. The player
+* never grows past the source's own size, and a tight container wins over the
+* minimum.
+*/
+function fitPreviewMiniPlayerWidth(desiredWidth, source, max) {
+	const aspectRatio = source.width / source.height;
+	const width = Math.min(Math.max(desiredWidth, PREVIEW_MINI_PLAYER_MIN_SIZE.width, PREVIEW_MINI_PLAYER_MIN_SIZE.height * aspectRatio), source.width, Math.max(1, max.width), Math.max(1, max.height * aspectRatio));
+	return {
+		width: Math.round(width),
+		height: Math.round(width / aspectRatio)
+	};
+}
+function defaultPreviewMiniPlayerWidth(source) {
+	return Math.min(PREVIEW_MINI_PLAYER_DEFAULT_BOX.width, PREVIEW_MINI_PLAYER_DEFAULT_BOX.height * source.width / source.height);
+}
+var clampToContainer = (position, container, player, bottom = container.height) => ({
+	x: Math.min(Math.max(position.x, 12), Math.max(12, container.width - player.width - 12)),
+	y: Math.min(Math.max(position.y, 12), Math.max(12, bottom - player.height - 12))
+});
+var overlapsObstacle = (position, player, container, obstacles) => position.y + player.height > floorFor(spanOf(position.x, player.width), container, obstacles);
+/**
+* Keeps the player inside the container and off the composer. An overlapping
+* player is pushed out along whichever side needs the smaller move, so a drag
+* slides along the composer into the margin beside it instead of stopping at
+* its top edge; when no side leaves it fully clear it sits above the composer.
+*/
+function clampPreviewMiniPlayerPosition(position, container, player, obstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES) {
+	const inside = clampToContainer(position, container, player);
+	const { composer } = obstacles;
+	if (!composer || !overlapsObstacle(inside, player, container, obstacles)) return inside;
+	const gap = 12;
+	const above = {
+		x: inside.x,
+		y: container.height - composer.height - gap - player.height
+	};
+	const beside = [{
+		x: composer.left - gap - player.width,
+		y: inside.y
+	}, {
+		x: composer.right + gap,
+		y: inside.y
+	}];
+	let best = clampToContainer(above, container, player);
+	let bestDistance = Math.abs(best.y - inside.y);
+	for (const candidate of beside) {
+		if (clampToContainer(candidate, container, player).x !== candidate.x || overlapsObstacle(candidate, player, container, obstacles)) continue;
+		const distance = Math.abs(candidate.x - inside.x);
+		if (distance < bestDistance) {
+			best = candidate;
+			bestDistance = distance;
+		}
+	}
+	return best;
+}
+/**
+* Resolves the on-screen frame from the stored width and position. Clamping
+* happens here on every layout pass instead of being written back to the
+* store, so a temporarily narrow container never destroys the user's chosen
+* width. A player without a position sits in the top-right corner.
+*/
+function resolvePreviewMiniPlayerFrame(input) {
+	const { width, position, source, container, obstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES } = input;
+	const size = fitPreviewMiniPlayerWidth(width ?? defaultPreviewMiniPlayerWidth(source), source, availableArea(container, obstacles, position && width ? spanOf(position.x, width) : null));
+	return {
+		...clampPreviewMiniPlayerPosition(position ?? {
+			x: container.width - 12 - size.width,
+			y: 12
+		}, container, size, obstacles),
+		...size
+	};
+}
+/**
+* Resizes from any edge or corner while holding the aspect ratio. The edge
+* opposite the dragged one stays anchored, so growth stops at the container
+* on that axis and the pointer keeps tracking the grabbed edge.
+*/
+function resizePreviewMiniPlayer(input) {
+	const { start, direction, delta, source, container, obstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES } = input;
+	const east = direction.includes("east");
+	const west = direction.includes("west");
+	const north = direction.includes("north");
+	const south = direction.includes("south");
+	const right = start.x + start.width;
+	const bottom = start.y + start.height;
+	const floor = floorFor(spanOf(start.x, start.width), container, obstacles);
+	const max = {
+		width: west ? right - 12 : east ? container.width - 12 - start.x : container.width - 24,
+		height: north ? bottom - 12 : south ? floor - 12 - start.y : floor - 24
+	};
+	const desiredWidth = start.width + (east ? delta.x : west ? -delta.x : 0);
+	const desiredHeight = start.height + (south ? delta.y : north ? -delta.y : 0);
+	const horizontal = east || west;
+	const vertical = north || south;
+	const size = fitPreviewMiniPlayerWidth((horizontal && !vertical ? true : vertical && !horizontal ? false : Math.abs(desiredWidth - start.width) / start.width >= Math.abs(desiredHeight - start.height) / start.height) ? desiredWidth : desiredHeight * source.width / source.height, source, max);
+	return {
+		...clampPreviewMiniPlayerPosition({
+			x: west ? right - size.width : start.x,
+			y: north ? bottom - size.height : start.y
+		}, container, size, obstacles),
+		...size
+	};
+}
+var FLOATING_PREVIEW_EDGE_GAP = 12;
+var FLOATING_PREVIEW_CORNER_RADIUS = 12;
+var NO_FLOATING_PREVIEW_OBSTACLES = NO_PREVIEW_MINI_PLAYER_OBSTACLES;
+var resolveFloatingPreviewFrame = resolvePreviewMiniPlayerFrame;
+var resizeFloatingPreview = resizePreviewMiniPlayer;
+var clampFloatingPreviewPosition = clampPreviewMiniPlayerPosition;
+//#endregion
+export { FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, resizeFloatingPreview, resizePreviewMiniPlayer, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame };
+
+//# sourceMappingURL=model.js.map

package/dist/components/layout/floating-preview/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","names":[],"sources":["../../../../src/components/layout/floating-preview/model.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 Adea contributors\n * SPDX-License-Identifier: MIT\n * Geometry translated from t3code apps/web/src/components/preview/\n * previewMiniPlayerLayout.ts, issue #422, revision\n * 77bca8b2d76a1f42552e5eee7d277fcb1160347a (MIT). Runtime and device\n * behavior are excluded. See NOTICE.\n */\n\nexport const PREVIEW_MINI_PLAYER_EDGE_GAP = 12\nexport const PREVIEW_MINI_PLAYER_CORNER_RADIUS = 12\nexport interface PreviewMiniPlayerSize {\n  readonly width: number\n  readonly height: number\n}\nexport interface PreviewMiniPlayerPosition {\n  readonly x: number\n  readonly y: number\n}\nexport interface PreviewMiniPlayerFrame extends PreviewMiniPlayerPosition, PreviewMiniPlayerSize {}\n\nexport type BrowserViewportResizeDirection =\n  | 'north'\n  | 'south'\n  | 'east'\n  | 'west'\n  | 'northwest'\n  | 'northeast'\n  | 'southwest'\n  | 'southeast'\n\nconst PREVIEW_MINI_PLAYER_DEFAULT_BOX = { width: 320, height: 320 } as const\nconst PREVIEW_MINI_PLAYER_MIN_SIZE = { width: 240, height: 150 } as const\n\ninterface HorizontalSpan {\n  readonly left: number\n  readonly right: number\n}\n\n/**\n * The composer stack docked to the bottom edge, in container coordinates. It\n * only reserves the columns it covers, so the margins beside it stay open all\n * the way down.\n */\nexport interface PreviewMiniPlayerObstacles {\n  readonly composer: (HorizontalSpan & { readonly height: number }) | null\n}\n\nexport const NO_PREVIEW_MINI_PLAYER_OBSTACLES: PreviewMiniPlayerObstacles = { composer: null }\n\nconst spanOf = (x: number, width: number): HorizontalSpan => ({ left: x, right: x + width })\n\nconst spansOverlap = (a: HorizontalSpan, b: HorizontalSpan) => a.left < b.right && a.right > b.left\n\n/** The lowest row (before the edge gap) open to a player covering these columns. */\nfunction floorFor(\n  span: HorizontalSpan,\n  container: PreviewMiniPlayerSize,\n  obstacles: PreviewMiniPlayerObstacles\n): number {\n  const { composer } = obstacles\n  return composer && spansOverlap(span, composer)\n    ? container.height - Math.max(0, composer.height)\n    : container.height\n}\n\n/**\n * The box a stored size is fitted into. A player with a position keeps the\n * rows its own columns have, so a tall frame parked beside the composer\n * survives the next layout pass; without one it takes the rows above the\n * composer, which every column has.\n */\nconst availableArea = (\n  container: PreviewMiniPlayerSize,\n  obstacles: PreviewMiniPlayerObstacles,\n  span: HorizontalSpan | null\n): PreviewMiniPlayerSize => ({\n  width: container.width - PREVIEW_MINI_PLAYER_EDGE_GAP * 2,\n  height:\n    (span\n      ? floorFor(span, container, obstacles)\n      : container.height - Math.max(0, obstacles.composer?.height ?? 0)) -\n    PREVIEW_MINI_PLAYER_EDGE_GAP * 2,\n})\n\n/**\n * Width is the player's only free dimension; height always follows the source\n * aspect ratio so the content fills the box without letterboxing. The player\n * never grows past the source's own size, and a tight container wins over the\n * minimum.\n */\nfunction fitPreviewMiniPlayerWidth(\n  desiredWidth: number,\n  source: PreviewMiniPlayerSize,\n  max: PreviewMiniPlayerSize\n): PreviewMiniPlayerSize {\n  const aspectRatio = source.width / source.height\n  const width = Math.min(\n    Math.max(\n      desiredWidth,\n      PREVIEW_MINI_PLAYER_MIN_SIZE.width,\n      PREVIEW_MINI_PLAYER_MIN_SIZE.height * aspectRatio\n    ),\n    source.width,\n    Math.max(1, max.width),\n    Math.max(1, max.height * aspectRatio)\n  )\n  return { width: Math.round(width), height: Math.round(width / aspectRatio) }\n}\n\nfunction defaultPreviewMiniPlayerWidth(source: PreviewMiniPlayerSize): number {\n  return Math.min(\n    PREVIEW_MINI_PLAYER_DEFAULT_BOX.width,\n    (PREVIEW_MINI_PLAYER_DEFAULT_BOX.height * source.width) / source.height\n  )\n}\n\nconst clampToContainer = (\n  position: PreviewMiniPlayerPosition,\n  container: PreviewMiniPlayerSize,\n  player: PreviewMiniPlayerSize,\n  bottom = container.height\n): PreviewMiniPlayerPosition => ({\n  x: Math.min(\n    Math.max(position.x, PREVIEW_MINI_PLAYER_EDGE_GAP),\n    Math.max(\n      PREVIEW_MINI_PLAYER_EDGE_GAP,\n      container.width - player.width - PREVIEW_MINI_PLAYER_EDGE_GAP\n    )\n  ),\n  y: Math.min(\n    Math.max(position.y, PREVIEW_MINI_PLAYER_EDGE_GAP),\n    Math.max(PREVIEW_MINI_PLAYER_EDGE_GAP, bottom - player.height - PREVIEW_MINI_PLAYER_EDGE_GAP)\n  ),\n})\n\nconst overlapsObstacle = (\n  position: PreviewMiniPlayerPosition,\n  player: PreviewMiniPlayerSize,\n  container: PreviewMiniPlayerSize,\n  obstacles: PreviewMiniPlayerObstacles\n): boolean =>\n  position.y + player.height > floorFor(spanOf(position.x, player.width), container, obstacles)\n\n/**\n * Keeps the player inside the container and off the composer. An overlapping\n * player is pushed out along whichever side needs the smaller move, so a drag\n * slides along the composer into the margin beside it instead of stopping at\n * its top edge; when no side leaves it fully clear it sits above the composer.\n */\nexport function clampPreviewMiniPlayerPosition(\n  position: PreviewMiniPlayerPosition,\n  container: PreviewMiniPlayerSize,\n  player: PreviewMiniPlayerSize,\n  obstacles: PreviewMiniPlayerObstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES\n): PreviewMiniPlayerPosition {\n  const inside = clampToContainer(position, container, player)\n  const { composer } = obstacles\n  if (!composer || !overlapsObstacle(inside, player, container, obstacles)) return inside\n  const gap = PREVIEW_MINI_PLAYER_EDGE_GAP\n  const above = { x: inside.x, y: container.height - composer.height - gap - player.height }\n  const beside = [\n    { x: composer.left - gap - player.width, y: inside.y },\n    { x: composer.right + gap, y: inside.y },\n  ]\n  let best = clampToContainer(above, container, player)\n  let bestDistance = Math.abs(best.y - inside.y)\n  for (const candidate of beside) {\n    const clamped = clampToContainer(candidate, container, player)\n    if (clamped.x !== candidate.x || overlapsObstacle(candidate, player, container, obstacles)) {\n      continue\n    }\n    const distance = Math.abs(candidate.x - inside.x)\n    if (distance < bestDistance) {\n      best = candidate\n      bestDistance = distance\n    }\n  }\n  return best\n}\n\n/**\n * Resolves the on-screen frame from the stored width and position. Clamping\n * happens here on every layout pass instead of being written back to the\n * store, so a temporarily narrow container never destroys the user's chosen\n * width. A player without a position sits in the top-right corner.\n */\nexport function resolvePreviewMiniPlayerFrame(input: {\n  readonly width: number | null\n  readonly position: PreviewMiniPlayerPosition | null\n  readonly source: PreviewMiniPlayerSize\n  readonly container: PreviewMiniPlayerSize\n  readonly obstacles?: PreviewMiniPlayerObstacles\n}): PreviewMiniPlayerFrame {\n  const { width, position, source, container, obstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES } = input\n  const size = fitPreviewMiniPlayerWidth(\n    width ?? defaultPreviewMiniPlayerWidth(source),\n    source,\n    availableArea(container, obstacles, position && width ? spanOf(position.x, width) : null)\n  )\n  const anchored = position ?? {\n    x: container.width - PREVIEW_MINI_PLAYER_EDGE_GAP - size.width,\n    y: PREVIEW_MINI_PLAYER_EDGE_GAP,\n  }\n  return { ...clampPreviewMiniPlayerPosition(anchored, container, size, obstacles), ...size }\n}\n\n/**\n * Resizes from any edge or corner while holding the aspect ratio. The edge\n * opposite the dragged one stays anchored, so growth stops at the container\n * on that axis and the pointer keeps tracking the grabbed edge.\n */\nexport function resizePreviewMiniPlayer(input: {\n  readonly start: PreviewMiniPlayerFrame\n  readonly direction: BrowserViewportResizeDirection\n  readonly delta: PreviewMiniPlayerPosition\n  readonly source: PreviewMiniPlayerSize\n  readonly container: PreviewMiniPlayerSize\n  readonly obstacles?: PreviewMiniPlayerObstacles\n}): PreviewMiniPlayerFrame {\n  const {\n    start,\n    direction,\n    delta,\n    source,\n    container,\n    obstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES,\n  } = input\n  const east = direction.includes('east')\n  const west = direction.includes('west')\n  const north = direction.includes('north')\n  const south = direction.includes('south')\n  const right = start.x + start.width\n  const bottom = start.y + start.height\n  const floor = floorFor(spanOf(start.x, start.width), container, obstacles)\n  const max = {\n    width: west\n      ? right - PREVIEW_MINI_PLAYER_EDGE_GAP\n      : east\n        ? container.width - PREVIEW_MINI_PLAYER_EDGE_GAP - start.x\n        : container.width - PREVIEW_MINI_PLAYER_EDGE_GAP * 2,\n    height: north\n      ? bottom - PREVIEW_MINI_PLAYER_EDGE_GAP\n      : south\n        ? floor - PREVIEW_MINI_PLAYER_EDGE_GAP - start.y\n        : floor - PREVIEW_MINI_PLAYER_EDGE_GAP * 2,\n  }\n  const desiredWidth = start.width + (east ? delta.x : west ? -delta.x : 0)\n  const desiredHeight = start.height + (south ? delta.y : north ? -delta.y : 0)\n  const horizontal = east || west\n  const vertical = north || south\n  const widthLeads =\n    horizontal && !vertical\n      ? true\n      : vertical && !horizontal\n        ? false\n        : Math.abs(desiredWidth - start.width) / start.width >=\n          Math.abs(desiredHeight - start.height) / start.height\n  const size = fitPreviewMiniPlayerWidth(\n    widthLeads ? desiredWidth : (desiredHeight * source.width) / source.height,\n    source,\n    max\n  )\n  const position = clampPreviewMiniPlayerPosition(\n    { x: west ? right - size.width : start.x, y: north ? bottom - size.height : start.y },\n    container,\n    size,\n    obstacles\n  )\n  return { ...position, ...size }\n}\n\n// Product-neutral names for new consumers. The PreviewMiniPlayer names stay\n// exported for Adea Dev Runtime's existing browser model API.\nexport type FloatingPreviewSize = PreviewMiniPlayerSize\nexport type FloatingPreviewPosition = PreviewMiniPlayerPosition\nexport type FloatingPreviewFrame = PreviewMiniPlayerFrame\nexport type FloatingPreviewResizeDirection = BrowserViewportResizeDirection\nexport type FloatingPreviewObstacles = PreviewMiniPlayerObstacles\nexport const FLOATING_PREVIEW_EDGE_GAP = PREVIEW_MINI_PLAYER_EDGE_GAP\nexport const FLOATING_PREVIEW_CORNER_RADIUS = PREVIEW_MINI_PLAYER_CORNER_RADIUS\nexport const NO_FLOATING_PREVIEW_OBSTACLES = NO_PREVIEW_MINI_PLAYER_OBSTACLES\nexport const resolveFloatingPreviewFrame = resolvePreviewMiniPlayerFrame\nexport const resizeFloatingPreview = resizePreviewMiniPlayer\nexport const clampFloatingPreviewPosition = clampPreviewMiniPlayerPosition\n"],"mappings":";AASA,IAAa,+BAA+B;AAC5C,IAAa,oCAAoC;AAqBjD,IAAM,kCAAkC;CAAE,OAAO;CAAK,QAAQ;AAAI;AAClE,IAAM,+BAA+B;CAAE,OAAO;CAAK,QAAQ;AAAI;AAgB/D,IAAa,mCAA+D,EAAE,UAAU,KAAK;AAE7F,IAAM,UAAU,GAAW,WAAmC;CAAE,MAAM;CAAG,OAAO,IAAI;AAAM;AAE1F,IAAM,gBAAgB,GAAmB,MAAsB,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE;;AAG/F,SAAS,SACP,MACA,WACA,WACQ;CACR,MAAM,EAAE,aAAa;CACrB,OAAO,YAAY,aAAa,MAAM,QAAQ,IAC1C,UAAU,SAAS,KAAK,IAAI,GAAG,SAAS,MAAM,IAC9C,UAAU;AAChB;;;;;;;AAQA,IAAM,iBACJ,WACA,WACA,UAC2B;CAC3B,OAAO,UAAU,QAAQ;CACzB,SACG,OACG,SAAS,MAAM,WAAW,SAAS,IACnC,UAAU,SAAS,KAAK,IAAI,GAAG,UAAU,UAAU,UAAU,CAAC,KAClE;AACJ;;;;;;;AAQA,SAAS,0BACP,cACA,QACA,KACuB;CACvB,MAAM,cAAc,OAAO,QAAQ,OAAO;CAC1C,MAAM,QAAQ,KAAK,IACjB,KAAK,IACH,cACA,6BAA6B,OAC7B,6BAA6B,SAAS,WACxC,GACA,OAAO,OACP,KAAK,IAAI,GAAG,IAAI,KAAK,GACrB,KAAK,IAAI,GAAG,IAAI,SAAS,WAAW,CACtC;CACA,OAAO;EAAE,OAAO,KAAK,MAAM,KAAK;EAAG,QAAQ,KAAK,MAAM,QAAQ,WAAW;CAAE;AAC7E;AAEA,SAAS,8BAA8B,QAAuC;CAC5E,OAAO,KAAK,IACV,gCAAgC,OAC/B,gCAAgC,SAAS,OAAO,QAAS,OAAO,MACnE;AACF;AAEA,IAAM,oBACJ,UACA,WACA,QACA,SAAS,UAAU,YACY;CAC/B,GAAG,KAAK,IACN,KAAK,IAAI,SAAS,GAAA,EAA+B,GACjD,KAAK,IAAA,IAEH,UAAU,QAAQ,OAAO,QAAA,EAC3B,CACF;CACA,GAAG,KAAK,IACN,KAAK,IAAI,SAAS,GAAA,EAA+B,GACjD,KAAK,IAAA,IAAkC,SAAS,OAAO,SAAA,EAAqC,CAC9F;AACF;AAEA,IAAM,oBACJ,UACA,QACA,WACA,cAEA,SAAS,IAAI,OAAO,SAAS,SAAS,OAAO,SAAS,GAAG,OAAO,KAAK,GAAG,WAAW,SAAS;;;;;;;AAQ9F,SAAgB,+BACd,UACA,WACA,QACA,YAAwC,kCACb;CAC3B,MAAM,SAAS,iBAAiB,UAAU,WAAW,MAAM;CAC3D,MAAM,EAAE,aAAa;CACrB,IAAI,CAAC,YAAY,CAAC,iBAAiB,QAAQ,QAAQ,WAAW,SAAS,GAAG,OAAO;CACjF,MAAM,MAAA;CACN,MAAM,QAAQ;EAAE,GAAG,OAAO;EAAG,GAAG,UAAU,SAAS,SAAS,SAAS,MAAM,OAAO;CAAO;CACzF,MAAM,SAAS,CACb;EAAE,GAAG,SAAS,OAAO,MAAM,OAAO;EAAO,GAAG,OAAO;CAAE,GACrD;EAAE,GAAG,SAAS,QAAQ;EAAK,GAAG,OAAO;CAAE,CACzC;CACA,IAAI,OAAO,iBAAiB,OAAO,WAAW,MAAM;CACpD,IAAI,eAAe,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC;CAC7C,KAAK,MAAM,aAAa,QAAQ;EAE9B,IADgB,iBAAiB,WAAW,WAAW,MACnD,CAAA,CAAQ,MAAM,UAAU,KAAK,iBAAiB,WAAW,QAAQ,WAAW,SAAS,GACvF;EAEF,MAAM,WAAW,KAAK,IAAI,UAAU,IAAI,OAAO,CAAC;EAChD,IAAI,WAAW,cAAc;GAC3B,OAAO;GACP,eAAe;EACjB;CACF;CACA,OAAO;AACT;;;;;;;AAQA,SAAgB,8BAA8B,OAMnB;CACzB,MAAM,EAAE,OAAO,UAAU,QAAQ,WAAW,YAAY,qCAAqC;CAC7F,MAAM,OAAO,0BACX,SAAS,8BAA8B,MAAM,GAC7C,QACA,cAAc,WAAW,WAAW,YAAY,QAAQ,OAAO,SAAS,GAAG,KAAK,IAAI,IAAI,CAC1F;CAKA,OAAO;EAAE,GAAG,+BAJK,YAAY;GAC3B,GAAG,UAAU,QAAA,KAAuC,KAAK;GACzD,GAAA;EACF,GACqD,WAAW,MAAM,SAAS;EAAG,GAAG;CAAK;AAC5F;;;;;;AAOA,SAAgB,wBAAwB,OAOb;CACzB,MAAM,EACJ,OACA,WACA,OACA,QACA,WACA,YAAY,qCACV;CACJ,MAAM,OAAO,UAAU,SAAS,MAAM;CACtC,MAAM,OAAO,UAAU,SAAS,MAAM;CACtC,MAAM,QAAQ,UAAU,SAAS,OAAO;CACxC,MAAM,QAAQ,UAAU,SAAS,OAAO;CACxC,MAAM,QAAQ,MAAM,IAAI,MAAM;CAC9B,MAAM,SAAS,MAAM,IAAI,MAAM;CAC/B,MAAM,QAAQ,SAAS,OAAO,MAAM,GAAG,MAAM,KAAK,GAAG,WAAW,SAAS;CACzE,MAAM,MAAM;EACV,OAAO,OACH,QAAA,KACA,OACE,UAAU,QAAA,KAAuC,MAAM,IACvD,UAAU,QAAQ;EACxB,QAAQ,QACJ,SAAA,KACA,QACE,QAAA,KAAuC,MAAM,IAC7C,QAAQ;CAChB;CACA,MAAM,eAAe,MAAM,SAAS,OAAO,MAAM,IAAI,OAAO,CAAC,MAAM,IAAI;CACvE,MAAM,gBAAgB,MAAM,UAAU,QAAQ,MAAM,IAAI,QAAQ,CAAC,MAAM,IAAI;CAC3E,MAAM,aAAa,QAAQ;CAC3B,MAAM,WAAW,SAAS;CAQ1B,MAAM,OAAO,2BANX,cAAc,CAAC,WACX,OACA,YAAY,CAAC,aACX,QACA,KAAK,IAAI,eAAe,MAAM,KAAK,IAAI,MAAM,SAC7C,KAAK,IAAI,gBAAgB,MAAM,MAAM,IAAI,MAAM,UAExC,eAAgB,gBAAgB,OAAO,QAAS,OAAO,QACpE,QACA,GACF;CAOA,OAAO;EAAE,GANQ,+BACf;GAAE,GAAG,OAAO,QAAQ,KAAK,QAAQ,MAAM;GAAG,GAAG,QAAQ,SAAS,KAAK,SAAS,MAAM;EAAE,GACpF,WACA,MACA,SAEU;EAAU,GAAG;CAAK;AAChC;AASA,IAAa,4BAAA;AACb,IAAa,iCAAA;AACb,IAAa,gCAAgC;AAC7C,IAAa,8BAA8B;AAC3C,IAAa,wBAAwB;AACrC,IAAa,+BAA+B"}

package/dist/components/theme/index.d.ts

@@ -2,4 +2,5 @@ export { AppearancePanel, type AppearancePanelProps } from './appearance-panel';
 export { ThemePicker, ThemePreview, ThemeSwatch, type ThemePickerProps, type ThemePreviewProps, type ThemeSwatchProps, } from './theme-picker';
 export { ThemeProvider, defaultThemeSelection, inlineScriptLiteral, resolvedDensity, themeScript, useTheme, type ThemeContextValue, type ThemeDensity, type ThemeProviderProps, type ThemeSelection, } from './theme-provider';
 export { ThemeToggle, type ThemeToggleProps } from './theme-toggle';
+export { ThemeModeToggle, type ThemeModeToggleProps } from './theme-mode-toggle';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC/E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,QAAQ,EACR,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,cAAc,GACpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC/E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,QAAQ,EACR,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,cAAc,GACpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/components/theme/index.js

@@ -2,4 +2,5 @@ import { ThemePicker, ThemePreview, ThemeSwatch } from "./theme-picker.js";
 import { ThemeProvider, defaultThemeSelection, inlineScriptLiteral, resolvedDensity, themeScript, useTheme } from "./theme-provider.js";
 import { AppearancePanel } from "./appearance-panel.js";
 import { ThemeToggle } from "./theme-toggle.js";
-export { AppearancePanel, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, defaultThemeSelection, inlineScriptLiteral, resolvedDensity, themeScript, useTheme };
+import { ThemeModeToggle } from "./theme-mode-toggle.js";
+export { AppearancePanel, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, defaultThemeSelection, inlineScriptLiteral, resolvedDensity, themeScript, useTheme };

package/dist/components/theme/theme-mode-toggle.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'solid-js';
+import { ToggleGroup } from '../ui/toggle-group/toggle-group';
+/** Controlled appearance selection for hosts that own their preference storage. */
+export type ThemeModeToggleProps = Omit<ComponentProps<typeof ToggleGroup>, 'children' | 'value' | 'onChange' | 'multiple'> & {
+    mode: 'light' | 'dark' | 'system';
+    onModeChange: (mode: 'light' | 'dark' | 'system') => void;
+    withLabels?: boolean;
+};
+export declare function ThemeModeToggle(props: ThemeModeToggleProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=theme-mode-toggle.d.ts.map

package/dist/components/theme/theme-mode-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mode-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-mode-toggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAmB,MAAM,iCAAiC,CAAA;AAS9E,mFAAmF;AACnF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,cAAc,CAAC,OAAO,WAAW,CAAC,EAClC,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAC/C,GAAG;IACF,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;IACjC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,KAAK,IAAI,CAAA;IACzD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kCAiC1D"}

package/dist/components/theme/theme-mode-toggle.js

@@ -0,0 +1,82 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip/tooltip.js";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group/toggle-group.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Monitor, Moon, Sun } from "lucide-solid";
+import { For, splitProps } from "solid-js";
+//#region src/components/theme/theme-mode-toggle.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+var APPEARANCES = [
+	{
+		value: "light",
+		label: "Light",
+		icon: Sun
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		icon: Moon
+	},
+	{
+		value: "system",
+		label: "System",
+		icon: Monitor
+	}
+];
+function ThemeModeToggle(props) {
+	const [local, rest] = splitProps(props, [
+		"mode",
+		"onModeChange",
+		"withLabels"
+	]);
+	return createComponent(ToggleGroup, mergeProps(rest, {
+		attached: true,
+		multiple: false,
+		get value() {
+			return local.mode;
+		},
+		onChange: (value) => {
+			const option = APPEARANCES.find((candidate) => candidate.value === value);
+			if (option) local.onModeChange(option.value);
+		},
+		get ["aria-label"]() {
+			return rest["aria-label"] ?? "Appearance";
+		},
+		get children() {
+			return createComponent(For, {
+				each: APPEARANCES,
+				children: (appearance) => createComponent(Tooltip, { get children() {
+					return [createComponent(TooltipTrigger, {
+						as: ToggleGroupItem,
+						get value() {
+							return appearance.value;
+						},
+						variant: "outline",
+						get size() {
+							return local.withLabels ? "sm" : "icon-sm";
+						},
+						get ["aria-label"]() {
+							return appearance.label;
+						},
+						get children() {
+							return [createComponent(appearance.icon, { "aria-hidden": "true" }), memo(() => memo(() => !!local.withLabels)() ? (() => {
+								var _el$ = _tmpl$();
+								insert(_el$, () => appearance.label);
+								return _el$;
+							})() : null)];
+						}
+					}), createComponent(TooltipContent, { get children() {
+						return [
+							"Use ",
+							memo(() => appearance.label.toLowerCase()),
+							" appearance"
+						];
+					} })];
+				} })
+			});
+		}
+	}));
+}
+//#endregion
+export { ThemeModeToggle };
+
+//# sourceMappingURL=theme-mode-toggle.js.map

package/dist/components/theme/theme-mode-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mode-toggle.js","names":["Monitor","Moon","Sun","ComponentProps","For","splitProps","ToggleGroup","ToggleGroupItem","Tooltip","TooltipContent","TooltipTrigger","APPEARANCES","value","label","icon","const","ThemeModeToggleProps","Omit","mode","onModeChange","withLabels","ThemeModeToggle","props","local","rest","_$createComponent","_$mergeProps","attached","multiple","onChange","option","find","candidate","aria-label","children","each","appearance","as","variant","size","_$memo","_el$","_tmpl$","_$insert","toLowerCase","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../src/components/theme/theme-mode-toggle.tsx"],"sourcesContent":["import { Monitor, Moon, Sun } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { For, splitProps } from 'solid-js'\nimport { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group/toggle-group'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'\n\nconst APPEARANCES = [\n  { value: 'light', label: 'Light', icon: Sun },\n  { value: 'dark', label: 'Dark', icon: Moon },\n  { value: 'system', label: 'System', icon: Monitor },\n] as const\n\n/** Controlled appearance selection for hosts that own their preference storage. */\nexport type ThemeModeToggleProps = Omit<\n  ComponentProps<typeof ToggleGroup>,\n  'children' | 'value' | 'onChange' | 'multiple'\n> & {\n  mode: 'light' | 'dark' | 'system'\n  onModeChange: (mode: 'light' | 'dark' | 'system') => void\n  withLabels?: boolean\n}\n\nexport function ThemeModeToggle(props: ThemeModeToggleProps) {\n  const [local, rest] = splitProps(props, ['mode', 'onModeChange', 'withLabels'])\n  return (\n    <ToggleGroup\n      {...rest}\n      attached\n      multiple={false}\n      value={local.mode}\n      onChange={(value: string | null) => {\n        const option = APPEARANCES.find((candidate) => candidate.value === value)\n        if (option) local.onModeChange(option.value)\n      }}\n      aria-label={rest['aria-label'] ?? 'Appearance'}\n    >\n      <For each={APPEARANCES}>\n        {(appearance) => (\n          <Tooltip>\n            <TooltipTrigger\n              as={ToggleGroupItem}\n              value={appearance.value}\n              variant=\"outline\"\n              size={local.withLabels ? 'sm' : 'icon-sm'}\n              aria-label={appearance.label}\n            >\n              <appearance.icon aria-hidden=\"true\" />\n              {local.withLabels ? <span>{appearance.label}</span> : null}\n            </TooltipTrigger>\n            <TooltipContent>Use {appearance.label.toLowerCase()} appearance</TooltipContent>\n          </Tooltip>\n        )}\n      </For>\n    </ToggleGroup>\n  )\n}\n"],"mappings":";;;;;;;AAMA,IAAMW,cAAc;CAClB;EAAEC,OAAO;EAASC,OAAO;EAASC,MAAMZ;CAAI;CAC5C;EAAEU,OAAO;EAAQC,OAAO;EAAQC,MAAMb;CAAK;CAC3C;EAAEW,OAAO;EAAUC,OAAO;EAAUC,MAAMd;CAAQ;AAAC;AAarD,SAAgBqB,gBAAgBC,OAA6B;CAC3D,MAAM,CAACC,OAAOC,QAAQnB,WAAWiB,OAAO;EAAC;EAAQ;EAAgB;CAAY,CAAC;CAC9E,OAAAG,gBACGnB,aAAWoB,WACNF,MAAI;EACRG,UAAQ;EACRC,UAAU;EAAK,IACfhB,QAAK;GAAA,OAAEW,MAAML;EAAI;EACjBW,WAAWjB,UAAyB;GAClC,MAAMkB,SAASnB,YAAYoB,MAAMC,cAAcA,UAAUpB,UAAUA,KAAK;GACxE,IAAIkB,QAAQP,MAAMJ,aAAaW,OAAOlB,KAAK;EAC7C;EAAC,KAAA,gBAAA;GAAA,OACWY,KAAK,iBAAiB;EAAY;EAAA,IAAAU,WAAA;GAAA,OAAAT,gBAE7CrB,KAAG;IAAC+B,MAAMxB;IAAWuB,WAClBE,eAAUX,gBACTjB,SAAO,EAAA,IAAA0B,WAAA;KAAA,OAAA,CAAAT,gBACLf,gBAAc;MACb2B,IAAI9B;MAAe,IACnBK,QAAK;OAAA,OAAEwB,WAAWxB;MAAK;MACvB0B,SAAO;MAAA,IACPC,OAAI;OAAA,OAAEhB,MAAMH,aAAa,OAAO;MAAS;MAAA,KAAA,gBAAA;OAAA,OAC7BgB,WAAWvB;MAAK;MAAA,IAAAqB,WAAA;OAAA,OAAA,CAAAT,gBAE3BW,WAAWtB,MAAI,EAAA,eAAA,OAAA,CAAA,GAAA0B,WACfA,WAAA,CAAA,CAAAjB,MAAMH,UAAU,CAAA,CAAA,WAAA;QAAA,IAAAqB,OAAAC,OAAA;QAAAC,OAAAF,YAAUL,WAAWvB,KAAK;QAAA,OAAA4B;OAAA,EAAA,CAAA,IAAW,IAAI,CAAA;MAAA;KAAA,CAAA,GAAAhB,gBAE3DhB,gBAAc,EAAA,IAAAyB,WAAA;MAAA,OAAA;OAAA;OAAAM,WAAMJ,WAAWvB,MAAM+B,YAAY,CAAC;OAAA;MAAA;KAAA,EAAA,CAAA,CAAA;IAAA,EAAA,CAAA;GAEtD,CAAA;EAAA;CAAA,CAAA,CAAA;AAIT"}

package/dist/components/ui/checkbox/checkbox.d.ts

@@ -14,6 +14,8 @@ import type { ComponentProps, JSX } from 'solid-js';
  * the ring lives on the control and reads the input's focus state.
  */
 export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'children'> & {
+    /** ID for the hidden native checkbox input; useful with an external label. */
+    inputId?: string;
     controlClass?: string;
     labelClass?: string;
     descriptionClass?: string;

package/dist/components/ui/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eAwE5C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,eAGhF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,eAQ5F"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eAsF5C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,eAGhF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,eAQ5F"}

package/dist/components/ui/checkbox/checkbox.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useFormFieldControl } from "../../../lib/form-field.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { Check, Minus } from "lucide-solid";
 import { splitProps } from "solid-js";
@@ -19,10 +20,24 @@ function Checkbox$1(props) {
 		"aria-labelledby",
 		"aria-describedby",
 		"aria-invalid",
+		"aria-errormessage",
 		"aria-busy",
+		"id",
+		"inputId",
 		"title"
 	]);
+	const field = useFormFieldControl("control", {
+		id: local.inputId ?? local.id,
+		"aria-label": local["aria-label"],
+		"aria-labelledby": local["aria-labelledby"],
+		"aria-describedby": local["aria-describedby"],
+		"aria-invalid": local["aria-invalid"],
+		"aria-errormessage": local["aria-errormessage"]
+	});
 	return createComponent(Checkbox, mergeProps({
+		get id() {
+			return field ? void 0 : local.id;
+		},
 		get title() {
 			return local.title;
 		},
@@ -32,17 +47,23 @@ function Checkbox$1(props) {
 	}, rest, { get children() {
 		return [
 			createComponent(Checkbox.Input, {
+				get id() {
+					return field?.id ?? local.inputId;
+				},
 				get ["aria-label"]() {
 					return local["aria-label"];
 				},
 				get ["aria-labelledby"]() {
-					return local["aria-labelledby"];
+					return field?.["aria-labelledby"] ?? local["aria-labelledby"];
 				},
 				get ["aria-describedby"]() {
-					return local["aria-describedby"];
+					return field?.["aria-describedby"] ?? local["aria-describedby"];
 				},
 				get ["aria-invalid"]() {
-					return local["aria-invalid"];
+					return field?.["aria-invalid"] ?? local["aria-invalid"];
+				},
+				get ["aria-errormessage"]() {
+					return field?.["aria-errormessage"] ?? local["aria-errormessage"];
 				},
 				get ["aria-busy"]() {
 					return local["aria-busy"];

package/dist/components/ui/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","KobalteCheckbox","Check","Minus","ComponentProps","JSX","splitProps","cn","CheckboxProps","Omit","controlClass","labelClass","descriptionClass","label","Element","description","children","props","local","rest","_$createComponent","_$mergeProps","title","class","Input","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-busy","Control","Indicator","_$memo","indeterminate","_el$","_tmpl$","_$insert","_c$","Label","_c$2","Description","CheckboxLabel","CheckboxDescription","Checkbox","_$createComponent","KobalteCheckbox","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as KobalteCheckbox } from '@kobalte/core/checkbox'\nimport { Check, Minus } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Checkbox.\n *\n * Three states: unchecked, checked, and indeterminate. Indeterminate is what a\n * \"select all\" box shows when only some rows are selected; Kobalte expresses\n * it through `checked=\"indeterminate\"` rather than a second boolean, so there\n * is no way to render a box that is both.\n *\n * The paint is `Control` and the value is a real hidden `Input`, so the control\n * participates in a form submission and in native validation while looking\n * nothing like a browser checkbox. Focus is tracked by the input, which is why\n * the ring lives on the control and reads the input's focus state.\n */\nexport type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'children'> & {\n  controlClass?: string\n  labelClass?: string\n  descriptionClass?: string\n  label?: JSX.Element\n  description?: JSX.Element\n  /**\n   * Replaces the control and label. Omit it to get the default control beside\n   * `label` and `description`; supply it to compose the parts yourself.\n   */\n  children?: JSX.Element\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'labelClass',\n    'descriptionClass',\n    'children',\n    'label',\n    'description',\n    'indeterminate',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n\n  return (\n    <KobalteCheckbox\n      title={local.title}\n      class={cn('group/checkbox flex items-start gap-2.5', local.class)}\n      {...rest}\n    >\n      {/*\n       * The name goes on the input, which is what carries the value and takes\n       * focus. On the Root it would land on a plain div and name nothing — the\n       * box would announce its state with no subject.\n       */}\n      <KobalteCheckbox.Input\n        aria-label={local['aria-label']}\n        aria-labelledby={local['aria-labelledby']}\n        aria-describedby={local['aria-describedby']}\n        aria-invalid={local['aria-invalid']}\n        aria-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteCheckbox.Control\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-sm border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary-foreground',\n          'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary-foreground',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteCheckbox.Indicator class=\"flex items-center justify-center\">\n          {local.indeterminate ? <Minus class=\"size-3\" /> : <Check class=\"size-3\" />}\n        </KobalteCheckbox.Indicator>\n      </KobalteCheckbox.Control>\n      {local.children ??\n        (local.label || local.description ? (\n          <div class=\"grid gap-0.5\">\n            {local.label ? (\n              <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)}>\n                {local.label}\n              </KobalteCheckbox.Label>\n            ) : null}\n            {local.description ? (\n              <KobalteCheckbox.Description\n                class={cn('text-muted-foreground text-sm', local.descriptionClass)}\n              >\n                {local.description}\n              </KobalteCheckbox.Description>\n            ) : null}\n          </div>\n        ) : null)}\n    </KobalteCheckbox>\n  )\n}\n\n/**\n * The box's own label. Valid only inside a `<Checkbox>`, for the same reason as\n * `SwitchLabel`: outside its root there is no control to associate with.\n */\nexport function CheckboxLabel(props: ComponentProps<typeof KobalteCheckbox.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteCheckbox.Label class={cn('text-sm font-medium', local.class)} {...rest} />\n}\n\nexport function CheckboxDescription(props: ComponentProps<typeof KobalteCheckbox.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteCheckbox.Description\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAgCA,SAAgBA,WAASiB,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGnB,UAAeoB,WAAA;EAAA,IACdC,QAAK;GAAA,OAAEJ,MAAMI;EAAK;EAAA,KAAA,WAAA;GAAA,OACXf,GAAG,2CAA2CW,MAAMK,KAAK;EAAC;CAAA,GAC7DJ,MAAI,EAAA,IAAAH,WAAA;EAAA,OAAA;GAAAI,gBAOPnB,SAAgBuB,OAAK;IAAA,KAAA,gBAAA;KAAA,OACRN,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;IAAA,KAAA,sBAAA;KAAA,OACvBA,MAAM;IAAmB;IAAA,KAAA,kBAAA;KAAA,OAC7BA,MAAM;IAAe;IAAA,KAAA,eAAA;KAAA,OACxBA,MAAM;IAAY;IAAA,IAC7BI,QAAK;KAAA,OAAEJ,MAAMI;IAAK;GAAA,CAAA;GAAAF,gBAEnBnB,SAAgB6B,SAAO;IAAA,KAAA,WAAA;KAAA,OACfvB,GACL,kGACA,qFACA,oFACA,kGACA,oHACA,kGACA,iEACAW,MAAMR,YACR;IAAC;IAAA,IAAAM,WAAA;KAAA,OAAAI,gBAEAnB,SAAgB8B,WAAS;MAAA,SAAA;MAAA,IAAAf,WAAA;OAAA,OACvBgB,WAAA,CAAA,CAAAd,MAAMe,aAAa,CAAA,CAAA,IAAAb,gBAAIjB,OAAK,EAAA,SAAA,SAAA,CAAA,IAAAiB,gBAAsBlB,OAAK,EAAA,SAAA,SAAA,CAAA;MAAkB;KAAA,CAAA;IAAA;GAAA,CAAA;GAAA8B,WAG7Ed,MAAMF,aACJE,MAAML,SAASK,MAAMH,qBAAW;IAAA,IAAAmB,OAAAC,OAAA;IAAAC,OAAAF,aAAA;KAAA,IAAAG,MAAAL,WAAA,CAAA,CAE5Bd,MAAML,KAAK;KAAA,aAAXwB,IAAA,IAAAjB,gBACEnB,SAAgBqC,OAAK;MAAA,KAAA,WAAA;OAAA,OAAQ/B,GAAG,uBAAuBW,MAAMP,UAAU;MAAC;MAAA,IAAAK,WAAA;OAAA,OACtEE,MAAML;MAAK;KAAA,CAAA,IAEZ;IAAI,EAAA,CAAA,GAAA,IAAA;IAAAuB,OAAAF,aAAA;KAAA,IAAAK,OAAAP,WAAA,CAAA,CACPd,MAAMH,WAAW;KAAA,aAAjBwB,KAAA,IAAAnB,gBACEnB,SAAgBuC,aAAW;MAAA,KAAA,WAAA;OAAA,OACnBjC,GAAG,iCAAiCW,MAAMN,gBAAgB;MAAC;MAAA,IAAAI,WAAA;OAAA,OAEjEE,MAAMH;MAAW;KAAA,CAAA,IAElB;IAAI,EAAA,CAAA,GAAA,IAAA;IAAA,OAAAmB;GAAA,EAAA,CAAA,IAER,KAAK;EAAA;CAAA,EAAA,CAAA,CAAA;AAGjB;;;;;AAMA,SAAgBO,cAAcxB,OAAqD;CACjF,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQnB,SAAgBqC,OAAKjB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQd,GAAG,uBAAuBW,MAAMK,KAAK;CAAC,EAAA,GAAMJ,IAAI,CAAA;AACvF;AAEA,SAAgBuB,oBAAoBzB,OAA2D;CAC7F,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGnB,SAAgBuC,aAAWnB,WAAA,EAAA,KAAA,WAAA;EAAA,OACnBd,GAAG,iCAAiCW,MAAMK,KAAK;CAAC,EAAA,GACnDJ,IAAI,CAAA;AAGd"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","KobalteCheckbox","Check","Minus","ComponentProps","JSX","splitProps","useFormFieldControl","cn","CheckboxProps","Omit","inputId","controlClass","labelClass","descriptionClass","label","Element","description","children","props","local","rest","field","id","_$createComponent","_$mergeProps","undefined","title","class","Input","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","aria-busy","Control","Indicator","_$memo","indeterminate","_el$","_tmpl$","_$insert","_c$","Label","_c$2","Description","CheckboxLabel","CheckboxDescription","Checkbox","_$createComponent","KobalteCheckbox","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as KobalteCheckbox } from '@kobalte/core/checkbox'\nimport { Check, Minus } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * Checkbox.\n *\n * Three states: unchecked, checked, and indeterminate. Indeterminate is what a\n * \"select all\" box shows when only some rows are selected; Kobalte expresses\n * it through `checked=\"indeterminate\"` rather than a second boolean, so there\n * is no way to render a box that is both.\n *\n * The paint is `Control` and the value is a real hidden `Input`, so the control\n * participates in a form submission and in native validation while looking\n * nothing like a browser checkbox. Focus is tracked by the input, which is why\n * the ring lives on the control and reads the input's focus state.\n */\nexport type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'children'> & {\n  /** ID for the hidden native checkbox input; useful with an external label. */\n  inputId?: string\n  controlClass?: string\n  labelClass?: string\n  descriptionClass?: string\n  label?: JSX.Element\n  description?: JSX.Element\n  /**\n   * Replaces the control and label. Omit it to get the default control beside\n   * `label` and `description`; supply it to compose the parts yourself.\n   */\n  children?: JSX.Element\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'labelClass',\n    'descriptionClass',\n    'children',\n    'label',\n    'description',\n    'indeterminate',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n    'aria-busy',\n    'id',\n    'inputId',\n    'title',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.inputId ?? local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n\n  return (\n    <KobalteCheckbox\n      id={field ? undefined : local.id}\n      title={local.title}\n      class={cn('group/checkbox flex items-start gap-2.5', local.class)}\n      {...rest}\n    >\n      {/*\n       * The name goes on the input, which is what carries the value and takes\n       * focus. On the Root it would land on a plain div and name nothing — the\n       * box would announce its state with no subject.\n       */}\n      <KobalteCheckbox.Input\n        id={field?.id ?? local.inputId}\n        aria-label={local['aria-label']}\n        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n        aria-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteCheckbox.Control\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-sm border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary-foreground',\n          'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary-foreground',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteCheckbox.Indicator class=\"flex items-center justify-center\">\n          {local.indeterminate ? <Minus class=\"size-3\" /> : <Check class=\"size-3\" />}\n        </KobalteCheckbox.Indicator>\n      </KobalteCheckbox.Control>\n      {local.children ??\n        (local.label || local.description ? (\n          <div class=\"grid gap-0.5\">\n            {local.label ? (\n              <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)}>\n                {local.label}\n              </KobalteCheckbox.Label>\n            ) : null}\n            {local.description ? (\n              <KobalteCheckbox.Description\n                class={cn('text-muted-foreground text-sm', local.descriptionClass)}\n              >\n                {local.description}\n              </KobalteCheckbox.Description>\n            ) : null}\n          </div>\n        ) : null)}\n    </KobalteCheckbox>\n  )\n}\n\n/**\n * The box's own label. Valid only inside a `<Checkbox>`, for the same reason as\n * `SwitchLabel`: outside its root there is no control to associate with.\n */\nexport function CheckboxLabel(props: ComponentProps<typeof KobalteCheckbox.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteCheckbox.Label class={cn('text-sm font-medium', local.class)} {...rest} />\n}\n\nexport function CheckboxDescription(props: ComponentProps<typeof KobalteCheckbox.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteCheckbox.Description\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/combobox/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC/C,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAGhE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAgBpF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAahF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAoBpF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAsBpF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,kCAW9E;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAGpF;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,kCAkB3E"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAM9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC/C,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAGhE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAgBpF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAmChF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAoBpF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAsBpF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,kCAW9E;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAGpF;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,kCAkB3E"}

package/dist/components/ui/combobox/combobox.js

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import { menuItem, popoverArrow } from "../../../lib/overlay.js";
+import { useFormFieldControl } from "../../../lib/form-field.js";
 import { className, createComponent, delegateEvents, effect, insert, memo, mergeProps, template } from "solid-js/web";
 import { Check, ChevronDown, X } from "lucide-solid";
 import { Show, splitProps } from "solid-js";
@@ -29,10 +30,46 @@ function ComboboxControl(props) {
 	} }, rest));
 }
 function ComboboxInput(props) {
-	const [local, rest] = splitProps(props, ["class"]);
-	return createComponent(Combobox.Input, mergeProps({ get ["class"]() {
-		return cn("h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground", "disabled:cursor-not-allowed", local.class);
-	} }, rest));
+	const [local, rest] = splitProps(props, [
+		"class",
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-invalid",
+		"aria-errormessage"
+	]);
+	const field = useFormFieldControl("control", {
+		id: local.id,
+		"aria-label": local["aria-label"],
+		"aria-labelledby": local["aria-labelledby"],
+		"aria-describedby": local["aria-describedby"],
+		"aria-invalid": local["aria-invalid"],
+		"aria-errormessage": local["aria-errormessage"]
+	});
+	return createComponent(Combobox.Input, mergeProps({
+		get id() {
+			return field?.id ?? local.id;
+		},
+		get ["aria-label"]() {
+			return local["aria-label"];
+		},
+		get ["aria-labelledby"]() {
+			return field?.["aria-labelledby"] ?? local["aria-labelledby"];
+		},
+		get ["aria-describedby"]() {
+			return field?.["aria-describedby"] ?? local["aria-describedby"];
+		},
+		get ["aria-invalid"]() {
+			return field?.["aria-invalid"] ?? local["aria-invalid"];
+		},
+		get ["aria-errormessage"]() {
+			return field?.["aria-errormessage"] ?? local["aria-errormessage"];
+		},
+		get ["class"]() {
+			return cn("h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground", "disabled:cursor-not-allowed", local.class);
+		}
+	}, rest));
 }
 function ComboboxTrigger(props) {
 	const [local, rest] = splitProps(props, ["class", "children"]);

package/dist/components/ui/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":["Combobox","KobalteCombobox","Check","ChevronDown","X","ComponentProps","Show","splitProps","menuContentPadding","menuItem","popoverArrow","cn","props","Option","OptGroup","_$createComponent","ComboboxControl","Control","local","rest","_$mergeProps","class","ComboboxInput","Input","ComboboxTrigger","Trigger","children","_$memo","Icon","ComboboxContent","Content","Portal","Listbox","Arrow","ComboboxItem","Item","ItemLabel","ItemIndicator","ComboboxSection","Section","ComboboxClear","onClear","when","_el$","_tmpl$","$$click","_$insert","_$effect","_$className","_$delegateEvents","Combobox","_$createComponent","KobalteCombobox","_$mergeProps","_$memo","_$className","_$delegateEvents"],"sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'\nimport { Check, ChevronDown, X } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { menuContentPadding, menuItem, popoverArrow } from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Combobox.\n *\n * A Select whose list is filterable by typing. The difference from Select is\n * not cosmetic: a Combobox has a text input, so the user can narrow forty\n * options to one without reading the list. Above roughly ten options the\n * search is the feature; below it, a Select is quieter and a RadioGroup is\n * better still.\n *\n * Kobalte supplies the filtering, the `aria-activedescendant` wiring, the\n * keyboard selection and the multiple-selection mode, which is the part a\n * hand-rolled version reliably gets wrong.\n */\nexport function Combobox<Option, OptGroup = never>(\n  props: ComponentProps<typeof KobalteCombobox<Option, OptGroup>>\n) {\n  return <KobalteCombobox {...props} />\n}\n\nexport function ComboboxControl(props: ComponentProps<typeof KobalteCombobox.Control>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteCombobox.Control\n      class={cn(\n        'border-input bg-transparent flex h-control-md w-full items-center gap-1.5 rounded-md border px-control-sm',\n        'transition-[color,box-shadow,border-color] ease-out',\n        'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\n        'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function ComboboxInput(props: ComponentProps<typeof KobalteCombobox.Input>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteCombobox.Input\n      class={cn(\n        'h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',\n        'disabled:cursor-not-allowed',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function ComboboxTrigger(props: ComponentProps<typeof KobalteCombobox.Trigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Trigger\n      class={cn(\n        'text-muted-foreground flex shrink-0 items-center justify-center rounded-sm outline-none',\n        'transition-colors ease-out hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <KobalteCombobox.Icon>\n        <ChevronDown class=\"size-4\" />\n      </KobalteCombobox.Icon>\n    </KobalteCombobox.Trigger>\n  )\n}\n\nexport function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Portal>\n      <KobalteCombobox.Content\n        class={cn(\n          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n          'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        {...rest}\n      >\n        <KobalteCombobox.Listbox class={cn('max-h-72 overflow-y-auto', menuContentPadding)} />\n        {local.children}\n        <KobalteCombobox.Arrow aria-hidden=\"true\" class={popoverArrow} />\n      </KobalteCombobox.Content>\n    </KobalteCombobox.Portal>\n  )\n}\n\nexport function ComboboxItem(props: ComponentProps<typeof KobalteCombobox.Item>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      <KobalteCombobox.ItemLabel>{local.children}</KobalteCombobox.ItemLabel>\n      <KobalteCombobox.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteCombobox.ItemIndicator>\n    </KobalteCombobox.Item>\n  )\n}\n\nexport function ComboboxSection(props: ComponentProps<typeof KobalteCombobox.Section>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteCombobox.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\n/** The clear affordance for a single-select Combobox with a value. */\nexport function ComboboxClear(props: { class?: string; onClear: () => void }) {\n  return (\n    <Show when={props.onClear}>\n      <button\n        type=\"button\"\n        aria-label=\"Clear selection\"\n        onClick={() => props.onClear()}\n        class={cn(\n          'text-muted-foreground flex size-4 shrink-0 items-center justify-center rounded-sm',\n          'transition-colors ease-out outline-none hover:text-foreground',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          props.class\n        )}\n      >\n        <X class=\"size-3.5\" />\n      </button>\n    </Show>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"combobox.js","names":["Combobox","KobalteCombobox","Check","ChevronDown","X","ComponentProps","Show","splitProps","menuContentPadding","menuItem","popoverArrow","useFormFieldControl","cn","props","Option","OptGroup","_$createComponent","ComboboxControl","Control","local","rest","_$mergeProps","class","ComboboxInput","Input","field","id","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","ComboboxTrigger","Trigger","children","_$memo","Icon","ComboboxContent","Content","Portal","Listbox","Arrow","ComboboxItem","Item","ItemLabel","ItemIndicator","ComboboxSection","Section","ComboboxClear","onClear","when","_el$","_tmpl$","$$click","_$insert","_$effect","_$className","_$delegateEvents","Combobox","_$createComponent","KobalteCombobox","_$mergeProps","_$memo","_$className","_$delegateEvents"],"sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'\nimport { Check, ChevronDown, X } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { menuContentPadding, menuItem, popoverArrow } from '#lib/overlay'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * Combobox.\n *\n * A Select whose list is filterable by typing. The difference from Select is\n * not cosmetic: a Combobox has a text input, so the user can narrow forty\n * options to one without reading the list. Above roughly ten options the\n * search is the feature; below it, a Select is quieter and a RadioGroup is\n * better still.\n *\n * Kobalte supplies the filtering, the `aria-activedescendant` wiring, the\n * keyboard selection and the multiple-selection mode, which is the part a\n * hand-rolled version reliably gets wrong.\n */\nexport function Combobox<Option, OptGroup = never>(\n  props: ComponentProps<typeof KobalteCombobox<Option, OptGroup>>\n) {\n  return <KobalteCombobox {...props} />\n}\n\nexport function ComboboxControl(props: ComponentProps<typeof KobalteCombobox.Control>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteCombobox.Control\n      class={cn(\n        'border-input bg-transparent flex h-control-md w-full items-center gap-1.5 rounded-md border px-control-sm',\n        'transition-[color,box-shadow,border-color] ease-out',\n        'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\n        'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function ComboboxInput(props: ComponentProps<typeof KobalteCombobox.Input>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n\n  return (\n    <KobalteCombobox.Input\n      id={field?.id ?? local.id}\n      aria-label={local['aria-label']}\n      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      class={cn(\n        'h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',\n        'disabled:cursor-not-allowed',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function ComboboxTrigger(props: ComponentProps<typeof KobalteCombobox.Trigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Trigger\n      class={cn(\n        'text-muted-foreground flex shrink-0 items-center justify-center rounded-sm outline-none',\n        'transition-colors ease-out hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <KobalteCombobox.Icon>\n        <ChevronDown class=\"size-4\" />\n      </KobalteCombobox.Icon>\n    </KobalteCombobox.Trigger>\n  )\n}\n\nexport function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Portal>\n      <KobalteCombobox.Content\n        class={cn(\n          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n          'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        {...rest}\n      >\n        <KobalteCombobox.Listbox class={cn('max-h-72 overflow-y-auto', menuContentPadding)} />\n        {local.children}\n        <KobalteCombobox.Arrow aria-hidden=\"true\" class={popoverArrow} />\n      </KobalteCombobox.Content>\n    </KobalteCombobox.Portal>\n  )\n}\n\nexport function ComboboxItem(props: ComponentProps<typeof KobalteCombobox.Item>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      <KobalteCombobox.ItemLabel>{local.children}</KobalteCombobox.ItemLabel>\n      <KobalteCombobox.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteCombobox.ItemIndicator>\n    </KobalteCombobox.Item>\n  )\n}\n\nexport function ComboboxSection(props: ComponentProps<typeof KobalteCombobox.Section>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteCombobox.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\n/** The clear affordance for a single-select Combobox with a value. */\nexport function ComboboxClear(props: { class?: string; onClear: () => void }) {\n  return (\n    <Show when={props.onClear}>\n      <button\n        type=\"button\"\n        aria-label=\"Clear selection\"\n        onClick={() => props.onClear()}\n        class={cn(\n          'text-muted-foreground flex size-4 shrink-0 items-center justify-center rounded-sm',\n          'transition-colors ease-out outline-none hover:text-foreground',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          props.class\n        )}\n      >\n        <X class=\"size-3.5\" />\n      </button>\n    </Show>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/combobox/index.d.ts

@@ -1,2 +1,3 @@
 export { Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, } from './combobox';
+export { ValueCombobox, type ValueComboboxProps } from './value-combobox';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/ui/combobox/index.js

@@ -1,2 +1,3 @@
 import { Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger } from "./combobox.js";
-export { Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger };
+import { ValueCombobox } from "./value-combobox.js";
+export { Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, ValueCombobox };

package/dist/components/ui/combobox/value-combobox.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentProps, type JSX } from 'solid-js';
+import { ComboboxInput } from './combobox';
+export type ValueComboboxChoice = {
+    value: string;
+    label: string | number;
+    textValue?: string;
+} | {
+    value: string;
+    label: JSX.Element;
+    textValue: string;
+};
+export type ValueComboboxProps = Omit<ComponentProps<typeof ComboboxInput>, 'value'> & {
+    value: string;
+    choices: ValueComboboxChoice[];
+    onValueChange: (value: string) => void;
+};
+/** A single-choice combobox for a controlled string value and labelled choices. */
+export declare function ValueCombobox(props: ValueComboboxProps): JSX.Element;
+//# sourceMappingURL=value-combobox.d.ts.map

package/dist/components/ui/combobox/value-combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combobox/value-combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AACpE,OAAO,EAA6B,aAAa,EAAgB,MAAM,YAAY,CAAA;AAEnF,MAAM,MAAM,mBAAmB,GAC3B;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAC7D;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAA;AAE5D,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,OAAO,CAAC,GAAG;IACrF,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,mFAAmF;AACnF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAmBtD"}