@lateralus-ai/shipping-ui 1.4.15 → 2.0.0-dev.0

package/dist/tokens/colors.d.ts

@@ -0,0 +1,148 @@
+/** AskChief rebrand color scales — sourced from Figma Style Guide */
+export declare const grey: {
+    readonly 50: "#fdfdfc";
+    readonly 100: "#f4f2ea";
+    readonly 200: "#e1ddce";
+    readonly 300: "#bfb9a5";
+    readonly 400: "#969080";
+    readonly 500: "#6e6960";
+    readonly 600: "#524e47";
+    readonly 700: "#3a3733";
+    readonly 800: "#312e2a";
+    readonly 900: "#262420";
+};
+export declare const green: {
+    readonly 50: "#f5f8f2";
+    readonly 100: "#dde6d2";
+    readonly 200: "#c5d4b3";
+    readonly 300: "#a8bf8f";
+    readonly 400: "#7a9a5e";
+    readonly 500: "#5a7a42";
+    readonly 600: "#456332";
+    readonly 700: "#304624";
+    readonly 800: "#223018";
+    readonly 900: "#141c0e";
+};
+export declare const blue: {
+    readonly 50: "#eef1f8";
+    readonly 100: "#dae0ef";
+    readonly 200: "#b8c4e0";
+    readonly 300: "#8fa3cc";
+    readonly 400: "#5274ae";
+    readonly 500: "#3a5d96";
+    readonly 600: "#154199";
+    readonly 700: "#103480";
+    readonly 800: "#0c2860";
+    readonly 900: "#081c42";
+};
+export declare const red: {
+    readonly 50: "#faf3f1";
+    readonly 100: "#f0d3cc";
+    readonly 200: "#e4b0a5";
+    readonly 300: "#c97a6b";
+    readonly 400: "#b85a48";
+    readonly 500: "#a0392a";
+    readonly 600: "#802c20";
+    readonly 700: "#621f16";
+    readonly 800: "#45150f";
+    readonly 900: "#2a0c08";
+};
+export declare const orange: {
+    readonly 50: "#faf1de";
+    readonly 100: "#f5e4c0";
+    readonly 200: "#efd49a";
+    readonly 300: "#e4bc6a";
+    readonly 400: "#d9a03e";
+    readonly 500: "#c48820";
+    readonly 600: "#8f6318";
+    readonly 700: "#5a3d0d";
+    readonly 800: "#3d2a09";
+    readonly 900: "#261a05";
+};
+export declare const purple: {
+    readonly 50: "#f6f2f8";
+    readonly 100: "#e2d9e8";
+    readonly 200: "#cbbad6";
+    readonly 300: "#b09bc3";
+    readonly 400: "#957cb0";
+    readonly 500: "#7a5d9d";
+    readonly 600: "#5e4680";
+    readonly 700: "#3d2e4a";
+    readonly 800: "#2a2033";
+    readonly 900: "#18121c";
+};
+export declare const white = "#ffffff";
+export declare const colorScales: {
+    readonly grey: {
+        readonly 50: "#fdfdfc";
+        readonly 100: "#f4f2ea";
+        readonly 200: "#e1ddce";
+        readonly 300: "#bfb9a5";
+        readonly 400: "#969080";
+        readonly 500: "#6e6960";
+        readonly 600: "#524e47";
+        readonly 700: "#3a3733";
+        readonly 800: "#312e2a";
+        readonly 900: "#262420";
+    };
+    readonly green: {
+        readonly 50: "#f5f8f2";
+        readonly 100: "#dde6d2";
+        readonly 200: "#c5d4b3";
+        readonly 300: "#a8bf8f";
+        readonly 400: "#7a9a5e";
+        readonly 500: "#5a7a42";
+        readonly 600: "#456332";
+        readonly 700: "#304624";
+        readonly 800: "#223018";
+        readonly 900: "#141c0e";
+    };
+    readonly blue: {
+        readonly 50: "#eef1f8";
+        readonly 100: "#dae0ef";
+        readonly 200: "#b8c4e0";
+        readonly 300: "#8fa3cc";
+        readonly 400: "#5274ae";
+        readonly 500: "#3a5d96";
+        readonly 600: "#154199";
+        readonly 700: "#103480";
+        readonly 800: "#0c2860";
+        readonly 900: "#081c42";
+    };
+    readonly red: {
+        readonly 50: "#faf3f1";
+        readonly 100: "#f0d3cc";
+        readonly 200: "#e4b0a5";
+        readonly 300: "#c97a6b";
+        readonly 400: "#b85a48";
+        readonly 500: "#a0392a";
+        readonly 600: "#802c20";
+        readonly 700: "#621f16";
+        readonly 800: "#45150f";
+        readonly 900: "#2a0c08";
+    };
+    readonly orange: {
+        readonly 50: "#faf1de";
+        readonly 100: "#f5e4c0";
+        readonly 200: "#efd49a";
+        readonly 300: "#e4bc6a";
+        readonly 400: "#d9a03e";
+        readonly 500: "#c48820";
+        readonly 600: "#8f6318";
+        readonly 700: "#5a3d0d";
+        readonly 800: "#3d2a09";
+        readonly 900: "#261a05";
+    };
+    readonly purple: {
+        readonly 50: "#f6f2f8";
+        readonly 100: "#e2d9e8";
+        readonly 200: "#cbbad6";
+        readonly 300: "#b09bc3";
+        readonly 400: "#957cb0";
+        readonly 500: "#7a5d9d";
+        readonly 600: "#5e4680";
+        readonly 700: "#3d2e4a";
+        readonly 800: "#2a2033";
+        readonly 900: "#18121c";
+    };
+};

