@zentauri-ui/zentauri-components 1.4.6 → 1.4.41

package/dist/ui/typography.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/ui/typography/variants.ts","../../src/ui/typography/heading-base.tsx","../../src/ui/typography/heading.tsx","../../src/ui/typography/text-base.tsx","../../src/ui/typography/text.tsx","../../src/ui/typography/list-base.tsx","../../src/ui/typography/list.tsx","../../src/ui/typography/blockquote-base.tsx","../../src/ui/typography/blockquote.tsx","../../src/ui/typography/inline-code-base.tsx","../../src/ui/typography/inline-code.tsx","../../src/ui/typography/code-block-base.tsx","../../src/ui/typography/code-block.tsx"],"names":["jsx","tone","className","children","ref","ordered","marker","rest"],"mappings":"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","file":"typography.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/** Semantic text colors aligned with slate/cyan/violet accents used across the kit (dark-first). */\nexport const typographyToneVariants = cva(\"\", {\n  variants: {\n    tone: {\n      default: \"text-slate-50 border-white/15\",\n      muted: \"text-slate-400 border-white/15\",\n      primary: \"text-cyan-300 border-cyan-300/40\",\n      secondary: \"text-slate-300 border-white/15\",\n      accent: \"text-violet-300 border-violet-300/40\",\n      destructive: \"text-rose-400 border-rose-300/40\",\n      info: \"text-sky-300 border-sky-300/40\",\n      success: \"text-emerald-300 border-emerald-300/40\",\n      warning: \"text-amber-300 border-amber-300/40\",\n      error: \"text-red-300 border-red-300/40\",\n      \"gradient-pink-violet\": \"bg-linear-to-r from-pink-400 to-violet-400 bg-clip-text text-transparent w-fit\",\n      \"gradient-cyan-violet\": \"bg-linear-to-r from-cyan-400 to-violet-400 bg-clip-text text-transparent w-fit\",\n      \"gradient-cyan-blue\": \"bg-linear-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent w-fit\",\n      \"gradient-cyan-green\": \"bg-linear-to-r from-cyan-400 to-green-400 bg-clip-text text-transparent w-fit\",\n      \"gradient-cyan-orange\": \"bg-linear-to-r from-cyan-400 to-orange-400 bg-clip-text text-transparent w-fit\",\n      \"gradient-cyan-red\": \"bg-linear-to-r from-cyan-400 to-red-400 bg-clip-text text-transparent w-fit\",\n      \"gradient-cyan-purple\": \"bg-linear-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent w-fit\",\n      \"gradient-cyan-pink\": \"bg-linear-to-r from-cyan-400 to-pink-400 bg-clip-text text-transparent w-fit\",\n    },\n  },\n  defaultVariants: {\n    tone: \"default\",\n  },\n});\n\nexport const headingLevelVariants = cva(\"scroll-m-20\", {\n  variants: {\n    level: {\n      1: \"text-4xl font-bold tracking-tight md:text-5xl\",\n      2: \"text-3xl font-semibold tracking-tight\",\n      3: \"text-2xl font-semibold tracking-tight\",\n      4: \"text-xl font-semibold tracking-tight\",\n      5: \"text-lg font-medium\",\n      6: \"text-base font-medium\",\n    },\n  },\n});\n\nexport const textSizeVariants = cva(\"\", {\n  variants: {\n    size: {\n      sm: \"text-sm leading-relaxed\",\n      base: \"text-base leading-relaxed\",\n      lg: \"text-lg leading-relaxed\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n  },\n});\n\n/** Marker style for unordered lists; ignored when `ordered` is true (decimal numbering). */\nexport const unorderedListMarkerVariants = cva(\"space-y-2 pl-5\", {\n  variants: {\n    marker: {\n      disc: \"list-disc\",\n      circle: \"[list-style-type:circle]\",\n      none: \"list-none pl-0\",\n    },\n  },\n  defaultVariants: {\n    marker: \"disc\",\n  },\n});\n\nexport const orderedListVariants = cva(\"list-decimal space-y-2 pl-5\");\n","import { forwardRef } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { HeadingProps } from \"./types\";\nimport {\n  headingLevelVariants,\n  typographyToneVariants,\n} from \"./variants\";\n\nconst HEADING_TAGS = {\n  1: \"h1\",\n  2: \"h2\",\n  3: \"h3\",\n  4: \"h4\",\n  5: \"h5\",\n  6: \"h6\",\n} as const;\n\nexport const HeadingBase = (props: HeadingProps) => {\n    const {\n      level,\n      displayLevel,\n      tone,\n      bold,\n      italic,\n      underline,\n      strikethrough,\n      ref,\n      className,\n      children,\n      ...rest\n    } = props;\n\n    const Tag = HEADING_TAGS[level];\n    const scale = displayLevel ?? level;\n\n    return (\n      <Tag\n        ref={ref}\n        data-slot=\"typography-heading\"\n        data-level={level}\n        className={cn(\n          typographyToneVariants({ tone }),\n          headingLevelVariants({ level: scale }),\n          bold && \"font-bold\",\n          italic && \"italic\",\n          underline && \"underline underline-offset-4\",\n          strikethrough && \"line-through\",\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Tag>\n    );\n};\n\nHeadingBase.displayName = \"Heading\";\n","import { HeadingBase } from \"./heading-base\";\nimport type { HeadingProps } from \"./types\";\n\nexport const Heading = (props: HeadingProps) => {\n  return <HeadingBase {...props} />;\n};\n\nHeading.displayName = \"Heading\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { TextProps } from \"./types\";\nimport { textSizeVariants, typographyToneVariants } from \"./variants\";\n\nexport const TextBase = (props: TextProps) => {\n    const {\n      as = \"p\",\n      size = \"base\",\n      tone,\n      bold,\n      italic,\n      underline,\n      strikethrough,\n      highlight,\n      className,\n      children,\n      ...rest\n    } = props;\n\n    const Component = as;\n\n    return (\n      <Component\n        data-slot=\"typography-text\"\n        className={cn(\n          typographyToneVariants({ tone }),\n          textSizeVariants({ size }),\n          bold && \"font-semibold\",\n          italic && \"italic\",\n          underline && \"underline underline-offset-2\",\n          strikethrough && \"line-through\",\n          highlight && \"rounded bg-amber-400/15 px-0.5\",\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n};\n\nTextBase.displayName = \"Text\";\n","import { TextBase } from \"./text-base\";\nimport type { TextProps } from \"./types\";\n\nexport const Text = (props: TextProps) => {\n  return <TextBase {...props} />;\n};\n\nText.displayName = \"Text\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { ListProps, ListItemProps } from \"./types\";\nimport {\n  orderedListVariants,\n  typographyToneVariants,\n  unorderedListMarkerVariants,\n} from \"./variants\";\n\nexport function ListBase(props: ListProps) {\n  if (\"ordered\" in props && props.ordered === true) {\n    const {\n      tone,\n      className,\n      children,\n      ref,\n      ordered,\n      marker,\n      ...rest\n    } = props;\n\n    void ordered;\n    void marker;\n\n    return (\n      <ol\n        ref={ref}\n        data-slot=\"typography-list\"\n        data-list-type=\"ordered\"\n        className={cn(\n          typographyToneVariants({ tone }),\n          orderedListVariants(),\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </ol>\n    );\n  }\n\n  const {\n    marker = \"disc\",\n    tone,\n    className,\n    children,\n    ref,\n    ordered,\n    ...rest\n  } = props;\n\n  void ordered;\n\n  return (\n    <ul\n      ref={ref}\n      data-slot=\"typography-list\"\n      data-list-type=\"unordered\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        unorderedListMarkerVariants({ marker }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </ul>\n  );\n}\n\nListBase.displayName = \"List\";\n\nexport function ListItemBase(props: ListItemProps) {\n  const { className, children, ref, ...rest } = props;\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"typography-list-item\"\n      className={cn(\"leading-relaxed\", className)}\n      {...rest}\n    >\n      {children}\n    </li>\n  );\n}\n\nListItemBase.displayName = \"ListItem\";\n","import type { ListProps } from \"./types\";\n\nimport { ListBase, ListItemBase } from \"./list-base\";\n\nexport const ListItem = ListItemBase;\n\nfunction ListRoot(props: ListProps) {\n  return <ListBase {...props} />;\n}\n\nexport const List = Object.assign(ListRoot, {\n  Item: ListItem,\n});\n\nListRoot.displayName = \"List\";\n","import { forwardRef } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { BlockquoteProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const BlockquoteBase = (props: BlockquoteProps) => {\n  const {\n    tone,\n    attribution,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  return (\n    <blockquote\n      ref={ref}\n      data-slot=\"typography-blockquote\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        \"border-l-4 py-1 pl-4 italic\",\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"space-y-2 leading-relaxed\">{children}</div>\n      {attribution ? (\n        <footer className=\"mt-3 text-sm not-italic\">\n          <cite>{attribution}</cite>\n        </footer>\n      ) : null}\n    </blockquote>\n  );\n};\n\nBlockquoteBase.displayName = \"Blockquote\";\n","import { BlockquoteBase } from \"./blockquote-base\";\nimport type { BlockquoteProps } from \"./types\";\n\nexport const Blockquote = (props: BlockquoteProps) => {\n  return <BlockquoteBase {...props} />;\n};\n\nBlockquote.displayName = \"Blockquote\";\n","import { forwardRef } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { InlineCodeProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const InlineCodeBase = (props: InlineCodeProps) => {\n    const { tone, className, children, ref, ...rest } = props;\n\n    return (\n      <code\n        ref={ref}\n        data-slot=\"typography-inline-code\"\n        className={cn(\n          typographyToneVariants({ tone }),\n          \"rounded-md border border-white/10 bg-white/6 px-1.5 py-0.5 font-mono text-[0.925em] font-normal\",\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </code>\n    );\n};\n\nInlineCodeBase.displayName = \"InlineCode\";\n","import { InlineCodeBase } from \"./inline-code-base\";\nimport type { InlineCodeProps } from \"./types\";\n\nexport const InlineCode = (props: InlineCodeProps) => {\n  return <InlineCodeBase {...props} />;\n};\n\nInlineCode.displayName = \"InlineCode\";\n","import { forwardRef } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { CodeBlockProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const CodeBlockBase = (props: CodeBlockProps) => {\n    const {\n      tone,\n      language,\n      className,\n      children,\n      ref,\n      ...rest\n    } = props;\n\n    const ariaLabel = language ? `Code sample (${language})` : \"Code sample\";\n\n    return (\n      <pre\n        ref={ref}\n        data-slot=\"typography-code-block\"\n        aria-label={ariaLabel}\n        className={cn(\n          typographyToneVariants({ tone }),\n          \"overflow-x-auto rounded-xl border border-white/10 bg-slate-950/80 p-4 text-sm leading-relaxed shadow-inner shadow-slate-950/40\",\n          className,\n        )}\n        {...rest}\n      >\n        <code className=\"font-mono text-[0.95em]\">{children}</code>\n      </pre>\n    );\n};\n\nCodeBlockBase.displayName = \"CodeBlock\";\n","import { CodeBlockBase } from \"./code-block-base\";\nimport type { CodeBlockProps } from \"./types\";\n\nexport const CodeBlock = (props: CodeBlockProps) => {\n  return <CodeBlockBase {...props} />;\n};\n\nCodeBlock.displayName = \"CodeBlock\";\n"]}

