@otfdashkit/ui 0.1.1 → 0.1.2

package/src/engagement/beacon.tsx

@@ -1,50 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-const colorMap = {
-  primary: 'bg-[hsl(var(--primary))]',
-  success: 'bg-green-500',
-  warning: 'bg-yellow-500',
-  error: 'bg-red-500',
-}
-
-const sizeMap = {
-  sm: 'h-1.5 w-1.5',
-  md: 'h-2.5 w-2.5',
-  lg: 'h-3.5 w-3.5',
-}
-
-export interface BeaconProps {
-  color?: keyof typeof colorMap
-  size?: keyof typeof sizeMap
-  children?: React.ReactNode
-  className?: string
-}
-
-function BeaconDot({ color = 'primary', size = 'md' }: Pick<BeaconProps, 'color' | 'size'>) {
-  return (
-    <span className="relative flex">
-      <span className={cn('animate-ping absolute inline-flex h-full w-full rounded-full opacity-75', colorMap[color])} />
-      <span className={cn('relative inline-flex rounded-full', sizeMap[size], colorMap[color])} />
-    </span>
-  )
-}
-
-export function Beacon({ color = 'primary', size = 'md', children, className }: BeaconProps) {
-  if (!children) {
-    return (
-      <span className={cn('inline-flex', className)}>
-        <BeaconDot color={color} size={size} />
-      </span>
-    )
-  }
-
-  return (
-    <span className={cn('relative inline-flex', className)}>
-      {children}
-      <span className="absolute -top-1 -right-1 flex">
-        <BeaconDot color={color} size={size} />
-      </span>
-    </span>
-  )
-}
+export * from './Beacon/index'

package/src/engagement/tour.tsx

@@ -1,106 +1 @@
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-
-interface TourContextValue {
-  currentStep: number
-  totalSteps: number
-  isActive: boolean
-  start: () => void
-  stop: () => void
-  next: () => void
-  prev: () => void
-  goTo: (step: number) => void
-}
-
-const TourContext = createContext<TourContextValue | null>(null)
-
-export function useTour(): TourContextValue {
-  const ctx = useContext(TourContext)
-  if (!ctx) throw new Error('useTour must be used within <Tour>')
-  return ctx
-}
-
-export interface TourProps {
-  totalSteps: number
-  children: React.ReactNode
-}
-
-export function Tour({ totalSteps, children }: TourProps) {
-  const [currentStep, setCurrentStep] = useState(0)
-  const [isActive, setIsActive] = useState(false)
-
-  const stop = useCallback(() => setIsActive(false), [])
-  const start = useCallback(() => { setCurrentStep(0); setIsActive(true) }, [])
-  const next = useCallback(() => setCurrentStep(s => Math.min(s + 1, totalSteps - 1)), [totalSteps])
-  const prev = useCallback(() => setCurrentStep(s => Math.max(s - 1, 0)), [])
-  const goTo = useCallback((step: number) => setCurrentStep(Math.max(0, Math.min(step, totalSteps - 1))), [totalSteps])
-
-  useEffect(() => {
-    if (!isActive) return
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') stop()
-      if (e.key === 'ArrowRight') next()
-      if (e.key === 'ArrowLeft') prev()
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [isActive, stop, next, prev])
-
-  return (
-    <TourContext.Provider value={{ currentStep, totalSteps, isActive, start, stop, next, prev, goTo }}>
-      {children}
-    </TourContext.Provider>
-  )
-}
-
-const placementClasses: Record<string, string> = {
-  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
-  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
-  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
-  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
-}
-
-export interface TourStepProps {
-  step: number
-  title: string
-  description: string
-  placement?: 'top' | 'bottom' | 'left' | 'right'
-  children: React.ReactNode
-}
-
-export function TourStep({ step, title, description, placement = 'bottom', children }: TourStepProps) {
-  const { currentStep, isActive, stop, next, prev, totalSteps } = useTour()
-  const active = isActive && currentStep === step
-  const isLast = step === totalSteps - 1
-
-  return (
-    <span className="relative inline-block">
-      {active && (
-        <span
-          className="fixed inset-0 z-40 pointer-events-none"
-          style={{ boxShadow: '0 0 0 9999px rgba(0,0,0,0.5)' }}
-        />
-      )}
-      <span className={cn('relative', active && 'z-50 ring-2 ring-[hsl(var(--primary))] ring-offset-2 rounded-md')}>
-        {children}
-      </span>
-      {active && (
-        <div className={cn('absolute z-50 w-64 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4 shadow-lg', placementClasses[placement])}>
-          <p className="font-semibold text-sm mb-1">{title}</p>
-          <p className="text-xs text-[hsl(var(--muted-foreground))] mb-3">{description}</p>
-          <div className="flex items-center justify-between gap-2">
-            <span className="text-xs text-[hsl(var(--muted-foreground))]">{step + 1} / {totalSteps}</span>
-            <div className="flex gap-1.5">
-              {step > 0 && <Button size="sm" variant="outline" onClick={prev}>Back</Button>}
-              {isLast
-                ? <Button size="sm" onClick={stop}>Done</Button>
-                : <Button size="sm" onClick={next}>Next</Button>
-              }
-            </div>
-          </div>
-        </div>
-      )}
-    </span>
-  )
-}
+export * from './Tour/index'

package/src/forms/ArrayField/ArrayField.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Plus, X } from 'lucide-react'
-import { Button } from '../primitives/button'
-import { cn } from '../utils/cn'
+import { Button } from '../../primitives/button'
+import { cn } from '../../utils/cn'
 
 export interface ArrayFieldProps<T> {
   value: T[]

package/src/forms/AutoForm/AutoForm.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
-import { Input } from '../primitives/input'
-import { Checkbox } from '../primitives/checkbox'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Button } from '../primitives/button'
-import { DatePicker } from './date-picker'
-import { Field } from './field'
+import { Input } from '../../primitives/input'
+import { Checkbox } from '../../primitives/checkbox'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select'
+import { Button } from '../../primitives/button'
+import { DatePicker } from '../date-picker'
+import { Field } from '../field'
 
 export interface AutoFormProps {
   schema: z.ZodObject<z.ZodRawShape>
@@ -108,14 +108,15 @@ function FieldRenderer({ name, field, register, setValue, watch, error }: FieldR
 
 export function AutoForm({ schema, onSubmit, defaultValues, submitLabel = 'Submit' }: AutoFormProps) {
   const { register, handleSubmit, setValue, watch, formState } = useForm({
-    resolver: zodResolver(schema),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    resolver: zodResolver(schema as any),
     defaultValues: defaultValues as Record<string, unknown>,
   })
 
   const shape = schema.shape
 
   return (
-    <form onSubmit={handleSubmit(d => onSubmit(d as Record<string, unknown>))} className="flex flex-col gap-4">
+    <form onSubmit={handleSubmit((d) => onSubmit(d as unknown as Record<string, unknown>))} className="flex flex-col gap-4">
       {Object.entries(shape).map(([name, field]) => (
         <FieldRenderer
           key={name}

package/src/forms/DatePicker/DatePicker.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react'
-import { Button } from '../primitives/button'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { cn } from '../utils/cn'
+import { Button } from '../../primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
+import { cn } from '../../utils/cn'
 
 const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
 const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

package/src/forms/FloatingLabelInput/FloatingLabelInput.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import React, { useState, useId } from 'react'
+import { cn } from '../../utils/cn'
+
+/**
+ * FloatingLabelInput — input where the label sits inside the field at rest
+ * and floats up + shrinks when the field is focused OR contains text. Cross-
+ * platform parity with @otfdashkit/ui-native's FloatingLabelInput.
+ *
+ * Reference (visual spec): https://www.grepped.ai/animations/components-ui/floating-label
+ *
+ * Forms pattern, not a primitive — pairs with Form, Field, AutoForm helpers.
+ */
+
+export interface FloatingLabelInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'placeholder'> {
+  /** Label that floats up when focused or filled. */
+  label:    string
+  /** Inline error text shown below the input. */
+  error?:   string
+  /** Helper text shown below the input when there's no error. */
+  hint?:    string
+  /** Wrap the field + label + helper text in this className for layout. */
+  wrapperClassName?: string
+}
+
+export const FloatingLabelInput = React.forwardRef<HTMLInputElement, FloatingLabelInputProps>(
+  ({ label, error, hint, wrapperClassName, className, id, value, defaultValue, onFocus, onBlur, onChange, ...props }, ref) => {
+    const autoId   = useId()
+    const inputId  = id ?? autoId
+    const errorId  = error ? `${inputId}-error` : undefined
+    const hintId   = hint  ? `${inputId}-hint`  : undefined
+    const describedBy = [errorId, hintId].filter(Boolean).join(' ') || undefined
+
+    // "Filled" tracks whether the field has any user-visible content. We
+    // compute it from the initial defaultValue / value, then update on every
+    // change so the label floats correctly even before focus.
+    const [focused, setFocused] = useState(false)
+    const [filled,  setFilled]  = useState(() => {
+      if (value !== undefined && value !== null && value !== '') return true
+      if (defaultValue !== undefined && defaultValue !== null && defaultValue !== '') return true
+      return false
+    })
+
+    const isFloated = focused || filled
+
+    return (
+      <div data-slot="floating-label-input" className={cn('flex flex-col gap-1.5', wrapperClassName)}>
+        <div className="relative">
+          <input
+            ref={ref}
+            id={inputId}
+            value={value}
+            defaultValue={defaultValue}
+            data-slot="input"
+            data-state={isFloated ? 'floated' : 'rest'}
+            aria-invalid={Boolean(error) || undefined}
+            aria-describedby={describedBy}
+            onFocus={(e) => { setFocused(true);  onFocus?.(e) }}
+            onBlur ={(e) => { setFocused(false); onBlur?.(e)  }}
+            onChange={(e) => { setFilled(e.target.value.length > 0); onChange?.(e) }}
+            className={cn(
+              // Reset + structure
+              'peer w-full appearance-none bg-transparent',
+              'h-14 rounded-md border px-3 pt-5 pb-1.5',
+              'text-base text-foreground leading-tight',
+              // Border / focus ring colors
+              'border-input focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30',
+              error && 'border-destructive focus:border-destructive focus:ring-destructive/30',
+              'disabled:cursor-not-allowed disabled:opacity-50',
+              'placeholder:text-transparent', // hide native placeholder; label takes its job
+              className,
+            )}
+            {...props}
+          />
+
+          <label
+            htmlFor={inputId}
+            className={cn(
+              'pointer-events-none absolute left-3',
+              'origin-[0_50%] transition-all duration-150 ease-out',
+              'text-muted-foreground',
+              // Rest: centered vertically inside the field, full size
+              !isFloated && 'top-1/2 -translate-y-1/2 text-base',
+              // Floated: tucked into the top with a small subtle background
+              isFloated  && 'top-1.5 text-[11px] uppercase tracking-wider text-foreground/85',
+              error && 'text-destructive',
+            )}
+          >
+            {label}
+          </label>
+        </div>
+
+        {error ? (
+          <p id={errorId} className="text-xs text-destructive">{error}</p>
+        ) : hint ? (
+          <p id={hintId} className="text-xs text-muted-foreground">{hint}</p>
+        ) : null}
+      </div>
+    )
+  },
+)
+FloatingLabelInput.displayName = 'FloatingLabelInput'

package/src/forms/FloatingLabelInput/index.ts

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

package/src/forms/PasswordInput/PasswordInput.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Eye, EyeOff } from 'lucide-react'
-import { Input, type InputProps } from '../primitives/input'
-import { cn } from '../utils/cn'
+import { Input, type InputProps } from '../../primitives/input'
+import { cn } from '../../utils/cn'
 
 export interface PasswordInputProps extends InputProps {
   strength?: boolean

package/src/forms/SearchInput/SearchInput.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Search, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { type InputProps } from '../primitives/input'
+import { cn } from '../../utils/cn'
+import { type InputProps } from '../../primitives/input'
 
 export interface SearchInputProps extends Omit<InputProps, 'onChange'> {
   shortcut?: string

package/src/forms/StepForm/StepForm.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState } from 'react'
-import { Button } from '../primitives/button'
-import { cn } from '../utils/cn'
+import { Button } from '../../primitives/button'
+import { cn } from '../../utils/cn'
 
 interface StepFormContextValue {
   currentStep: number

package/src/forms/array-field.tsx

@@ -1,61 +1 @@
-import React from 'react'
-import { Plus, X } from 'lucide-react'
-import { Button } from '../primitives/button'
-import { cn } from '../utils/cn'
-
-export interface ArrayFieldProps<T> {
-  value: T[]
-  onChange: (v: T[]) => void
-  renderItem: (item: T, index: number, remove: () => void) => React.ReactNode
-  addLabel?: string
-  maxItems?: number
-  defaultItem: T
-  className?: string
-}
-
-export function ArrayField<T>({
-  value,
-  onChange,
-  renderItem,
-  addLabel = 'Add item',
-  maxItems,
-  defaultItem,
-  className,
-}: ArrayFieldProps<T>) {
-  function add() {
-    if (maxItems && value.length >= maxItems) return
-    onChange([...value, defaultItem])
-  }
-
-  function remove(index: number) {
-    onChange(value.filter((_, i) => i !== index))
-  }
-
-  const atMax = maxItems !== undefined && value.length >= maxItems
-
-  return (
-    <div className={cn('flex flex-col gap-2', className)}>
-      {value.map((item, i) => (
-        <div key={i} className="flex items-start gap-2">
-          <div className="flex-1 min-w-0">{renderItem(item, i, () => remove(i))}</div>
-          <button
-            type="button"
-            onClick={() => remove(i)}
-            className="mt-2 shrink-0 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--destructive))] transition-colors"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-      ))}
-      <div className="flex items-center justify-between">
-        <Button type="button" variant="outline" size="sm" onClick={add} disabled={atMax}>
-          <Plus className="h-4 w-4" />
-          {addLabel}
-        </Button>
-        {maxItems && (
-          <span className="text-xs text-[hsl(var(--muted-foreground))]">{value.length}/{maxItems}</span>
-        )}
-      </div>
-    </div>
-  )
-}
+export * from './ArrayField'

package/src/forms/auto-form.tsx

@@ -1,133 +1 @@
-import React from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { Input } from '../primitives/input'
-import { Checkbox } from '../primitives/checkbox'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Button } from '../primitives/button'
-import { DatePicker } from './date-picker'
-import { Field } from './field'
-
-export interface AutoFormProps {
-  schema: z.ZodObject<z.ZodRawShape>
-  onSubmit: (data: Record<string, unknown>) => void
-  defaultValues?: Record<string, unknown>
-  submitLabel?: string
-}
-
-function toLabel(key: string) {
-  return key.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase())
-}
-
-function getInputType(field: z.ZodTypeAny): string {
-  if (field instanceof z.ZodEmail) return 'email'
-  if (field instanceof z.ZodURL) return 'url'
-  return 'text'
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function unwrapOptional(field: z.ZodTypeAny): any {
-  if (field instanceof z.ZodOptional || field instanceof z.ZodNullable) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return unwrapOptional((field as any).unwrap())
-  }
-  return field
-}
-
-interface FieldRendererProps {
-  name: string
-  field: z.ZodTypeAny
-  register: ReturnType<typeof useForm>['register']
-  setValue: ReturnType<typeof useForm>['setValue']
-  watch: ReturnType<typeof useForm>['watch']
-  error?: string
-}
-
-function FieldRenderer({ name, field, register, setValue, watch, error }: FieldRendererProps) {
-  const inner = unwrapOptional(field)
-  const label = toLabel(name)
-  const isOptional = field instanceof z.ZodOptional
-
-  if (inner instanceof z.ZodBoolean) {
-    const checked = Boolean(watch(name))
-    return (
-      <Field label={label} error={error}>
-        <div className="flex items-center gap-2">
-          <Checkbox
-            id={name}
-            checked={checked}
-            onCheckedChange={v => setValue(name, v)}
-          />
-          <label htmlFor={name} className="text-sm text-[hsl(var(--foreground))]">{label}</label>
-        </div>
-      </Field>
-    )
-  }
-
-  if (inner instanceof z.ZodEnum) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const options = ((inner as any).options ?? []) as string[]
-    const value = watch(name) as string | undefined
-    return (
-      <Field label={label} required={!isOptional} error={error}>
-        <Select value={value} onValueChange={v => setValue(name, v)}>
-          <SelectTrigger><SelectValue placeholder={`Select ${label.toLowerCase()}`} /></SelectTrigger>
-          <SelectContent>
-            {options.map(opt => <SelectItem key={opt} value={opt}>{opt}</SelectItem>)}
-          </SelectContent>
-        </Select>
-      </Field>
-    )
-  }
-
-  if (inner instanceof z.ZodDate) {
-    const value = watch(name) as Date | undefined
-    return (
-      <Field label={label} required={!isOptional} error={error}>
-        <DatePicker value={value} onChange={d => setValue(name, d)} placeholder={`Select ${label.toLowerCase()}`} />
-      </Field>
-    )
-  }
-
-  if (inner instanceof z.ZodNumber) {
-    return (
-      <Field label={label} required={!isOptional} error={error}>
-        <Input type="number" {...register(name, { valueAsNumber: true })} />
-      </Field>
-    )
-  }
-
-  const inputType = getInputType(inner)
-  return (
-    <Field label={label} required={!isOptional} error={error}>
-      <Input type={inputType} {...register(name)} />
-    </Field>
-  )
-}
-
-export function AutoForm({ schema, onSubmit, defaultValues, submitLabel = 'Submit' }: AutoFormProps) {
-  const { register, handleSubmit, setValue, watch, formState } = useForm({
-    resolver: zodResolver(schema),
-    defaultValues: defaultValues as Record<string, unknown>,
-  })
-
-  const shape = schema.shape
-
-  return (
-    <form onSubmit={handleSubmit(d => onSubmit(d as Record<string, unknown>))} className="flex flex-col gap-4">
-      {Object.entries(shape).map(([name, field]) => (
-        <FieldRenderer
-          key={name}
-          name={name}
-          field={field as z.ZodTypeAny}
-          register={register}
-          setValue={setValue}
-          watch={watch}
-          error={formState.errors[name]?.message as string | undefined}
-        />
-      ))}
-      <Button type="submit">{submitLabel}</Button>
-    </form>
-  )
-}
+export * from './AutoForm'

package/src/forms/date-picker.tsx

@@ -1,109 +1 @@
-import React, { useState } from 'react'
-import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react'
-import { Button } from '../primitives/button'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { cn } from '../utils/cn'
-
-const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
-const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-
-export interface DatePickerProps {
-  value?: Date
-  onChange?: (date: Date) => void
-  placeholder?: string
-  disabled?: boolean
-  className?: string
-}
-
-function isSameDay(a: Date, b: Date) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
-}
-
-function getDaysInMonth(year: number, month: number) {
-  return new Date(year, month + 1, 0).getDate()
-}
-
-function getFirstDayOfWeek(year: number, month: number) {
-  return new Date(year, month, 1).getDay()
-}
-
-function CalendarGrid({ year, month, selected, onSelect }: {
-  year: number; month: number; selected?: Date; onSelect: (d: Date) => void
-}) {
-  const today = new Date()
-  const daysInMonth = getDaysInMonth(year, month)
-  const firstDay = getFirstDayOfWeek(year, month)
-  const cells = Array.from({ length: firstDay + daysInMonth }, (_, i) => i < firstDay ? null : i - firstDay + 1)
-
-  return (
-    <div className="grid grid-cols-7 gap-0.5">
-      {DAYS.map(d => <div key={d} className="py-1 text-center text-xs font-medium text-[hsl(var(--muted-foreground))]">{d}</div>)}
-      {cells.map((day, i) => {
-        if (!day) return <div key={i} />
-        const date = new Date(year, month, day)
-        const isToday = isSameDay(date, today)
-        const isSelected = selected && isSameDay(date, selected)
-        return (
-          <button
-            key={i}
-            type="button"
-            onClick={() => onSelect(date)}
-            className={cn(
-              'flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors',
-              isSelected && 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]',
-              !isSelected && isToday && 'border border-[hsl(var(--primary))] text-[hsl(var(--primary))]',
-              !isSelected && !isToday && 'hover:bg-[hsl(var(--accent))]'
-            )}
-          >
-            {day}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
-export function DatePicker({ value, onChange, placeholder = 'Pick a date', disabled, className }: DatePickerProps) {
-  const [open, setOpen] = useState(false)
-  const now = value ?? new Date()
-  const [view, setView] = useState({ year: now.getFullYear(), month: now.getMonth() })
-
-  function navigate(delta: number) {
-    setView(v => {
-      const date = new Date(v.year, v.month + delta)
-      return { year: date.getFullYear(), month: date.getMonth() }
-    })
-  }
-
-  function handleSelect(date: Date) {
-    onChange?.(date)
-    setOpen(false)
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          disabled={disabled}
-          className={cn('w-full justify-start font-normal', !value && 'text-[hsl(var(--muted-foreground))]', className)}
-        >
-          <Calendar className="mr-2 h-4 w-4 shrink-0" />
-          {value ? value.toLocaleDateString() : placeholder}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-3" align="start">
-        <div className="flex items-center justify-between mb-2">
-          <button type="button" onClick={() => navigate(-1)} className="rounded p-1 hover:bg-[hsl(var(--accent))]">
-            <ChevronLeft className="h-4 w-4" />
-          </button>
-          <span className="text-sm font-medium">{MONTHS[view.month]} {view.year}</span>
-          <button type="button" onClick={() => navigate(1)} className="rounded p-1 hover:bg-[hsl(var(--accent))]">
-            <ChevronRight className="h-4 w-4" />
-          </button>
-        </div>
-        <CalendarGrid year={view.year} month={view.month} selected={value} onSelect={handleSelect} />
-      </PopoverContent>
-    </Popover>
-  )
-}
+export * from './DatePicker'