@adea-ai/ui 0.60.4 → 0.61.1

package/dist/components/ui/board/board.js

@@ -0,0 +1,200 @@
+import { cn } from "../../../lib/utils.js";
+import { cva } from "../../../lib/variants.js";
+import { className, createComponent, delegateEvents, effect, insert, setAttribute, template } from "solid-js/web";
+import { For, Show, createMemo, createSignal, splitProps } from "solid-js";
+//#region src/components/ui/board/board.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=region tabindex=0><div class=visually-hidden role=status aria-live=polite>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class="text-2xs text-muted-foreground">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<p class="rounded-md border border-dashed border-border px-2 py-4 text-center text-2xs text-muted-foreground">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<section><header class="flex items-center justify-between gap-2 px-1 py-0.5"><h3 class="text-xs font-semibold text-foreground"></h3></header><div class="flex min-h-16 flex-col gap-2">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<article tabindex=0 aria-roledescription="Draggable card">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<h4>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div>`);
+var cardDragState = {
+	idle: "",
+	dragging: "opacity-40"
+};
+function Board(props) {
+	const [local] = splitProps(props, [
+		"columns",
+		"items",
+		"itemId",
+		"itemColumn",
+		"canDrop",
+		"onMove",
+		"children",
+		"emptyColumn",
+		"label",
+		"class"
+	]);
+	const [dragging, setDragging] = createSignal(null);
+	const [overColumn, setOverColumn] = createSignal(null);
+	const [announcement, setAnnouncement] = createSignal("");
+	const byColumn = createMemo(() => {
+		const grouped = /* @__PURE__ */ new Map();
+		for (const column of local.columns) grouped.set(column.id, []);
+		for (const item of local.items) grouped.get(local.itemColumn(item))?.push(item);
+		return grouped;
+	});
+	const accepts = (column) => {
+		const item = dragging();
+		return Boolean(item && !column.disabled && local.canDrop(item, local.itemColumn(item), column.id));
+	};
+	const drop = (column) => {
+		const item = dragging();
+		const from = item ? local.itemColumn(item) : null;
+		setDragging(null);
+		setOverColumn(null);
+		if (!item || !from || from === column.id || !accepts(column)) return;
+		local.onMove({
+			itemId: local.itemId(item),
+			from,
+			to: column.id
+		});
+	};
+	/**
+	* Keyboard move. `Ctrl`/`Cmd` plus an arrow is the convention for "reorder this
+	* thing within its container" that does not collide with scrolling or with the
+	* text caret, and it is the same chord a browser tab or a spreadsheet uses.
+	*/
+	const moveByKeyboard = (item, direction) => {
+		const from = local.itemColumn(item);
+		const index = local.columns.findIndex((column) => column.id === from);
+		const candidates = local.columns.slice(index + direction);
+		const target = (direction === 1 ? candidates : candidates.toReversed()).find((column) => !column.disabled && local.canDrop(item, from, column.id));
+		if (!target) {
+			setAnnouncement(`No column after ${from} accepts this item`);
+			return;
+		}
+		local.onMove({
+			itemId: local.itemId(item),
+			from,
+			to: target.id
+		});
+		setAnnouncement(`Moved to ${target.label}`);
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		insert(_el$, createComponent(For, {
+			get each() {
+				return local.columns;
+			},
+			children: (column) => {
+				const items = () => byColumn().get(column.id) ?? [];
+				return (() => {
+					var _el$3 = _tmpl$4(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$7 = _el$4.nextSibling;
+					_el$3.addEventListener("drop", (event) => {
+						event.preventDefault();
+						drop(column);
+					});
+					_el$3.addEventListener("dragleave", () => setOverColumn((current) => current === column.id ? null : current));
+					_el$3.addEventListener("dragover", (event) => {
+						setOverColumn(column.id);
+						if (accepts(column)) event.preventDefault();
+					});
+					insert(_el$5, () => column.label);
+					insert(_el$4, createComponent(Show, {
+						get when() {
+							return column.meta;
+						},
+						get children() {
+							var _el$6 = _tmpl$2();
+							insert(_el$6, () => column.meta);
+							return _el$6;
+						}
+					}), null);
+					insert(_el$7, createComponent(For, {
+						get each() {
+							return items();
+						},
+						children: (item) => {
+							const isDragging = () => {
+								const current = dragging();
+								return Boolean(current && local.itemId(current) === local.itemId(item));
+							};
+							return (() => {
+								var _el$9 = _tmpl$5();
+								_el$9.$$keydown = (event) => {
+									if (!(event.ctrlKey || event.metaKey)) return;
+									if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+									event.preventDefault();
+									moveByKeyboard(item, event.key === "ArrowRight" ? 1 : -1);
+								};
+								_el$9.addEventListener("dragend", () => {
+									setDragging(null);
+									setOverColumn(null);
+								});
+								_el$9.addEventListener("dragstart", () => setDragging(() => item));
+								setAttribute(_el$9, "draggable", true);
+								insert(_el$9, () => local.children(item, { dragging: isDragging() }));
+								effect(() => className(_el$9, cn("rounded-md border border-border bg-card text-sm shadow-xs", cardDragState[isDragging() ? "dragging" : "idle"])));
+								return _el$9;
+							})();
+						}
+					}), null);
+					insert(_el$7, createComponent(Show, {
+						get when() {
+							return items().length === 0;
+						},
+						get children() {
+							var _el$8 = _tmpl$3();
+							insert(_el$8, () => local.emptyColumn?.(column) ?? "Nothing here");
+							return _el$8;
+						}
+					}), null);
+					effect((_p$) => {
+						var _v$3 = cn("flex w-72 shrink-0 flex-col gap-2 rounded-lg border border-border bg-muted/40 p-2", accepts(column) && "border-ring bg-muted", overColumn() === column.id && !accepts(column) && "border-dashed opacity-60", column.disabled && "opacity-50"), _v$4 = column.label;
+						_v$3 !== _p$.e && className(_el$3, _p$.e = _v$3);
+						_v$4 !== _p$.t && setAttribute(_el$3, "aria-label", _p$.t = _v$4);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					return _el$3;
+				})();
+			}
+		}), _el$2);
+		insert(_el$2, announcement);
+		effect((_p$) => {
+			var _v$ = cn("flex min-h-0 gap-4 overflow-x-auto pb-2", local.class), _v$2 = local.label ?? "Board";
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+}
+var boardCardTitleVariants = cva("truncate font-medium text-foreground", {
+	variants: { size: {
+		sm: "text-xs",
+		md: "text-sm"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** The card's title line, at the size a board card uses. */
+function BoardCardTitle(props) {
+	return (() => {
+		var _el$0 = _tmpl$6();
+		insert(_el$0, () => props.children);
+		effect(() => className(_el$0, cn(boardCardTitleVariants({ size: props.size }), props.class)));
+		return _el$0;
+	})();
+}
+/** A card's padding, so every card in an application is the same shape. */
+function BoardCardBody(props) {
+	return (() => {
+		var _el$1 = _tmpl$7();
+		insert(_el$1, () => props.children);
+		effect(() => className(_el$1, cn("grid gap-1.5 p-2.5", props.class)));
+		return _el$1;
+	})();
+}
+delegateEvents(["keydown"]);
+//#endregion
+export { Board, BoardCardBody, BoardCardTitle, boardCardTitleVariants };
+
+//# sourceMappingURL=board.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"board.js","names":["createMemo","createSignal","For","Show","splitProps","JSX","cva","VariantProps","cn","BoardColumn","Readonly","id","label","meta","Element","disabled","BoardMove","itemId","from","to","BoardProps","columns","items","T","item","itemColumn","canDrop","onMove","move","children","state","dragging","emptyColumn","column","class","cardDragState","idle","const","Board","props","local","setDragging","overColumn","setOverColumn","announcement","setAnnouncement","byColumn","grouped","Map","set","get","push","accepts","Boolean","drop","moveByKeyboard","direction","index","findIndex","candidates","slice","ordered","toReversed","target","find","_el$","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","each","_el$3","_tmpl$4","_el$4","_el$5","_el$7","nextSibling","addEventListener","event","preventDefault","current","when","_el$6","_tmpl$2","isDragging","_el$9","_tmpl$5","$$keydown","ctrlKey","metaKey","key","_$setAttribute","_$effect","_$className","length","_el$8","_tmpl$3","_p$","_v$3","_v$4","e","t","undefined","_v$","_v$2","boardCardTitleVariants","variants","size","sm","md","defaultVariants","BoardCardTitleProps","BoardCardTitle","_el$0","_tmpl$6","BoardCardBody","_el$1","_tmpl$7","_$delegateEvents","_$createComponent","_$className","_$setAttribute","_$delegateEvents"],"sources":["../../../../src/components/ui/board/board.tsx"],"sourcesContent":["import { createMemo, createSignal, For, Show, splitProps, type JSX } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Board.\n *\n * Columns of cards, with drag between them — the shape a task tracker, a CRM\n * pipeline, a support queue and a release plan all share. It is generic in the\n * one place that matters: the *column ids are the caller's*, and so is the rule\n * that decides which moves are legal. The component knows nothing about tasks.\n *\n * The transitions are a predicate rather than a derived table because the legal\n * moves in a real product are not \"any column to any column\". A task that is\n * `completed` may be archived but not re-queued; a lead may become a customer but\n * not a stranger again. A board that let you drop anything anywhere would encode\n * a state machine in the UI that the server rejects — so `canDrop` is required,\n * and a column that cannot receive the dragged card renders as unavailable rather\n * than silently accepting a drop that will fail.\n *\n * Three input methods, because a drag-only board is unusable by keyboard:\n * dragging with the pointer, `Ctrl`/`Cmd` + arrow keys to move a focused card\n * between columns, and whatever the caller wires into `actions`. The card is\n * focusable and its move is announced through a live region, so the board is\n * operable without a mouse.\n *\n * The card is rendered by the caller through `children`, given the item and a set\n * of drag props. That is deliberate: a card's contents are domain — a title, a\n * priority tag, an assignee — and a board that rendered them itself could only\n * ever serve one product.\n */\n\nexport type BoardColumn = Readonly<{\n  id: string\n  label: string\n  /** A count or a limit, shown beside the label. */\n  meta?: JSX.Element\n  /** Dim the column and refuse drops — a lane that is closed or read-only. */\n  disabled?: boolean\n}>\n\nexport type BoardMove = Readonly<{\n  itemId: string\n  from: string\n  to: string\n}>\n\nexport type BoardProps<T> = {\n  columns: readonly BoardColumn[]\n  items: readonly T[]\n  /** The item's stable id. */\n  itemId: (item: T) => string\n  /** The id of the column the item currently sits in. */\n  itemColumn: (item: T) => string\n  /** Whether `item` may move from `from` to `to`. Required: see the note above. */\n  canDrop: (item: T, from: string, to: string) => boolean\n  onMove: (move: BoardMove) => void\n  /** The card body. `dragging` is true while this card is the one being dragged. */\n  children: (item: T, state: { dragging: boolean }) => JSX.Element\n  /** Shown when a column has no items. */\n  emptyColumn?: (column: BoardColumn) => JSX.Element\n  /** The board's accessible name. Defaults to \"Board\". */\n  label?: string\n  class?: string\n}\n\nconst cardDragState = {\n  idle: '',\n  dragging: 'opacity-40',\n} as const\n\nexport function Board<T>(props: BoardProps<T>) {\n  const [local] = splitProps(props, [\n    'columns',\n    'items',\n    'itemId',\n    'itemColumn',\n    'canDrop',\n    'onMove',\n    'children',\n    'emptyColumn',\n    'label',\n    'class',\n  ])\n\n  // The dragged item, not its id: `canDrop` takes the item itself, and the\n  // pointer may leave the card before it is dropped.\n  const [dragging, setDragging] = createSignal<T | null>(null)\n  const [overColumn, setOverColumn] = createSignal<string | null>(null)\n  const [announcement, setAnnouncement] = createSignal('')\n\n  const byColumn = createMemo(() => {\n    const grouped = new Map<string, T[]>()\n    for (const column of local.columns) grouped.set(column.id, [])\n    for (const item of local.items) grouped.get(local.itemColumn(item))?.push(item)\n    return grouped\n  })\n\n  const accepts = (column: BoardColumn) => {\n    const item = dragging()\n    return Boolean(\n      item && !column.disabled && local.canDrop(item, local.itemColumn(item), column.id)\n    )\n  }\n\n  const drop = (column: BoardColumn) => {\n    const item = dragging()\n    const from = item ? local.itemColumn(item) : null\n    setDragging(null)\n    setOverColumn(null)\n    if (!item || !from || from === column.id || !accepts(column)) return\n    local.onMove({ itemId: local.itemId(item), from, to: column.id })\n  }\n\n  /**\n   * Keyboard move. `Ctrl`/`Cmd` plus an arrow is the convention for \"reorder this\n   * thing within its container\" that does not collide with scrolling or with the\n   * text caret, and it is the same chord a browser tab or a spreadsheet uses.\n   */\n  const moveByKeyboard = (item: T, direction: -1 | 1) => {\n    const from = local.itemColumn(item)\n    const index = local.columns.findIndex((column) => column.id === from)\n    const candidates = local.columns.slice(index + direction)\n    const ordered = direction === 1 ? candidates : candidates.toReversed()\n    const target = ordered.find(\n      (column) => !column.disabled && local.canDrop(item, from, column.id)\n    )\n    if (!target) {\n      setAnnouncement(`No column after ${from} accepts this item`)\n      return\n    }\n    local.onMove({ itemId: local.itemId(item), from, to: target.id })\n    setAnnouncement(`Moved to ${target.label}`)\n  }\n\n  return (\n    /*\n      `role=\"region\"` + `tabindex=\"0\"` because the board scrolls horizontally and a\n      keyboard user has to be able to scroll it — axe's `scrollable-region-focusable`.\n      It is not enough that the cards are focusable: a board with empty columns, or\n      with more columns than fit, has nothing focusable to scroll from.\n    */\n    <div\n      class={cn('flex min-h-0 gap-4 overflow-x-auto pb-2', local.class)}\n      role=\"region\"\n      aria-label={local.label ?? 'Board'}\n      tabindex=\"0\"\n    >\n      <For each={local.columns}>\n        {(column) => {\n          const items = () => byColumn().get(column.id) ?? []\n          return (\n            <section\n              class={cn(\n                'flex w-72 shrink-0 flex-col gap-2 rounded-lg border border-border bg-muted/40 p-2',\n                accepts(column) && 'border-ring bg-muted',\n                overColumn() === column.id && !accepts(column) && 'border-dashed opacity-60',\n                column.disabled && 'opacity-50'\n              )}\n              aria-label={column.label}\n              onDragOver={(event) => {\n                setOverColumn(column.id)\n                if (accepts(column)) event.preventDefault()\n              }}\n              onDragLeave={() =>\n                setOverColumn((current) => (current === column.id ? null : current))\n              }\n              onDrop={(event) => {\n                event.preventDefault()\n                drop(column)\n              }}\n            >\n              <header class=\"flex items-center justify-between gap-2 px-1 py-0.5\">\n                <h3 class=\"text-xs font-semibold text-foreground\">{column.label}</h3>\n                <Show when={column.meta}>\n                  <span class=\"text-2xs text-muted-foreground\">{column.meta}</span>\n                </Show>\n              </header>\n              <div class=\"flex min-h-16 flex-col gap-2\">\n                <For each={items()}>\n                  {(item) => {\n                    const isDragging = () => {\n                      const current = dragging()\n                      return Boolean(current && local.itemId(current) === local.itemId(item))\n                    }\n                    return (\n                      <article\n                        class={cn(\n                          'rounded-md border border-border bg-card text-sm shadow-xs',\n                          cardDragState[isDragging() ? 'dragging' : 'idle']\n                        )}\n                        // A board card is a control that can be moved, so it is\n                        // focusable and carries the chord it responds to.\n                        tabindex=\"0\"\n                        aria-roledescription=\"Draggable card\"\n                        draggable={true}\n                        onDragStart={() => setDragging(() => item)}\n                        onDragEnd={() => {\n                          setDragging(null)\n                          setOverColumn(null)\n                        }}\n                        onKeyDown={(event) => {\n                          if (!(event.ctrlKey || event.metaKey)) return\n                          if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return\n                          event.preventDefault()\n                          moveByKeyboard(item, event.key === 'ArrowRight' ? 1 : -1)\n                        }}\n                      >\n                        {local.children(item, { dragging: isDragging() })}\n                      </article>\n                    )\n                  }}\n                </For>\n                <Show when={items().length === 0}>\n                  <p class=\"rounded-md border border-dashed border-border px-2 py-4 text-center text-2xs text-muted-foreground\">\n                    {local.emptyColumn?.(column) ?? 'Nothing here'}\n                  </p>\n                </Show>\n              </div>\n            </section>\n          )\n        }}\n      </For>\n      {/*\n        The keyboard move's result, announced. A drag speaks for itself — the card\n        visibly moves — while a keyboard move happens with the focus elsewhere.\n      */}\n      <div class=\"visually-hidden\" role=\"status\" aria-live=\"polite\">\n        {announcement()}\n      </div>\n    </div>\n  )\n}\n\nexport const boardCardTitleVariants = cva('truncate font-medium text-foreground', {\n  variants: { size: { sm: 'text-xs', md: 'text-sm' } },\n  defaultVariants: { size: 'md' },\n})\n\nexport type BoardCardTitleProps = { class?: string; children: JSX.Element } & VariantProps<\n  typeof boardCardTitleVariants\n>\n\n/** The card's title line, at the size a board card uses. */\nexport function BoardCardTitle(props: BoardCardTitleProps) {\n  return (\n    <h4 class={cn(boardCardTitleVariants({ size: props.size }), props.class)}>{props.children}</h4>\n  )\n}\n\n/** A card's padding, so every card in an application is the same shape. */\nexport function BoardCardBody(props: { class?: string; children: JSX.Element }) {\n  return <div class={cn('grid gap-1.5 p-2.5', props.class)}>{props.children}</div>\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { Board, BoardCardBody, BoardCardTitle, boardCardTitleVariants, type BoardCardTitleProps, type BoardColumn, type BoardMove, type BoardProps, } from './board';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/board/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,UAAU,GAChB,MAAM,SAAS,CAAA"}

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

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * Breadcrumb.
+ *
+ * The path to the current view, in a real `<nav>` wrapping an ordered list so
+ * the structure is announced rather than read as loose text. The final crumb is
+ * the current page and is marked `aria-current="page"` instead of being a link
+ * to itself.
+ *
+ * A long path collapses from the middle: the root says where the user started
+ * and the last crumbs say what they are looking at, so those are the parts that
+ * have to survive.
+ */
+export declare function Breadcrumb(props: ComponentProps<'nav'>): import("solid-js").JSX.Element;
+export declare function BreadcrumbList(props: ComponentProps<'ol'>): import("solid-js").JSX.Element;
+export declare function BreadcrumbItem(props: ComponentProps<'li'>): import("solid-js").JSX.Element;
+export type BreadcrumbLinkProps = ComponentProps<'a'> & {
+    /** Render as the current page rather than as a link. */
+    current?: boolean;
+};
+export declare function BreadcrumbLink(props: BreadcrumbLinkProps): import("solid-js").JSX.Element;
+export declare function BreadcrumbSeparator(props: ComponentProps<'li'>): import("solid-js").JSX.Element;
+export declare function BreadcrumbEllipsis(props: ComponentProps<'span'>): import("solid-js").JSX.Element;
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAWtD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,kCASzD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,kCASzD;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG;IACtD,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,kCA0BxD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,kCAc9D;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAe/D"}

package/dist/components/ui/breadcrumb/breadcrumb.js

@@ -0,0 +1,109 @@
+import { cn } from "../../../lib/utils.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { ChevronRight, MoreHorizontal } from "lucide-solid";
+import { Show, splitProps } from "solid-js";
+//#region src/components/ui/breadcrumb/breadcrumb.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<nav data-slot=breadcrumb>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<ol data-slot=breadcrumb-list>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<li data-slot=breadcrumb-item>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<a data-slot=breadcrumb-link>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span data-slot=breadcrumb-page aria-current=page>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<li data-slot=breadcrumb-separator role=presentation aria-hidden=true>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<span data-slot=breadcrumb-ellipsis role=presentation aria-hidden=true><span class=visually-hidden>More`);
+/**
+* Breadcrumb.
+*
+* The path to the current view, in a real `<nav>` wrapping an ordered list so
+* the structure is announced rather than read as loose text. The final crumb is
+* the current page and is marked `aria-current="page"` instead of being a link
+* to itself.
+*
+* A long path collapses from the middle: the root says where the user started
+* and the last crumbs say what they are looking at, so those are the parts that
+* have to survive.
+*/
+function Breadcrumb(props) {
+	const [local, rest] = splitProps(props, ["class", "aria-label"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({
+			get ["aria-label"]() {
+				return local["aria-label"] ?? "Breadcrumb";
+			},
+			get ["class"]() {
+				return cn("text-muted-foreground", local.class);
+			}
+		}, rest), false, false);
+		return _el$;
+	})();
+}
+function BreadcrumbList(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("flex flex-wrap items-center gap-1.5 text-sm break-words", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
+}
+function BreadcrumbItem(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("inline-flex items-center gap-1.5", local.class);
+		} }, rest), false, false);
+		return _el$3;
+	})();
+}
+function BreadcrumbLink(props) {
+	const [local, rest] = splitProps(props, ["class", "current"]);
+	return createComponent(Show, {
+		get when() {
+			return !local.current;
+		},
+		get fallback() {
+			return (() => {
+				var _el$5 = _tmpl$5();
+				spread(_el$5, mergeProps({ get ["class"]() {
+					return cn("font-medium text-foreground", local.class);
+				} }, rest), false, false);
+				return _el$5;
+			})();
+		},
+		get children() {
+			var _el$4 = _tmpl$4();
+			spread(_el$4, mergeProps({ get ["class"]() {
+				return cn("rounded-sm transition-colors ease-out outline-none hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", local.class);
+			} }, rest), false, false);
+			return _el$4;
+		}
+	});
+}
+function BreadcrumbSeparator(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$6 = _tmpl$6();
+		spread(_el$6, mergeProps({ get ["class"]() {
+			return cn("[&_svg]:size-3.5", local.class);
+		} }, rest), false, true);
+		insert(_el$6, () => local.children ?? createComponent(ChevronRight, {}));
+		return _el$6;
+	})();
+}
+function BreadcrumbEllipsis(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$7 = _tmpl$7(), _el$8 = _el$7.firstChild;
+		spread(_el$7, mergeProps({ get ["class"]() {
+			return cn("flex size-6 items-center justify-center", local.class);
+		} }, rest), false, true);
+		insert(_el$7, createComponent(MoreHorizontal, { "class": "size-4" }), _el$8);
+		return _el$7;
+	})();
+}
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator };
+
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","names":["ChevronRight","MoreHorizontal","ComponentProps","Show","splitProps","cn","Breadcrumb","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","aria-label","class","BreadcrumbList","_el$2","_tmpl$2","BreadcrumbItem","_el$3","_tmpl$3","BreadcrumbLinkProps","current","BreadcrumbLink","_$createComponent","when","fallback","_el$5","_tmpl$5","children","_el$4","_tmpl$4","BreadcrumbSeparator","_el$6","_tmpl$6","_$insert","BreadcrumbEllipsis","_el$7","_tmpl$7","_el$8","firstChild","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/ui/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRight, MoreHorizontal } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Breadcrumb.\n *\n * The path to the current view, in a real `<nav>` wrapping an ordered list so\n * the structure is announced rather than read as loose text. The final crumb is\n * the current page and is marked `aria-current=\"page\"` instead of being a link\n * to itself.\n *\n * A long path collapses from the middle: the root says where the user started\n * and the last crumbs say what they are looking at, so those are the parts that\n * have to survive.\n */\nexport function Breadcrumb(props: ComponentProps<'nav'>) {\n  const [local, rest] = splitProps(props, ['class', 'aria-label'])\n\n  return (\n    <nav\n      data-slot=\"breadcrumb\"\n      aria-label={local['aria-label'] ?? 'Breadcrumb'}\n      class={cn('text-muted-foreground', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function BreadcrumbList(props: ComponentProps<'ol'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      class={cn('flex flex-wrap items-center gap-1.5 text-sm break-words', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function BreadcrumbItem(props: ComponentProps<'li'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      class={cn('inline-flex items-center gap-1.5', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type BreadcrumbLinkProps = ComponentProps<'a'> & {\n  /** Render as the current page rather than as a link. */\n  current?: boolean\n}\n\nexport function BreadcrumbLink(props: BreadcrumbLinkProps) {\n  const [local, rest] = splitProps(props, ['class', 'current'])\n\n  return (\n    <Show\n      when={!local.current}\n      fallback={\n        <span\n          data-slot=\"breadcrumb-page\"\n          aria-current=\"page\"\n          class={cn('font-medium text-foreground', local.class)}\n          {...(rest as ComponentProps<'span'>)}\n        />\n      }\n    >\n      <a\n        data-slot=\"breadcrumb-link\"\n        class={cn(\n          'rounded-sm transition-colors ease-out outline-none hover:text-foreground',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          local.class\n        )}\n        {...rest}\n      />\n    </Show>\n  )\n}\n\nexport function BreadcrumbSeparator(props: ComponentProps<'li'>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      class={cn('[&_svg]:size-3.5', local.class)}\n      {...rest}\n    >\n      {local.children ?? <ChevronRight />}\n    </li>\n  )\n}\n\nexport function BreadcrumbEllipsis(props: ComponentProps<'span'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      class={cn('flex size-6 items-center justify-center', local.class)}\n      {...rest}\n    >\n      <MoreHorizontal class=\"size-4\" />\n      <span class=\"visually-hidden\">More</span>\n    </span>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, type BreadcrumbLinkProps, } from './breadcrumb';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,KAAK,mBAAmB,GACzB,MAAM,cAAc,CAAA"}

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

@@ -0,0 +1,30 @@
+import { type PolymorphicProps } from '@kobalte/core/polymorphic';
+import { type ValidComponent } from 'solid-js';
+import { type VariantProps } from '#lib/variants';
+/**
+ * Button.
+ *
+ * One appearance ladder shared by every pressable thing in the system: a
+ * button, a toolbar control, a dialog action, and a menu row all draw from the
+ * same tokens, so a row of them cannot drift apart.
+ *
+ * The variants answer "what is this for", never "what colour is it". A caller
+ * that wants a red button writes `variant="destructive"`; the red lives here.
+ * That is also what lets the design-system linter tell a caller which variant
+ * to use instead of only which class was wrong.
+ *
+ * Polymorphic: pass `as="a"` (or any component) and the button becomes it
+ * while keeping the same styling contract. This replaces the React-era
+ * `asChild` primitive, which has no Solid equivalent that preserves props.
+ */
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "success" | "secondary" | "outline" | "subtle" | "ghost" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "icon-2xs" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+export type ButtonProps<T extends ValidComponent = 'button'> = PolymorphicProps<T, ButtonVariantProps & {
+    class?: string;
+}>;
+export declare function Button<T extends ValidComponent = 'button'>(props: ButtonProps<T>): import("solid-js").JSX.Element;
+export {};
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAwC,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGvF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc;;;8EA6C1B,CAAA;AAED,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA;AAE7D,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,IAAI,gBAAgB,CAC7E,CAAC,EACD,kBAAkB,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,MAAM,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,kCAWhF"}

package/dist/components/ui/button/button.js

@@ -0,0 +1,80 @@
+import { cn } from "../../../lib/utils.js";
+import { controlInteractive, controlSize, cva } from "../../../lib/variants.js";
+import { createComponent, mergeProps } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { Polymorphic } from "@kobalte/core/polymorphic";
+//#region src/components/ui/button/button.tsx
+/**
+* Button.
+*
+* One appearance ladder shared by every pressable thing in the system: a
+* button, a toolbar control, a dialog action, and a menu row all draw from the
+* same tokens, so a row of them cannot drift apart.
+*
+* The variants answer "what is this for", never "what colour is it". A caller
+* that wants a red button writes `variant="destructive"`; the red lives here.
+* That is also what lets the design-system linter tell a caller which variant
+* to use instead of only which class was wrong.
+*
+* Polymorphic: pass `as="a"` (or any component) and the button becomes it
+* while keeping the same styling contract. This replaces the React-era
+* `asChild` primitive, which has no Solid equivalent that preserves props.
+*/
+var buttonVariants = cva(`${controlInteractive} inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap select-none [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
+	variants: {
+		variant: {
+			/** The one primary action in a view. */
+			default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-surface-hover",
+			/** For the action that destroys something. Never the default. */
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive-subtle",
+			/** A bordered button for a surface that already has a fill. */
+			outline: "border border-border bg-transparent text-foreground hover:bg-surface-hover hover:border-input",
+			/** No chrome until hover. The default for toolbar and row actions. */
+			ghost: "text-foreground hover:bg-surface-hover",
+			/** A tinted primary, for a secondary action inside a primary flow. */
+			subtle: "bg-primary-subtle text-primary hover:bg-primary-subtle/80",
+			success: "bg-success text-success-foreground hover:bg-success/90",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			"2xs": `${controlSize["2xs"]} [&_svg]:size-3`,
+			xs: `${controlSize.xs} [&_svg]:size-3.5`,
+			sm: `${controlSize.sm} [&_svg]:size-3.5`,
+			md: `${controlSize.md} [&_svg]:size-4`,
+			lg: `${controlSize.lg} [&_svg]:size-4`,
+			xl: `${controlSize.xl} [&_svg]:size-5`,
+			"icon-2xs": "size-control-2xs p-0 [&_svg]:size-3",
+			"icon-xs": "size-control-xs p-0 [&_svg]:size-3.5",
+			"icon-sm": "size-control-sm p-0 [&_svg]:size-3.5",
+			"icon-md": "size-control-md p-0 [&_svg]:size-4",
+			"icon-lg": "size-control-lg p-0 [&_svg]:size-4",
+			"icon-xl": "size-control-xl p-0 [&_svg]:size-5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+function Button(props) {
+	const [local, rest] = splitProps(props, [
+		"variant",
+		"size",
+		"class"
+	]);
+	return createComponent(Polymorphic, mergeProps({
+		as: "button",
+		type: "button",
+		get ["class"]() {
+			return cn(buttonVariants({
+				variant: local.variant,
+				size: local.size
+			}), local.class);
+		}
+	}, rest));
+}
+//#endregion
+export { Button, buttonVariants };
+
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["Polymorphic","PolymorphicProps","ComponentProps","splitProps","ValidComponent","cva","controlInteractive","controlSize","VariantProps","cn","buttonVariants","variants","variant","default","secondary","destructive","outline","ghost","subtle","success","link","size","xs","sm","md","lg","xl","defaultVariants","ButtonVariantProps","ButtonProps","T","class","Button","props","local","rest","_$createComponent","_$mergeProps","as","type","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/button/button.tsx"],"sourcesContent":["import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'\nimport { cva, controlInteractive, controlSize, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Button.\n *\n * One appearance ladder shared by every pressable thing in the system: a\n * button, a toolbar control, a dialog action, and a menu row all draw from the\n * same tokens, so a row of them cannot drift apart.\n *\n * The variants answer \"what is this for\", never \"what colour is it\". A caller\n * that wants a red button writes `variant=\"destructive\"`; the red lives here.\n * That is also what lets the design-system linter tell a caller which variant\n * to use instead of only which class was wrong.\n *\n * Polymorphic: pass `as=\"a\"` (or any component) and the button becomes it\n * while keeping the same styling contract. This replaces the React-era\n * `asChild` primitive, which has no Solid equivalent that preserves props.\n */\nexport const buttonVariants = cva(\n  `${controlInteractive} inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap select-none [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        /** The one primary action in a view. */\n        default: 'bg-primary text-primary-foreground hover:bg-primary-hover',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-surface-hover',\n        /** For the action that destroys something. Never the default. */\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive-subtle',\n        /** A bordered button for a surface that already has a fill. */\n        outline:\n          'border border-border bg-transparent text-foreground hover:bg-surface-hover hover:border-input',\n        /** No chrome until hover. The default for toolbar and row actions. */\n        ghost: 'text-foreground hover:bg-surface-hover',\n        /** A tinted primary, for a secondary action inside a primary flow. */\n        subtle: 'bg-primary-subtle text-primary hover:bg-primary-subtle/80',\n        success: 'bg-success text-success-foreground hover:bg-success/90',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        '2xs': `${controlSize['2xs']} [&_svg]:size-3`,\n        xs: `${controlSize.xs} [&_svg]:size-3.5`,\n        sm: `${controlSize.sm} [&_svg]:size-3.5`,\n        md: `${controlSize.md} [&_svg]:size-4`,\n        lg: `${controlSize.lg} [&_svg]:size-4`,\n        xl: `${controlSize.xl} [&_svg]:size-5`,\n        /* Square, for an icon with no label. The accessible name then has to\n           come from `aria-label` or a visually hidden label — an icon-only\n           button with neither is the accessibility finding the Storybook lane\n           catches on every story. */\n        'icon-2xs': 'size-control-2xs p-0 [&_svg]:size-3',\n        'icon-xs': 'size-control-xs p-0 [&_svg]:size-3.5',\n        'icon-sm': 'size-control-sm p-0 [&_svg]:size-3.5',\n        'icon-md': 'size-control-md p-0 [&_svg]:size-4',\n        'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',\n        'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  }\n)\n\ntype ButtonVariantProps = VariantProps<typeof buttonVariants>\n\nexport type ButtonProps<T extends ValidComponent = 'button'> = PolymorphicProps<\n  T,\n  ButtonVariantProps & {\n    class?: string\n  }\n>\n\nexport function Button<T extends ValidComponent = 'button'>(props: ButtonProps<T>) {\n  const [local, rest] = splitProps(props as ButtonProps, ['variant', 'size', 'class'])\n\n  return (\n    <Polymorphic\n      as=\"button\"\n      type=\"button\"\n      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...(rest as ComponentProps<'button'>)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAaU,iBAAiBL,IAC5B,GAAGC,mBAAkB,sJACrB;CACEK,UAAU;EACRC,SAAS;;GAEPC,SAAS;GACTC,WAAW;;GAEXC,aACE;;GAEFC,SACE;;GAEFC,OAAO;;GAEPC,QAAQ;GACRC,SAAS;GACTC,MAAM;EACR;EACAC,MAAM;GACJ,OAAO,GAAGd,YAAY,OAAM;GAC5Be,IAAI,GAAGf,YAAYe,GAAE;GACrBC,IAAI,GAAGhB,YAAYgB,GAAE;GACrBC,IAAI,GAAGjB,YAAYiB,GAAE;GACrBC,IAAI,GAAGlB,YAAYkB,GAAE;GACrBC,IAAI,GAAGnB,YAAYmB,GAAE;GAKrB,YAAY;GACZ,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;EACb;CACF;CACAC,iBAAiB;EACff,SAAS;EACTS,MAAM;CACR;AACF,CACF;AAWA,SAAgBW,OAA4CC,OAAuB;CACjF,MAAM,CAACC,OAAOC,QAAQhC,WAAW8B,OAAsB;EAAC;EAAW;EAAQ;CAAO,CAAC;CAEnF,OAAAG,gBACGpC,aAAWqC,WAAA;EACVC,IAAE;EACFC,MAAI;EAAA,KAAA,WAAA;GAAA,OACG9B,GAAGC,eAAe;IAAEE,SAASsB,MAAMtB;IAASS,MAAMa,MAAMb;GAAK,CAAC,GAAGa,MAAMH,KAAK;EAAC;CAAA,GAC/EI,IAAgC,CAAA;AAG3C"}

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

@@ -0,0 +1,2 @@
+export { Button, buttonVariants, type ButtonProps } from './button';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA"}

package/dist/components/ui/button-group/button-group.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps } from 'solid-js';
+import { Separator } from '../separator/separator';
+/**
+ * ButtonGroup.
+ *
+ * Several controls acting as one. The point is the *join*: the items share a
+ * border, collapse the seam between them, and round only at the ends, so a row of
+ * buttons reads as a single object with segments rather than as buttons that happen
+ * to be adjacent.
+ *
+ * The joining lives on the group, through child selectors, so an item never has to
+ * know whether it sits at an end — which is also where the border collapse belongs.
+ * A caller composing a group out of `Button`, `Select` and `InputGroup` therefore
+ * gets the same treatment without those components knowing about it.
+ *
+ * The group is a `role="group"` with a label, because a screen reader announcing
+ * four unrelated buttons where the sighted user sees one control is the failure
+ * this prevents.
+ */
+export type ButtonGroupProps = ComponentProps<'div'> & {
+    /** The group's accessible name. Required: a group with no name is announced as loose buttons. */
+    label: string;
+    orientation?: 'horizontal' | 'vertical';
+};
+export declare function ButtonGroup(props: ButtonGroupProps): import("solid-js").JSX.Element;
+/**
+ * A separator inside a group. `orientation` follows the group: a vertical rule in a
+ * horizontal group, and the reverse.
+ */
+export declare function ButtonGroupSeparator(props: ComponentProps<typeof Separator> & {
+    orientation?: 'horizontal' | 'vertical';
+}): import("solid-js").JSX.Element;
+/**
+ * Static text in a group — a unit, a label, a readout that is not a control. It
+ * takes the group's border and height so it sits in the row as a peer, but it is
+ * not focusable and does not pretend to be.
+ */
+export declare function ButtonGroupText(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+//# sourceMappingURL=button-group.d.ts.map

package/dist/components/ui/button-group/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button-group/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAG9C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAElD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrD,iGAAiG;IACjG,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CACxC,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAyBlD;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CAAE,kCAWtF;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAa3D"}