@exegia/corpora-ui 2.0.0 → 3.1.0

package/src/components/ui/chat/chips.tsx

@@ -1,106 +0,0 @@
-import { CornerDownLeft } from "lucide-react"
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { Favicon } from "./badges"
-import { Dot, type TDotTone } from "./dot"
-
-export interface ISourceChipProps extends React.ComponentPropsWithoutRef<"span"> {
-  favicon?: string
-  /** Domain in mono ("scoopdata.io"). */
-  children: React.ReactNode
-}
-
-/**
- * 18px pill with a favicon and a mono domain, inline in streamed text.
- *
- * @sketch "Atom / Source Chip"
- */
-export function SourceChip({ favicon, className, children, ...props }: ISourceChipProps): React.ReactElement {
-  return (
-    <span
-      data-slot="source-chip"
-      className={cn("inline-flex h-[18px] items-center gap-1.5 rounded-full bg-surface-subtle py-0.5 pl-0.5 pr-2 align-middle font-mono text-[10.5px] leading-none text-text-secondary", className)}
-      {...props}
-    >
-      <Favicon src={favicon} size={14} />
-      {children}
-    </span>
-  )
-}
-
-export interface IAvatarStackProps extends React.ComponentPropsWithoutRef<"span"> {
-  /** Up to three tones or image urls, rendered overlapping. */
-  items?: (TDotTone | { src: string })[]
-}
-
-/**
- * Three overlapping 14px circles.
- *
- * @sketch "Atom / Avatar Stack"
- */
-export function AvatarStack({ items = ["series-1", "series-3", "series-4"], className, ...props }: IAvatarStackProps): React.ReactElement {
-  return (
-    <span aria-hidden="true" data-slot="avatar-stack" className={cn("inline-flex items-center", className)} {...props}>
-      {items.slice(0, 3).map((item, i) => (
-        <span key={i} className={cn("inline-flex size-3.5 overflow-hidden rounded-full ring-2 ring-surface-card", i > 0 && "-ml-1.5")}>
-          {typeof item === "string" ? <Dot tone={item} className="size-full rounded-full" /> : <img alt="" className="size-full object-cover" src={item.src} />}
-        </span>
-      ))}
-    </span>
-  )
-}
-
-export interface IStatProps extends React.ComponentPropsWithoutRef<"div"> {
-  tone?: TDotTone
-  label: React.ReactNode
-  value: React.ReactNode
-  /** Secondary mono line ("−$2,377.66"). */
-  delta?: React.ReactNode
-  trend?: "positive" | "negative"
-}
-
-/**
- * 152×64 stat: dot + label, big coloured value, mono delta.
- *
- * @sketch "Atom / Stat / {Positive, Negative}"
- */
-export function Stat({ tone = "series-1", label, value, delta, trend = "positive", className, ...props }: IStatProps): React.ReactElement {
-  const color = trend === "positive" ? "text-semantic-success" : "text-semantic-danger"
-  return (
-    <div data-slot="stat" data-trend={trend} className={cn("flex w-[152px] flex-col gap-1", className)} {...props}>
-      <span className="flex items-center gap-2 text-[11px] leading-none text-text-secondary">
-        <Dot tone={tone} />
-        <span className="truncate">{label}</span>
-      </span>
-      <span className={cn("text-[17px] font-semibold leading-5", color)}>{value}</span>
-      {delta !== undefined ? <span className={cn("font-mono text-[11px] leading-none", color)}>{delta}</span> : null}
-    </div>
-  )
-}
-
-export interface IFollowUpRowProps extends Omit<React.ComponentPropsWithoutRef<"button">, "onSelect"> {
-  onSelect?: () => void
-}
-
-/**
- * Full-width follow-up prompt with a return-arrow icon and a hairline base.
- *
- * @sketch "Atom / Follow-up Row"
- */
-export function FollowUpRow({ onSelect, className, children, ...props }: IFollowUpRowProps): React.ReactElement {
-  return (
-    <button
-      type="button"
-      data-slot="follow-up-row"
-      onClick={onSelect}
-      className={cn(
-        "flex h-8 w-full items-center gap-2.5 border-b border-border-default px-1 text-left text-[12.5px] leading-none text-text-primary outline-none transition-colors hover:bg-surface-subtle focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-text-muted",
-        className
-      )}
-      {...props}
-    >
-      <CornerDownLeft />
-      <span className="truncate">{children}</span>
-    </button>
-  )
-}

package/src/components/ui/chat/dot.tsx

@@ -1,81 +0,0 @@
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-
-export type TDotTone =
-  | "success" | "warning" | "info" | "danger" | "neutral" | "accent" | "brand"
-  | "series-1" | "series-2" | "series-3" | "series-4" | "series-5"
-
-export const DOT_TONE_CLASSES: Record<TDotTone, string> = {
-  success: "bg-semantic-success",
-  warning: "bg-semantic-warning",
-  info: "bg-semantic-info",
-  danger: "bg-semantic-danger",
-  neutral: "bg-text-muted",
-  accent: "bg-accent-default",
-  brand: "bg-brand",
-  "series-1": "bg-chart-series-1",
-  "series-2": "bg-chart-series-2",
-  "series-3": "bg-chart-series-3",
-  "series-4": "bg-chart-series-4",
-  "series-5": "bg-chart-series-5",
-}
-
-export interface IDotProps extends React.ComponentPropsWithoutRef<"span"> {
-  tone?: TDotTone
-  size?: 6 | 8
-}
-
-/**
- * Status / series marker.
- *
- * @sketch "Atom / Dot / {Success, Warning, Info, Danger, Neutral, Accent, Brand, Series 3, Series 4}"
- */
-export function Dot({ tone = "neutral", size = 8, className, ...props }: IDotProps): React.ReactElement {
-  return (
-    <span
-      aria-hidden="true"
-      data-slot="dot"
-      data-tone={tone}
-      className={cn("inline-block shrink-0 rounded-full", size === 8 ? "size-2" : "size-1.5", DOT_TONE_CLASSES[tone], className)}
-      {...props}
-    />
-  )
-}
-
-export interface ILegendItemProps extends React.ComponentPropsWithoutRef<"span"> {
-  tone?: TDotTone
-  /** Optional trailing value ("42%"). */
-  value?: React.ReactNode
-}
-
-/**
- * Dot + label (+ value) row for chart legends.
- *
- * @sketch "Atom / Legend Item"
- */
-export function LegendItem({ tone = "series-1", value, className, children, ...props }: ILegendItemProps): React.ReactElement {
-  return (
-    <span data-slot="legend-item" className={cn("inline-flex h-4 items-center gap-2 text-[11px] leading-none text-text-secondary", className)} {...props}>
-      <Dot tone={tone} />
-      <span className="truncate">{children}</span>
-      {value !== undefined ? <span className="ml-auto pl-3 font-medium text-text-primary">{value}</span> : null}
-    </span>
-  )
-}
-
-/**
- * 20px neutral pill for chart-type badges and counts.
- *
- * @sketch "Atom / Pill"
- */
-export function Pill({ className, children, ...props }: React.ComponentPropsWithoutRef<"span">): React.ReactElement {
-  return (
-    <span
-      data-slot="pill"
-      className={cn("inline-flex h-5 shrink-0 items-center rounded-full bg-surface-subtle px-2.5 text-[11px] font-medium leading-none text-text-secondary", className)}
-      {...props}
-    >
-      {children}
-    </span>
-  )
-}

package/src/components/ui/chat/icon-button.tsx

@@ -1,43 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { Button, type TButtonProps } from "@/components/ui/button"
-
-export type TIconButtonProps = Omit<TButtonProps, "variant" | "size" | "glassVariant" | "aria-label"> & {
-  /** Required: icon-only controls need a name. */
-  "aria-label": string
-}
-
-/**
- * 24px ghost control framing a 16px icon.
- *
- * @sketch "Atom / Icon Button"
- */
-export function IconButton({ className, ...props }: TIconButtonProps): React.ReactElement {
-  return (
-    <Button
-      variant="ghost"
-      size="icon-xs"
-      className={cn("size-6 rounded-md text-icon hover:bg-surface-subtle hover:text-text-primary sm:size-6 [&_svg]:size-4! [&_svg]:opacity-100", className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * Violet "Agent" chip beside the assistant's name.
- *
- * @sketch "Atom / Badge / Agent"
- */
-export function AgentBadge({ className, children = "Agent", ...props }: React.ComponentPropsWithoutRef<"span">): React.ReactElement {
-  return (
-    <span
-      data-slot="agent-badge"
-      className={cn("inline-flex h-5 shrink-0 items-center rounded-[4px] bg-accent-subtle px-2 text-[11px] font-medium leading-none text-accent-text", className)}
-      {...props}
-    >
-      {children}
-    </span>
-  )
-}

package/src/components/ui/chat/icon-tile.tsx

@@ -1,33 +0,0 @@
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-
-const SIZES = { 28: "size-7 rounded-md", 32: "size-8 rounded-[10px]", 36: "size-9 rounded-[10px]", 40: "size-10 rounded-[10px]" } as const
-
-export interface IIconTileProps extends React.ComponentPropsWithoutRef<"span"> {
-  /** Tile edge in px. The design uses 40 (attachments), 32 (agent avatar), 28 (research kicker), 36 (flowchart node). */
-  size?: keyof typeof SIZES
-  /** Fill the tile with the accent-subtle tint instead of the neutral surface. */
-  tone?: "neutral" | "accent"
-}
-
-/**
- * Square tile that frames a 16px lucide icon.
- *
- * @sketch "Atom / Icon Tile"
- */
-export function IconTile({ size = 40, tone = "neutral", className, children, ...props }: IIconTileProps): React.ReactElement {
-  return (
-    <span
-      data-slot="icon-tile"
-      className={cn(
-        "inline-flex shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0",
-        SIZES[size],
-        tone === "accent" ? "bg-accent-subtle text-accent-text" : "bg-surface-subtle text-icon",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  )
-}

package/src/components/ui/chat/index.ts

@@ -1,12 +0,0 @@
-export { IconTile, type IIconTileProps } from "./icon-tile"
-export { Thumbnail, type IThumbnailProps } from "./thumbnail"
-export { AvatarHandle, type IAvatarHandleProps } from "./avatar-handle"
-export { AddButton, PlayButton, RemoveButton, SendButton, type TSendButtonProps } from "./buttons"
-export { DurationPill, Favicon, FileTypeBadge, QuoteRail, type IFaviconProps } from "./badges"
-export { Waveform, type IWaveformProps } from "./waveform"
-export { DOT_TONE_CLASSES, Dot, LegendItem, Pill, type IDotProps, type TDotTone, type ILegendItemProps } from "./dot"
-export { SegmentedToggle, type ISegmentedToggleOption, type ISegmentedToggleProps } from "./segmented-toggle"
-export { AgentBadge, IconButton, type TIconButtonProps } from "./icon-button"
-export { Signal, Tag, type TSignalLevel, type ISignalProps, type ITagProps, type TTagTone } from "./tag"
-export { AvatarStack, FollowUpRow, SourceChip, Stat, type IAvatarStackProps, type IFollowUpRowProps, type ISourceChipProps, type IStatProps } from "./chips"
-export { InlineSource, type IInlineSourceProps } from "./inline-source"

package/src/components/ui/chat/inline-source.tsx

@@ -1,94 +0,0 @@
-"use client"
-
-import { ArrowUpRight } from "lucide-react"
-import type * as React from "react"
-import { Button } from "@/components/ui/button"
-import {
-  PreviewCard,
-  PreviewCardPopup,
-  PreviewCardTrigger,
-} from "@/components/ui/preview-card"
-import { cn } from "@/lib/utils"
-import { Favicon } from "./badges"
-import { SourceChip } from "./chips"
-
-export interface IInlineSourceProps
-  extends Omit<React.ComponentPropsWithoutRef<"span">, "title"> {
-  /** Domain shown in the chip ("scoopdata.io"). */
-  domain: React.ReactNode
-  favicon?: string
-  /** Source title in the popover. */
-  title?: React.ReactNode
-  /** Excerpt or summary in the popover. */
-  description?: React.ReactNode
-  /** Opens the source in a new tab from the popover. */
-  href?: string
-  openLabel?: React.ReactNode
-}
-
-/**
- * Inline citation: a SourceChip that, when it carries a title, description
- * or href, opens a hover preview with an "Open source" button.
- *
- * @sketch "Atom / Inline Source"
- */
-export function InlineSource({
-  domain,
-  favicon,
-  title,
-  description,
-  href,
-  openLabel = "Open source",
-  className,
-  ...props
-}: IInlineSourceProps): React.ReactElement {
-  const chip = (
-    <SourceChip
-      className={cn(href || title || description ? "cursor-default" : null, className)}
-      data-slot="inline-source"
-      favicon={favicon}
-      {...props}
-    >
-      {domain}
-    </SourceChip>
-  )
-  if (!href && !title && !description) return chip
-
-  return (
-    <PreviewCard>
-      <PreviewCardTrigger delay={250} render={chip} />
-      <PreviewCardPopup
-        className="w-72 flex-col gap-2 p-3"
-        data-slot="inline-source-preview"
-      >
-        <span className="flex items-center gap-2">
-          <Favicon src={favicon} />
-          <span className="flex min-w-0 flex-col">
-            {title ? (
-              <span className="truncate text-xs font-semibold leading-4 text-foreground">
-                {title}
-              </span>
-            ) : null}
-            <span className="truncate font-mono text-[11px] leading-4 text-muted-foreground">
-              {domain}
-            </span>
-          </span>
-        </span>
-        {description ? (
-          <p className="text-xs leading-4 text-foreground/90">{description}</p>
-        ) : null}
-        {href ? (
-          <Button
-            className="self-start"
-            render={<a href={href} rel="noreferrer" target="_blank" />}
-            size="xs"
-            variant="outline"
-          >
-            {openLabel}
-            <ArrowUpRight className="size-3" />
-          </Button>
-        ) : null}
-      </PreviewCardPopup>
-    </PreviewCard>
-  )
-}

package/src/components/ui/chat/segmented-toggle.tsx

@@ -1,99 +0,0 @@
-"use client"
-
-import { motion, useReducedMotion } from "motion/react"
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { SPRING_LAYOUT } from "@/lib/ease"
-import { playCue } from "@/lib/sound"
-
-export interface ISegmentedToggleOption<T extends string> {
-  value: T
-  label: React.ReactNode
-}
-
-export interface ISegmentedToggleProps<T extends string> extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
-  options: readonly ISegmentedToggleOption<T>[]
-  value?: T
-  defaultValue?: T
-  onValueChange?: (value: T) => void
-  /** Accessible group name. */
-  label?: string
-  sound?: boolean
-}
-
-/**
- * Two-or-more segment switch with a sliding active pill.
- *
- * @sketch "Atom / Segmented Toggle", "Atom / Segmented Toggle / Right"
- */
-export function SegmentedToggle<T extends string>({
-  options,
-  value,
-  defaultValue,
-  onValueChange,
-  label,
-  sound = true,
-  className,
-  ...props
-}: ISegmentedToggleProps<T>): React.ReactElement {
-  const reduceMotion = useReducedMotion()
-  const layoutId = React.useId()
-  const [internal, setInternal] = React.useState<T>(defaultValue ?? options[0].value)
-  const current = value ?? internal
-
-  const select = (next: T) => {
-    if (next === current) return
-    if (value === undefined) setInternal(next)
-    onValueChange?.(next)
-    if (sound) playCue("toggle")
-  }
-
-  const onKeyDown = (e: React.KeyboardEvent, index: number) => {
-    const delta = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0
-    if (!delta) return
-    e.preventDefault()
-    const next = options[(index + delta + options.length) % options.length]
-    select(next.value)
-    ;(e.currentTarget.parentElement?.querySelector(`[data-value="${next.value}"]`) as HTMLElement | null)?.focus()
-  }
-
-  return (
-    <div
-      role="radiogroup"
-      aria-label={label}
-      data-slot="segmented-toggle"
-      className={cn("inline-flex h-6 items-center rounded-md bg-surface-subtle p-0.5", className)}
-      {...props}
-    >
-      {options.map((option, index) => {
-        const active = option.value === current
-        return (
-          <button
-            key={option.value}
-            type="button"
-            role="radio"
-            aria-checked={active}
-            data-value={option.value}
-            tabIndex={active ? 0 : -1}
-            onClick={() => select(option.value)}
-            onKeyDown={(e) => onKeyDown(e, index)}
-            className={cn(
-              "relative h-5 rounded-[5px] px-2 text-[11px] font-medium leading-none outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
-              active ? "text-text-primary" : "text-text-secondary hover:text-text-primary"
-            )}
-          >
-            {active ? (
-              <motion.span
-                aria-hidden="true"
-                layoutId={layoutId}
-                transition={reduceMotion ? { duration: 0 } : SPRING_LAYOUT}
-                className="absolute inset-0 rounded-[5px] bg-surface-card shadow-[0_1px_2px_rgb(0_0_0/0.12)] dark:shadow-[0_1px_2px_rgb(0_0_0/0.5)]"
-              />
-            ) : null}
-            <span className="relative">{option.label}</span>
-          </button>
-        )
-      })}
-    </div>
-  )
-}

package/src/components/ui/chat/tag.tsx

@@ -1,61 +0,0 @@
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-
-export type TTagTone = "amber" | "purple" | "blue" | "green"
-
-const TONE: Record<TTagTone, string> = {
-  amber: "border-tag-amber-border bg-tag-amber-fill text-tag-amber-text",
-  purple: "border-tag-purple-border bg-tag-purple-fill text-tag-purple-text",
-  blue: "border-tag-blue-border bg-tag-blue-fill text-tag-blue-text",
-  green: "border-tag-green-border bg-tag-green-fill text-tag-green-text",
-}
-
-export interface ITagProps extends React.ComponentPropsWithoutRef<"span"> {
-  tone?: TTagTone
-}
-
-/**
- * 22px tinted label with a hairline border.
- *
- * @sketch "Atom / Tag / {Amber, Purple, Blue, Green}"
- */
-export function Tag({ tone = "blue", className, children, ...props }: ITagProps): React.ReactElement {
-  return (
-    <span
-      data-slot="tag"
-      data-tone={tone}
-      className={cn("inline-flex h-[22px] shrink-0 items-center rounded-lg border px-2 text-[11px] font-medium leading-none", TONE[tone], className)}
-      {...props}
-    >
-      {children}
-    </span>
-  )
-}
-
-export type TSignalLevel = "high" | "medium" | "low"
-
-const SIGNAL: Record<TSignalLevel, { lit: number; color: string }> = {
-  high: { lit: 3, color: "bg-semantic-success" },
-  medium: { lit: 2, color: "bg-semantic-warning" },
-  low: { lit: 1, color: "bg-text-muted" },
-}
-
-export interface ISignalProps extends React.ComponentPropsWithoutRef<"span"> {
-  level?: TSignalLevel
-}
-
-/**
- * Three-bar confidence meter.
- *
- * @sketch "Atom / Signal / {High, Medium, Low}"
- */
-export function Signal({ level = "high", className, ...props }: ISignalProps): React.ReactElement {
-  const { lit, color } = SIGNAL[level]
-  return (
-    <span role="img" aria-label={`${level} signal`} data-slot="signal" data-level={level} className={cn("inline-flex h-2.5 items-end gap-0.5", className)} {...props}>
-      {[0, 1, 2].map((i) => (
-        <span key={i} className={cn("w-1 rounded-[1px]", i < lit ? color : "bg-surface-subtle", i === 0 ? "h-1.5" : i === 1 ? "h-2" : "h-2.5")} />
-      ))}
-    </span>
-  )
-}

package/src/components/ui/chat/thumbnail.tsx

@@ -1,31 +0,0 @@
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-
-export interface IThumbnailProps extends React.ComponentPropsWithoutRef<"span"> {
-  src?: string
-  alt?: string
-  /** `sm` is the 40px chip tile (radius 10); `lg` the 240×160 preview (radius 14). */
-  size?: "sm" | "lg"
-}
-
-/**
- * Image slot with a gradient placeholder when `src` is missing.
- *
- * @sketch "Atom / Thumbnail / Small", "Atom / Thumbnail / Large"
- */
-export function Thumbnail({ src, alt = "", size = "sm", className, children, ...props }: IThumbnailProps): React.ReactElement {
-  return (
-    <span
-      data-slot="thumbnail"
-      className={cn(
-        "relative block shrink-0 overflow-hidden bg-[linear-gradient(135deg,#8b7bd8_0%,#c9b3ff_45%,#f2b48a_100%)]",
-        size === "sm" ? "size-10 rounded-[10px]" : "aspect-[3/2] w-60 rounded-[14px]",
-        className
-      )}
-      {...props}
-    >
-      {src ? <img alt={alt} className="size-full object-cover" src={src} /> : null}
-      {children}
-    </span>
-  )
-}

package/src/components/ui/chat/waveform.tsx

@@ -1,30 +0,0 @@
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-
-const DEFAULT_BARS = [0.3, 0.6, 1, 0.75, 0.45, 0.9, 0.55, 0.35, 0.8, 1, 0.6, 0.4, 0.7, 0.5, 0.85, 0.3, 0.65, 0.95, 0.5, 0.35]
-
-export interface IWaveformProps extends React.ComponentPropsWithoutRef<"span"> {
-  /** Bar heights in 0…1. Defaults to a 20-bar sample. */
-  bars?: number[]
-  /** Bars up to this index render in the accent colour (playback progress). */
-  progress?: number
-}
-
-/**
- * Static 20px-tall bar waveform for audio attachments.
- *
- * @sketch "Atom / Waveform"
- */
-export function Waveform({ bars = DEFAULT_BARS, progress = 0, className, ...props }: IWaveformProps): React.ReactElement {
-  return (
-    <span aria-hidden="true" data-slot="waveform" className={cn("inline-flex h-5 items-center gap-[2.5px]", className)} {...props}>
-      {bars.map((h, i) => (
-        <span
-          key={i}
-          className={cn("w-0.5 rounded-full", i < progress ? "bg-accent-default" : "bg-text-primary")}
-          style={{ height: `${Math.max(0.15, Math.min(1, h)) * 100}%` }}
-        />
-      ))}
-    </span>
-  )
-}

package/src/components/ui/checkbox.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
-import type React from "react";
-import { playCue } from "@/lib/sound";
-import { cn } from "@/lib/utils";
-
-export function Checkbox({
-  className,
-  sound = true,
-  onCheckedChange,
-  ...props
-}: CheckboxPrimitive.Root.Props & {
-  /** Play the cuelume toggle cue on check/uncheck. Silent until bindSounds(). */
-  sound?: boolean;
-}): React.ReactElement {
-  return (
-    <CheckboxPrimitive.Root
-      // Cued off the state change rather than data-cuelume-toggle: Base UI
-      // renders the native input as a *sibling* of this root, so a click on an
-      // associated <label> never bubbles through an element carrying the
-      // attribute and would toggle silently. This fires once for box clicks,
-      // label clicks and keyboard Space alike, and not for programmatic changes.
-      onCheckedChange={(checked, eventDetails) => {
-        if (sound) playCue("toggle");
-        onCheckedChange?.(checked, eventDetails);
-      }}
-      className={cn(
-        "relative inline-flex size-4.5 shrink-0 cursor-pointer items-center justify-center rounded-[.25rem] border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:cursor-not-allowed data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none",
-        className,
-      )}
-      data-slot="checkbox"
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        className="absolute -inset-px flex items-center justify-center rounded-[.25rem] text-primary-foreground data-unchecked:hidden data-checked:bg-primary data-indeterminate:text-foreground"
-        data-slot="checkbox-indicator"
-        render={(
-          props: React.ComponentProps<"span">,
-          state: CheckboxPrimitive.Indicator.State,
-        ) => (
-          <span {...props}>
-            {state.indeterminate ? (
-              <svg
-                aria-hidden="true"
-                className="size-3.5 sm:size-3"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="3"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M5.252 12h13.496" />
-              </svg>
-            ) : (
-              <svg
-                aria-hidden="true"
-                className="size-3.5 sm:size-3"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="3"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
-              </svg>
-            )}
-          </span>
-        )}
-      />
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { CheckboxPrimitive };