create-appraisejs 0.1.6 → 0.1.8-alpha

package/templates/default/src/components/ui/kbd.tsx

@@ -1,28 +1,28 @@
-import { cn } from "@/lib/utils"
-
-function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn("inline-flex items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-export { Kbd, KbdGroup }
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

package/templates/default/src/components/ui/label.tsx

@@ -1,19 +1,19 @@
-'use client'
-
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70')
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70')
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/templates/default/src/components/ui/loading.tsx

@@ -1,12 +1,12 @@
-import { LoaderCircle } from 'lucide-react'
-
-export default function Loading() {
-  return (
-    <div className="flex items-center justify-center p-10">
-      <span className="mr-2 text-muted-foreground">
-        <LoaderCircle className="h-5 w-5 animate-spin" />
-      </span>
-      <span className="text-sm font-medium text-muted-foreground">Loading...</span>
-    </div>
-  )
-}
+import { LoaderCircle } from 'lucide-react'
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center p-10">
+      <span className="mr-2 text-muted-foreground">
+        <LoaderCircle className="h-5 w-5 animate-spin" />
+      </span>
+      <span className="text-sm font-medium text-muted-foreground">Loading...</span>
+    </div>
+  )
+}

package/templates/default/src/components/ui/multi-select-with-preview.tsx

@@ -1,116 +1,116 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown, X } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { TooltipProvider } from '@/components/ui/tooltip'
-
-interface Option {
-  value: string
-  label: string
-}
-
-interface MultiSelectWithPreviewProps {
-  id: string
-  className?: string
-  options: Option[]
-  placeholder?: string
-  emptyMessage?: string
-  selectedLabel?: string
-  onSelectChange: (value: string[]) => void
-  defaultSelectedValues?: string[]
-  searchPlaceholder?: string
-}
-
-export function MultiSelectWithPreview({
-  id,
-  className,
-  options,
-  placeholder = 'Select options...',
-  emptyMessage = 'No option found.',
-  selectedLabel = 'option(s) selected',
-  onSelectChange,
-  defaultSelectedValues = [],
-  searchPlaceholder = 'Search options...',
-}: MultiSelectWithPreviewProps) {
-  const [open, setOpen] = React.useState(false)
-  const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultSelectedValues)
-
-  const handleSelect = (value: string) => {
-    const newSelectedValues = selectedValues.includes(value)
-      ? selectedValues.filter(item => item !== value)
-      : [...selectedValues, value]
-    setSelectedValues(newSelectedValues)
-    onSelectChange(newSelectedValues)
-  }
-
-  return (
-    <TooltipProvider>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            className={cn('w-full justify-between text-muted-foreground', className)}
-          >
-            {selectedValues.length > 0 ? `${selectedValues.length} ${selectedLabel.toLowerCase()}` : placeholder}
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className={cn('w-full max-w-[600px] p-0', className)} align="start">
-          <Command className={cn('w-full', className)}>
-            <CommandInput placeholder={searchPlaceholder ?? `Search item(s)...`} className="w-full" />
-            <CommandList className={cn('w-full', className)}>
-              <CommandEmpty>{emptyMessage}</CommandEmpty>
-              <CommandGroup className={cn('w-full', className)}>
-                {options.map(option => (
-                  <CommandItem
-                    key={option.value}
-                    id={id}
-                    onSelect={() => handleSelect(option.value)}
-                    className={cn('w-full', className)}
-                  >
-                    <Check
-                      className={cn(
-                        'mr-2 h-4 w-4 flex-shrink-0',
-                        selectedValues.includes(option.value) ? 'opacity-100' : 'opacity-0',
-                      )}
-                    />
-                    <span>{option.label}</span>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-      {selectedValues.length > 0 && (
-        <div className={cn('mt-4', className)}>
-          <h3 className="mb-2 text-sm font-semibold text-muted-foreground">{selectedLabel}</h3>
-          <ul className="space-y-2">
-            {selectedValues.map(value => {
-              const option = options.find(opt => opt.value === value)
-              if (!option) return null
-              return (
-                <li key={value} className="flex items-center justify-between rounded-md bg-secondary p-2">
-                  <span className="text-sm">{option.label}</span>
-                  <Button variant="ghost" size="sm" onClick={() => handleSelect(value)} className="h-auto p-1">
-                    <X className="h-4 w-4" />
-                    <span className="sr-only">Remove</span>
-                  </Button>
-                </li>
-              )
-            })}
-          </ul>
-        </div>
-      )}
-    </TooltipProvider>
-  )
-}
-
-export default MultiSelectWithPreview
+'use client'
+
+import * as React from 'react'
+import { Check, ChevronsUpDown, X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { TooltipProvider } from '@/components/ui/tooltip'
+
+interface Option {
+  value: string
+  label: string
+}
+
+interface MultiSelectWithPreviewProps {
+  id: string
+  className?: string
+  options: Option[]
+  placeholder?: string
+  emptyMessage?: string
+  selectedLabel?: string
+  onSelectChange: (value: string[]) => void
+  defaultSelectedValues?: string[]
+  searchPlaceholder?: string
+}
+
+export function MultiSelectWithPreview({
+  id,
+  className,
+  options,
+  placeholder = 'Select options...',
+  emptyMessage = 'No option found.',
+  selectedLabel = 'option(s) selected',
+  onSelectChange,
+  defaultSelectedValues = [],
+  searchPlaceholder = 'Search options...',
+}: MultiSelectWithPreviewProps) {
+  const [open, setOpen] = React.useState(false)
+  const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultSelectedValues)
+
+  const handleSelect = (value: string) => {
+    const newSelectedValues = selectedValues.includes(value)
+      ? selectedValues.filter(item => item !== value)
+      : [...selectedValues, value]
+    setSelectedValues(newSelectedValues)
+    onSelectChange(newSelectedValues)
+  }
+
+  return (
+    <TooltipProvider>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className={cn('w-full justify-between text-muted-foreground', className)}
+          >
+            {selectedValues.length > 0 ? `${selectedValues.length} ${selectedLabel.toLowerCase()}` : placeholder}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className={cn('w-full max-w-[600px] p-0', className)} align="start">
+          <Command className={cn('w-full', className)}>
+            <CommandInput placeholder={searchPlaceholder ?? `Search item(s)...`} className="w-full" />
+            <CommandList className={cn('w-full', className)}>
+              <CommandEmpty>{emptyMessage}</CommandEmpty>
+              <CommandGroup className={cn('w-full', className)}>
+                {options.map(option => (
+                  <CommandItem
+                    key={option.value}
+                    id={id}
+                    onSelect={() => handleSelect(option.value)}
+                    className={cn('w-full', className)}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4 flex-shrink-0',
+                        selectedValues.includes(option.value) ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                    <span>{option.label}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {selectedValues.length > 0 && (
+        <div className={cn('mt-4', className)}>
+          <h3 className="mb-2 text-sm font-semibold text-muted-foreground">{selectedLabel}</h3>
+          <ul className="space-y-2">
+            {selectedValues.map(value => {
+              const option = options.find(opt => opt.value === value)
+              if (!option) return null
+              return (
+                <li key={value} className="flex items-center justify-between rounded-md bg-secondary p-2">
+                  <span className="text-sm">{option.label}</span>
+                  <Button variant="ghost" size="sm" onClick={() => handleSelect(value)} className="h-auto p-1">
+                    <X className="h-4 w-4" />
+                    <span className="sr-only">Remove</span>
+                  </Button>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      )}
+    </TooltipProvider>
+  )
+}
+
+export default MultiSelectWithPreview

package/templates/default/src/components/ui/multi-select.tsx

@@ -1,142 +1,142 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronDown, X } from 'lucide-react'
-import { Badge } from '@/components/ui/badge'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { cn } from '@/lib/utils'
-
-export type Option = {
-  label: string
-  value: string
-  disabled?: boolean
-}
-
-interface MultiSelectProps {
-  options: Option[]
-  selected: string[]
-  onChange: (selected: string[]) => void
-  placeholder?: string
-  className?: string
-  badgeClassName?: string
-  emptyMessage?: string
-}
-
-export function MultiSelect({
-  options,
-  selected,
-  onChange,
-  placeholder = 'Select options...',
-  className,
-  badgeClassName,
-  emptyMessage = 'No options found.',
-}: MultiSelectProps) {
-  const [open, setOpen] = React.useState(false)
-
-  const handleUnselect = (value: string) => {
-    onChange(selected.filter(item => item !== value))
-  }
-
-  const handleSelect = (value: string) => {
-    if (selected.includes(value)) {
-      onChange(selected.filter(item => item !== value))
-    } else {
-      onChange([...selected, value])
-    }
-    // Keep the popover open for multiple selections
-  }
-
-  const selectedLabels = selected.map(value => options.find(option => option.value === value)?.label || value)
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <div
-          // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-          role="combobox"
-          className={cn(
-            'flex min-h-10 w-full flex-wrap items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-            className,
-          )}
-          onClick={() => setOpen(true)}
-        >
-          <div className="flex flex-1 flex-wrap gap-1">
-            {selected.length === 0 && <span className="text-muted-foreground">{placeholder}</span>}
-            {selectedLabels.map(label => (
-              <Badge key={label} variant="secondary" className={cn('mb-1 mr-1 text-xs', badgeClassName)}>
-                {label}
-                <button
-                  className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                  onKeyDown={e => {
-                    if (e.key === 'Enter') {
-                      handleUnselect(selected[selectedLabels.indexOf(label)])
-                    }
-                  }}
-                  onMouseDown={e => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                  }}
-                  onClick={e => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                    handleUnselect(selected[selectedLabels.indexOf(label)])
-                  }}
-                >
-                  <X className="h-3 w-3" />
-                  <span className="sr-only">Remove {label}</span>
-                </button>
-              </Badge>
-            ))}
-          </div>
-          <ChevronDown className={cn('h-4 w-4 shrink-0 opacity-50 transition-transform', open && 'rotate-180')} />
-        </div>
-      </PopoverTrigger>
-      <PopoverContent className="w-full p-0" align="start">
-        <Command>
-          <CommandInput placeholder="Search options..." />
-          <CommandList>
-            <CommandEmpty>{emptyMessage}</CommandEmpty>
-            <CommandGroup className="max-h-64 overflow-auto">
-              {options.map(option => {
-                const isSelected = selected.includes(option.value)
-                return (
-                  <CommandItem
-                    key={option.value}
-                    value={option.value}
-                    disabled={option.disabled}
-                    onSelect={() => handleSelect(option.value)}
-                    className={cn('flex items-center gap-2', isSelected ? 'bg-accent' : '')}
-                  >
-                    <div
-                      className={cn(
-                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                        isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible',
-                      )}
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        width="16"
-                        height="16"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        className={cn('h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')}
-                      >
-                        <polyline points="20 6 9 17 4 12" />
-                      </svg>
-                    </div>
-                    <span>{option.label}</span>
-                  </CommandItem>
-                )
-              })}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
+'use client'
+
+import * as React from 'react'
+import { ChevronDown, X } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+
+export type Option = {
+  label: string
+  value: string
+  disabled?: boolean
+}
+
+interface MultiSelectProps {
+  options: Option[]
+  selected: string[]
+  onChange: (selected: string[]) => void
+  placeholder?: string
+  className?: string
+  badgeClassName?: string
+  emptyMessage?: string
+}
+
+export function MultiSelect({
+  options,
+  selected,
+  onChange,
+  placeholder = 'Select options...',
+  className,
+  badgeClassName,
+  emptyMessage = 'No options found.',
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false)
+
+  const handleUnselect = (value: string) => {
+    onChange(selected.filter(item => item !== value))
+  }
+
+  const handleSelect = (value: string) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter(item => item !== value))
+    } else {
+      onChange([...selected, value])
+    }
+    // Keep the popover open for multiple selections
+  }
+
+  const selectedLabels = selected.map(value => options.find(option => option.value === value)?.label || value)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <div
+          // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+          role="combobox"
+          className={cn(
+            'flex min-h-10 w-full flex-wrap items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            className,
+          )}
+          onClick={() => setOpen(true)}
+        >
+          <div className="flex flex-1 flex-wrap gap-1">
+            {selected.length === 0 && <span className="text-muted-foreground">{placeholder}</span>}
+            {selectedLabels.map(label => (
+              <Badge key={label} variant="secondary" className={cn('mb-1 mr-1 text-xs', badgeClassName)}>
+                {label}
+                <button
+                  className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                  onKeyDown={e => {
+                    if (e.key === 'Enter') {
+                      handleUnselect(selected[selectedLabels.indexOf(label)])
+                    }
+                  }}
+                  onMouseDown={e => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                  }}
+                  onClick={e => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    handleUnselect(selected[selectedLabels.indexOf(label)])
+                  }}
+                >
+                  <X className="h-3 w-3" />
+                  <span className="sr-only">Remove {label}</span>
+                </button>
+              </Badge>
+            ))}
+          </div>
+          <ChevronDown className={cn('h-4 w-4 shrink-0 opacity-50 transition-transform', open && 'rotate-180')} />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search options..." />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup className="max-h-64 overflow-auto">
+              {options.map(option => {
+                const isSelected = selected.includes(option.value)
+                return (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    disabled={option.disabled}
+                    onSelect={() => handleSelect(option.value)}
+                    className={cn('flex items-center gap-2', isSelected ? 'bg-accent' : '')}
+                  >
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible',
+                      )}
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        width="16"
+                        height="16"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className={cn('h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')}
+                      >
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    </div>
+                    <span>{option.label}</span>
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}