package/src/ui/search/filter-search-suggestions.test.ts

@@ -1,48 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { filterSearchSuggestions } from "./filter-search-suggestions";
-import type { SearchFilterable } from "./types";
-
-const sampleItems: SearchFilterable[] = [
-  { id: "1", label: "Installation", href: "/preview/installation", keywords: ["npm", "setup"] },
-  { id: "2", label: "Modal", href: "/preview/components/modal" },
-  { id: "3", label: "GitHub", href: "https://example.com/repo", keywords: ["github", "source"] },
-];
-
-describe("filterSearchSuggestions", () => {
-  it("returns empty list for whitespace-only query", () => {
-    expect(filterSearchSuggestions({ query: "   ", items: sampleItems })).toEqual([]);
-  });
-
-  it("returns empty list for empty query", () => {
-    expect(filterSearchSuggestions({ query: "", items: sampleItems })).toEqual([]);
-  });
-
-  it("matches label case-insensitively", () => {
-    expect(filterSearchSuggestions({ query: "modal", items: sampleItems })).toEqual([
-      { id: "2", label: "Modal", href: "/preview/components/modal" },
-    ]);
-  });
-
-  it("matches href substring", () => {
-    expect(filterSearchSuggestions({ query: "installation", items: sampleItems })).toEqual([
-      { id: "1", label: "Installation", href: "/preview/installation", keywords: ["npm", "setup"] },
-    ]);
-  });
-
-  it("matches keywords", () => {
-    expect(filterSearchSuggestions({ query: "github", items: sampleItems })).toEqual([
-      { id: "3", label: "GitHub", href: "https://example.com/repo", keywords: ["github", "source"] },
-    ]);
-  });
-
-  it("respects maxResults", () => {
-    const many: SearchFilterable[] = Array.from({ length: 30 }, (_, index) => ({
-      id: `x-${index}`,
-      label: `Item ${index}`,
-      href: `/x/${index}`,
-      keywords: ["alpha"],
-    }));
-    expect(filterSearchSuggestions({ query: "alpha", items: many, options: { maxResults: 5 } })).toHaveLength(5);
-  });
-});

package/src/ui/search/filter-search-suggestions.ts

@@ -1,43 +0,0 @@
-import type { SearchFilterable } from "./types";
-
-export type FilterSearchSuggestionsOptions = {
-  /** Maximum number of matches returned. */
-  maxResults?: number;
-};
-
-/**
- * Returns items whose label, description, href, or keywords contain the query (case-insensitive).
- * Whitespace-only query matches no items.
- */
-export function filterSearchSuggestions<T extends SearchFilterable>({
-  query,
-  items,
-  options = { maxResults: 20 },
-}: {
-  query: string;
-  items: readonly T[];
-  options?: FilterSearchSuggestionsOptions;
-}): T[] {
-  const maxResults = options.maxResults ?? 20;
-  const normalized = query.trim().toLowerCase();
-  if (!normalized) {
-    return [];
-  }
-
-  const matches: T[] = [];
-  for (const item of items) {
-    const isMatch =
-      item.label.toLowerCase().includes(normalized) ||
-      (item.description?.toLowerCase().includes(normalized)) ||
-      (item.href?.toLowerCase().includes(normalized)) ||
-      (item.keywords?.some((k) => k.toLowerCase().includes(normalized)));
-
-    if (isMatch) {
-      matches.push(item);
-      if (matches.length >= maxResults || maxResults <= 0) {
-        break;
-      }
-    }
-  }
-  return matches;
-}

package/src/ui/search/index.ts

@@ -1,11 +0,0 @@
-export { SearchBar } from "./search-bar";
-export { SearchSuggestionList } from "./search-suggestion-list";
-export { searchSuggestionOptionDomId } from "./search-suggestion-utils";
-export { filterSearchSuggestions } from "./filter-search-suggestions";
-export type {
-  SearchBarProps,
-  SearchSuggestionItem,
-  SearchSuggestionListProps,
-  SearchFilterable,
-} from "./types";
-export type { FilterSearchSuggestionsOptions } from "./filter-search-suggestions";

package/src/ui/search/search-bar.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import { useId } from "react";
-
-import { cn } from "../../lib/utils";
-import { inputVariants } from "../inputs/variants";
-
-import type { SearchBarProps } from "./types";
-
-export const SearchBar = function SearchBar(
-  {
-    value,
-    onValueChange,
-    leadingSlot,
-    className,
-    inputClassName,
-    appearance = "default",
-    inputSize = "md",
-    ring = true,
-    id,
-    onChange,
-    disabled,
-    type,
-    comboboxListboxId,
-    comboboxActiveOptionId,
-    comboboxExpanded,
-    ref,
-    ...rest
-  }: SearchBarProps,
-) {
-  const generatedId = useId();
-  const controlId = id ?? generatedId;
-  const combobox = Boolean(comboboxListboxId);
-
-  return (
-    <div
-      data-slot="search-bar"
-      className={cn("relative flex w-full min-w-0 items-center", className)}
-    >
-      {leadingSlot ? (
-        <span
-          className="pointer-events-none absolute left-3 top-1/2 z-1 flex -translate-y-1/2 text-slate-400 [&_svg]:size-4"
-          aria-hidden
-        >
-          {leadingSlot}
-        </span>
-      ) : null}
-      <input
-        ref={ref}
-        id={controlId}
-        type={type ?? "search"}
-        autoComplete="off"
-        spellCheck={false}
-        disabled={disabled}
-        value={value}
-        data-slot="search-bar-input"
-        className={cn(
-          inputVariants({ appearance, size: inputSize, ring, as: "input" }),
-          leadingSlot ? "pl-10" : null,
-          inputClassName,
-        )}
-        onChange={(event) => {
-          onChange?.(event);
-          onValueChange?.(event.target.value);
-        }}
-        {...(combobox
-          ? {
-              role: "combobox" as const,
-              "aria-autocomplete": "list" as const,
-              "aria-controls": comboboxListboxId,
-              "aria-expanded": comboboxExpanded ?? false,
-              ...(comboboxActiveOptionId
-                ? { "aria-activedescendant": comboboxActiveOptionId }
-                : {}),
-            }
-          : {})}
-        {...rest}
-      />
-    </div>
-  );
-}
-
-SearchBar.displayName = "SearchBar";

package/src/ui/search/search-suggestion-list.tsx

@@ -1,103 +0,0 @@
-"use client";
-
-import { Fragment } from "react";
-
-import { cn } from "../../lib/utils";
-import { searchSuggestionOptionDomId } from "./search-suggestion-utils";
-
-import type { SearchSuggestionListProps } from "./types";
-
-const rowClassName =
-  "flex w-full flex-col gap-0.5 rounded-lg px-3 py-2.5 text-left text-sm transition-colors hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50";
-
-export function SearchSuggestionList({
-  items,
-  onSelect,
-  activeId,
-  onActiveIdChange,
-  listboxId,
-  className,
-  listClassName,
-  emptyLabel,
-}: SearchSuggestionListProps) {
-  if (items.length === 0) {
-    return (
-      <div
-        data-slot="search-suggestion-list-empty"
-        className={cn("px-1 py-6 text-center text-sm text-slate-500", className)}
-      >
-        {emptyLabel ?? "No matches."}
-      </div>
-    );
-  }
-
-  const useListbox = Boolean(listboxId);
-
-  const rows: Array<{
-    item: (typeof items)[number];
-    showGroup: boolean;
-  }> = [];
-  let lastGroupSeen: string | undefined;
-  for (const item of items) {
-    const showGroup = Boolean(item.group && item.group !== lastGroupSeen);
-    if (item.group) {
-      lastGroupSeen = item.group;
-    }
-    rows.push({ item, showGroup });
-  }
-
-  return (
-    <nav
-      data-slot="search-suggestion-list"
-      aria-label="Search results"
-      className={cn("flex max-h-[min(50vh,360px)] flex-col gap-1 overflow-y-auto pr-1", className)}
-    >
-      <div
-        {...(useListbox
-          ? {
-              id: listboxId,
-              role: "listbox" as const,
-            }
-          : {})}
-        className={cn("flex flex-col gap-0.5", listClassName)}
-      >
-        {rows.map(({ item, showGroup }) => {
-          const isActive = activeId === item.id;
-          const optionDomId =
-            useListbox && listboxId ? searchSuggestionOptionDomId(listboxId, item.id) : undefined;
-          return (
-            <Fragment key={item.id}>
-              {showGroup ? (
-                <div
-                  role="presentation"
-                  className="sticky top-0 z-1 bg-slate-950/95 px-2 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-slate-500 backdrop-blur-sm"
-                >
-                  {item.group}
-                </div>
-              ) : null}
-              <button
-                type="button"
-                id={optionDomId}
-                role={useListbox ? "option" : undefined}
-                aria-selected={useListbox ? isActive : undefined}
-                data-active={isActive ? "" : undefined}
-                className={cn(rowClassName, isActive ? "bg-white/5" : null)}
-                onMouseEnter={() => onActiveIdChange?.(item.id)}
-                onFocus={() => onActiveIdChange?.(item.id)}
-                onClick={() => onSelect(item.id)}
-              >
-                <span className="font-medium text-slate-100">{item.label}</span>
-                {item.description ? (
-                  <span className="truncate text-xs text-slate-500">{item.description}</span>
-                ) : null}
-              </button>
-            </Fragment>
-          );
-        })}
-      </div>
-    </nav>
-  );
-}
-
-SearchSuggestionList.displayName = "SearchSuggestionList";
-

package/src/ui/search/search-suggestion-utils.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { searchSuggestionOptionDomId } from "./search-suggestion-utils";
-
-describe("searchSuggestionOptionDomId", () => {
-  it("prefixes listbox id and sanitizes item id", () => {
-    expect(searchSuggestionOptionDomId(":lb:", "/a/b")).toBe(":lb:_opt__a_b");
-  });
-});

package/src/ui/search/search-suggestion-utils.ts

@@ -1,8 +0,0 @@
-/**
- * Builds a stable DOM id for a listbox option so `aria-activedescendant` on the combobox
- * input can reference it. Safe for href-like `itemId` strings.
- */
-export function searchSuggestionOptionDomId(listboxId: string, itemId: string): string {
-  const safe = itemId.replace(/[^a-zA-Z0-9_-]/g, "_");
-  return `${listboxId}_opt_${safe}`;
-}

package/src/ui/search/types.ts

@@ -1,52 +0,0 @@
-import type { InputHTMLAttributes, ReactNode, Ref } from "react";
-
-import type { VariantProps } from "class-variance-authority";
-
-import type { inputVariants } from "../inputs/variants";
-
-export type SearchBarProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "size" | "children" | "role"
-> & {
-  value: string;
-  onValueChange?: (value: string) => void;
-  leadingSlot?: ReactNode;
-  inputClassName?: string;
-  appearance?: VariantProps<typeof inputVariants>["appearance"];
-  inputSize?: VariantProps<typeof inputVariants>["size"];
-  ring?: VariantProps<typeof inputVariants>["ring"];
-  /** When set, the input exposes combobox semantics wired to a `role="listbox"` with this id. */
-  comboboxListboxId?: string;
-  /** Element id of the active option (from `searchSuggestionOptionDomId`) for `aria-activedescendant`. */
-  comboboxActiveOptionId?: string;
-  /** Whether the suggestion list is visibly expanded (controls `aria-expanded`). */
-  comboboxExpanded?: boolean;
-  ref?: Ref<HTMLInputElement>;
-};
-
-export type SearchSuggestionItem = {
-  id: string;
-  label: string;
-  description?: string;
-  group?: string;
-};
-
-export type SearchSuggestionListProps = {
-  items: readonly SearchSuggestionItem[];
-  onSelect: (id: string) => void;
-  activeId?: string;
-  onActiveIdChange?: (id: string | undefined) => void;
-  /** Pass the same id as `comboboxListboxId` on `SearchBar` for ARIA wiring. */
-  listboxId?: string;
-  className?: string;
-  listClassName?: string;
-  emptyLabel?: ReactNode;
-};
-
-export type SearchFilterable = {
-  id: string;
-  label: string;
-  description?: string;
-  keywords?: readonly string[];
-  href?: string;
-};

package/src/ui/typography/blockquote-base.tsx

@@ -1,39 +0,0 @@
-import { forwardRef } from "react";
-
-import { cn } from "../../lib/utils";
-
-import type { BlockquoteProps } from "./types";
-import { typographyToneVariants } from "./variants";
-
-export const BlockquoteBase = (props: BlockquoteProps) => {
-  const {
-    tone,
-    attribution,
-    className,
-    children,
-    ref,
-    ...rest
-  } = props;
-
-  return (
-    <blockquote
-      ref={ref}
-      data-slot="typography-blockquote"
-      className={cn(
-        typographyToneVariants({ tone }),
-        "border-l-4 py-1 pl-4 italic",
-        className,
-      )}
-      {...rest}
-    >
-      <div className="space-y-2 leading-relaxed">{children}</div>
-      {attribution ? (
-        <footer className="mt-3 text-sm not-italic">
-          <cite>{attribution}</cite>
-        </footer>
-      ) : null}
-    </blockquote>
-  );
-};
-
-BlockquoteBase.displayName = "Blockquote";

package/src/ui/typography/blockquote.tsx

@@ -1,8 +0,0 @@
-import { BlockquoteBase } from "./blockquote-base";
-import type { BlockquoteProps } from "./types";
-
-export const Blockquote = (props: BlockquoteProps) => {
-  return <BlockquoteBase {...props} />;
-};
-
-Blockquote.displayName = "Blockquote";

package/src/ui/typography/code-block-base.tsx

@@ -1,37 +0,0 @@
-import { forwardRef } from "react";
-
-import { cn } from "../../lib/utils";
-
-import type { CodeBlockProps } from "./types";
-import { typographyToneVariants } from "./variants";
-
-export const CodeBlockBase = (props: CodeBlockProps) => {
-    const {
-      tone,
-      language,
-      className,
-      children,
-      ref,
-      ...rest
-    } = props;
-
-    const ariaLabel = language ? `Code sample (${language})` : "Code sample";
-
-    return (
-      <pre
-        ref={ref}
-        data-slot="typography-code-block"
-        aria-label={ariaLabel}
-        className={cn(
-          typographyToneVariants({ tone }),
-          "overflow-x-auto rounded-xl border border-white/10 bg-slate-950/80 p-4 text-sm leading-relaxed shadow-inner shadow-slate-950/40",
-          className,
-        )}
-        {...rest}
-      >
-        <code className="font-mono text-[0.95em]">{children}</code>
-      </pre>
-    );
-};
-
-CodeBlockBase.displayName = "CodeBlock";

