@borisj74/bv-ds 0.1.0

package/src/components/CodeSnippetTabs/index.ts

@@ -0,0 +1,2 @@
+export { CodeSnippetTabs } from "./CodeSnippetTabs";
+export type { CodeSnippetTabsProps } from "./CodeSnippetTabs";

package/src/components/CommandBar/CommandBar.tsx

@@ -0,0 +1,80 @@
+import { type ReactNode } from "react";
+import clsx from "clsx";
+import { CommandInput } from "../CommandInput";
+import { CommandBarFooter, type CommandBarFooterHint } from "../CommandBarFooter";
+
+export interface CommandBarProps {
+  open?: boolean;
+  onClose?: () => void;
+  /** Search value (controlled). */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  /** Trailing shortcut hint in the input (e.g. a `CommandShortcut`). */
+  shortcut?: ReactNode;
+  onHelp?: () => void;
+  /** Body — typically `CommandBarMenuSection` children. */
+  children?: ReactNode;
+  /** Footer hints; omit to use the default set. `false` hides the footer. */
+  footerHints?: CommandBarFooterHint[] | false;
+  onSettings?: () => void;
+  /** Render a dimmed backdrop behind the panel (click closes). */
+  withBackdrop?: boolean;
+  className?: string;
+}
+
+/**
+ * Command palette — thin assembly of the `Command*` primitives: `CommandInput`
+ * (search) + a scrollable body of `CommandBarMenuSection`s (`children`) +
+ * `CommandBarFooter`. Controlled via `open`; renders nothing when closed. Pass an
+ * optional `withBackdrop` for the dimmed overlay.
+ */
+export function CommandBar({
+  open = false,
+  onClose,
+  value,
+  onValueChange,
+  placeholder = "Search...",
+  shortcut,
+  onHelp,
+  children,
+  footerHints,
+  onSettings,
+  withBackdrop = true,
+  className,
+}: CommandBarProps) {
+  if (!open) return null;
+
+  const panel = (
+    <div
+      role="dialog"
+      aria-modal={withBackdrop || undefined}
+      className={clsx(
+        "flex w-[640px] max-w-full flex-col overflow-hidden rounded-xl border border-border-secondary-alt bg-bg-primary font-body shadow-xl",
+        className,
+      )}
+    >
+      <CommandInput
+        autoFocus
+        value={value}
+        placeholder={placeholder}
+        shortcut={shortcut}
+        onHelp={onHelp}
+        onChange={(e) => onValueChange?.(e.target.value)}
+      />
+      <div className="flex max-h-[360px] flex-col gap-px overflow-y-auto p-xs">{children}</div>
+      {footerHints !== false && (
+        <CommandBarFooter hints={footerHints || undefined} onSettings={onSettings} />
+      )}
+    </div>
+  );
+
+  if (!withBackdrop) return panel;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center p-4xl">
+      <div className="absolute inset-0 bg-bg-overlay/70 backdrop-blur-md" onClick={onClose} aria-hidden />
+      <div className="relative">{panel}</div>
+    </div>
+  );
+}

package/src/components/CommandBar/index.ts

@@ -0,0 +1,2 @@
+export { CommandBar } from "./CommandBar";
+export type { CommandBarProps } from "./CommandBar";

package/src/components/CommandBarFooter/CommandBarFooter.tsx