package/dist/tokens/elevation.d.ts

@@ -0,0 +1,11 @@
+export declare const elevation: {
+    readonly raise1: "0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04)";
+    readonly raise2: "0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04)";
+    readonly raise3: "0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06)";
+};
+export declare const borderRadius: {
+    readonly control: "8px";
+    readonly lg: "8px";
+    readonly md: "6px";
+    readonly sm: "4px";
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,4 @@
+export * from './colors';
+export * from './semantic';
+export * from './typography';
+export * from './elevation';

package/dist/tokens/semantic.d.ts

@@ -0,0 +1,89 @@
+/** Semantic design tokens mapped to CSS custom properties */
+export declare const semanticTokens: {
+    readonly action: {
+        readonly primary: {
+            readonly idle: "var(--action-primary-idle)";
+            readonly onIdle: "var(--action-primary-on-idle)";
+            readonly hover: "var(--action-primary-hover)";
+            readonly onHover: "var(--action-primary-on-hover)";
+            readonly disabled: "var(--action-primary-disabled)";
+            readonly onDisabled: "var(--action-primary-on-disabled)";
+        };
+        readonly secondary: {
+            readonly idle: "var(--action-secondary-idle)";
+            readonly onIdle: "var(--action-secondary-on-idle)";
+            readonly hover: "var(--action-secondary-hover)";
+            readonly onHover: "var(--action-secondary-on-hover)";
+            readonly disabled: "var(--action-secondary-disabled)";
+            readonly onDisabled: "var(--action-secondary-on-disabled)";
+        };
+        readonly tertiary: {
+            readonly idle: "var(--action-tertiary-idle)";
+            readonly onIdle: "var(--action-tertiary-on-idle)";
+            readonly hover: "var(--action-tertiary-hover)";
+            readonly onHover: "var(--action-tertiary-on-hover)";
+            readonly disabled: "var(--action-tertiary-disabled)";
+            readonly onDisabled: "var(--action-tertiary-on-disabled)";
+        };
+        readonly quaternary: {
+            readonly idle: "var(--action-quaternary-idle)";
+            readonly onIdle: "var(--action-quaternary-on-idle)";
+            readonly hover: "var(--action-quaternary-hover)";
+            readonly onHover: "var(--action-quaternary-on-hover)";
+            readonly disabled: "var(--action-quaternary-disabled)";
+            readonly onDisabled: "var(--action-quaternary-on-disabled)";
+        };
+        readonly destructive: {
+            readonly idle: "var(--action-destructive-idle)";
+            readonly onIdle: "var(--action-destructive-on-idle)";
+            readonly hover: "var(--action-destructive-hover)";
+            readonly onHover: "var(--action-destructive-on-hover)";
+            readonly disabled: "var(--action-destructive-disabled)";
+            readonly onDisabled: "var(--action-destructive-on-disabled)";
+        };
+    };
+    readonly background: {
+        readonly primary: "var(--background-primary)";
+        readonly secondary: "var(--background-secondary)";
+        readonly tertiary: "var(--background-tertiary)";
+        readonly hover: "var(--background-hover)";
+        readonly selected: "var(--background-selected)";
+        readonly overlay: "var(--background-overlay)";
+    };
+    readonly display: {
+        readonly onLight: {
+            readonly primary: "var(--display-on-light-primary)";
+            readonly secondary: "var(--display-on-light-secondary)";
+            readonly tertiary: "var(--display-on-light-tertiary)";
+            readonly quaternary: "var(--display-on-light-quaternary)";
+        };
+        readonly onDark: {
+            readonly primary: "var(--display-on-dark-primary)";
+            readonly secondary: "var(--display-on-dark-secondary)";
+            readonly tertiary: "var(--display-on-dark-tertiary)";
+            readonly quaternary: "var(--display-on-dark-quaternary)";
+        };
+    };
+    readonly accent: {
+        readonly onLight: "var(--accent-on-light)";
+        readonly onDark: "var(--accent-on-dark)";
+        readonly bgLight: "var(--accent-bg-light)";
+        readonly bgLighter: "var(--accent-bg-lighter)";
+    };
+    readonly divider: {
+        readonly primary: "var(--divider-primary)";
+        readonly secondary: "var(--divider-secondary)";
+    };
+    readonly meta: {
+        readonly green: "var(--meta-green)";
+        readonly onGreen: "var(--meta-on-green)";
+        readonly orange: "var(--meta-orange)";
+        readonly onOrange: "var(--meta-on-orange)";
+        readonly red: "var(--meta-red)";
+        readonly onRed: "var(--meta-on-red)";
+        readonly blue: "var(--meta-blue)";
+        readonly onBlue: "var(--meta-on-blue)";
+        readonly purple: "var(--meta-purple)";
+        readonly onPurple: "var(--meta-on-purple)";
+    };
+};

package/dist/tokens/typography.d.ts

@@ -0,0 +1,85 @@
+export declare const fontFamilies: {
+    readonly heading: readonly ["\"TRY Vesterbro\"", "Georgia", "serif"];
+    readonly body: readonly ["\"Matter-TRIAL\"", "system-ui", "sans-serif"];
+    readonly mono: readonly ["\"Roboto Mono\"", "monospace"];
+};
+export declare const fontSizes: {
+    readonly title: {
+        readonly size: "28px";
+        readonly lineHeight: "34px";
+        readonly letterSpacing: "-0.02em";
+        readonly weight: 400;
+    };
+    readonly "title-em": {
+        readonly size: "28px";
+        readonly lineHeight: "34px";
+        readonly letterSpacing: "-0.02em";
+        readonly weight: 500;
+    };
+    readonly heading: {
+        readonly size: "22px";
+        readonly lineHeight: "28px";
+        readonly letterSpacing: "0";
+        readonly weight: 500;
+    };
+    readonly subheader: {
+        readonly size: "18px";
+        readonly lineHeight: "28px";
+        readonly letterSpacing: "-0.01em";
+        readonly weight: 400;
+    };
+    readonly "subheader-em": {
+        readonly size: "18px";
+        readonly lineHeight: "28px";
+        readonly letterSpacing: "-0.01em";
+        readonly weight: 500;
+    };
+    readonly body: {
+        readonly size: "16px";
+        readonly lineHeight: "24px";
+        readonly letterSpacing: "-0.01em";
+        readonly weight: 400;
+    };
+    readonly "body-em": {
+        readonly size: "16px";
+        readonly lineHeight: "24px";
+        readonly letterSpacing: "-0.01em";
+        readonly weight: 500;
+    };
+    readonly "caption-1": {
+        readonly size: "16px";
+        readonly lineHeight: "22px";
+        readonly letterSpacing: "0.02em";
+        readonly weight: 400;
+    };
+    readonly "caption-1-em": {
+        readonly size: "16px";
+        readonly lineHeight: "22px";
+        readonly letterSpacing: "0.02em";
+        readonly weight: 500;
+    };
+    readonly "caption-2": {
+        readonly size: "14px";
+        readonly lineHeight: "20px";
+        readonly letterSpacing: "0.01em";
+        readonly weight: 400;
+    };
+    readonly "caption-2-em": {
+        readonly size: "14px";
+        readonly lineHeight: "20px";
+        readonly letterSpacing: "0.01em";
+        readonly weight: 500;
+    };
+    readonly footnote: {
+        readonly size: "13px";
+        readonly lineHeight: "17px";
+        readonly letterSpacing: "0";
+        readonly weight: 400;
+    };
+    readonly "footnote-em": {
+        readonly size: "13px";
+        readonly lineHeight: "17px";
+        readonly letterSpacing: "0";
+        readonly weight: 500;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "1.4.15",
+  "version": "2.0.0-dev.0",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -30,7 +30,22 @@
     "build": "npx rimraf ./dist && vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "npx release-it"
+    "test:visual": "playwright test",
+    "test:visual:ci": "npm run build-storybook && playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual:icons": "node scripts/figma-icons-baseline.mjs --check && playwright test tests/visual/icons-figma.spec.ts",
+    "test:visual:sidebar": "node scripts/figma-sidebar-baseline.mjs --target subcomponents --check && node scripts/figma-sidebar-baseline.mjs --target layouts --check && playwright test tests/visual/sidebar-figma.spec.ts tests/visual/sidebar-layouts-figma.spec.ts",
+    "figma:baseline:icons": "node scripts/figma-icons-baseline.mjs",
+    "figma:baseline:icons:check": "node scripts/figma-icons-baseline.mjs --check",
+    "figma:baseline:sidebar": "node scripts/figma-sidebar-baseline.mjs --target subcomponents",
+    "figma:baseline:sidebar:layouts": "node scripts/figma-sidebar-baseline.mjs --target layouts",
+    "figma:baseline:sidebar:check": "node scripts/figma-sidebar-baseline.mjs --check",
+    "postinstall": "playwright install chromium",
+    "release": "npx release-it",
+    "release:dev:init": "npx release-it --config .release-it.dev.json major --preRelease=dev",
+    "release:dev:init:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init major --preRelease=dev",
+    "release:dev": "npx release-it --config .release-it.dev.json --preRelease=dev",
+    "release:dev:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init --preRelease=dev"
   },
   "repository": {
     "type": "git",
@@ -38,7 +53,8 @@
   },
   "keywords": [
     "tailwind",
-    "material-tailwind",
+    "askchief",
+    "design-system",
     "theme",
     "shipping",
     "storybook"
@@ -51,13 +67,14 @@
   "homepage": "https://github.com/lateralus-ai/shipping-ui#readme",
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
-    "@material-tailwind/react": "^2.1.10",
+    "@playwright/test": "^1.49.0",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@uidotdev/usehooks": "^2.4.1",
@@ -65,10 +82,14 @@
     "ai": "^5.0.59",
     "autoprefixer": "^10.4.16",
     "clsx": "^1.2.0",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^7.0.0",
     "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "release-it": "^19.0.5",
+    "serve": "^14.2.4",
+    "sharp": "^0.33.5",
     "storybook": "^8.2.9",
     "tailwind-merge": "^1.9.0",
     "tailwindcss": "^3.4.0",
@@ -84,7 +105,8 @@
     "react-textarea-autosize": "^8.5.9"
   },
   "dependencies": {
-    "@iconify/react": "^6.0.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.20",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hooks-library/core": "^0.6.2",
     "docx-preview": "^0.3.7",
     "docxtemplater": "^3.66.6",

package/src/components/Checkbox.tsx

@@ -0,0 +1,77 @@
+import { type InputHTMLAttributes, useEffect, useId, useRef } from "react";
+import { MinusIcon, TickIcon } from "../icons";
+import { cn } from "../utils/cn";
+
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type"> & {
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  label?: string;
+  onChange?: (checked: boolean) => void;
+};
+
+export const Checkbox = ({
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  label,
+  onChange,
+  className,
+  id: idProp,
+  ...props
+}: CheckboxProps) => {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  const isActive = checked || indeterminate;
+
+  return (
+    <label
+      htmlFor={id}
+      data-checked={checked}
+      data-indeterminate={indeterminate}
+      data-disabled={disabled}
+      className={cn(
+        "inline-flex cursor-pointer items-center gap-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+    >
+      <span className="relative inline-flex shrink-0">
+        <input
+          ref={inputRef}
+          id={id}
+          type="checkbox"
+          checked={checked}
+          disabled={disabled}
+          onChange={(event) => onChange?.(event.target.checked)}
+          className="peer sr-only"
+          {...props}
+        />
+        <span
+          aria-hidden
+          className={cn(
+            "flex size-4 items-center justify-center rounded-sm border transition-colors",
+            "border-divider-secondary bg-white",
+            "peer-hover:border-grey-400 peer-hover:bg-grey-50",
+            isActive && "border-blue-600 bg-blue-600",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-accent-on-light peer-focus-visible:ring-offset-1",
+            "peer-disabled:border-divider-primary peer-disabled:bg-grey-50",
+          )}
+        >
+          {checked && !indeterminate && (
+            <TickIcon size="xs" className="text-white" />
+          )}
+          {indeterminate && <MinusIcon size="small" className="text-white" />}
+        </span>
+      </span>
+      {label && <span className="text-body text-display-on-light-primary">{label}</span>}
+    </label>
+  );
+};

package/src/components/Chip.tsx

@@ -0,0 +1,69 @@
+import { type ReactNode } from "react";
+import { ClearIcon } from "../icons";
+import { Avatar, type AvatarProps, GroupedAvatars } from "../primitives";
+import { IconButton } from "../primitives/IconButton";
+import { cn } from "../utils/cn";
+
+export type ChipVariant = "avatar" | "multiple" | "icon" | "dot" | "label";
+
+type ChipDotColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
+
+export type ChipProps = {
+  variant: ChipVariant;
+  label: string;
+  avatar?: Pick<AvatarProps, "chief" | "initials">;
+  icon?: ReactNode;
+  dotColor?: ChipDotColor;
+  onRemove?: () => void;
+  className?: string;
+};
+
+const dotColorStyles: Record<ChipDotColor, string> = {
+  blue: "bg-meta-blue",
+  green: "bg-meta-green",
+  red: "bg-meta-red",
+  orange: "bg-meta-orange",
+  purple: "bg-meta-purple",
+  grey: "bg-grey-400",
+};
+
+export const Chip = ({
+  variant,
+  label,
+  avatar,
+  icon,
+  dotColor = "blue",
+  onRemove,
+  className,
+}: ChipProps) => (
+  <span
+    data-variant={variant}
+    className={cn(
+      "inline-flex h-8 max-w-full items-center gap-1.5 rounded-control border border-divider-primary bg-white px-2 text-caption-2 text-display-on-light-primary",
+      className,
+    )}
+  >
+    {variant === "avatar" && avatar && (
+      <Avatar chief={avatar.chief} initials={avatar.initials} size={18} />
+    )}
+    {variant === "multiple" && <GroupedAvatars count={2} />}
+    {variant === "icon" && icon && (
+      <span className="shrink-0 text-display-on-light-secondary [&>svg]:size-4">{icon}</span>
+    )}
+    {variant === "dot" && (
+      <span className={cn("size-2 shrink-0 rounded-full", dotColorStyles[dotColor])} />
+    )}
+    <span className="truncate">{label}</span>
+    {onRemove && (
+      <IconButton
+        hierarchy="quaternary"
+        size="small"
+        aria-label={`Remove ${label}`}
+        onClick={onRemove}
+        className="size-6 [&>svg]:size-3"
+      >
+        <ClearIcon size="xs" />
+      </IconButton>
+    )}
+  </span>
+);

package/src/components/EmptyState.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { Button, type ButtonProps } from "../primitives";
+import { cn } from "../utils/cn";
+
+export type EmptyStateProps = {
+  illustration?: ReactNode;
+  title: string;
+  description?: string;
+  action?: Pick<ButtonProps, "children" | "onClick" | "hierarchy" | "startIcon" | "endIcon">;
+  className?: string;
+};
+
+export const EmptyState = ({
+  illustration,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) => (
+  <div
+    className={cn(
+      "flex max-w-sm flex-col items-center gap-4 px-6 py-10 text-center",
+      className,
+    )}
+  >
+    {illustration && <div className="shrink-0">{illustration}</div>}
+    <div className="flex flex-col gap-1">
+      <h3 className="text-subheader-em text-display-on-light-primary">{title}</h3>
+      {description && (
+        <p className="text-body text-display-on-light-secondary">{description}</p>
+      )}
+    </div>
+    {action && (
+      <Button
+        hierarchy={action.hierarchy ?? "primary"}
+        onClick={action.onClick}
+        startIcon={action.startIcon}
+        endIcon={action.endIcon}
+      >
+        {action.children}
+      </Button>
+    )}
+  </div>
+);

package/src/components/Entry.tsx

@@ -0,0 +1,64 @@
+import { type ReactNode } from "react";
+import { ChatIcon, IssuesIcon } from "../icons";
+import { cn } from "../utils/cn";
+
+export type EntryType = "chat" | "issue";
+export type EntryState = "idle" | "selected";
+
+export type EntryProps = {
+  type: EntryType;
+  state?: EntryState;
+  title: string;
+  subtitle?: string;
+  meta?: ReactNode;
+  onClick?: () => void;
+  className?: string;
+};
+
+const typeIcons: Record<EntryType, ReactNode> = {
+  chat: <ChatIcon size="small" />,
+  issue: <IssuesIcon size="small" />,
+};
+
+export const Entry = ({
+  type,
+  state = "idle",
+  title,
+  subtitle,
+  meta,
+  onClick,
+  className,
+}: EntryProps) => (
+  <button
+    type="button"
+    data-type={type}
+    data-state={state}
+    onClick={onClick}
+    className={cn(
+      "flex w-full items-start gap-3 rounded-control px-3 py-2.5 text-left transition-colors",
+      "hover:bg-background-secondary",
+      "data-[state=selected]:bg-background-selected data-[state=selected]:text-display-on-dark-primary",
+      "data-[state=selected]:[&_.entry-subtitle]:text-display-on-dark-secondary",
+      "data-[state=selected]:[&_.entry-meta]:text-display-on-dark-tertiary",
+      "data-[state=selected]:[&_.entry-icon]:text-display-on-dark-secondary",
+      className,
+    )}
+  >
+    <span className="entry-icon mt-0.5 shrink-0 text-display-on-light-secondary">
+      {typeIcons[type]}
+    </span>
+    <span className="min-w-0 flex-1">
+      <span className="block truncate text-caption-2-em">{title}</span>
+      {subtitle && (
+        <span className="entry-subtitle mt-0.5 block truncate text-footnote text-display-on-light-tertiary">
+          {subtitle}
+        </span>
+      )}
+    </span>
+    {meta && (
+      <span className="entry-meta shrink-0 text-footnote text-display-on-light-quaternary">
+        {meta}
+      </span>
+    )}
+  </button>
+);