@tscircuit/fake-snippets 0.0.1

package/src/components/dialogs/edit-description-dialog.tsx

@@ -0,0 +1,96 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { Button } from "../ui/button"
+import { useState } from "react"
+import { useMutation, useQueryClient } from "react-query"
+import { createUseDialog } from "./create-use-dialog"
+import { useAxios } from "@/hooks/use-axios"
+import { useToast } from "@/hooks/use-toast"
+import { Textarea } from "../ui/textarea"
+
+export const UpdateDescriptionDialog = ({
+  open,
+  onOpenChange,
+  snippetId,
+  currentDescription,
+  onUpdate,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  snippetId: string
+  currentDescription: string
+  onUpdate?: (newDescription: string) => void
+}) => {
+  const [newDescription, setNewDescription] = useState(currentDescription)
+  const axios = useAxios()
+  const { toast } = useToast()
+  const qc = useQueryClient()
+
+  const updateDescriptionMutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.post("/snippets/update", {
+        snippet_id: snippetId,
+        description: newDescription,
+      })
+      if (response.status !== 200) {
+        throw new Error("Failed to update description")
+      }
+      return response.data
+    },
+    onMutate: async () => {
+      await qc.cancelQueries({ queryKey: ["snippets", snippetId] })
+      const previousSnippet = qc.getQueryData(["snippets", snippetId])
+      qc.setQueryData(["snippets", snippetId], (old: any) => ({
+        ...old,
+        description: newDescription,
+      }))
+      return { previousSnippet }
+    },
+    onSuccess: () => {
+      onUpdate?.(newDescription)
+      onOpenChange(false)
+      toast({
+        title: "Description updated",
+        description: "Successfully updated snippet description",
+      })
+    },
+    onError: (error, variables, context) => {
+      qc.setQueryData(["snippets", snippetId], context?.previousSnippet)
+      console.error("Error updating description:", error)
+      toast({
+        title: "Error",
+        description: "Failed to update the description. Please try again.",
+        variant: "destructive",
+      })
+    },
+    onSettled: () => {
+      qc.invalidateQueries({ queryKey: ["snippets", snippetId] })
+    },
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Update Description</DialogTitle>
+        </DialogHeader>
+        <Textarea
+          value={newDescription}
+          onChange={(e) => setNewDescription(e.target.value)}
+          placeholder="Enter new description"
+          disabled={updateDescriptionMutation.isLoading}
+          className="resize-none min-h-[80px]"
+        />
+        <Button
+          disabled={updateDescriptionMutation.isLoading}
+          onClick={() => updateDescriptionMutation.mutate()}
+        >
+          {updateDescriptionMutation.isLoading ? "Updating..." : "Update"}
+        </Button>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useUpdateDescriptionDialog = createUseDialog(
+  UpdateDescriptionDialog,
+)

package/src/components/dialogs/files-dialog.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { ScrollArea } from "../ui/scroll-area"
+import { cn } from "@/lib/utils"
+import { createUseDialog } from "./create-use-dialog"
+import { useSnippet } from "@/hooks/use-snippet"
+
+interface FilesDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  snippetId: string
+}
+
+export const FilesDialog: React.FC<FilesDialogProps> = ({
+  open,
+  onOpenChange,
+  snippetId,
+}) => {
+  const { data: snippet } = useSnippet(snippetId)
+
+  const files = Object.entries({
+    "dist/index.d.ts": snippet?.dts || "",
+    "index.ts": snippet?.code || "",
+    "dist/index.js": snippet?.compiled_js || "",
+    "manual-edits.json": snippet?.manual_edits_json_content || "",
+  })
+    .sort(([a], [b]) => a.localeCompare(b))
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
+
+  const [selectedFile, setSelectedFile] = useState<string | null>("index.ts")
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl w-full h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Files</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-grow overflow-hidden">
+          <div className="w-1/4 border-r">
+            <ScrollArea className="h-full">
+              {Object.keys(files).map((filePath) => (
+                <div
+                  key={filePath}
+                  className={cn(
+                    "px-4 py-2 cursor-pointer hover:bg-gray-100 text-xs",
+                    selectedFile === filePath && "bg-gray-200",
+                  )}
+                  onClick={() => setSelectedFile(filePath)}
+                >
+                  {filePath}
+                </div>
+              ))}
+            </ScrollArea>
+          </div>
+          <div className="w-3/4 overflow-hidden">
+            <ScrollArea className="h-full">
+              <pre className="p-4 text-xs whitespace-pre-wrap">
+                {selectedFile
+                  ? files[selectedFile as keyof typeof files]
+                  : "Select a file"}
+              </pre>
+            </ScrollArea>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useFilesDialog = createUseDialog(FilesDialog)

package/src/components/dialogs/import-snippet-dialog.tsx

@@ -0,0 +1,84 @@
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { Input } from "../ui/input"
+import { Button } from "../ui/button"
+import { useState } from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { createUseDialog } from "./create-use-dialog"
+
+export const ImportSnippetDialog = ({
+  open,
+  onOpenChange,
+  onSnippetSelected,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => any
+  onSnippetSelected: (snippet: Snippet) => any
+}) => {
+  const [searchText, setSearchText] = useState("")
+  const axios = useAxios()
+  const { data: snippets, isLoading } = useQuery(
+    ["snippetSearch", searchText],
+    async () => {
+      const response = await axios.get(`/snippets/search?q=${searchText}`)
+      return response.data.snippets.slice(0, 12)
+    },
+    {
+      enabled: searchText.length > 0,
+    },
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="z-[100]">
+        <DialogHeader>
+          <DialogTitle>Import Snippet</DialogTitle>
+        </DialogHeader>
+        <Input
+          placeholder="Search snippets..."
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+        />
+        <div className="h-64 overflow-y-auto">
+          {isLoading ? (
+            <div>Loading...</div>
+          ) : (
+            <ul className="w-full">
+              {snippets?.map((snippet: Snippet) => (
+                <li
+                  className="flex items-center my-1 text-xs w-full"
+                  key={snippet.snippet_id}
+                >
+                  <a
+                    href={`/${snippet.name}`}
+                    target="_blank"
+                    className="whitespace-nowrap mr-2 text-blue-500 hover:underline cursor-pointer flex-shrink-0"
+                  >
+                    {snippet.name}
+                  </a>
+                  <div className="text-xs text-gray-500 flex-grow overflow-hidden text-ellipsis whitespace-nowrap">
+                    {snippet.description}
+                  </div>
+                  <Button
+                    size="sm"
+                    className="ml-2 flex-shrink-0"
+                    variant="outline"
+                    onClick={() => {
+                      onSnippetSelected(snippet)
+                      onOpenChange(false)
+                    }}
+                  >
+                    Import
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useImportSnippetDialog = createUseDialog(ImportSnippetDialog)

package/src/components/dialogs/rename-snippet-dialog.tsx

@@ -0,0 +1,81 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { Input } from "../ui/input"
+import { Button } from "../ui/button"
+import { useState } from "react"
+import { useMutation, useQueryClient } from "react-query"
+import { createUseDialog } from "./create-use-dialog"
+import { useAxios } from "@/hooks/use-axios"
+import { useToast } from "@/hooks/use-toast"
+
+export const RenameSnippetDialog = ({
+  open,
+  onOpenChange,
+  snippetId,
+  currentName,
+  onRename,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  snippetId: string
+  currentName: string
+  onRename?: (newName: string) => void
+}) => {
+  const [newName, setNewName] = useState(currentName)
+  const axios = useAxios()
+  const { toast } = useToast()
+  const qc = useQueryClient()
+
+  const renameSnippetMutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.post("/snippets/update", {
+        snippet_id: snippetId,
+        unscoped_name: newName,
+      })
+      if (response.status !== 200) {
+        throw new Error("Failed to rename snippet")
+      }
+      return response.data
+    },
+    onSuccess: () => {
+      onRename?.(newName)
+      onOpenChange(false)
+      toast({
+        title: "Snippet renamed",
+        description: `Successfully renamed to "${newName}"`,
+      })
+      qc.invalidateQueries({ queryKey: ["snippets", snippetId] })
+    },
+    onError: (error) => {
+      console.error("Error renaming snippet:", error)
+      toast({
+        title: "Error",
+        description: "Failed to rename the snippet. Please try again.",
+        variant: "destructive",
+      })
+    },
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Rename Snippet</DialogTitle>
+        </DialogHeader>
+        <Input
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          placeholder="Enter new name"
+          disabled={renameSnippetMutation.isLoading}
+        />
+        <Button
+          disabled={renameSnippetMutation.isLoading}
+          onClick={() => renameSnippetMutation.mutate()}
+        >
+          {renameSnippetMutation.isLoading ? "Renaming..." : "Rename"}
+        </Button>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useRenameSnippetDialog = createUseDialog(RenameSnippetDialog)

package/src/components/dialogs/view-ts-files-dialog.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { ScrollArea } from "../ui/scroll-area"
+import { cn } from "@/lib/utils"
+import { createUseDialog } from "./create-use-dialog"
+import { Button } from "../ui/button"
+import { Download } from "lucide-react"
+import JSZip from "jszip"
+import { saveAs } from "file-saver"
+
+interface ViewTsFilesDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+declare global {
+  interface Window {
+    __DEBUG_CODE_EDITOR_FS_MAP: Map<string, string>
+  }
+}
+
+export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
+  open,
+  onOpenChange,
+}) => {
+  const [files, setFiles] = useState<Map<string, string>>(new Map())
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (open && window.__DEBUG_CODE_EDITOR_FS_MAP) {
+      setFiles(window.__DEBUG_CODE_EDITOR_FS_MAP)
+      if (window.__DEBUG_CODE_EDITOR_FS_MAP.size > 0) {
+        setSelectedFile(Array.from(window.__DEBUG_CODE_EDITOR_FS_MAP.keys())[0])
+      }
+    }
+  }, [open])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl w-full h-[80vh] flex flex-col">
+        <DialogHeader className="flex flex-row items-center justify-between">
+          <DialogTitle>TypeScript Files</DialogTitle>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={async () => {
+              const zip = new JSZip()
+              files.forEach((content, filename) => {
+                zip.file(filename, content)
+              })
+              const blob = await zip.generateAsync({ type: "blob" })
+              saveAs(blob, "typescript-files.zip")
+            }}
+          >
+            <Download className="w-4 h-4 mr-2" />
+            Download All
+          </Button>
+        </DialogHeader>
+        <div className="flex flex-grow overflow-hidden">
+          <div className="w-1/4 border-r">
+            <ScrollArea className="h-full">
+              {Array.from(files.keys()).map((filePath) => (
+                <div
+                  key={filePath}
+                  className={cn(
+                    "px-4 py-2 cursor-pointer hover:bg-gray-100 text-xs break-all",
+                    selectedFile === filePath && "bg-gray-200",
+                  )}
+                  onClick={() => setSelectedFile(filePath)}
+                >
+                  {filePath}
+                </div>
+              ))}
+            </ScrollArea>
+          </div>
+          <div className="w-3/4 overflow-hidden">
+            <ScrollArea className="h-full">
+              <pre className="p-4 text-xs whitespace-pre-wrap">
+                {selectedFile ? files.get(selectedFile) : "Select a file"}
+              </pre>
+            </ScrollArea>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useViewTsFilesDialog = createUseDialog(ViewTsFilesDialog)

package/src/components/ui/accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-slate-500 transition-transform duration-200 dark:text-slate-400" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-slate-800 dark:bg-slate-950",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border border-slate-200 px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-slate-950 [&>svg~*]:pl-7 dark:border-slate-800 dark:[&>svg]:text-slate-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
+        destructive:
+          "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }