@tanstack/cta-ui 0.15.3 → 0.15.4

package/src/components/sidebar-items/starter.tsx

@@ -1,123 +0,0 @@
-import { useState } from 'react'
-import { FileBoxIcon, TrashIcon } from 'lucide-react'
-
-import { toast } from 'sonner'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import {
-  setProjectStarter,
-  useApplicationMode,
-  useProjectStarter,
-  useRegistry,
-} from '@/store/project'
-import { loadRemoteStarter } from '@/lib/api'
-import { StartersCarousel } from '@/components/starters-carousel'
-
-export default function Starter() {
-  const [url, setUrl] = useState('')
-  const [open, setOpen] = useState(false)
-
-  const mode = useApplicationMode()
-
-  const { projectStarter } = useProjectStarter()
-
-  if (mode !== 'setup') {
-    return null
-  }
-
-  async function onImport(registryUrl?: string) {
-    const data = await loadRemoteStarter(registryUrl || url)
-
-    if ('error' in data) {
-      toast.error('Failed to load starter', {
-        description: data.error,
-      })
-    } else {
-      setProjectStarter(data)
-      setOpen(false)
-    }
-  }
-
-  const registry = useRegistry()
-
-  return (
-    <>
-      {projectStarter?.banner && (
-        <div className="flex justify-center mb-4">
-          <div className="p-2 bg-gray-300 rounded-lg shadow-xl shadow-gray-800">
-            <img
-              src={projectStarter.banner}
-              alt="Starter Banner"
-              className="w-40 max-w-full"
-            />
-          </div>
-        </div>
-      )}
-      {projectStarter?.name && (
-        <div className="text-md mb-4">
-          <Button
-            variant="outline"
-            size="sm"
-            className="mr-2"
-            onClick={() => {
-              setProjectStarter(undefined)
-            }}
-          >
-            <TrashIcon className="w-4 h-4" />
-          </Button>
-          <span className="font-bold">Starter: </span>
-          {projectStarter.name}
-        </div>
-      )}
-      <div>
-        <Button
-          variant="secondary"
-          className="w-full"
-          onClick={() => {
-            setUrl('')
-            setOpen(true)
-          }}
-        >
-          <FileBoxIcon className="w-4 h-4" />
-          Set Project Starter
-        </Button>
-        <Dialog modal open={open} onOpenChange={setOpen}>
-          <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
-            <DialogHeader>
-              <DialogTitle>Project Starter URL</DialogTitle>
-            </DialogHeader>
-            {registry?.starters && (
-              <div>
-                <StartersCarousel onImport={(url) => onImport(url)} />
-              </div>
-            )}
-            <div>
-              <Input
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-                placeholder="https://github.com/myorg/myproject/starter.json"
-                className="min-w-lg w-full"
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    onImport()
-                  }
-                }}
-              />
-            </div>
-            <DialogFooter>
-              <Button onClick={() => onImport()}>Load</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-    </>
-  )
-}

package/src/components/sidebar-items/typescript-switch.tsx

@@ -1,52 +0,0 @@
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-
-import {
-  setTailwind,
-  setTypeScript,
-  useApplicationMode,
-  useProjectOptions,
-  useTailwindEditable,
-  useTypeScriptEditable,
-} from '@/store/project'
-
-export default function TypescriptSwitch() {
-  const typescript = useProjectOptions((state) => state.typescript)
-  const tailwind = useProjectOptions((state) => state.tailwind)
-  const mode = useApplicationMode()
-  const enableTailwind = useTailwindEditable()
-  const enableTypeScript = useTypeScriptEditable()
-
-  if (mode !== 'setup') {
-    return null
-  }
-
-  return (
-    <div className="flex">
-      <div className="w-1/2 flex flex-row items-center justify-center">
-        <Switch
-          id="typescript-switch"
-          checked={typescript}
-          onCheckedChange={(checked) => setTypeScript(checked)}
-          disabled={!enableTypeScript}
-        />
-        <Label htmlFor="typescript-switch" className="ml-2">
-          <img src="/typescript.svg" className="w-5" />
-          TypeScript
-        </Label>
-      </div>
-      <div className="w-1/2 flex flex-row items-center justify-center">
-        <Switch
-          id="tailwind-switch"
-          checked={tailwind}
-          onCheckedChange={(checked) => setTailwind(checked)}
-          disabled={!enableTailwind}
-        />
-        <Label htmlFor="tailwind-switch" className="ml-2">
-          <img src="/tailwind.svg" className="w-5" />
-          Tailwind
-        </Label>
-      </div>
-    </div>
-  )
-}

package/src/components/starters-carousel.tsx

@@ -1,45 +0,0 @@
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-} from '@/components/ui/carousel'
-
-import { useRegistry } from '@/store/project'
-
-export function StartersCarousel({
-  onImport,
-}: {
-  onImport: (url: string) => void
-}) {
-  const registry = useRegistry()
-
-  if (!registry) {
-    return null
-  }
-
-  return (
-    <div>
-      <Carousel>
-        <CarouselContent>
-          {registry.starters.map((starter) => (
-            <CarouselItem className="basis-1/3" key={starter.url}>
-              <div
-                className="p-2 flex flex-col items-center hover:cursor-pointer hover:bg-gray-700/50 hover:text-white rounded-lg"
-                onClick={() => {
-                  onImport(starter.url)
-                }}
-              >
-                <img
-                  src={starter.banner}
-                  alt={starter.name}
-                  className="w-100 max-w-full"
-                />
-                <div className="text-md font-bold">{starter.name}</div>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-      </Carousel>
-    </div>
-  )
-}

package/src/components/startup-dialog.tsx

@@ -1,71 +0,0 @@
-import { toast } from 'sonner'
-
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { StartersCarousel } from '@/components/starters-carousel'
-import { Button } from '@/components/ui/button'
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
-import {
-  setProjectStarter,
-  useApplicationMode,
-  useRegistry,
-  useStartupDialog,
-} from '@/store/project'
-import { loadRemoteStarter } from '@/lib/api'
-
-export default function StartupDialog() {
-  const mode = useApplicationMode()
-  const registry = useRegistry()
-  const { open, setOpen, dontShowAgain, setDontShowAgain } = useStartupDialog()
-
-  if (mode !== 'setup' || !registry || registry?.starters?.length === 0) {
-    return null
-  }
-
-  async function onImport(registryUrl: string) {
-    const data = await loadRemoteStarter(registryUrl)
-
-    if ('error' in data) {
-      toast.error('Failed to load starter', {
-        description: data.error,
-      })
-    } else {
-      setProjectStarter(data)
-      setOpen(false)
-    }
-  }
-
-  return (
-    <Dialog modal open={open} onOpenChange={setOpen}>
-      <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
-        <DialogHeader>
-          <DialogTitle className="text-center text-2xl font-bold">
-            Would you like to use a starter project?
-          </DialogTitle>
-        </DialogHeader>
-        <div>
-          <StartersCarousel onImport={onImport} />
-        </div>
-        <DialogFooter className="flex sm:justify-between w-full">
-          <div className="flex items-center gap-2">
-            <Switch
-              id="show-startup-dialog"
-              checked={dontShowAgain}
-              onCheckedChange={setDontShowAgain}
-            />
-            <Label htmlFor="show-startup-dialog">Don't show this again</Label>
-          </div>
-          <Button onClick={() => setOpen(false)}>
-            No, I want to start from scratch
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}

package/src/components/toaster.tsx

@@ -1,29 +0,0 @@
-import { useTheme } from 'next-themes'
-import { Toaster as Sonner } from 'sonner'
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps['theme']}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-          description: 'group-[.toast]:text-muted-foreground',
-          actionButton:
-            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-          cancelButton:
-            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }

package/src/components/ui/button.tsx

@@ -1,61 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva } from 'class-variance-authority'
-
-import type { VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : 'button'
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

package/src/components/ui/carousel.tsx

@@ -1,239 +0,0 @@
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins
-  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault()
-        scrollNext()
-      }
-    },
-    [scrollPrev, scrollNext]
-  )
-
-  React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
-
-  React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
-
-    return () => {
-      api?.off("select", onSelect)
-    }
-  }, [api, onSelect])
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        data-slot="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  )
-}
-
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
-      <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      role="group"
-      aria-roledescription="slide"
-      data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-previous"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-}
-
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-next"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-}
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}

package/src/components/ui/checkbox.tsx

@@ -1,30 +0,0 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export { Checkbox }