package/src/ui/typography/code-block.tsx

@@ -1,8 +0,0 @@
-import { CodeBlockBase } from "./code-block-base";
-import type { CodeBlockProps } from "./types";
-
-export const CodeBlock = (props: CodeBlockProps) => {
-  return <CodeBlockBase {...props} />;
-};
-
-CodeBlock.displayName = "CodeBlock";

package/src/ui/typography/heading-base.tsx

@@ -1,59 +0,0 @@
-import { forwardRef } from "react";
-
-import { cn } from "../../lib/utils";
-
-import type { HeadingProps } from "./types";
-import {
-  headingLevelVariants,
-  typographyToneVariants,
-} from "./variants";
-
-const HEADING_TAGS = {
-  1: "h1",
-  2: "h2",
-  3: "h3",
-  4: "h4",
-  5: "h5",
-  6: "h6",
-} as const;
-
-export const HeadingBase = (props: HeadingProps) => {
-    const {
-      level,
-      displayLevel,
-      tone,
-      bold,
-      italic,
-      underline,
-      strikethrough,
-      ref,
-      className,
-      children,
-      ...rest
-    } = props;
-
-    const Tag = HEADING_TAGS[level];
-    const scale = displayLevel ?? level;
-
-    return (
-      <Tag
-        ref={ref}
-        data-slot="typography-heading"
-        data-level={level}
-        className={cn(
-          typographyToneVariants({ tone }),
-          headingLevelVariants({ level: scale }),
-          bold && "font-bold",
-          italic && "italic",
-          underline && "underline underline-offset-4",
-          strikethrough && "line-through",
-          className,
-        )}
-        {...rest}
-      >
-        {children}
-      </Tag>
-    );
-};
-
-HeadingBase.displayName = "Heading";

package/src/ui/typography/heading.tsx

@@ -1,8 +0,0 @@
-import { HeadingBase } from "./heading-base";
-import type { HeadingProps } from "./types";
-
-export const Heading = (props: HeadingProps) => {
-  return <HeadingBase {...props} />;
-};
-
-Heading.displayName = "Heading";

package/src/ui/typography/index.ts

@@ -1,28 +0,0 @@
-export { Heading } from "./heading";
-export { Text } from "./text";
-export { List, ListItem } from "./list";
-export { Blockquote } from "./blockquote";
-export { InlineCode } from "./inline-code";
-export { CodeBlock } from "./code-block";
-
-export type {
-  BlockquoteProps,
-  CodeBlockProps,
-  HeadingLevel,
-  HeadingProps,
-  InlineCodeProps,
-  ListItemProps,
-  ListProps,
-  TextElement,
-  TextProps,
-  TypographyTone,
-  UnorderedMarker,
-} from "./types";
-
-export {
-  headingLevelVariants,
-  orderedListVariants,
-  textSizeVariants,
-  typographyToneVariants,
-  unorderedListMarkerVariants,
-} from "./variants";

package/src/ui/typography/inline-code-base.tsx

@@ -1,27 +0,0 @@
-import { forwardRef } from "react";
-
-import { cn } from "../../lib/utils";
-
-import type { InlineCodeProps } from "./types";
-import { typographyToneVariants } from "./variants";
-
-export const InlineCodeBase = (props: InlineCodeProps) => {
-    const { tone, className, children, ref, ...rest } = props;
-
-    return (
-      <code
-        ref={ref}
-        data-slot="typography-inline-code"
-        className={cn(
-          typographyToneVariants({ tone }),
-          "rounded-md border border-white/10 bg-white/6 px-1.5 py-0.5 font-mono text-[0.925em] font-normal",
-          className,
-        )}
-        {...rest}
-      >
-        {children}
-      </code>
-    );
-};
-
-InlineCodeBase.displayName = "InlineCode";

package/src/ui/typography/inline-code.tsx

@@ -1,8 +0,0 @@
-import { InlineCodeBase } from "./inline-code-base";
-import type { InlineCodeProps } from "./types";
-
-export const InlineCode = (props: InlineCodeProps) => {
-  return <InlineCodeBase {...props} />;
-};
-
-InlineCode.displayName = "InlineCode";