@gentleduck/registry-ui 0.2.1

package/src/audio/audio-visualizer.tsx

@@ -0,0 +1,377 @@
+// @ts-noCheck
+
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import { useTheme } from 'next-themes'
+import React from 'react'
+import { useAudioDataProvider } from './audio-record'
+
+export const new_audio = (url: string) => new Audio(url)
+
+// Calculate bar data
+export interface dataPoint {
+  max: number
+  min: number
+}
+
+export interface CalculateBarDataParams {
+  buffer: AudioBuffer
+  width: number
+  height: number
+  barWidth: number
+  gap: number
+}
+
+export const calculate_bar_data_handler = (() => {
+  const cache = new Map()
+
+  return ({ buffer, width, height, barWidth, gap }: CalculateBarDataParams): dataPoint[] => {
+    // Create a unique key based on the input parameters
+    const key = `${buffer.length}-${width}-${height}-${barWidth}-${gap}`
+
+    // Check if the result is already cached
+    if (cache.has(key)) {
+      return cache.get(key)
+    }
+
+    const bufferData = buffer.getChannelData(0)
+    const units = Math.floor(width / (barWidth + gap))
+    const step = Math.floor(bufferData.length / units)
+    const amp = height / 2
+
+    const data: dataPoint[] = new Array(units)
+    let maxDataPoint = 0
+
+    for (let i = 0; i < units; i++) {
+      let minSum = 0
+      let maxSum = 0
+      let minCount = 0
+      let maxCount = 0
+
+      const startIdx = i * step
+      const endIdx = Math.min(startIdx + step, bufferData.length)
+
+      for (let j = startIdx; j < endIdx; j++) {
+        const datum = bufferData[j]
+        if (datum < 0) {
+          minSum += datum
+          minCount++
+        } else {
+          maxSum += datum
+          maxCount++
+        }
+      }
+
+      const minAvg = minCount ? minSum / minCount : 0
+      const maxAvg = maxCount ? maxSum / maxCount : 0
+
+      const dataPoint = { max: maxAvg, min: minAvg }
+      maxDataPoint = Math.max(maxDataPoint, Math.abs(dataPoint.max), Math.abs(dataPoint.min))
+      data[i] = dataPoint
+    }
+
+    if (amp * 0.8 > maxDataPoint * amp) {
+      const adjustmentFactor = (amp * 0.8) / maxDataPoint
+      for (let i = 0; i < units; i++) {
+        data[i].max *= adjustmentFactor
+        data[i].min *= adjustmentFactor
+      }
+    }
+
+    // Store the computed result in the cache
+    cache.set(key, data)
+
+    return data
+  }
+})()
+
+// Draw Handler
+export interface DrawHandlerParams {
+  data: dataPoint[]
+  canvas: HTMLCanvasElement | null
+  barWidth: number
+  gap: number
+  backgroundColor: string
+  barColor: string
+  barPlayedColor?: string
+  currentTime: number
+  duration: number
+  minBarHeight: number
+  animationProgress: number
+}
+
+export const draw_handler = ({
+  data,
+  canvas,
+  barWidth,
+  gap,
+  backgroundColor,
+  barColor,
+  barPlayedColor,
+  currentTime = 0,
+  duration = 1,
+  minBarHeight = 5,
+  animationProgress = 1,
+}: DrawHandlerParams): void => {
+  if (!canvas || !data.length) return
+
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  const amp = canvas.height / 2
+  const playedPercent = currentTime / duration
+
+  // Clear the canvas and set background
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  if (backgroundColor !== 'transparent') {
+    ctx.fillStyle = 'transparent'
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+  }
+
+  // Draw bars in a single loop
+  const totalBars = data.length
+  for (let i = 0; i < totalBars; i++) {
+    const height = Math.max(data[i].max * 2 * animationProgress, minBarHeight)
+    ctx.fillStyle = playedPercent > i / totalBars && barPlayedColor ? barPlayedColor : barColor
+    ctx.fillRect(i * (barWidth + gap), amp - height / 2, barWidth, height)
+  }
+}
+
+// Process Blob
+export interface ProcessBlobParams {
+  canvasRef: React.RefObject<HTMLCanvasElement>
+  blob: Blob | null
+  barWidth: number
+  gap: number
+  backgroundColor: string
+  barColor: string
+  barPlayedColor?: string
+  minBarHeight: number
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setData: React.Dispatch<React.SetStateAction<dataPoint[]>>
+  setDuration: React.Dispatch<React.SetStateAction<number>>
+  setAnimationProgress: React.Dispatch<React.SetStateAction<number>>
+  width: number
+  height: number
+}
+
+export const process_blob = async ({
+  canvasRef,
+  blob,
+  barWidth,
+  gap,
+  backgroundColor,
+  barColor,
+  barPlayedColor,
+  minBarHeight,
+  setLoading,
+  setData,
+  setDuration,
+  setAnimationProgress,
+  width,
+  height,
+}: ProcessBlobParams): Promise<void> => {
+  if (!canvasRef.current || !blob) return
+
+  const defaultBars = Array.from({ length: Math.floor(width / (barWidth + gap)) }, () => ({
+    max: minBarHeight,
+    min: minBarHeight,
+  }))
+
+  draw_handler({
+    animationProgress: 1,
+    backgroundColor,
+    barColor,
+    barPlayedColor,
+    barWidth,
+    canvas: canvasRef.current,
+    currentTime: 0,
+    data: defaultBars,
+    duration: 1,
+    gap,
+    minBarHeight: 1,
+  })
+
+  const audioContext = new AudioContext()
+  const audioBuffer = await blob.arrayBuffer()
+
+  // Decode the entire audio data
+  audioContext.decodeAudioData(audioBuffer, (buffer) => {
+    if (!canvasRef.current) return
+
+    setDuration(buffer.duration)
+
+    // Calculate the waveform data for the entire audio buffer
+    const barsData = calculate_bar_data_handler({
+      barWidth,
+      buffer,
+      gap,
+      height,
+      width,
+    })
+
+    // Set the calculated data for rendering
+    setData(barsData)
+
+    // Set up for animation
+    let startTime: number | null = null
+    let animationFrameId: number | null = null
+
+    const animate = (time: number) => {
+      if (!startTime) startTime = time
+
+      const elapsedTime = time - startTime
+      const progress = Math.min(elapsedTime / 1000, 1)
+
+      // Update animation progress using a ref
+      setAnimationProgress(progress)
+
+      draw_handler({
+        animationProgress: progress,
+        backgroundColor,
+        barColor,
+        barPlayedColor,
+        barWidth,
+        canvas: canvasRef.current,
+        currentTime: 0,
+        data: barsData,
+        duration: buffer.duration,
+        gap,
+        minBarHeight,
+      })
+
+      if (progress < 1) {
+        animationFrameId = requestAnimationFrame(animate)
+      } else {
+        setLoading(false)
+      }
+    }
+
+    // Start the animation
+    animationFrameId = requestAnimationFrame(animate)
+
+    // Cleanup when the component unmounts or the animation is done
+    return () => {
+      if (animationFrameId) cancelAnimationFrame(animationFrameId)
+    }
+  })
+}
+
+export interface ThemeColor {
+  light: string
+  dark: string
+}
+
+// Audio Visualizer
+interface AudioVisualizerProps {
+  blob: Blob | null
+  width: number
+  height: number
+  dir?: 'ltr' | 'rtl'
+  barWidth?: number
+  gap?: number
+  backgroundColor?: ThemeColor
+  barColor?: ThemeColor
+  barPlayedColor?: ThemeColor
+  currentTime?: number
+  minBarHeight?: number
+  style?: React.CSSProperties
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>
+  ref?: React.ForwardedRef<HTMLCanvasElement>
+  setCurrentTime: React.Dispatch<React.SetStateAction<number>>
+}
+
+const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
+  blob,
+  width,
+  height,
+  dir,
+  barWidth = 2,
+  gap = 1,
+  backgroundColor = { dark: 'transparent', light: 'transparent' },
+  barColor = { dark: '#ffffff69', light: 'rgb(184, 184, 184)' },
+  barPlayedColor = { dark: '#fafafa', light: '#18181b' },
+  currentTime = 0,
+  minBarHeight = 2,
+  style,
+  setLoading,
+}) => {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const { process_audio, data, duration, animationProgress } = useAudioDataProvider()
+  const direction = useDirection(dir as Direction)
+
+  const { theme } = useTheme()
+
+  interface ThemeColors {
+    backgroundColor: string
+    barColor: string
+    barPlayedColor: string
+  }
+
+  const colors: Record<string, ThemeColors> = {
+    dark: {
+      backgroundColor: backgroundColor.dark,
+      barColor: barColor.dark,
+      barPlayedColor: barPlayedColor.dark,
+    },
+    light: {
+      backgroundColor: backgroundColor.light,
+      barColor: barColor.light,
+      barPlayedColor: barPlayedColor.light,
+    },
+  }
+
+  const currentColors = colors[theme as string] || colors.light
+
+  React.useEffect(() => {
+    setLoading(true)
+    process_audio({
+      backgroundColor: currentColors.backgroundColor,
+      barColor: currentColors.barColor,
+      barPlayedColor: currentColors.barPlayedColor,
+      barWidth,
+      blob,
+      canvasRef,
+      gap,
+      height,
+      minBarHeight,
+      setLoading,
+      width,
+    })
+  }, [blob])
+
+  React.useEffect(() => {
+    if (!canvasRef.current) return
+    draw_handler({
+      animationProgress,
+      backgroundColor: currentColors.backgroundColor,
+      barColor: currentColors.barColor,
+      barPlayedColor: currentColors.barPlayedColor,
+      barWidth,
+      canvas: canvasRef.current,
+      currentTime,
+      data: data.length
+        ? data
+        : Array.from({ length: Math.floor(width / (barWidth + gap)) }, () => ({
+            max: minBarHeight,
+            min: minBarHeight,
+          })),
+      duration,
+      gap,
+      minBarHeight,
+    })
+  }, [data, width, height, currentTime, duration, animationProgress, theme])
+
+  return (
+    <canvas
+      aria-label="Audio waveform visualization"
+      dir={direction}
+      height={height}
+      ref={canvasRef}
+      role="img"
+      style={style}
+      width={width}
+    />
+  )
+}
+
+export { AudioVisualizer }

package/src/audio/audio.libs.ts

@@ -0,0 +1,5 @@
+export const format_time_handler = (milliseconds: number): string => {
+  const minutes = Math.floor(milliseconds / 60000)
+  const seconds = Math.floor((milliseconds % 60000) / 1000)
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+}

package/src/audio/audio.types.ts

@@ -0,0 +1,50 @@
+export interface RecordingParams {
+  setRecordings: React.Dispatch<React.SetStateAction<RecordingtType[]>>
+  setRecordedDuration: React.Dispatch<React.SetStateAction<number>>
+  audioChunksRef: React.RefObject<Blob[]>
+}
+
+export interface StopRecordingHandlerParam {
+  setRecording: React.Dispatch<React.SetStateAction<boolean>>
+  // @ts-ignore
+  intervalRef: React.RefObject<NodeJS.Timeout | null>
+  mediaRecorderRef: React.RefObject<MediaRecorder | null>
+  durationRef: React.RefObject<number>
+}
+
+export interface DeleteRecordingHandlerParams
+  extends Pick<RecordingParams, 'audioChunksRef'>,
+    StopRecordingHandlerParam {}
+
+export interface StopRecordingHandlerParams
+  extends Omit<StopRecordingHandlerParam, 'setRecording' | 'mediaRecorderRef' | 'durationRef'>,
+    Omit<RecordingParams, 'setRecordedDuration'> {}
+
+export interface StartTimerParams
+  extends Omit<StopRecordingHandlerParam, 'setRecording' | 'mediaRecorderRef'>,
+    Pick<RecordingParams, 'setRecordedDuration'> {}
+
+export interface StartRecordingHandlerParams extends StopRecordingHandlerParam, RecordingParams {}
+export interface RecordingtType {
+  id: string
+  file: File | null
+  url: string | null
+  type: string
+  name: string
+  size: string
+}
+
+export interface VisualizerClickHandlerParams {
+  audioRef: React.RefObject<HTMLAudioElement | null>
+  setCurrentTime: React.Dispatch<React.SetStateAction<number>>
+  event: React.MouseEvent<HTMLDivElement>
+}
+
+export interface AttachmentType {
+  id: string
+  file: Blob | null
+  url: string | null
+  type: string
+  name: string
+  size: string
+}

package/src/audio/index.ts

@@ -0,0 +1,2 @@
+export * from './audio-record'
+export * from './audio-visualizer'

package/src/avatar/avatar.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as AvatarPrimitive from '@gentleduck/primitives/avatar'
+import * as React from 'react'
+
+const Avatar = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    data-slot="avatar"
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    data-slot="avatar-img"
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    data-slot="avatar-fallback"
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  imgs: { src?: string; alt?: string; fallback?: string; id?: string }[]
+  maxVisible?: number
+}
+
+const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ imgs, maxVisible = 3, className, ...props }, ref) => {
+    const visibleImgs = imgs.slice(0, maxVisible)
+    const overflowCount = imgs.length > maxVisible ? imgs.length - maxVisible : 0
+
+    return (
+      <div className={cn('flex items-center -space-x-5', className)} ref={ref} {...props}>
+        {visibleImgs.map((img) => (
+          <Avatar className={cn('border-2 border-border')} key={img.id}>
+            <AvatarImage alt={img.alt} src={img.src} />
+            <AvatarFallback>{img.fallback?.slice(0, 2) ?? img.alt?.slice(0, 2)}</AvatarFallback>
+          </Avatar>
+        ))}
+
+        {overflowCount > 0 && (
+          <div className="relative z-10 inline-block">
+            <div className="flex size-10 items-center justify-center rounded-full bg-primary font-medium text-primary-foreground text-sm ring-2 ring-background">
+              +{overflowCount}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+AvatarGroup.displayName = 'AvatarGroup'
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup }

package/src/avatar/index.ts

@@ -0,0 +1 @@
+export * from './avatar'

package/src/badge/badge.constants.ts

@@ -0,0 +1,38 @@
+import { cva } from '@gentleduck/variants'
+
+export const badgeVariants = cva(
+  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md px-2 py-0.5 font-medium transition-colors [&_svg]-size-3 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none',
+  {
+    defaultVariants: {
+      border: 'default',
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      border: {
+        default: '',
+        destructive: 'border border-destructive/40 bg-destructive/40 hover:border-destructive hover:bg-destructive/65',
+        primary: 'border border-border/40 hover:border-border/80',
+        secondary: 'border border-secondary/40 bg-secondary/40 hover:border-secondary hover:bg-secondary/65',
+        warning: 'border border-warning/40 bg-warning/40 hover:border-warning hover:bg-warning/65',
+      },
+      size: {
+        default: 'px-2.5 py-0.5 text-sm',
+        icon: 'size-[1.6rem] items-center justify-center rounded-full p-0 [&_*]:size-[.9rem]',
+        lg: 'px-3.5 py-0.9 text-lg',
+        sm: 'px-1.5 py-0.5 text-[.7rem]',
+      },
+      variant: {
+        nothing: '!px-0 text-accent-foreground',
+        dashed:
+          'border border-input border-dashed bg-background text-accent-foreground hover:bg-accent/50 hover:text-accent-foreground',
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
+        outline: 'border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        warning: 'border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90',
+      },
+    },
+  },
+)

package/src/badge/badge.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@gentleduck/libs/cn'
+import { Slot } from '@gentleduck/primitives/slot'
+import type { VariantProps } from '@gentleduck/variants'
+import * as React from 'react'
+import { badgeVariants } from './badge.constants'
+
+const Badge = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLProps<HTMLDivElement>, 'size'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }
+>(({ className, variant = 'default', size = 'default', border = 'default', asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp ref={ref} className={cn(badgeVariants({ border, size, variant }), className)} data-slot="badge" {...props} />
+  )
+})
+Badge.displayName = 'Badge'
+
+export { Badge }

package/src/badge/index.ts

@@ -0,0 +1,2 @@
+export * from './badge'
+export * from './badge.constants'

package/src/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,119 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import { Slot } from '@gentleduck/primitives/slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+import * as React from 'react'
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode
+  }
+>(({ dir, ...props }, ref) => {
+  const direction = useDirection(dir as Direction)
+  return <nav ref={ref} {...props} aria-label="breadcrumb" data-slot="breadcrumb" dir={direction} />
+})
+Breadcrumb.displayName = 'Breadcrumb'
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
+  ({ className, ...props }, ref) => (
+    <ol
+      className={cn(
+        'wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5',
+        className,
+      )}
+      ref={ref}
+      {...props}
+      data-slot="breadcrumb-list"
+    />
+  ),
+)
+BreadcrumbList.displayName = 'BreadcrumbList'
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <li
+        className={cn('inline-flex items-center gap-1.5', className)}
+        ref={ref}
+        {...props}
+        data-slot="breadcrumb-item"
+      />
+    )
+  },
+)
+BreadcrumbItem.displayName = 'BreadcrumbItem'
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = (asChild ? Slot : 'a') as React.ElementType
+  return (
+    <Comp
+      className={cn('transition-colors hover:text-foreground', className)}
+      ref={ref}
+      {...props}
+      data-slot="breadcrumb-link"
+    />
+  )
+})
+BreadcrumbLink.displayName = 'BreadcrumbLink'
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <span
+        className={cn('font-normal text-foreground', className)}
+        ref={ref}
+        {...props}
+        aria-current="page"
+        data-slot="breadcrumb-page"
+      />
+    )
+  },
+)
+BreadcrumbPage.displayName = 'BreadcrumbPage'
+
+const BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ children, className, ...props }, ref) => (
+    <li
+      className={cn('[&>svg]:size-3.5', className)}
+      ref={ref}
+      {...props}
+      aria-hidden="true"
+      data-slot="breadcrumb-separator"
+      role="presentation">
+      {children ?? <ChevronRight className="rtl:rotate-180" />}
+    </li>
+  ),
+)
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
+
+const BreadcrumbEllipsis = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'> & { text?: string }
+>(({ className, text = 'More', ...props }, ref) => (
+  <span
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    role="img"
+    aria-label={text}
+    ref={ref}
+    {...props}
+    data-slot="breadcrumb-ellipsis">
+    <MoreHorizontal aria-hidden="true" className="h-4 w-4" />
+  </span>
+))
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb'