@lovett/ui 0.0.4 → 0.0.6

package/src/lib/color.ts

@@ -0,0 +1,111 @@
+/**
+ * Colour maths for brand-palette surfaces — hex to rgb/hsl, WCAG contrast.
+ *
+ * Promoted from `apps/extension/src/sidepanel/color-utils.ts` when the
+ * workspace's Brand Profile grew the same colour cards the extension's
+ * Colors tab already had. Two consumers, one implementation — the same
+ * rule the platform-chrome tokens were consolidated under.
+ *
+ * Pure functions, no deps, no DOM.
+ */
+
+export type RgbTuple = [number, number, number]
+
+/** Parse `#abc` or `#aabbcc` (with or without the hash) into an rgb tuple. */
+export function hexToRgbTuple(hex: string): RgbTuple {
+  const h = hex.replace('#', '')
+  const full =
+    h.length === 3
+      ? h
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : h
+  const r = parseInt(full.slice(0, 2), 16) || 0
+  const g = parseInt(full.slice(2, 4), 16) || 0
+  const b = parseInt(full.slice(4, 6), 16) || 0
+  return [r, g, b]
+}
+
+/** `"24, 119, 242"` — display form, the inside of an `rgb()`. */
+export function rgbString(hex: string): string {
+  const [r, g, b] = hexToRgbTuple(hex)
+  return `${r}, ${g}, ${b}`
+}
+
+/**
+ * `"rgb(24, 119, 242)"` — a complete CSS value, for copying.
+ *
+ * Lives here rather than being assembled at the call site because the
+ * token-boundary lint reads `rgb(...)` in app code as a raw colour
+ * literal — correctly, since it cannot tell a clipboard string from a
+ * style. packages/ui is the exempt substrate, so this is its job.
+ */
+export function rgbCss(hex: string): string {
+  return `rgb(${rgbString(hex)})`
+}
+
+/** `"217° 89% 52%"` — display form, not a CSS value. */
+export function hslString(hex: string): string {
+  const [r, g, b] = hexToRgbTuple(hex).map((v) => v / 255) as RgbTuple
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+  let h = 0
+  let s = 0
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    if (max === r) h = (g - b) / d + (g < b ? 6 : 0)
+    else if (max === g) h = (b - r) / d + 2
+    else h = (r - g) / d + 4
+    h /= 6
+  }
+  return `${Math.round(h * 360)}° ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
+}
+
+/** WCAG 2.1 relative luminance (sRGB). */
+export function relativeLuminance(hex: string): number {
+  const lin = hexToRgbTuple(hex).map((v) => {
+    const c = v / 255
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  }) as RgbTuple
+  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2]
+}
+
+/** Contrast ratio between two relative luminances. */
+export function contrastRatio(a: number, b: number): number {
+  const [hi, lo] = a > b ? [a, b] : [b, a]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+/**
+ * Whether black or white text reads better ON this colour, and at what
+ * ratio. Used to pick a legible foreground for a swatch banner.
+ */
+export function bestTextOn(hex: string): { onLight: boolean; ratio: number } {
+  const l = relativeLuminance(hex)
+  const vsWhite = contrastRatio(l, 1)
+  const vsBlack = contrastRatio(l, 0)
+  return { onLight: vsBlack >= vsWhite, ratio: Math.max(vsWhite, vsBlack) }
+}
+
+export interface WcagBadge {
+  label: string
+  pass: boolean
+}
+
+/**
+ * The three standard thresholds, scored against the BEST of black-or-white
+ * text on this swatch. It answers "can any text sit on this colour", which
+ * is the useful question for a brand palette — not "is this colour itself
+ * readable", which depends on a background the palette doesn't know.
+ */
+export function wcagBadges(hex: string): WcagBadge[] {
+  const best = bestTextOn(hex).ratio
+  return [
+    { label: 'AA Large', pass: best >= 3 },
+    { label: 'AA', pass: best >= 4.5 },
+    { label: 'AAA', pass: best >= 7 },
+  ]
+}

package/src/meta-cell.tsx

@@ -0,0 +1,52 @@
+/**
+ * MetaCell — a labelled fact in a recessed well.
+ *
+ * The second v2 atom: a micro uppercase label over a value, on
+ * `--surface-inset`. Every "Category / Elements found / Updated / Weight"
+ * pair in the product is this shape, and it had been hand-rolled per
+ * lens with five different label sizes and four tracking values.
+ *
+ * Numbers get `tabular-nums` unconditionally — a MetaCell value is by
+ * definition something you compare or watch update.
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from './lib/utils'
+
+export interface MetaCellProps extends HTMLAttributes<HTMLDivElement> {
+  label: ReactNode
+  children: ReactNode
+  /** Optional leading glyph in the label row. */
+  icon?: ReactNode
+}
+
+export const MetaCell = forwardRef<HTMLDivElement, MetaCellProps>(
+  function MetaCell({ label, children, icon, className, style, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-col gap-0.5 px-2.5 py-2 min-w-0', className)}
+        style={{
+          background: 'rgb(var(--surface-inset))',
+          border: '1px solid rgb(var(--border))',
+          borderRadius: 'var(--radius-sm)',
+          ...style,
+        }}
+        {...rest}
+      >
+        <span
+          className="inline-flex items-center gap-1 text-[9px] font-semibold uppercase tracking-[0.06em]"
+          style={{ color: 'rgb(var(--text-tertiary))' }}
+        >
+          {icon}
+          {label}
+        </span>
+        <span
+          className="text-[12px] font-semibold tabular-nums truncate"
+          style={{ color: 'rgb(var(--foreground))' }}
+        >
+          {children}
+        </span>
+      </div>
+    )
+  },
+)

package/src/meta-previews/MetaFeedCarousel.tsx

@@ -25,7 +25,7 @@ const C = {
   name: 'rgb(8, 8, 8)',
   sub: 'rgb(101, 103, 107)',
   body: 'rgb(0, 0, 0)',
-  seeMore: '#1877F2',
+  seeMore: 'var(--color-meta-blue)',
   imageBg: '#F0F2F5',
   cardBorder: 'rgba(0, 0, 0, 0.1)',
   headline: 'rgb(28, 32, 40)',

package/src/meta-previews/MetaFeedPreview.tsx

@@ -28,7 +28,7 @@ const C = {
   name: 'rgb(8, 8, 8)',
   sub: 'rgb(101, 103, 107)',
   body: 'rgb(0, 0, 0)',
-  seeMore: '#1877F2',
+  seeMore: 'var(--color-meta-blue)',
   imageBg: '#F0F2F5',
   imageEdge: 'rgba(0, 0, 0, 0.06)',
   card: '#F7F8FA',

package/src/microsoft-logo.tsx

@@ -0,0 +1,33 @@
+/**
+ * MicrosoftLogo — the Microsoft four-square brand mark, for "Sign in with
+ * Microsoft" SSO buttons (ADR-124 D8). Lucide has no Microsoft glyph, so this
+ * is a bespoke SVG primitive — which `@lovett/ui` is the one allowed home for
+ * (CLAUDE.md §2/§6). The four square colours are Microsoft's required brand
+ * colours (per their identity guidelines); they are intrinsic to the mark, not
+ * theme tokens, exactly like BrandLogoTile's imagery — so they live here as
+ * literals rather than `tokens.css` variables.
+ */
+
+export interface MicrosoftLogoProps {
+  /** Square size in px. Default 18 (matches a control-height button glyph). */
+  size?: number
+  className?: string
+}
+
+export default function MicrosoftLogo({ size = 18, className }: MicrosoftLogoProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 21 21"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <rect x="1" y="1" width="9" height="9" fill="#f25022" />
+      <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
+      <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
+      <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
+    </svg>
+  )
+}

package/src/modal.tsx

@@ -1,4 +1,11 @@
-import { useEffect, type HTMLAttributes, type ReactNode } from 'react'
+import {
+  Children,
+  isValidElement,
+  useEffect,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
 import { X } from 'lucide-react'
 import { cn } from './lib/utils'
 
@@ -74,28 +81,92 @@ function Modal({ isOpen, onClose, title, children, className }: ModalProps) {
         {/* Header — title + close. Sits on the outer card surface,
            outside any tray. Shrink-0 so it never collapses when the
            body grows. */}
-        <div className="flex items-center justify-between shrink-0 px-6 pt-6 pb-4">
-          <h2 className="text-xl font-bold text-[rgb(var(--foreground))]">
+        {/* Header. Geometry from the B/C proposal at /design-system/modals:
+           12px/16px padding, a 24px close button and centre alignment.
+
+           It was px-6 pt-6 pb-4 with a 32px close button, which measured
+           60px tall for a 23px title — and because the button was taller
+           than the text, the BUTTON set the row height and the title
+           floated in slack it never asked for. */}
+        <div className="flex items-center justify-between gap-3 shrink-0 px-4 py-3">
+          <h2 className="text-[15px] font-bold tracking-[-0.01em] text-[rgb(var(--foreground))]">
             {title}
           </h2>
           <button
             onClick={onClose}
-            className="rounded-lg p-1.5 text-[rgb(var(--muted-foreground))] hover:bg-[rgb(var(--muted))] hover:text-[rgb(var(--foreground))] transition-colors"
+            className="inline-flex items-center justify-center w-6 h-6 shrink-0 rounded-[var(--radius-sm)] text-[rgb(var(--text-tertiary))] hover:bg-[rgb(var(--surface-hover))] hover:text-[rgb(var(--foreground))] transition-colors"
             aria-label="Close"
           >
-            <X className="h-5 w-5" />
+            <X className="h-[15px] w-[15px]" />
           </button>
         </div>
-        {children}
+        {renderBody(children)}
       </div>
     </div>
   )
 }
 
+/**
+ * Partition Tray + Footer into ONE tray box, footer last, divider between.
+ *
+ * Why this exists. Consumers write Tray and Footer as siblings, and until
+ * now they rendered that way: the tray at --tray-inset (4px) and the
+ * footer on the outer card at px-6 (24px). Three things went wrong at
+ * once — the buttons sat 20px inboard of the tray edge they were meant
+ * to align with, `.ds-card-tray:not(:last-child)` zeroed the tray's
+ * bottom margin so its lower corners were cut flush, and the actions
+ * ended up floating in the frame gap instead of on the decision surface.
+ *
+ * The tray is the decision surface, so the actions belong inside it.
+ * Done here rather than by editing 26 consumers, and it keeps the
+ * sibling API — the same auto-wrap trick <Card> uses for Head/Body/Foot.
+ */
+function renderBody(children: ReactNode): ReactNode {
+  const kids = Children.toArray(children)
+  const tray = kids.find(
+    (c): c is ReactElement<HTMLAttributes<HTMLDivElement>> =>
+      isValidElement(c) && c.type === Tray,
+  )
+  const footer = kids.find(
+    (c): c is ReactElement<HTMLAttributes<HTMLDivElement>> =>
+      isValidElement(c) && c.type === Footer,
+  )
+
+  // Flat children, or a tray with no actions — nothing to reconcile.
+  if (!tray || !footer) return children
+
+  const rest = kids.filter((c) => c !== tray && c !== footer)
+  const trayProps = tray.props
+  const footerProps = footer.props
+
+  return (
+    <>
+      {rest}
+      <div className="ds-card-tray flex flex-col flex-1 min-h-0">
+        <div
+          {...trayProps}
+          className={cn('flex-1 min-h-0 overflow-y-auto p-5', trayProps.className)}
+        />
+        <div
+          {...footerProps}
+          className={cn(
+            'flex items-center justify-end gap-2 shrink-0 px-5 py-3.5 border-t',
+            footerProps.className,
+          )}
+          style={{ borderColor: 'rgb(var(--border))', ...footerProps.style }}
+        />
+      </div>
+    </>
+  )
+}
+
 /**
  * Modal.Tray — the recessed body panel. Sits inside the modal's outer
  * card with --tray-inset margin and its own bg. Scrolls if content
  * exceeds the modal's max-height.
+ *
+ * When a <Modal.Footer> is also present, `renderBody` above merges the
+ * two into a single tray and this standalone styling is not used.
  */
 function Tray({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (

package/src/pill-button.tsx

@@ -17,22 +17,40 @@
 import type { ReactNode } from 'react'
 import type { BadgeTone } from './badge'
 
+/**
+ * Active (filled) tone map.
+ *
+ * This was an inverted copy of <Badge>'s TONE_STYLE: Badge pairs a tinted
+ * `*-bg` fill with solid `*` text, and success/warning/info were copied
+ * across with bg and color still in Badge's order — painting the label in
+ * a 12%-alpha version of its own background. Measured contrast was ~1:1,
+ * i.e. the label was not low-contrast, it was invisible.
+ *
+ * A filled pill needs a foreground that reads on a solid fill, which is
+ * exactly what --surface-on-accent is for (ADR-049).
+ *
+ * KNOWN GAP: the solid semantic fills are themselves too light for white
+ * at AA — warning is the worst (2.15:1 dark / 3.19:1 light). That is the
+ * same defect Badge has in 6 of 12 tone x theme combos and it belongs to
+ * the semantic-token retune, not here; fixing it per-component would bake
+ * in a value the retune has to undo.
+ */
 const ACTIVE_STYLE: Record<BadgeTone, { bg: string; color: string }> = {
   neutral: {
     bg: 'rgb(var(--accent))',
-    color: 'rgb(var(--accent-foreground, 255 255 255))',
+    color: 'rgb(var(--surface-on-accent))',
   },
   accent: {
     bg: 'rgb(var(--accent))',
-    color: 'rgb(var(--accent-foreground, 255 255 255))',
+    color: 'rgb(var(--surface-on-accent))',
   },
   success: {
     bg: 'rgb(var(--success))',
-    color: 'rgb(var(--success-bg))',
+    color: 'rgb(var(--surface-on-accent))',
   },
   warning: {
     bg: 'rgb(var(--warning))',
-    color: 'rgb(var(--warning-bg))',
+    color: 'rgb(var(--surface-on-accent))',
   },
   destructive: {
     bg: 'rgb(var(--destructive))',
@@ -40,7 +58,7 @@ const ACTIVE_STYLE: Record<BadgeTone, { bg: string; color: string }> = {
   },
   info: {
     bg: 'rgb(var(--info))',
-    color: 'rgb(var(--info-bg))',
+    color: 'rgb(var(--surface-on-accent))',
   },
 }
 

package/src/profile-section.tsx

@@ -49,10 +49,14 @@ function SectionHead({ icon, title, subtitle, actions }: SectionHeadProps) {
     ? cloneElement(
         icon as ReactElement<{ className?: string; size?: number | string }>,
         {
+          // Sizing rides on `size`, which Lucide honours. A previous
+          // `h-[${HEAD_ICON_SIZE}px]` here never did anything: Tailwind
+          // scans source statically, so an interpolated class is never
+          // generated. Keep the literal in sync with HEAD_ICON_SIZE.
           size: HEAD_ICON_SIZE,
           className: cn(
             (icon.props as { className?: string }).className,
-            `h-[${HEAD_ICON_SIZE}px] w-[${HEAD_ICON_SIZE}px]`,
+            'h-[17px] w-[17px]',
           ),
         },
       )
@@ -267,6 +271,20 @@ interface BaseProps {
   foot?: FootProps
   /** Extra padding tweak. */
   className?: string
+  /**
+   * Render as a SINGLE flat surface — header, divider, body — instead of
+   * the default frame-plus-inner-tray.
+   *
+   * Use this when the section is already inside a <FrameStack>. A framed
+   * section nested in a frame gives you three surface tiers (group frame →
+   * section frame → tray), which reads as boxes inside boxes. Flat is the
+   * shape <SectionCard> uses in the Social Spec builder, and it is what
+   * makes a group of sections read as one contained unit rather than as a
+   * stack of independent cards.
+   *
+   * Default (false) is unchanged, so every existing consumer is unaffected.
+   */
+  flat?: boolean
 }
 
 interface StaticSectionProps extends BaseProps {
@@ -346,11 +364,13 @@ function ProfileSection(props: ProfileSectionProps) {
     ? (props.children as (e: boolean) => ReactNode)(isEditing)
     : (props.children as ReactNode)
 
+  const flat = props.flat ?? false
+
   return (
     <section
       id={id}
       data-section-id={id}
-      data-framed="true"
+      data-framed={flat ? undefined : 'true'}
       className={cn('ds-card-surface flex flex-col', className)}
       style={{ scrollMarginTop: 'var(--section-scroll-offset)' }}
     >
@@ -360,13 +380,24 @@ function ProfileSection(props: ProfileSectionProps) {
         subtitle={subtitle}
         actions={headActions}
       />
-      {/* flex:1 lets the tray fill remaining height when the section is
-          stretched (e.g. side-by-side in an equal-height grid), so trays
-          bottom-align instead of leaving a gap under a shorter-header card.
-          No effect on un-stretched (vertically-stacked) sections. */}
-      <div className="ds-card-tray p-5" style={{ flex: '1 1 auto' }}>
-        {children}
-      </div>
+      {flat ? (
+        /* One surface. The divider does the separating that the tray's
+           fill does in the default shape. */
+        <div
+          className="px-4 pb-4 pt-4 border-t"
+          style={{ flex: '1 1 auto', borderColor: 'rgb(var(--border))' }}
+        >
+          {children}
+        </div>
+      ) : (
+        /* flex:1 lets the tray fill remaining height when the section is
+           stretched (e.g. side-by-side in an equal-height grid), so trays
+           bottom-align instead of leaving a gap under a shorter-header card.
+           No effect on un-stretched (vertically-stacked) sections. */
+        <div className="ds-card-tray p-5" style={{ flex: '1 1 auto' }}>
+          {children}
+        </div>
+      )}
       {foot && <Foot {...foot} />}
     </section>
   )

package/src/sortable-table.tsx

@@ -172,8 +172,12 @@ export function SortableTable<T>({
               }
               style={{
                 background:
+                  /* --surface-overlay-soft already carries an alpha; nesting a
+                     second one produced `rgb(0 0 0 / 0.03 / 0.5)` — invalid, so
+                     the banding never painted. --muted is the opaque zebra fill
+                     the data-display recipe (CLAUDE.md §2) calls for. */
                   zebra && idx % 2 === 1
-                    ? 'rgb(var(--surface-overlay-soft) / 0.5)'
+                    ? 'rgb(var(--muted))'
                     : 'transparent',
               }}
             >

package/src/styles.css

@@ -25,6 +25,8 @@
  *   .has-leading/trailing, .is-error/disabled,
  *   .size-sm/lg                                        — Input, Textarea
  *   .scrollbar-hide                                    — ChipNav
+ *   .ds-enter-pop, .ds-enter-rise                      — DropdownMenu,
+ *                                                        FloatingStatusBar
  *   prefers-reduced-motion block                       — accessibility
  *
  * Out of scope for Phase 1: .empty, .skel, .field*, .pg-header, .search-bar,
@@ -33,6 +35,24 @@
  * consumers (Field, EmptyState, PageHeader, etc.) arrive in later phases.
  */
 
+/* ---- PANE MASK ---- */
+/**
+ * Opaque fill matching the MainLayout content pane, for a sticky element that
+ * must hide content scrolling beneath it.
+ *
+ * Exists because the mask has to equal the pane EXACTLY or content shows
+ * through / bands, and the only token that does is `--main-content-bg` —
+ * internal, so lens code cannot name it (CLAUDE.md §5). Same shape as
+ * `.ds-card-tray` owning `--tray-bg`: the class lives here, consumers use the
+ * class. This is NOT a raised surface — do not reach for `--surface-raised`
+ * (ADR-063); a sticky mask must match the pane, not sit above it.
+ *
+ * Consumers: sem-spec `output/index.tsx`, `share-view/ad-preview-section.tsx`.
+ */
+.ds-pane-mask {
+  background: rgb(var(--main-content-bg));
+}
+
 /* ---- CARD SURFACE ---- */
 .ds-card-surface {
   background: rgb(var(--bg-card));
@@ -57,6 +77,11 @@
 
 /* ---- CARD TRAY ---- */
 .ds-card-tray {
+  /* 4px, not 10. Concentric radius is outer = inner + padding, so a
+     16px card around a 12px tray wants a 4px inset — at 10 the maths
+     was 22 and the corners fought each other. It is also what every
+     kit in the corpus measures (AI Agent: pad 4, r16 outer / r12
+     inner), and it is what reads as thinner and sleeker. */
   margin: var(--tray-inset);
   background: rgb(var(--tray-bg));
   /* Owner ask: visible 1px border on the inner tray so the tray surface
@@ -534,8 +559,57 @@
   transform: scaleY(2);
 }
 
+/* ---- ENTRANCE ANIMATIONS ----
+ *
+ * These exist because `animate-in` / `fade-in-0` / `zoom-in-95` /
+ * `slide-in-from-bottom-2` are NOT Tailwind core utilities — they ship in
+ * `tailwindcss-animate` / `tw-animate-css`, neither of which is a dependency
+ * of this repo. Both of the kit's entrance animations were therefore
+ * referencing classes that were never generated and had never run, while
+ * typecheck, lint and build stayed green.
+ *
+ * Adding the dependency would need an ADR (CLAUDE.md §1); two keyframes do
+ * not. Durations come from the motion tokens rather than being re-specified
+ * per call site.
+ */
+@keyframes ds-enter-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes ds-enter-rise {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* Popovers, menus, dropdowns — anchored to a trigger, so they scale open. */
+.ds-enter-pop {
+  animation: ds-enter-pop var(--dur-fast) var(--ease-out);
+}
+/* Bars and toasts entering from a screen edge. Animates `transform`, which
+ * composes with (rather than overwrites) a `translate`-based centering
+ * utility such as `-translate-x-1/2`. */
+.ds-enter-rise {
+  animation: ds-enter-rise var(--dur-base) var(--ease-out);
+}
+
 /* ---- REDUCED MOTION ---- */
 @media (prefers-reduced-motion: reduce) {
+  /* 0.01ms rather than `none` so animationend still fires for any listener. */
+  .ds-enter-pop,
+  .ds-enter-rise {
+    animation-duration: 0.01ms !important;
+  }
   .btn,
   .btn-primary,
   .input-shell {

package/src/tabs.tsx

@@ -23,6 +23,9 @@ export interface Tab {
   /** Optional count badge rendered after the label. */
   count?: number
   disabled?: boolean
+  /** Accessible name for ICON-ONLY tabs (label rendered empty) — e.g. the
+   *  responsive platform switcher's compact tier (ADR-135). */
+  ariaLabel?: string
 }
 
 export interface TabsProps {
@@ -106,6 +109,7 @@ export function Tabs({
             role="tab"
             type="button"
             aria-selected={isActive}
+            aria-label={tab.ariaLabel}
             disabled={tab.disabled}
             onClick={() => onTabChange(tab.id)}
             className={`${className} ${tab.disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'}`}

package/src/tag-chip-input.tsx

@@ -248,7 +248,7 @@ export function TagChipInput({
           'flex flex-wrap items-center gap-1.5 px-2 py-1.5 min-h-10 cursor-text',
           'border transition-colors',
           error
-            ? 'border-[rgb(var(--ring-error))]'
+            ? 'border-[rgb(var(--destructive))] focus-within:border-[rgb(var(--destructive))]'
             : 'border-[rgb(var(--border))] focus-within:border-[rgb(var(--accent))]',
           isDisabled && 'opacity-60 cursor-not-allowed',
           className,