@dinachi/cli 0.1.0

package/templates/menubar/menubar.tsx

@@ -0,0 +1,303 @@
+// @ts-nocheck
+"use client"
+import * as React from "react"
+import { Menubar as BaseMenubar } from "@base-ui-components/react/menubar"
+import { Menu } from "@base-ui-components/react/menu"
+import { cn } from "@/lib/utils"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { useRender } from "@base-ui-components/react/use-render"
+
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof BaseMenubar>,
+  React.ComponentProps<typeof BaseMenubar>
+>(({ className, ...props }, ref) => (
+  <BaseMenubar
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = "Menubar"
+
+const MenubarMenu = React.forwardRef<
+  React.ElementRef<typeof Menu.Root>,
+  React.ComponentProps<typeof Menu.Root>
+>(({ children, ...props }, ref) => {
+  const element = useRender({
+    render: <Menu.Root>{children}</Menu.Root>,
+    props,
+    ref,
+  });
+  return element;
+});
+MenubarMenu.displayName = "MenubarMenu"
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof Menu.Trigger>,
+  React.ComponentProps<typeof Menu.Trigger>
+>(({ className, ...props }, ref) => (
+  <Menu.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = "MenubarTrigger"
+
+const MenubarPortal = React.forwardRef<
+  React.ElementRef<typeof Menu.Portal>,
+  React.ComponentProps<typeof Menu.Portal>
+>(({ ...props }, ref) => {
+  const element = useRender({
+    render: <Menu.Portal />,
+    props,
+    ref,
+  });
+  return element;
+});
+MenubarPortal.displayName = "MenubarPortal"
+
+const MenubarPositioner = React.forwardRef<
+  React.ElementRef<typeof Menu.Positioner>,
+  React.ComponentProps<typeof Menu.Positioner>
+>(({ className, ...props }, ref) => (
+  <Menu.Positioner
+    ref={ref}
+    className={cn("outline-none", className)}
+    sideOffset={4}
+    {...props}
+  />
+))
+MenubarPositioner.displayName = "MenubarPositioner"
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof Menu.Popup>,
+  React.ComponentProps<typeof Menu.Popup>
+>(({ className, ...props }, ref) => (
+  <Menu.Popup
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      "origin-[var(--transform-origin)]",
+      "outline-none focus:outline-none focus-visible:outline-none",
+      "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+      "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarContent.displayName = "MenubarContent"
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof Menu.Item>,
+  React.ComponentProps<typeof Menu.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <Menu.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = "MenubarItem"
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof Menu.CheckboxItem>,
+  React.ComponentProps<typeof Menu.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <Menu.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      {checked && <Check className="h-4 w-4" />}
+    </span>
+    {children}
+  </Menu.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = "MenubarCheckboxItem"
+
+const MenubarRadioGroup = React.forwardRef<
+  React.ElementRef<typeof Menu.RadioGroup>,
+  React.ComponentProps<typeof Menu.RadioGroup>
+>(({ className, ...props }, ref) => (
+  <Menu.RadioGroup ref={ref} className={cn(className)} {...props} />
+))
+MenubarRadioGroup.displayName = "MenubarRadioGroup"
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof Menu.RadioItem>,
+  React.ComponentProps<typeof Menu.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <Menu.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <Circle className="h-2 w-2 fill-current data-[checked]:block data-[unchecked]:hidden" />
+    </span>
+    {children}
+  </Menu.RadioItem>
+))
+MenubarRadioItem.displayName = "MenubarRadioItem"
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof Menu.GroupLabel>,
+  React.ComponentProps<typeof Menu.GroupLabel> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <Menu.GroupLabel
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = "MenubarLabel"
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof Menu.Separator>,
+  React.ComponentProps<typeof Menu.Separator>
+>(({ className, ...props }, ref) => (
+  <Menu.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = "MenubarSeparator"
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayName = "MenubarShortcut"
+
+const MenubarSub = React.forwardRef<
+  React.ElementRef<typeof Menu.Root>,
+  React.ComponentProps<typeof Menu.Root>
+>(({ children, ...props }, ref) => {
+  const element = useRender({
+    render: <Menu.Root>{children}</Menu.Root>,
+    props,
+    ref,
+  });
+  return element;
+});
+MenubarSub.displayName = "MenubarSub"
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof Menu.SubmenuTrigger>,
+  React.ComponentProps<typeof Menu.SubmenuTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <Menu.SubmenuTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </Menu.SubmenuTrigger>
+))
+MenubarSubTrigger.displayName = "MenubarSubTrigger"
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof Menu.Popup>,
+  React.ComponentProps<typeof Menu.Popup>
+>(({ className, ...props }, ref) => (
+  <Menu.Portal>
+    <Menu.Positioner className="outline-none" alignOffset={-4} sideOffset={8}>
+      <Menu.Popup
+        ref={ref}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+          "origin-[var(--transform-origin)]",
+          "outline-none focus:outline-none focus-visible:outline-none",
+          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </Menu.Positioner>
+  </Menu.Portal>
+))
+MenubarSubContent.displayName = "MenubarSubContent"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarPortal,
+  MenubarPositioner,
+  MenubarContent,
+  MenubarItem,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarLabel,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+} 

package/templates/navigation-menu/index.ts

@@ -0,0 +1,13 @@
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuPortal,
+  NavigationMenuPositioner,
+  NavigationMenuPopup,
+  NavigationMenuViewport,
+} from "./navigation-menu" 

package/templates/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,205 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui-components/react/navigation-menu"
+import { cn } from "@/lib/utils"
+import { ChevronDown } from "lucide-react"
+import { useRender } from "@base-ui-components/react/use-render"
+
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.Root>,
+  React.ComponentProps<typeof BaseNavigationMenu.Root>
+>(({ className, children, ...props }, ref) => (
+  <BaseNavigationMenu.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </BaseNavigationMenu.Root>
+))
+NavigationMenu.displayName = "NavigationMenu"
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.List>,
+  React.ComponentProps<typeof BaseNavigationMenu.List>
+>(({ className, ...props }, ref) => (
+  <BaseNavigationMenu.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = "NavigationMenuList"
+
+const NavigationMenuItem = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.Item>,
+  React.ComponentProps<typeof BaseNavigationMenu.Item>
+>(({ className, ...props }, ref) => (
+  <BaseNavigationMenu.Item
+    ref={ref}
+    className={cn("", className)}
+    {...props}
+  />
+))
+NavigationMenuItem.displayName = "NavigationMenuItem"
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.Trigger>,
+  React.ComponentProps<typeof BaseNavigationMenu.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <BaseNavigationMenu.Trigger
+    ref={ref}
+    className={cn(
+      "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground focus:outline-none",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "data-[popup-open]:bg-accent/50",
+      className
+    )}
+    {...props}
+  >
+    {children}{" "}
+    <BaseNavigationMenu.Icon
+      render={
+        <ChevronDown className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[popup-open]:rotate-180" />
+      }
+    />
+  </BaseNavigationMenu.Trigger>
+))
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger"
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.Content>,
+  React.ComponentProps<typeof BaseNavigationMenu.Content>
+>(({ className, ...props }, ref) => (
+  <BaseNavigationMenu.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full",
+      "data-[starting-style]:animate-in data-[starting-style]:fade-in",
+      "data-[ending-style]:animate-out data-[ending-style]:fade-out",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = "NavigationMenuContent"
+
+const NavigationMenuLink = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.Link>,
+  React.ComponentProps<typeof BaseNavigationMenu.Link>
+>(({ className, ...props }, ref) => (
+  <BaseNavigationMenu.Link
+    ref={ref}
+    className={cn(
+      "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuLink.displayName = "NavigationMenuLink"
+
+const NavigationMenuPortal = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.Portal>,
+  React.ComponentProps<typeof BaseNavigationMenu.Portal>
+>(({ ...props }, ref) => {
+  const element = useRender({
+    render: <BaseNavigationMenu.Portal />,
+    props,
+    ref,
+  });
+  return element;
+});
+NavigationMenuPortal.displayName = "NavigationMenuPortal"
+
+const NavigationMenuPositioner = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.Positioner>,
+  React.ComponentProps<typeof BaseNavigationMenu.Positioner>
+>(({ className, ...props }, ref) => (
+  <BaseNavigationMenu.Positioner
+    ref={ref}
+    className={cn("absolute left-0 top-full flex justify-center", className)}
+    {...props}
+  />
+))
+NavigationMenuPositioner.displayName = "NavigationMenuPositioner"
+
+const NavigationMenuPopup = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.Popup>,
+  React.ComponentProps<typeof BaseNavigationMenu.Popup>
+>(({ className, ...props }, ref) => (
+  <BaseNavigationMenu.Popup
+    ref={ref}
+    className={cn(
+      "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-90",
+      "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-90",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuPopup.displayName = "NavigationMenuPopup"
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof BaseNavigationMenu.Viewport>,
+  React.ComponentProps<typeof BaseNavigationMenu.Viewport>
+>(({ className, ...props }, ref) => (
+  <BaseNavigationMenu.Viewport
+    ref={ref}
+    className={cn(
+      "origin-top-center relative mt-1.5 h-auto w-auto overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg",
+      "data-[state=open]:animate-in data-[state=open]:zoom-in-90 data-[state=open]:fade-in",
+      "data-[state=closed]:animate-out data-[state=closed]:zoom-out-90 data-[state=closed]:fade-out",
+      className
+    )}
+    style={{
+      perspective: "2000px",
+    }}
+    {...props}
+  />
+))
+NavigationMenuViewport.displayName = "NavigationMenuViewport"
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=visible]:fade-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </div>
+))
+NavigationMenuIndicator.displayName = "NavigationMenuIndicator"
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuPortal,
+  NavigationMenuPositioner,
+  NavigationMenuPopup,
+  NavigationMenuViewport,
+} 

package/templates/preview-card/index.ts

@@ -0,0 +1 @@
+export * from "./preview-card" 

package/templates/preview-card/preview-card.tsx

@@ -0,0 +1,142 @@
+// @ts-nocheck
+
+"use client"
+
+import * as React from "react"
+import { PreviewCard as BasePreviewCard } from "@base-ui-components/react/preview-card"
+import { cn } from "@/lib/utils"
+
+const PreviewCard = BasePreviewCard.Root
+
+const PreviewCardTrigger = React.forwardRef<
+  React.ElementRef<typeof BasePreviewCard.Trigger>,
+  React.ComponentProps<typeof BasePreviewCard.Trigger>
+>(({ className, ...props }, ref) => (
+  <BasePreviewCard.Trigger
+    ref={ref}
+    className={cn(
+      "text-blue-600 no-underline decoration-blue-600/60 decoration-1 underline-offset-2 outline-none",
+      "hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600",
+      "data-[popup-open]:underline data-[popup-open]:focus-visible:no-underline",
+      "dark:text-blue-400 dark:decoration-blue-400/60 dark:focus-visible:outline-blue-400",
+      className
+    )}
+    {...props}
+  />
+))
+PreviewCardTrigger.displayName = "PreviewCardTrigger"
+
+const PreviewCardPortal = BasePreviewCard.Portal
+
+const PreviewCardBackdrop = React.forwardRef<
+  React.ElementRef<typeof BasePreviewCard.Backdrop>,
+  React.ComponentProps<typeof BasePreviewCard.Backdrop>
+>(({ className, ...props }, ref) => (
+  <BasePreviewCard.Backdrop
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-40",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+      className
+    )}
+    {...props}
+  />
+))
+PreviewCardBackdrop.displayName = "PreviewCardBackdrop"
+
+const PreviewCardPositioner = React.forwardRef<
+  React.ElementRef<typeof BasePreviewCard.Positioner>,
+  React.ComponentProps<typeof BasePreviewCard.Positioner>
+>(({ className, sideOffset = 8, ...props }, ref) => (
+  <BasePreviewCard.Positioner
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn("z-50", className)}
+    {...props}
+  />
+))
+PreviewCardPositioner.displayName = "PreviewCardPositioner"
+
+const PreviewCardPopup = React.forwardRef<
+  React.ElementRef<typeof BasePreviewCard.Popup>,
+  React.ComponentProps<typeof BasePreviewCard.Popup>
+>(({ className, ...props }, ref) => (
+  <BasePreviewCard.Popup
+    ref={ref}
+    className={cn(
+      "flex w-[280px] origin-[var(--transform-origin)] flex-col gap-3 rounded-lg bg-secondary/70 p-4 shadow-lg shadow-secondary/20",
+      "outline outline-1 outline-border",
+      "transition-[transform,scale,opacity] duration-200",
+      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+      "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+      "bg-secondary/70 backdrop-blur-sm dark:shadow-none dark:-outline-offset-1",
+      className
+    )}
+    {...props}
+  />
+))
+PreviewCardPopup.displayName = "PreviewCardPopup"
+
+const PreviewCardArrow = React.forwardRef<
+  React.ElementRef<typeof BasePreviewCard.Arrow>,
+  React.ComponentProps<typeof BasePreviewCard.Arrow> & {
+    children?: React.ReactNode
+  }
+>(({ className, children, ...props }, ref) => (
+  <BasePreviewCard.Arrow
+    ref={ref}
+    className={cn(
+      "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90",
+      "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90",
+      "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
+      className
+    )}
+    {...props}
+  >
+    {children || <PreviewCardArrowSvg />}
+  </BasePreviewCard.Arrow>
+))
+PreviewCardArrow.displayName = "PreviewCardArrow"
+
+const PreviewCardContent = React.forwardRef<
+  React.ElementRef<typeof BasePreviewCard.Popup>,
+  React.ComponentProps<typeof BasePreviewCard.Popup>
+>(({ className, children, ...props }, ref) => (
+  <PreviewCardPortal>
+    <PreviewCardPositioner>
+      <PreviewCardPopup ref={ref} className={className} {...props}>
+        <PreviewCardArrow />
+        {children}
+      </PreviewCardPopup>
+    </PreviewCardPositioner>
+  </PreviewCardPortal>
+))
+PreviewCardContent.displayName = "PreviewCardContent"
+
+function PreviewCardArrowSvg(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+            className="fill-secondary"
+        />
+      
+      <path
+        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
+        className="fill-border"
+      />
+    </svg>
+  )
+}
+
+export {
+  PreviewCard,
+  PreviewCardTrigger,
+  PreviewCardPortal,
+  PreviewCardBackdrop,
+  PreviewCardPositioner,
+  PreviewCardPopup,
+  PreviewCardArrow,
+  PreviewCardContent,
+  PreviewCardArrowSvg,
+} 

package/templates/select/index.ts

@@ -0,0 +1 @@
+export * from "./select"