@@ -0,0 +1,125 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import { CommandBarNavigationIcon } from "../CommandBarNavigationIcon";
+
+export interface CommandBarFooterHint {
+  /** Key cap(s) for this hint — one or more CommandBarNavigationIcon elements. */
+  keys: ReactNode;
+  /** Description shown after the keys, e.g. "to navigate". */
+  label: string;
+}
+
+export interface CommandBarFooterProps {
+  /**
+   * Hint groups shown left-to-right. Defaults to the standard
+   * navigate / select / close / return-to-parent set.
+   */
+  hints?: CommandBarFooterHint[];
+  /** When provided, renders the trailing settings button. */
+  onSettings?: () => void;
+  className?: string;
+}
+
+function ArrowIcon({ d }: { d: string }) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-full" aria-hidden>
+      <path
+        d={d}
+        stroke="currentColor"
+        strokeWidth="1.333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const ARROW_UP = "M8 13.333V2.667M8 2.667 3.333 7.333M8 2.667l4.667 4.666";
+const ARROW_DOWN = "M8 2.667v10.666M8 13.333l4.667-4.666M8 13.333 3.333 8.667";
+const ARROW_LEFT = "M13.333 8H2.667M2.667 8l4.666 4.667M2.667 8l4.666-4.667";
+const CORNER_DOWN_LEFT = "M14 3.333V6a2.667 2.667 0 0 1-2.667 2.667H2.667M2.667 8.667 6 12M2.667 8.667 6 5.333";
+
+/** Default hint set matching the Untitled UI command-bar footer. */
+const defaultHints: CommandBarFooterHint[] = [
+  {
+    keys: (
+      <>
+        <CommandBarNavigationIcon>
+          <ArrowIcon d={ARROW_UP} />
+        </CommandBarNavigationIcon>
+        <CommandBarNavigationIcon>
+          <ArrowIcon d={ARROW_DOWN} />
+        </CommandBarNavigationIcon>
+      </>
+    ),
+    label: "to navigate",
+  },
+  {
+    keys: (
+      <CommandBarNavigationIcon>
+        <ArrowIcon d={CORNER_DOWN_LEFT} />
+      </CommandBarNavigationIcon>
+    ),
+    label: "to select",
+  },
+  {
+    keys: <CommandBarNavigationIcon type="text" label="esc" />,
+    label: "to close",
+  },
+  {
+    keys: (
+      <CommandBarNavigationIcon>
+        <ArrowIcon d={ARROW_LEFT} />
+      </CommandBarNavigationIcon>
+    ),
+    label: "return to parent",
+  },
+];
+
+/**
+ * Footer bar for a command menu — keyboard-navigation hints plus an optional
+ * settings button. Composes CommandBarNavigationIcon.
+ */
+export function CommandBarFooter({
+  hints = defaultHints,
+  onSettings,
+  className,
+}: CommandBarFooterProps) {
+  return (
+    <div
+      className={clsx(
+        "flex w-full items-center gap-lg border-t border-border-secondary-alt bg-white/80 py-md pl-[18px] pr-md font-body backdrop-blur-md",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-xl">
+        {hints.map((hint, i) => (
+          <div key={i} className="flex shrink-0 items-center gap-md">
+            <div className="flex items-center gap-sm">{hint.keys}</div>
+            <span className="whitespace-nowrap text-sm font-semibold text-text-quaternary">
+              {hint.label}
+            </span>
+          </div>
+        ))}
+      </div>
+      {onSettings ? (
+        <button
+          type="button"
+          onClick={onSettings}
+          aria-label="Settings"
+          className="flex shrink-0 items-center justify-center rounded-md p-md text-fg-quaternary transition-colors hover:text-fg-quaternary-hover"
+        >
+          <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+            <path
+              d="M7.83 3.04A2.5 2.5 0 0 1 10 1.667h.003a2.5 2.5 0 0 1 2.166 1.374l.21.42a1.25 1.25 0 0 0 1.49.64l.45-.143a2.5 2.5 0 0 1 2.99 1.197l.003.005a2.5 2.5 0 0 1-.49 3.064l-.34.31a1.25 1.25 0 0 0 0 1.85l.34.31a2.5 2.5 0 0 1 .49 3.064l-.003.005a2.5 2.5 0 0 1-2.99 1.197l-.45-.143a1.25 1.25 0 0 0-1.49.64l-.21.42a2.5 2.5 0 0 1-2.169 1.374A2.5 2.5 0 0 1 7.83 16.96l-.21-.42a1.25 1.25 0 0 0-1.49-.64l-.45.143a2.5 2.5 0 0 1-2.99-1.197l-.003-.005a2.5 2.5 0 0 1 .49-3.064l.34-.31a1.25 1.25 0 0 0 0-1.85l-.34-.31a2.5 2.5 0 0 1-.49-3.064l.003-.005a2.5 2.5 0 0 1 2.99-1.197l.45.143a1.25 1.25 0 0 0 1.49-.64l.21-.42ZM10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
+              stroke="currentColor"
+              strokeWidth="1.667"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/CommandBarFooter/index.ts

@@ -0,0 +1,5 @@
+export { CommandBarFooter } from "./CommandBarFooter";
+export type {
+  CommandBarFooterProps,
+  CommandBarFooterHint,
+} from "./CommandBarFooter";

package/src/components/CommandBarMenuSection/CommandBarMenuSection.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface CommandBarMenuSectionProps {
+  /** Section heading (e.g. "Recent"). */
+  label?: string;
+  /** Section rows — typically CommandDropdownMenuItem instances. */
+  children: ReactNode;
+  className?: string;
+}
+
+/** A labelled group of command-bar results. */
+export function CommandBarMenuSection({
+  label,
+  children,
+  className,
+}: CommandBarMenuSectionProps) {
+  return (
+    <div role="group" aria-label={label} className={clsx("flex flex-col font-body", className)}>
+      {label ? (
+        <span className="px-md py-xs text-xs font-semibold text-text-primary">
+          {label}
+        </span>
+      ) : null}
+      <div className="flex flex-col">{children}</div>
+    </div>
+  );
+}

package/src/components/CommandBarMenuSection/index.ts

@@ -0,0 +1,2 @@
+export { CommandBarMenuSection } from "./CommandBarMenuSection";
+export type { CommandBarMenuSectionProps } from "./CommandBarMenuSection";

package/src/components/CommandBarNavigationIcon/CommandBarNavigationIcon.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface CommandBarNavigationIconProps {
+  /**
+   * `"icon"` renders a 16px icon slot (pass the glyph as `children`);
+   * `"text"` renders a short key label such as "esc" (pass it as `label`).
+   */
+  type?: "icon" | "text";
+  /** Icon glyph for `type="icon"`. */
+  children?: ReactNode;
+  /** Short key label for `type="text"`. */
+  label?: string;
+  className?: string;
+}
+
+/**
+ * A single key cap in a command-bar footer — either a 16px navigation icon
+ * (arrows, enter) or a short text key like "esc". Used by CommandBarFooter.
+ */
+export function CommandBarNavigationIcon({
+  type = "icon",
+  children,
+  label,
+  className,
+}: CommandBarNavigationIconProps) {
+  const isText = type === "text";
+  return (
+    <div
+      className={clsx(
+        "inline-flex items-start rounded-md border border-border-secondary bg-bg-primary font-body",
+        isText ? "px-sm py-xs" : "p-sm",
+        className,
+      )}
+    >
+      {isText ? (
+        <span className="text-sm font-semibold text-fg-quaternary">
+          {label}
+        </span>
+      ) : (
+        <span className="flex size-4 shrink-0 items-center justify-center text-fg-quaternary">
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/CommandBarNavigationIcon/index.ts

@@ -0,0 +1,2 @@
+export { CommandBarNavigationIcon } from "./CommandBarNavigationIcon";
+export type { CommandBarNavigationIconProps } from "./CommandBarNavigationIcon";

package/src/components/CommandDropdownMenuItem/CommandDropdownMenuItem.tsx

@@ -0,0 +1,51 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export interface CommandDropdownMenuItemProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+  /** Primary label. */
+  title: string;
+  /** Secondary text shown next to the title (e.g. a @handle). */
+  subtitle?: string;
+  /** Leading slot — avatar, icon, or dot. */
+  icon?: ReactNode;
+  /** Trailing slot — typically a CommandShortcut. */
+  shortcut?: ReactNode;
+  /** Highlighted/active row. */
+  selected?: boolean;
+}
+
+/** A single result row inside a command bar menu. */
+export function CommandDropdownMenuItem({
+  title,
+  subtitle,
+  icon,
+  shortcut,
+  selected = false,
+  className,
+  ...rest
+}: CommandDropdownMenuItemProps) {
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={selected}
+      className={clsx(
+        "flex w-full items-center gap-md rounded-md px-md py-sm text-left font-body transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand",
+        selected ? "bg-bg-primary-hover" : "hover:bg-bg-primary-hover",
+        className,
+      )}
+      {...rest}
+    >
+      {icon ? <span className="shrink-0">{icon}</span> : null}
+      <span className="flex min-w-0 items-center gap-xs">
+        <span className="truncate text-sm font-medium text-text-secondary">{title}</span>
+        {subtitle ? (
+          <span className="truncate text-sm font-normal text-text-tertiary">{subtitle}</span>
+        ) : null}
+      </span>
+      {shortcut ? <span className="ml-auto shrink-0">{shortcut}</span> : null}
+    </button>
+  );
+}

package/src/components/CommandDropdownMenuItem/index.ts

@@ -0,0 +1,2 @@
+export { CommandDropdownMenuItem } from "./CommandDropdownMenuItem";
+export type { CommandDropdownMenuItemProps } from "./CommandDropdownMenuItem";

package/src/components/CommandInput/CommandInput.tsx

@@ -0,0 +1,74 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export interface CommandInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /** Trailing shortcut hint (e.g. a CommandShortcut for "⌘/"). */
+  shortcut?: ReactNode;
+  /** Renders a help (?) button before the shortcut. */
+  onHelp?: () => void;
+}
+
+function SearchIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 text-fg-quaternary" aria-hidden>
+      <path
+        d="m17.5 17.5-3.625-3.625M15.833 9.167a6.667 6.667 0 1 1-13.333 0 6.667 6.667 0 0 1 13.333 0Z"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function HelpIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+      <path
+        d="M7.575 7.5a2.5 2.5 0 0 1 4.858.833c0 1.667-2.5 2.5-2.5 2.5M10 14.167h.008M17.5 10a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Search/command input row — the trigger field of a command bar. */
+export function CommandInput({
+  shortcut,
+  onHelp,
+  className,
+  ...rest
+}: CommandInputProps) {
+  return (
+    <div
+      className={clsx(
+        "flex items-center gap-md rounded-xl border border-border-secondary bg-bg-primary px-xl py-md font-body",
+        "focus-within:ring-2 focus-within:ring-border-brand focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
+        className,
+      )}
+    >
+      <SearchIcon />
+      <input
+        type="text"
+        className="min-w-0 flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder"
+        {...rest}
+      />
+      {onHelp ? (
+        <button
+          type="button"
+          onClick={onHelp}
+          aria-label="Help"
+          className="shrink-0 text-fg-quaternary transition-colors hover:text-fg-quaternary-hover"
+        >
+          <HelpIcon />
+        </button>
+      ) : null}
+      {shortcut ? <span className="shrink-0">{shortcut}</span> : null}
+    </div>
+  );
+}

package/src/components/CommandInput/index.ts

@@ -0,0 +1,2 @@
+export { CommandInput } from "./CommandInput";
+export type { CommandInputProps } from "./CommandInput";

package/src/components/CommandShortcut/CommandShortcut.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+
+export interface CommandShortcutProps {
+  /** Keys rendered as individual kbd badges, e.g. ["⌘", "C"] or ["⌘C"]. */
+  keys: string[];
+  className?: string;
+}
+
+/**
+ * Keyboard-shortcut hint (kbd badges). For multi-step sequences like
+ * "⌘K then → C", render two CommandShortcut with connector text between them.
+ */
+export function CommandShortcut({ keys, className }: CommandShortcutProps) {
+  return (
+    <span className={clsx("inline-flex items-center gap-xs font-body", className)}>
+      {keys.map((key, i) => (
+        <kbd
+          key={i}
+          className="rounded-xs border border-border-secondary bg-bg-secondary-alt px-xs text-xs font-medium text-text-quaternary"
+        >
+          {key}
+        </kbd>
+      ))}
+    </span>
+  );
+}

package/src/components/CommandShortcut/index.ts

@@ -0,0 +1,2 @@
+export { CommandShortcut } from "./CommandShortcut";
+export type { CommandShortcutProps } from "./CommandShortcut";

package/src/components/ContentDivider/ContentDivider.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type ContentDividerType =
+  | "heading"
+  | "text"
+  | "button"
+  | "button-icon"
+  | "button-group"
+  | "button-group-icon";
+
+export type ContentDividerStyle = "single-line" | "dual-line" | "background-fill";
+
+export interface ContentDividerProps {
+  /** What sits in the centre of the divider. */
+  type?: ContentDividerType;
+  /** How the divider rules/background are drawn. */
+  style?: ContentDividerStyle;
+  /** Text shown for `type="heading"` / `type="text"`. */
+  label?: string;
+  /**
+   * Centre content for the button variants (`button`, `button-icon`,
+   * `button-group`, `button-group-icon`) — pass a Button / ButtonGroup etc.
+   */
+  children?: ReactNode;
+  className?: string;
+}
+
+const isTextType = (t: ContentDividerType) => t === "heading" || t === "text";
+
+/**
+ * A horizontal section divider with a centred label, button, or button group.
+ * `style` controls whether the rules sit on the sides (single line), top &
+ * bottom (dual line), or are replaced by a filled background.
+ */
+export function ContentDivider({
+  type = "heading",
+  style = "single-line",
+  label,
+  children,
+  className,
+}: ContentDividerProps) {
+  const center = isTextType(type) ? (
+    <span
+      className={clsx(
+        "shrink-0 whitespace-nowrap text-center",
+        type === "heading"
+          ? "text-md font-semibold text-text-primary"
+          : "text-sm font-medium text-text-tertiary",
+      )}
+    >
+      {label}
+    </span>
+  ) : (
+    <div className="shrink-0">{children}</div>
+  );
+
+  if (style === "single-line") {
+    return (
+      <div className={clsx("flex w-full items-center gap-md font-body", className)}>
+        <span className="h-px flex-1 bg-border-secondary" />
+        {center}
+        <span className="h-px flex-1 bg-border-secondary" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx(
+        "flex w-full flex-col items-center gap-md font-body",
+        style === "dual-line" && "border-y border-border-secondary py-lg",
+        style === "background-fill" && "rounded-md bg-bg-secondary py-md",
+        className,
+      )}
+    >
+      {center}
+    </div>
+  );
+}

package/src/components/ContentDivider/index.ts

@@ -0,0 +1,6 @@
+export { ContentDivider } from "./ContentDivider";
+export type {
+  ContentDividerProps,
+  ContentDividerType,
+  ContentDividerStyle,
+} from "./ContentDivider";

package/src/components/ContentFeatureText/ContentFeatureText.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type ContentFeatureTextSize = "sm" | "md";
+
+export interface ContentFeatureTextProps {
+  /** Heading shown above the body. */
+  heading?: ReactNode;
+  /** Body content — typically one or more `<p>` elements. */
+  children: ReactNode;
+  /** Type / padding scale. */
+  size?: ContentFeatureTextSize;
+  className?: string;
+}
+
+// md verified (p-4xl, rounded-2xl, heading text-xl, body text-lg).
+// sm inferred (scaled down a step).
+const sizeConfig: Record<
+  ContentFeatureTextSize,
+  { box: string; heading: string; body: string }
+> = {
+  sm: { box: "p-3xl rounded-xl", heading: "text-lg", body: "text-md" },
+  md: { box: "p-4xl rounded-2xl", heading: "text-xl", body: "text-lg" },
+};
+
+/**
+ * A highlighted block of feature copy (heading + body) on a filled
+ * background — used inside long-form content.
+ */
+export function ContentFeatureText({
+  heading,
+  children,
+  size = "md",
+  className,
+}: ContentFeatureTextProps) {
+  const cfg = sizeConfig[size];
+  return (
+    <div
+      className={clsx(
+        "flex w-full flex-col gap-lg bg-bg-secondary font-body",
+        cfg.box,
+        className,
+      )}
+    >
+      {heading ? (
+        <p className={clsx("font-semibold text-text-primary", cfg.heading)}>
+          {heading}
+        </p>
+      ) : null}
+      <div
+        className={clsx(
+          "font-normal text-text-tertiary [&>p+p]:mt-xl",
+          cfg.body,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/ContentFeatureText/index.ts

@@ -0,0 +1,5 @@
+export { ContentFeatureText } from "./ContentFeatureText";
+export type {
+  ContentFeatureTextProps,
+  ContentFeatureTextSize,
+} from "./ContentFeatureText";

package/src/components/ContentHeading/ContentHeading.tsx

@@ -0,0 +1,43 @@
+import type { ElementType, ReactNode } from "react";
+import clsx from "clsx";
+
+export type ContentHeadingSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface ContentHeadingProps {
+  /** Type scale. xs/sm use the body font; md/lg/xl use the display font. */
+  size?: ContentHeadingSize;
+  /** Rendered element. Defaults to `h2`. */
+  as?: ElementType;
+  children: ReactNode;
+  className?: string;
+}
+
+// xs→text-lg, sm→text-xl, md→display-xs, lg→display-sm, xl→display-md
+// (verified per-size against Figma "Content item / Heading").
+const sizeClasses: Record<ContentHeadingSize, string> = {
+  xs: "font-body text-lg",
+  sm: "font-body text-xl",
+  md: "font-display text-display-xs",
+  lg: "font-display text-display-sm",
+  xl: "font-display text-display-md",
+};
+
+/** Long-form content heading (article/marketing body copy). */
+export function ContentHeading({
+  size = "md",
+  as: Tag = "h2",
+  children,
+  className,
+}: ContentHeadingProps) {
+  return (
+    <Tag
+      className={clsx(
+        "font-semibold text-text-primary",
+        sizeClasses[size],
+        className,
+      )}
+    >
+      {children}
+    </Tag>
+  );
+}

package/src/components/ContentHeading/index.ts

@@ -0,0 +1,5 @@
+export { ContentHeading } from "./ContentHeading";
+export type {
+  ContentHeadingProps,
+  ContentHeadingSize,
+} from "./ContentHeading";