@xemahq/ui-kernel 0.11.1 → 0.12.0

package/src/ui/primitives/dropdown-menu.tsx

@@ -1,179 +0,0 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-import * as React from "react";
-
-import { cn } from '../cn';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body-1 outline-none data-[state=open]:bg-accent focus:bg-accent",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body-1 outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-body-1 outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-body-1 outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-body-1 font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("ml-auto text-body-1 tracking-widest opacity-60", className)} {...props} />;
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};

package/src/ui/primitives/form-stepper.tsx

@@ -1,94 +0,0 @@
-import { Check } from 'lucide-react';
-
-import { cn } from '../cn';
-import { FormStepStatus, type FormStep } from './form-stepper.types';
-
-interface FormStepperProps {
-  readonly steps: readonly FormStep[];
-}
-
-/**
- * Vertical stepper for in-dialog multi-step forms — numbered badges with a
- * connector rail. Every step's body is rendered inline (pending steps are
- * dimmed and pointer-disabled). The dialog owns the submit button; this
- * primitive renders structure only.
- */
-export function FormStepper({ steps }: FormStepperProps) {
-  return (
-    <ol className="space-y-4">
-      {steps.map((step, index) => (
-        <FormStepperItem
-          key={step.key}
-          step={step}
-          stepNumber={index + 1}
-          isLast={index === steps.length - 1}
-        />
-      ))}
-    </ol>
-  );
-}
-
-interface FormStepperItemProps {
-  readonly step: FormStep;
-  readonly stepNumber: number;
-  readonly isLast: boolean;
-}
-
-function FormStepperItem({ step, stepNumber, isLast }: FormStepperItemProps) {
-  const isPending = step.status === FormStepStatus.PENDING;
-  const isDone = step.status === FormStepStatus.DONE;
-  const isActive = step.status === FormStepStatus.ACTIVE;
-
-  return (
-    <li className="relative flex gap-3">
-      {/* Connector rail — hugs the numbered badge column. Hidden on the last
-          item so the chain doesn't dangle past the final step. */}
-      {!isLast && (
-        <span
-          aria-hidden
-          className={cn(
-            'absolute left-3.5 top-8 bottom-0 w-px -translate-x-1/2',
-            isDone ? 'bg-primary/30' : 'bg-rule',
-          )}
-        />
-      )}
-
-      <span
-        className={cn(
-          'relative z-[1] mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-caption font-semibold',
-          isDone && 'border-primary/40 bg-primary/15 text-primary',
-          isActive && 'border-primary bg-primary text-primary-foreground',
-          isPending && 'border-rule bg-paper-elev text-ink-3',
-        )}
-      >
-        {isDone ? <Check className="h-3.5 w-3.5" strokeWidth={2.5} /> : stepNumber}
-      </span>
-
-      <div
-        className={cn(
-          'flex-1 min-w-0 rounded-lg border bg-card p-4 transition-opacity',
-          isActive && 'border-primary/40 shadow-sm',
-          isDone && 'border-rule',
-          isPending && 'border-rule opacity-60',
-        )}
-      >
-        <div className="mb-3 space-y-0.5">
-          <p
-            className={cn(
-              'text-body-1 font-medium',
-              isPending ? 'text-ink-3' : 'text-foreground',
-            )}
-          >
-            {step.label}
-          </p>
-          {step.hint && <p className="text-caption text-ink-3">{step.hint}</p>}
-        </div>
-        {/* Keep pointer/keyboard focus out of pending steps without disabling
-            them globally — every input retains its native disabled semantics. */}
-        <div className={cn(isPending && 'pointer-events-none select-none')}>
-          {step.children}
-        </div>
-      </div>
-    </li>
-  );
-}

package/src/ui/primitives/form-stepper.types.ts

@@ -1,15 +0,0 @@
-import type { ReactNode } from 'react';
-
-export enum FormStepStatus {
-  PENDING = 'pending',
-  ACTIVE = 'active',
-  DONE = 'done',
-}
-
-export interface FormStep {
-  readonly key: string;
-  readonly label: string;
-  readonly hint?: string;
-  readonly status: FormStepStatus;
-  readonly children: ReactNode;
-}

package/src/ui/primitives/input.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import { cn } from '../cn';
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-body-1 file:font-medium file:text-foreground placeholder:text-ink-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-body-1",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };

package/src/ui/primitives/label.tsx

@@ -1,17 +0,0 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from '../cn';
-
-const labelVariants = cva("text-body-1 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };

package/src/ui/primitives/overflow-tabs.tsx

@@ -1,331 +0,0 @@
-/**
- * OverflowTabs — editorial tab strip that auto-collapses overflowing items
- * into a "More…" dropdown instead of scrolling horizontally.
- *
- * Behavior:
- *   1. All tabs render off-screen for measurement (visibility: hidden, but
- *      still laid out so widths are real).
- *   2. A ResizeObserver tracks the container width; once known we walk the
- *      tab widths left-to-right and pick the cutoff where they still fit
- *      alongside a fixed "More…" trigger.
- *   3. Visible tabs render inline; overflow tabs go into a dropdown.
- *
- * The active tab is always pulled into the visible set, even if its index
- * would be in the overflow bucket — users should never lose sight of "where
- * am I." Same for tabs marked `pinned: true` (indicator dot is sticky).
- */
-import { ChevronDown, X } from 'lucide-react';
-import {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ComponentType,
-} from 'react';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from './dropdown-menu';
-import { cn } from '../cn';
-
-export interface OverflowTab {
-  readonly value: string;
-  readonly label: string;
-  /** Optional warning/indicator dot rendered next to the label. */
-  readonly indicator?: boolean;
-  /** Optional numeric badge. */
-  readonly count?: number;
-  /**
-   * A pinned tab is ALWAYS in the visible set (never collapsed into "More…")
-   * and never renders a close affordance, even when `onClose` is supplied.
-   * Used for a panel's permanent first tab (e.g. the Vista file browser).
-   */
-  readonly pinned?: boolean;
-  /** Optional leading glyph (a `lucide-react` icon component). */
-  readonly icon?: ComponentType<{ className?: string }>;
-}
-
-interface OverflowTabsProps {
-  readonly tabs: readonly OverflowTab[];
-  readonly value: string;
-  readonly onChange: (value: string) => void;
-  /** Reserved px for the "More…" trigger when measuring. Default 88. */
-  readonly moreTriggerWidth?: number;
-  readonly className?: string;
-  /** Each tab's px gap from the next. Matches the visual rendering. Default 4. */
-  readonly gap?: number;
-  /**
-   * When provided, every tab renders a hover `×` that calls this with the
-   * tab value. Closable tabs (multi-thread surfaces, etc.) opt in by
-   * passing it; surfaces that just navigate omit it.
-   */
-  readonly onClose?: (value: string) => void;
-}
-
-export function OverflowTabs({
-  tabs,
-  value,
-  onChange,
-  moreTriggerWidth = 88,
-  className,
-  gap = 4,
-  onClose,
-}: OverflowTabsProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const measureRef = useRef<HTMLDivElement>(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [tabWidths, setTabWidths] = useState<readonly number[]>([]);
-
-  // Measure container width and react to resizes.
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) {
-      return;
-    }
-    const ro = new ResizeObserver((entries) => {
-      const w = entries[0]?.contentRect.width ?? el.clientWidth;
-      setContainerWidth(w);
-    });
-    ro.observe(el);
-    setContainerWidth(el.clientWidth);
-    return () => ro.disconnect();
-  }, []);
-
-  // Measure each tab's natural width once after first render. We re-measure
-  // when the tab list itself changes (new tabs, label edits).
-  useLayoutEffect(() => {
-    const el = measureRef.current;
-    if (!el) {
-      return;
-    }
-    const children = Array.from(el.children) as HTMLElement[];
-    setTabWidths(children.map((c) => c.getBoundingClientRect().width));
-  }, [tabs]);
-
-  // Decide split point: walk left-to-right, summing widths + gaps, stopping
-  // when the next tab would exceed (container - moreTrigger). The active
-  // tab and any pinned tabs are always pulled into the visible set.
-  const { visible, overflow } = useMemo(() => {
-    if (tabWidths.length !== tabs.length || containerWidth === 0) {
-      return { visible: tabs, overflow: [] as readonly OverflowTab[] };
-    }
-    const totalNatural =
-      tabWidths.reduce((s, w) => s + w, 0) + gap * Math.max(0, tabs.length - 1);
-    if (totalNatural <= containerWidth) {
-      return { visible: tabs, overflow: [] as readonly OverflowTab[] };
-    }
-    const budget = containerWidth - moreTriggerWidth;
-    const vis: OverflowTab[] = [];
-    const over: OverflowTab[] = [];
-    let used = 0;
-    for (const [i, tab] of tabs.entries()) {
-      const natural = tabWidths[i];
-      if (natural === undefined) {
-        // Unreachable: the length-parity guard above already returned. Kept as a
-        // real check because the alternative — treating a missing measurement as
-        // 0px — would lay tabs out against a budget they don't actually fit.
-        // Fall back to the same all-visible layout the parity guard renders.
-        return { visible: tabs, overflow: [] as readonly OverflowTab[] };
-      }
-      const w = natural + (vis.length > 0 ? gap : 0);
-      // A pinned tab is never collapsed — it stays visible whatever the budget
-      // says, so a panel's permanent first tab can't hide behind "More…".
-      if (tab.pinned === true || used + w <= budget) {
-        vis.push(tab);
-        used += w;
-      } else {
-        over.push(tab);
-      }
-    }
-    // Force the active tab into the visible set if it ended up in overflow.
-    // `find` (not `findIndex` + lookup) so the hit is typed as present.
-    const activeTab = tabs.find((t) => t.value === value);
-    if (activeTab !== undefined) {
-      const inVisible = vis.some((t) => t.value === activeTab.value);
-      if (!inVisible) {
-        // Swap the last visible for the active one to keep the budget OK.
-        const dropped = vis.pop();
-        if (dropped) {
-          over.unshift(dropped);
-        }
-        vis.push(activeTab);
-        const removeIdx = over.findIndex((t) => t.value === activeTab.value);
-        if (removeIdx !== -1) {
-          over.splice(removeIdx, 1);
-        }
-      }
-    }
-    return { visible: vis, overflow: over };
-  }, [tabs, tabWidths, containerWidth, gap, moreTriggerWidth, value]);
-
-  return (
-    <div
-      className={cn(
-        'relative -mb-px flex items-end border-b border-rule',
-        className,
-      )}
-    >
-      {/* Off-screen measurement layer — renders ALL tabs so widths are real. */}
-      <div
-        ref={measureRef}
-        aria-hidden
-        className="pointer-events-none absolute left-0 top-0 flex items-center gap-1 opacity-0"
-        style={{ visibility: 'hidden' }}
-      >
-        {tabs.map((t) => (
-          <TabPill
-            key={`measure-${t.value}`}
-            tab={t}
-            active={false}
-            onClick={() => undefined}
-          />
-        ))}
-      </div>
-
-      {/* Live visible row. */}
-      <div
-        ref={containerRef}
-        role="tablist"
-        className="flex flex-1 items-end gap-1 overflow-hidden"
-      >
-        {visible.map((t) => (
-          <TabPill
-            key={t.value}
-            tab={t}
-            active={t.value === value}
-            onClick={() => onChange(t.value)}
-            onClose={
-              onClose && t.pinned !== true ? () => onClose(t.value) : undefined
-            }
-          />
-        ))}
-      </div>
-
-      {overflow.length > 0 && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              className="ml-1 -mb-px inline-flex shrink-0 items-center gap-1 whitespace-nowrap px-2 py-2 text-body-1 text-ink-3 transition-colors hover:text-ink"
-              aria-label="More tabs"
-            >
-              More
-              <span className="rounded bg-paper-elev px-1 font-mono text-[10px] leading-4 text-ink-4">
-                {overflow.length}
-              </span>
-              <ChevronDown className="h-3 w-3" strokeWidth={1.6} />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="min-w-[180px]">
-            {overflow.map((t) => (
-              <DropdownMenuItem
-                key={t.value}
-                onClick={() => onChange(t.value)}
-                className={cn(
-                  t.value === value && 'bg-accent/60 text-foreground',
-                )}
-              >
-                <span className="flex-1 truncate">{t.label}</span>
-                {t.count !== undefined && (
-                  <span className="ml-2 text-caption tabular-nums text-ink-4">
-                    {t.count}
-                  </span>
-                )}
-                {t.indicator && (
-                  <span
-                    aria-hidden
-                    className="ml-2 inline-block h-1.5 w-1.5 rounded-full bg-warning"
-                  />
-                )}
-                {onClose && t.pinned !== true && (
-                  <button
-                    type="button"
-                    aria-label={`Close ${t.label}`}
-                    className="ml-2 rounded p-0.5 text-ink-4 hover:bg-paper-elev hover:text-ink"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onClose(t.value);
-                    }}
-                  >
-                    <X className="h-3 w-3" strokeWidth={1.8} />
-                  </button>
-                )}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-    </div>
-  );
-}
-
-function TabPill({
-  tab,
-  active,
-  onClick,
-  onClose,
-}: Readonly<{
-  tab: OverflowTab;
-  active: boolean;
-  onClick: () => void;
-  onClose?: () => void;
-}>) {
-  return (
-    <div
-      className={cn(
-        'group relative -mb-px inline-flex items-center gap-1.5 whitespace-nowrap rounded-t-md border px-3 py-2 text-body-1 transition-colors',
-        active
-          ? 'border-rule border-b-transparent bg-paper-elev text-ink font-medium'
-          : 'border-transparent text-ink-3 hover:border-rule/40 hover:bg-paper-elev/60 hover:text-ink-2',
-      )}
-    >
-      <button
-        type="button"
-        role="tab"
-        aria-selected={active}
-        onClick={onClick}
-        className="inline-flex items-center gap-2 outline-none"
-      >
-        {tab.icon && <tab.icon className="h-3.5 w-3.5 shrink-0" />}
-        {tab.label}
-        {tab.count !== undefined && (
-          <span className="rounded bg-paper-elev px-1 font-mono text-[10px] tabular-nums leading-4 text-ink-4">
-            {tab.count}
-          </span>
-        )}
-        {tab.indicator && (
-          <span
-            aria-hidden
-            className="inline-block h-1.5 w-1.5 rounded-full bg-warning"
-          />
-        )}
-      </button>
-      {onClose && (
-        <button
-          type="button"
-          aria-label={`Close ${tab.label}`}
-          onClick={(e) => {
-            e.stopPropagation();
-            onClose();
-          }}
-          className={cn(
-            'rounded p-0.5 text-ink-4 transition-opacity hover:bg-paper hover:text-ink',
-            active ? 'opacity-70' : 'opacity-0 group-hover:opacity-70',
-          )}
-        >
-          <X className="h-3 w-3" strokeWidth={1.8} />
-        </button>
-      )}
-      {active && (
-        <span
-          aria-hidden
-          className="absolute inset-x-2 bottom-[-1px] h-[2px] rounded-full bg-primary"
-        />
-      )}
-    </div>
-  );
-}

package/src/ui/primitives/popover.tsx

@@ -1,33 +0,0 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-
-import { cn } from '../cn';
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
-  container?: HTMLElement | null;
-};
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  PopoverContentProps
->(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => (
-  <PopoverPrimitive.Portal container={container ?? undefined}>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent };