@refraction-ui/astro 0.4.12 → 0.5.0

package/dist/astro-voice-pill/VoicePill.astro

@@ -0,0 +1,159 @@
+---
+import {
+  createVoicePill,
+  voicePillAvatarStyles,
+  voicePillAvatarWrapStyles,
+  voicePillLabelStyles,
+  voicePillMuteButtonStyles,
+  voicePillPositionVariants,
+  voicePillPulseRingStyles,
+  voicePillRootStyles,
+  voicePillSpeakerStyles,
+  voicePillSubStyles,
+  voicePillTextStyles,
+  type VoicePillPosition,
+  type VoicePillSpeaker,
+} from '../voice-pill/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  speaker?: VoicePillSpeaker
+  label: string
+  sub?: string
+  subtitle?: string
+  intensity?: number
+  muted?: boolean
+  position?: VoicePillPosition
+  showMuteButton?: boolean
+}
+
+const {
+  speaker,
+  label,
+  sub,
+  subtitle,
+  intensity,
+  muted,
+  position,
+  showMuteButton = false,
+  class: className,
+  style,
+  ...props
+} = Astro.props
+
+const api = createVoicePill({
+  speaker,
+  label,
+  sub: sub ?? subtitle,
+  intensity,
+  muted,
+  position,
+})
+
+const mergedStyle = mergeStyles(style, api.style)
+
+const pulseStyle = {
+  animationDuration: 'var(--rfr-voice-pill-pulse-duration)',
+  transform: 'scale(var(--rfr-voice-pill-ring-scale))',
+}
+
+const delayedPulseStyle = {
+  ...pulseStyle,
+  animationDelay: 'var(--rfr-voice-pill-pulse-delay)',
+}
+
+function mergeStyles(
+  base: unknown,
+  extra: Record<string, string | number | undefined>,
+): string {
+  const baseStyle = styleToString(base)
+  const extraStyle = Object.entries(extra)
+    .filter(([, value]) => value !== undefined)
+    .map(([key, value]) => `${toKebabCase(key)}:${value}`)
+    .join(';')
+
+  return [baseStyle, extraStyle].filter(Boolean).join(';')
+}
+
+function styleToString(styleValue: unknown): string {
+  if (typeof styleValue === 'string') return styleValue
+  if (!styleValue || typeof styleValue !== 'object') return ''
+
+  return Object.entries(styleValue as Record<string, string | number | undefined>)
+    .filter(([, value]) => value !== undefined)
+    .map(([key, value]) => `${toKebabCase(key)}:${value}`)
+    .join(';')
+}
+
+function toKebabCase(value: string): string {
+  return value.startsWith('--')
+    ? value
+    : value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+}
+---
+
+<div
+  class={cn(
+    voicePillPositionVariants({ position: api.position }),
+    voicePillRootStyles,
+    voicePillSpeakerStyles,
+    className,
+  )}
+  style={mergedStyle}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  <span class={voicePillAvatarWrapStyles} aria-hidden="true">
+    {api.visualIntensity > 0 && <span class={voicePillPulseRingStyles} style={pulseStyle}></span>}
+    {
+      api.visualIntensity > 0 && (
+        <span class={voicePillPulseRingStyles} style={delayedPulseStyle}></span>
+      )
+    }
+    <span class={voicePillAvatarStyles}>
+      <slot name="avatar">{api.initials}</slot>
+    </span>
+  </span>
+
+  <span class={voicePillTextStyles}>
+    <span class={voicePillLabelStyles}>{api.label}</span>
+    {api.sub && <span class={voicePillSubStyles}>{api.sub}</span>}
+  </span>
+
+  {
+    showMuteButton && (
+      <button
+        type="button"
+        class={voicePillMuteButtonStyles}
+        {...api.toggleMuteAriaProps}
+      >
+        <svg
+          aria-hidden="true"
+          class="h-4 w-4"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+        >
+          <path d="M4 9v6h4l5 4V5L8 9H4Z"></path>
+          {
+            api.muted ? (
+              <>
+                <path d="m19 9-4 4"></path>
+                <path d="m15 9 4 4"></path>
+              </>
+            ) : (
+              <>
+                <path d="M16 8.5a4 4 0 0 1 0 7"></path>
+                <path d="M18.5 6a7 7 0 0 1 0 12"></path>
+              </>
+            )
+          }
+        </svg>
+      </button>
+    )
+  }
+</div>

package/dist/astro-voice-pill/index.ts

@@ -0,0 +1,27 @@
+export { default as VoicePill } from './VoicePill.astro'
+export {
+  createVoicePill,
+  clampVoicePillIntensity,
+  getVoicePillAriaLabel,
+  getVoicePillInitials,
+  getVoicePillPosition,
+  getVoicePillPulseStyle,
+  getVoicePillSpeakerKey,
+  getVoicePillSpeakerLabel,
+  type VoicePillAPI,
+  type VoicePillPosition,
+  type VoicePillProps as CoreVoicePillProps,
+  type VoicePillSpeaker,
+  type VoicePillStyleVars,
+  voicePillAvatarStyles,
+  voicePillAvatarWrapStyles,
+  voicePillLabelStyles,
+  voicePillMuteButtonStyles,
+  voicePillPositionVariants,
+  voicePillPulseRingStyles,
+  voicePillRootStyles,
+  voicePillSpeakerStyles,
+  voicePillSubStyles,
+  voicePillTextStyles,
+  voicePillTokens,
+} from '../voice-pill/index.ts'

package/dist/astro-waveform/Waveform.astro

@@ -0,0 +1,273 @@
+---
+import {
+  createWaveform,
+  toCssDimension,
+  waveformCanvasVariants,
+  waveformVariants,
+  type WaveformSampleInput,
+  type WaveformVariant,
+} from '../waveform/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends Omit<astroHTML.JSX.HTMLAttributes, 'color' | 'height' | 'width'> {
+  samples?: WaveformSampleInput
+  intensity?: number
+  variant?: WaveformVariant
+  height?: number | string
+  width?: number | string
+  barCount?: number
+  smoothing?: number
+  color?: string
+  paused?: boolean
+}
+
+const {
+  samples,
+  intensity,
+  variant,
+  height,
+  width,
+  barCount,
+  smoothing,
+  color,
+  paused,
+  class: className,
+  style,
+  ...props
+} = Astro.props
+
+const api = createWaveform({
+  samples,
+  intensity,
+  variant,
+  height,
+  width,
+  barCount,
+  smoothing,
+  color,
+  paused,
+})
+
+const styleObject = style && typeof style === 'object'
+  ? (style as Record<string, string | number | undefined>)
+  : {}
+
+const rootStyle = mergeStyles(style, {
+  width: toCssDimension(width) ?? styleObject.width ?? '100%',
+  height:
+    toCssDimension(height) ??
+    styleObject.height ??
+    `${api.config.height}px`,
+  '--waveform-color': api.config.color,
+})
+
+const waveformData = {
+  samples: Array.from(api.samples),
+  variant: api.config.variant,
+  intensity: api.config.intensity,
+  barCount: api.config.barCount,
+  color: api.config.color,
+}
+
+function mergeStyles(
+  base: unknown,
+  extra: Record<string, string | number | undefined>,
+): string {
+  const baseStyle = styleToString(base)
+  const extraStyle = Object.entries(extra)
+    .filter(([, value]) => value !== undefined)
+    .map(([key, value]) => `${toKebabCase(key)}:${value}`)
+    .join(';')
+
+  return [baseStyle, extraStyle].filter(Boolean).join(';')
+}
+
+function styleToString(styleValue: unknown): string {
+  if (typeof styleValue === 'string') return styleValue
+  if (!styleValue || typeof styleValue !== 'object') return ''
+
+  return Object.entries(styleValue as Record<string, string | number | undefined>)
+    .filter(([, value]) => value !== undefined)
+    .map(([key, value]) => `${toKebabCase(key)}:${value}`)
+    .join(';')
+}
+
+function toKebabCase(value: string): string {
+  return value.startsWith('--')
+    ? value
+    : value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+}
+---
+
+<div
+  class={cn(waveformVariants({ variant: api.config.variant }), className)}
+  style={rootStyle}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  <canvas
+    class={waveformCanvasVariants()}
+    aria-hidden="true"
+    data-waveform-canvas=""
+    data-waveform={JSON.stringify(waveformData)}
+  ></canvas>
+</div>
+
+<script>
+  const normalizeSamples = (samples, count) => {
+    const values = Array.isArray(samples) ? samples : []
+    const targetCount = Math.max(1, Math.min(1024, Math.round(Number(count) || 48)))
+
+    if (values.length === 0) return Array.from({ length: targetCount }, () => 0)
+    if (values.length === targetCount) return values.map((value) => Number(value) || 0)
+
+    return Array.from({ length: targetCount }, (_, index) => {
+      const start = (index * values.length) / targetCount
+      const end = ((index + 1) * values.length) / targetCount
+      const firstIndex = Math.floor(start)
+      const lastIndex = Math.max(firstIndex + 1, Math.ceil(end))
+      let total = 0
+      let count = 0
+
+      for (let sampleIndex = firstIndex; sampleIndex < lastIndex && sampleIndex < values.length; sampleIndex += 1) {
+        total += Number(values[sampleIndex]) || 0
+        count += 1
+      }
+
+      return count > 0 ? total / count : Number(values[Math.min(firstIndex, values.length - 1)]) || 0
+    })
+  }
+
+  const scaleSamples = (samples, intensity) => {
+    const amount = Math.max(0, Math.min(1, Number(intensity) || 0))
+
+    return samples.map((sample) => Math.max(-1, Math.min(1, sample * amount)))
+  }
+
+  const resolveColor = (element, color) => {
+    const match = String(color).match(/^var\((--[^),\s]+)(?:,[^)]+)?\)$/)
+
+    if (!match || typeof window.getComputedStyle !== 'function') return color
+
+    return window.getComputedStyle(element).getPropertyValue(match[1]).trim() || color
+  }
+
+  const prepareCanvas = (canvas) => {
+    const root = canvas.parentElement
+    const rect = root?.getBoundingClientRect()
+    const width = Math.max(1, Math.round(rect?.width || root?.clientWidth || 300))
+    const height = Math.max(1, Math.round(rect?.height || root?.clientHeight || 80))
+    const ratio = window.devicePixelRatio || 1
+
+    canvas.width = Math.round(width * ratio)
+    canvas.height = Math.round(height * ratio)
+    const context = canvas.getContext('2d')
+
+    if (!context) return null
+
+    canvas.style.width = '100%'
+    canvas.style.height = '100%'
+    context.setTransform(ratio, 0, 0, ratio, 0, 0)
+    context.clearRect(0, 0, width, height)
+
+    return { context, width, height }
+  }
+
+  const drawBars = (context, samples, width, height, color) => {
+    const gap = samples.length > 96 ? 1 : 2
+    const barWidth = Math.max(1, (width - gap * Math.max(0, samples.length - 1)) / samples.length)
+    const centerY = height / 2
+
+    context.fillStyle = color
+
+    samples.forEach((sample, index) => {
+      const magnitude = Math.max(0.06, Math.abs(sample))
+      const barHeight = Math.max(1, magnitude * height)
+      const x = index * (barWidth + gap)
+      const y = centerY - barHeight / 2
+
+      context.fillRect(x, y, barWidth, barHeight)
+    })
+  }
+
+  const drawLine = (context, samples, width, height, color) => {
+    const centerY = height / 2
+
+    context.strokeStyle = color
+    context.lineWidth = 2
+    context.lineCap = 'round'
+    context.lineJoin = 'round'
+    context.beginPath()
+
+    samples.forEach((sample, index) => {
+      const x = samples.length <= 1 ? width / 2 : (index / (samples.length - 1)) * width
+      const y = centerY - sample * centerY * 0.9
+
+      if (index === 0) context.moveTo(x, y)
+      else context.lineTo(x, y)
+    })
+
+    context.stroke()
+  }
+
+  const drawRings = (context, samples, width, height, color) => {
+    const peak = samples.reduce((current, sample) => Math.max(current, Math.abs(sample)), 0)
+    const centerX = width / 2
+    const centerY = height / 2
+    const maxRadius = Math.max(1, Math.min(width, height) / 2 - 2)
+
+    context.strokeStyle = color
+    context.lineWidth = Math.max(2, maxRadius * 0.08)
+
+    ;[0.38, 0.64, 0.9].forEach((scale, index) => {
+      context.globalAlpha = 0.35 + peak * (0.2 + index * 0.12)
+      context.beginPath()
+      context.arc(centerX, centerY, Math.max(1, maxRadius * scale * (0.85 + peak * 0.15)), 0, Math.PI * 2)
+      context.stroke()
+    })
+
+    context.globalAlpha = 1
+  }
+
+  const drawWaveform = (canvas) => {
+    if (!(canvas instanceof HTMLCanvasElement)) return
+
+    let config
+
+    try {
+      config = JSON.parse(canvas.dataset.waveform || '{}')
+    } catch {
+      config = {}
+    }
+
+    const prepared = prepareCanvas(canvas)
+    if (!prepared) return
+
+    const { context, width, height } = prepared
+    const samples = scaleSamples(
+      normalizeSamples(config.samples, config.barCount),
+      config.intensity,
+    )
+    const color = resolveColor(canvas.parentElement || canvas, config.color || 'currentColor')
+
+    if (config.variant === 'line') {
+      drawLine(context, samples, width, height, color)
+    } else if (config.variant === 'rings') {
+      drawRings(context, samples, width, height, color)
+    } else {
+      drawBars(context, samples, width, height, color)
+    }
+  }
+
+  const canvases = document.querySelectorAll('canvas[data-waveform-canvas][data-waveform]')
+
+  canvases.forEach((canvas) => {
+    drawWaveform(canvas)
+
+    if (typeof ResizeObserver === 'function' && canvas.parentElement) {
+      const observer = new ResizeObserver(() => drawWaveform(canvas))
+      observer.observe(canvas.parentElement)
+    }
+  })
+</script>

package/dist/astro-waveform/index.ts

@@ -0,0 +1,29 @@
+export { default as Waveform } from './Waveform.astro'
+export {
+  createIntensitySamples,
+  createSilentSamples,
+  createWaveform,
+  drawWaveform,
+  getWaveformPeak,
+  isWaveformSampleInput,
+  normalizeBarCount,
+  normalizeIntensity,
+  normalizeSmoothing,
+  normalizeWaveformConfig,
+  normalizeWaveformSamples,
+  prepareWaveformCanvas,
+  resampleWaveformSamples,
+  scaleWaveformSamples,
+  smoothWaveformSamples,
+  toCssDimension,
+  type NormalizedWaveformConfig,
+  type WaveformAPI,
+  type WaveformCanvasSize,
+  type WaveformProps as CoreWaveformProps,
+  type WaveformRenderOptions,
+  type WaveformSampleInput,
+  type WaveformSource,
+  type WaveformVariant,
+  waveformCanvasVariants,
+  waveformVariants,
+} from '../waveform/index.ts'

package/dist/index.ts

@@ -61,6 +61,8 @@ export * from './astro-toast/index.ts';
 export * from './astro-tooltip/index.ts';
 export * from './astro-version-selector/index.ts';
 export * from './astro-video-player/index.ts';
+export * from './astro-voice-pill/index.ts';
+export * from './astro-waveform/index.ts';
 export * from './astro-table-of-contents/index.ts';
 export * from './astro-carousel/index.ts';
 export * from './astro-slider/index.ts';

package/dist/slide-viewer/slide-viewer.styles.ts

@@ -26,7 +26,7 @@ export const slideViewerVariants = cva({
   },
 })
 
-export const progressBarVariants = cva({
+const slideViewerProgressBarVariants = cva({
   base: 'h-1 w-full bg-muted rounded-full overflow-hidden',
   variants: {
     position: {
@@ -40,6 +40,8 @@ export const progressBarVariants = cva({
   },
 })
 
+export { slideViewerProgressBarVariants as progressBarVariants }
+
 export const slideTypeBadgeVariants = cva({
   base: 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
   variants: {

package/dist/status-indicator/status-indicator.ts

@@ -24,7 +24,7 @@ export interface StatusAPI {
   color: string
 }
 
-const STATUS_COLORS: Record<StatusType, string> = {
+const STATUS_INDICATOR_COLORS: Record<StatusType, string> = {
   success: 'green',
   error: 'red',
   warning: 'yellow',
@@ -33,7 +33,7 @@ const STATUS_COLORS: Record<StatusType, string> = {
   neutral: 'gray',
 }
 
-const STATUS_LABELS: Record<StatusType, string> = {
+const STATUS_INDICATOR_LABELS: Record<StatusType, string> = {
   success: 'Success',
   error: 'Error',
   warning: 'Warning',
@@ -42,13 +42,16 @@ const STATUS_LABELS: Record<StatusType, string> = {
   neutral: 'Neutral',
 }
 
-export { STATUS_COLORS, STATUS_LABELS }
+export {
+  STATUS_INDICATOR_COLORS as STATUS_COLORS,
+  STATUS_INDICATOR_LABELS as STATUS_LABELS,
+}
 
 export function createStatusIndicator(props: StatusProps): StatusAPI {
   const { type, label: labelOverride, pulse: pulseOverride } = props
 
-  const color = STATUS_COLORS[type]
-  const label = labelOverride ?? STATUS_LABELS[type]
+  const color = STATUS_INDICATOR_COLORS[type]
+  const label = labelOverride ?? STATUS_INDICATOR_LABELS[type]
   const pulse = pulseOverride ?? (type === 'pending')
 
   const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {

package/dist/version-selector/version-selector.styles.ts

@@ -14,7 +14,7 @@ export const versionSelectorVariants = cva({
   },
 })
 
-export const optionVariants = cva({
+const versionSelectorOptionVariants = cva({
   base: 'flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent',
   variants: {
     selected: {
@@ -27,6 +27,8 @@ export const optionVariants = cva({
   },
 })
 
+export { versionSelectorOptionVariants as optionVariants }
+
 export const latestBadgeVariants = cva({
   base: 'inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5',
   variants: {

package/dist/voice-pill/index.ts

@@ -0,0 +1,31 @@
+export {
+  createVoicePill,
+  clampVoicePillIntensity,
+  getVoicePillAriaLabel,
+  getVoicePillInitials,
+  getVoicePillPosition,
+  getVoicePillPulseStyle,
+  getVoicePillSpeakerKey,
+  getVoicePillSpeakerLabel,
+  DEFAULT_VOICE_PILL_POSITION,
+  DEFAULT_VOICE_PILL_SPEAKER,
+  type VoicePillAPI,
+  type VoicePillPosition,
+  type VoicePillProps,
+  type VoicePillSpeaker,
+  type VoicePillStyleVars,
+} from './voice-pill.js'
+
+export {
+  voicePillAvatarStyles,
+  voicePillAvatarWrapStyles,
+  voicePillLabelStyles,
+  voicePillMuteButtonStyles,
+  voicePillPositionVariants,
+  voicePillPulseRingStyles,
+  voicePillRootStyles,
+  voicePillSpeakerStyles,
+  voicePillSubStyles,
+  voicePillTextStyles,
+  voicePillTokens,
+} from './voice-pill.styles.js'

package/dist/voice-pill/voice-pill.styles.ts

@@ -0,0 +1,77 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const voicePillTokens: TokenContract = {
+  name: 'voice-pill',
+  tokens: {
+    bg: { variable: '--rfr-voice-pill-bg', fallback: 'hsl(var(--background))' },
+    fg: { variable: '--rfr-voice-pill-fg', fallback: 'hsl(var(--foreground))' },
+    border: { variable: '--rfr-voice-pill-border', fallback: 'hsl(var(--border))' },
+    accent: { variable: '--rfr-voice-pill-accent', fallback: 'hsl(var(--primary))' },
+    accentFg: {
+      variable: '--rfr-voice-pill-accent-foreground',
+      fallback: 'hsl(var(--primary-foreground))',
+    },
+  },
+}
+
+export const voicePillRootStyles =
+  'inline-flex min-w-0 max-w-[min(calc(100vw-2rem),22rem)] items-center gap-3 rounded-full border border-border bg-background px-3 py-2 text-foreground shadow-lg ring-1 ring-border/50 transition-opacity data-[muted=true]:opacity-80'
+
+export const voicePillSpeakerStyles =
+  '[--rfr-voice-pill-accent:hsl(var(--primary))] [--rfr-voice-pill-accent-foreground:hsl(var(--primary-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent:hsl(var(--accent-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent-foreground:hsl(var(--accent))] data-[muted=true]:[--rfr-voice-pill-accent:hsl(var(--muted-foreground))]'
+
+export const voicePillPositionVariants = cva({
+  base: 'fixed z-50',
+  variants: {
+    position: {
+      'top-start':
+        'top-[calc(env(safe-area-inset-top)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]',
+      'top-center':
+        'top-[calc(env(safe-area-inset-top)+1rem)] left-1/2 -translate-x-1/2',
+      'top-end':
+        'top-[calc(env(safe-area-inset-top)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]',
+      'bottom-start':
+        'bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]',
+      'bottom-center':
+        'bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-1/2 -translate-x-1/2',
+      'bottom-end':
+        'bottom-[calc(env(safe-area-inset-bottom)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]',
+      'left-start':
+        'left-[calc(env(safe-area-inset-left)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]',
+      'left-center':
+        'left-[calc(env(safe-area-inset-left)+1rem)] top-1/2 -translate-y-1/2',
+      'left-end':
+        'left-[calc(env(safe-area-inset-left)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]',
+      'right-start':
+        'right-[calc(env(safe-area-inset-right)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]',
+      'right-center':
+        'right-[calc(env(safe-area-inset-right)+1rem)] top-1/2 -translate-y-1/2',
+      'right-end':
+        'right-[calc(env(safe-area-inset-right)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]',
+    },
+  },
+  defaultVariants: {
+    position: 'bottom-center',
+  },
+})
+
+export const voicePillAvatarWrapStyles =
+  'relative flex h-10 w-10 shrink-0 items-center justify-center'
+
+export const voicePillPulseRingStyles =
+  'pointer-events-none absolute inset-0 rounded-full border border-[var(--rfr-voice-pill-accent)] opacity-[var(--rfr-voice-pill-ring-opacity)] motion-safe:animate-ping motion-reduce:animate-none'
+
+export const voicePillAvatarStyles =
+  'relative z-10 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[var(--rfr-voice-pill-accent)] text-[var(--rfr-voice-pill-accent-foreground)] text-xs font-semibold uppercase'
+
+export const voicePillTextStyles = 'min-w-0 flex-1'
+
+export const voicePillLabelStyles =
+  'block truncate text-sm font-medium leading-tight'
+
+export const voicePillSubStyles =
+  'block truncate text-xs leading-tight text-muted-foreground'
+
+export const voicePillMuteButtonStyles =
+  'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'