diff options
Diffstat (limited to 'packages/ui-new/src/components/ui')
18 files changed, 0 insertions, 1506 deletions
diff --git a/packages/ui-new/src/components/ui/avatar.tsx b/packages/ui-new/src/components/ui/avatar.tsx deleted file mode 100644 index 9fd72a2..0000000 --- a/packages/ui-new/src/components/ui/avatar.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"; -import type * as React from "react"; - -import { cn } from "@/lib/utils"; - -function Avatar({ - className, - size = "default", - ...props -}: AvatarPrimitive.Root.Props & { - size?: "default" | "sm" | "lg"; -}) { - return ( - <AvatarPrimitive.Root - data-slot="avatar" - data-size={size} - className={cn( - "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten", - className, - )} - {...props} - /> - ); -} - -function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) { - return ( - <AvatarPrimitive.Image - data-slot="avatar-image" - className={cn( - "rounded-full aspect-square size-full object-cover", - className, - )} - {...props} - /> - ); -} - -function AvatarFallback({ - className, - ...props -}: AvatarPrimitive.Fallback.Props) { - return ( - <AvatarPrimitive.Fallback - data-slot="avatar-fallback" - className={cn( - "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs", - className, - )} - {...props} - /> - ); -} - -function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) { - return ( - <span - data-slot="avatar-badge" - className={cn( - "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none", - "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", - "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", - "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", - className, - )} - {...props} - /> - ); -} - -function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="avatar-group" - className={cn( - "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2", - className, - )} - {...props} - /> - ); -} - -function AvatarGroupCount({ - className, - ...props -}: React.ComponentProps<"div">) { - return ( - <div - data-slot="avatar-group-count" - className={cn( - "bg-muted text-muted-foreground size-8 rounded-full text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", - className, - )} - {...props} - /> - ); -} - -export { - Avatar, - AvatarImage, - AvatarFallback, - AvatarGroup, - AvatarGroupCount, - AvatarBadge, -}; diff --git a/packages/ui-new/src/components/ui/badge.tsx b/packages/ui-new/src/components/ui/badge.tsx deleted file mode 100644 index 425ab9e..0000000 --- a/packages/ui-new/src/components/ui/badge.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { mergeProps } from "@base-ui/react/merge-props"; -import { useRender } from "@base-ui/react/use-render"; -import { cva, type VariantProps } from "class-variance-authority"; - -import { cn } from "@/lib/utils"; - -const badgeVariants = cva( - "h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-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 overflow-hidden group/badge", - { - variants: { - variant: { - default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", - secondary: - "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", - destructive: - "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20", - outline: - "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", - ghost: - "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", - link: "text-primary underline-offset-4 hover:underline", - }, - }, - defaultVariants: { - variant: "default", - }, - }, -); - -function Badge({ - className, - variant = "default", - render, - ...props -}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) { - return useRender({ - defaultTagName: "span", - props: mergeProps<"span">( - { - className: cn(badgeVariants({ variant }), className), - }, - props, - ), - render, - state: { - slot: "badge", - variant, - }, - }); -} - -export { Badge, badgeVariants }; diff --git a/packages/ui-new/src/components/ui/button.tsx b/packages/ui-new/src/components/ui/button.tsx deleted file mode 100644 index 7dee494..0000000 --- a/packages/ui-new/src/components/ui/button.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Button as ButtonPrimitive } from "@base-ui/react/button"; -import { cva, type VariantProps } from "class-variance-authority"; - -import { cn } from "@/lib/utils"; - -const buttonVariants = cva( - "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", - { - variants: { - variant: { - default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", - outline: - "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground", - secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", - ghost: - "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground", - destructive: - "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30", - link: "text-primary underline-offset-4 hover:underline", - }, - size: { - default: - "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", - xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", - sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5", - lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3", - icon: "size-8", - "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3", - "icon-sm": "size-7 rounded-none", - "icon-lg": "size-9", - }, - }, - defaultVariants: { - variant: "default", - size: "default", - }, - }, -); - -function Button({ - className, - variant = "default", - size = "default", - ...props -}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) { - return ( - <ButtonPrimitive - data-slot="button" - className={cn(buttonVariants({ variant, size, className }))} - {...props} - /> - ); -} - -export { Button, buttonVariants }; diff --git a/packages/ui-new/src/components/ui/card.tsx b/packages/ui-new/src/components/ui/card.tsx deleted file mode 100644 index b7084a0..0000000 --- a/packages/ui-new/src/components/ui/card.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import type * as React from "react"; - -import { cn } from "@/lib/utils"; - -function Card({ - className, - size = "default", - ...props -}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { - return ( - <div - data-slot="card" - data-size={size} - className={cn( - "ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col", - className, - )} - {...props} - /> - ); -} - -function CardHeader({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="card-header" - className={cn( - "gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]", - className, - )} - {...props} - /> - ); -} - -function CardTitle({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="card-title" - className={cn( - "text-sm font-medium group-data-[size=sm]/card:text-sm", - className, - )} - {...props} - /> - ); -} - -function CardDescription({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="card-description" - className={cn("text-muted-foreground text-xs/relaxed", className)} - {...props} - /> - ); -} - -function CardAction({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="card-action" - className={cn( - "col-start-2 row-span-2 row-start-1 self-start justify-self-end", - className, - )} - {...props} - /> - ); -} - -function CardContent({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="card-content" - className={cn("px-4 group-data-[size=sm]/card:px-3", className)} - {...props} - /> - ); -} - -function CardFooter({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="card-footer" - className={cn( - "rounded-none border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", - className, - )} - {...props} - /> - ); -} - -export { - Card, - CardHeader, - CardFooter, - CardTitle, - CardAction, - CardDescription, - CardContent, -}; diff --git a/packages/ui-new/src/components/ui/checkbox.tsx b/packages/ui-new/src/components/ui/checkbox.tsx deleted file mode 100644 index 9f22cea..0000000 --- a/packages/ui-new/src/components/ui/checkbox.tsx +++ /dev/null @@ -1,27 +0,0 @@ -"use client"; - -import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"; -import { CheckIcon } from "lucide-react"; -import { cn } from "@/lib/utils"; - -function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) { - return ( - <CheckboxPrimitive.Root - data-slot="checkbox" - className={cn( - "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50", - className, - )} - {...props} - > - <CheckboxPrimitive.Indicator - data-slot="checkbox-indicator" - className="[&>svg]:size-3.5 grid place-content-center text-current transition-none" - > - <CheckIcon /> - </CheckboxPrimitive.Indicator> - </CheckboxPrimitive.Root> - ); -} - -export { Checkbox }; diff --git a/packages/ui-new/src/components/ui/dialog.tsx b/packages/ui-new/src/components/ui/dialog.tsx deleted file mode 100644 index 033b47c..0000000 --- a/packages/ui-new/src/components/ui/dialog.tsx +++ /dev/null @@ -1,155 +0,0 @@ -"use client"; - -import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"; -import { XIcon } from "lucide-react"; -import type * as React from "react"; -import { Button } from "@/components/ui/button"; -import { cn } from "@/lib/utils"; - -function Dialog({ ...props }: DialogPrimitive.Root.Props) { - return <DialogPrimitive.Root data-slot="dialog" {...props} />; -} - -function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) { - return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />; -} - -function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) { - return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />; -} - -function DialogClose({ ...props }: DialogPrimitive.Close.Props) { - return <DialogPrimitive.Close data-slot="dialog-close" {...props} />; -} - -function DialogOverlay({ - className, - ...props -}: DialogPrimitive.Backdrop.Props) { - return ( - <DialogPrimitive.Backdrop - data-slot="dialog-overlay" - className={cn( - "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", - className, - )} - {...props} - /> - ); -} - -function DialogContent({ - className, - children, - showCloseButton = true, - ...props -}: DialogPrimitive.Popup.Props & { - showCloseButton?: boolean; -}) { - return ( - <DialogPortal> - <DialogOverlay /> - <DialogPrimitive.Popup - data-slot="dialog-content" - className={cn( - "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none", - className, - )} - {...props} - > - {children} - {showCloseButton && ( - <DialogPrimitive.Close - data-slot="dialog-close" - render={ - <Button - variant="ghost" - className="absolute top-2 right-2" - size="icon-sm" - /> - } - > - <XIcon /> - <span className="sr-only">Close</span> - </DialogPrimitive.Close> - )} - </DialogPrimitive.Popup> - </DialogPortal> - ); -} - -function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="dialog-header" - className={cn("gap-1 text-left flex flex-col", className)} - {...props} - /> - ); -} - -function DialogFooter({ - className, - showCloseButton = false, - children, - ...props -}: React.ComponentProps<"div"> & { - showCloseButton?: boolean; -}) { - return ( - <div - data-slot="dialog-footer" - className={cn( - "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", - className, - )} - {...props} - > - {children} - {showCloseButton && ( - <DialogPrimitive.Close render={<Button variant="outline" />}> - Close - </DialogPrimitive.Close> - )} - </div> - ); -} - -function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) { - return ( - <DialogPrimitive.Title - data-slot="dialog-title" - className={cn("text-sm font-medium", className)} - {...props} - /> - ); -} - -function DialogDescription({ - className, - ...props -}: DialogPrimitive.Description.Props) { - return ( - <DialogPrimitive.Description - data-slot="dialog-description" - className={cn( - "text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3", - className, - )} - {...props} - /> - ); -} - -export { - Dialog, - DialogClose, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogOverlay, - DialogPortal, - DialogTitle, - DialogTrigger, -}; diff --git a/packages/ui-new/src/components/ui/dropdown-menu.tsx b/packages/ui-new/src/components/ui/dropdown-menu.tsx deleted file mode 100644 index ee97374..0000000 --- a/packages/ui-new/src/components/ui/dropdown-menu.tsx +++ /dev/null @@ -1,269 +0,0 @@ -import { Menu as MenuPrimitive } from "@base-ui/react/menu"; -import { CheckIcon, ChevronRightIcon } from "lucide-react"; -import type * as React from "react"; -import { cn } from "@/lib/utils"; - -function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) { - return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />; -} - -function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) { - return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />; -} - -function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) { - return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />; -} - -function DropdownMenuContent({ - align = "start", - alignOffset = 0, - side = "bottom", - sideOffset = 4, - className, - ...props -}: MenuPrimitive.Popup.Props & - Pick< - MenuPrimitive.Positioner.Props, - "align" | "alignOffset" | "side" | "sideOffset" - >) { - return ( - <MenuPrimitive.Portal> - <MenuPrimitive.Positioner - className="isolate z-50 outline-none" - align={align} - alignOffset={alignOffset} - side={side} - sideOffset={sideOffset} - > - <MenuPrimitive.Popup - data-slot="dropdown-menu-content" - className={cn( - "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", - className, - )} - {...props} - /> - </MenuPrimitive.Positioner> - </MenuPrimitive.Portal> - ); -} - -function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) { - return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />; -} - -function DropdownMenuLabel({ - className, - inset, - ...props -}: MenuPrimitive.GroupLabel.Props & { - inset?: boolean; -}) { - return ( - <MenuPrimitive.GroupLabel - data-slot="dropdown-menu-label" - data-inset={inset} - className={cn( - "text-muted-foreground px-2 py-2 text-xs data-inset:pl-7", - className, - )} - {...props} - /> - ); -} - -function DropdownMenuItem({ - className, - inset, - variant = "default", - ...props -}: MenuPrimitive.Item.Props & { - inset?: boolean; - variant?: "default" | "destructive"; -}) { - return ( - <MenuPrimitive.Item - data-slot="dropdown-menu-item" - data-inset={inset} - data-variant={variant} - className={cn( - "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", - className, - )} - {...props} - /> - ); -} - -function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) { - return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />; -} - -function DropdownMenuSubTrigger({ - className, - inset, - children, - ...props -}: MenuPrimitive.SubmenuTrigger.Props & { - inset?: boolean; -}) { - return ( - <MenuPrimitive.SubmenuTrigger - data-slot="dropdown-menu-sub-trigger" - data-inset={inset} - className={cn( - "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0", - className, - )} - {...props} - > - {children} - <ChevronRightIcon className="ml-auto" /> - </MenuPrimitive.SubmenuTrigger> - ); -} - -function DropdownMenuSubContent({ - align = "start", - alignOffset = -3, - side = "right", - sideOffset = 0, - className, - ...props -}: React.ComponentProps<typeof DropdownMenuContent>) { - return ( - <DropdownMenuContent - data-slot="dropdown-menu-sub-content" - className={cn( - "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-24 rounded-none shadow-lg ring-1 duration-100 w-auto", - className, - )} - align={align} - alignOffset={alignOffset} - side={side} - sideOffset={sideOffset} - {...props} - /> - ); -} - -function DropdownMenuCheckboxItem({ - className, - children, - checked, - inset, - ...props -}: MenuPrimitive.CheckboxItem.Props & { - inset?: boolean; -}) { - return ( - <MenuPrimitive.CheckboxItem - data-slot="dropdown-menu-checkbox-item" - data-inset={inset} - className={cn( - "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", - className, - )} - checked={checked} - {...props} - > - <span - className="absolute right-2 flex items-center justify-center pointer-events-none" - data-slot="dropdown-menu-checkbox-item-indicator" - > - <MenuPrimitive.CheckboxItemIndicator> - <CheckIcon /> - </MenuPrimitive.CheckboxItemIndicator> - </span> - {children} - </MenuPrimitive.CheckboxItem> - ); -} - -function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) { - return ( - <MenuPrimitive.RadioGroup - data-slot="dropdown-menu-radio-group" - {...props} - /> - ); -} - -function DropdownMenuRadioItem({ - className, - children, - inset, - ...props -}: MenuPrimitive.RadioItem.Props & { - inset?: boolean; -}) { - return ( - <MenuPrimitive.RadioItem - data-slot="dropdown-menu-radio-item" - data-inset={inset} - className={cn( - "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", - className, - )} - {...props} - > - <span - className="absolute right-2 flex items-center justify-center pointer-events-none" - data-slot="dropdown-menu-radio-item-indicator" - > - <MenuPrimitive.RadioItemIndicator> - <CheckIcon /> - </MenuPrimitive.RadioItemIndicator> - </span> - {children} - </MenuPrimitive.RadioItem> - ); -} - -function DropdownMenuSeparator({ - className, - ...props -}: MenuPrimitive.Separator.Props) { - return ( - <MenuPrimitive.Separator - data-slot="dropdown-menu-separator" - className={cn("bg-border -mx-1 h-px", className)} - {...props} - /> - ); -} - -function DropdownMenuShortcut({ - className, - ...props -}: React.ComponentProps<"span">) { - return ( - <span - data-slot="dropdown-menu-shortcut" - className={cn( - "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", - className, - )} - {...props} - /> - ); -} - -export { - DropdownMenu, - DropdownMenuPortal, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuLabel, - DropdownMenuItem, - DropdownMenuCheckboxItem, - DropdownMenuRadioGroup, - DropdownMenuRadioItem, - DropdownMenuSeparator, - DropdownMenuShortcut, - DropdownMenuSub, - DropdownMenuSubTrigger, - DropdownMenuSubContent, -}; diff --git a/packages/ui-new/src/components/ui/field.tsx b/packages/ui-new/src/components/ui/field.tsx deleted file mode 100644 index ab9fb71..0000000 --- a/packages/ui-new/src/components/ui/field.tsx +++ /dev/null @@ -1,238 +0,0 @@ -import { cva, type VariantProps } from "class-variance-authority"; -import { useMemo } from "react"; -import { Label } from "@/components/ui/label"; -import { Separator } from "@/components/ui/separator"; -import { cn } from "@/lib/utils"; - -function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { - return ( - <fieldset - data-slot="field-set" - className={cn( - "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", - className, - )} - {...props} - /> - ); -} - -function FieldLegend({ - className, - variant = "legend", - ...props -}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) { - return ( - <legend - data-slot="field-legend" - data-variant={variant} - className={cn( - "mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm", - className, - )} - {...props} - /> - ); -} - -function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="field-group" - className={cn( - "gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col", - className, - )} - {...props} - /> - ); -} - -const fieldVariants = cva( - "data-[invalid=true]:text-destructive gap-2 group/field flex w-full", - { - variants: { - orientation: { - vertical: "flex-col *:w-full [&>.sr-only]:w-auto", - horizontal: - "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", - responsive: - "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", - }, - }, - defaultVariants: { - orientation: "vertical", - }, - }, -); - -function Field({ - className, - orientation = "vertical", - ...props -}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) { - return ( - <div - data-slot="field" - data-orientation={orientation} - className={cn(fieldVariants({ orientation }), className)} - {...props} - /> - ); -} - -function FieldContent({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="field-content" - className={cn( - "gap-0.5 group/field-content flex flex-1 flex-col leading-snug", - className, - )} - {...props} - /> - ); -} - -function FieldLabel({ - className, - ...props -}: React.ComponentProps<typeof Label>) { - return ( - <Label - data-slot="field-label" - className={cn( - "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug", - "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", - className, - )} - {...props} - /> - ); -} - -function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { - return ( - <div - data-slot="field-label" - className={cn( - "gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug", - className, - )} - {...props} - /> - ); -} - -function FieldDescription({ className, ...props }: React.ComponentProps<"p">) { - return ( - <p - data-slot="field-description" - className={cn( - "text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance", - "last:mt-0 nth-last-2:-mt-1", - "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", - className, - )} - {...props} - /> - ); -} - -function FieldSeparator({ - children, - className, - ...props -}: React.ComponentProps<"div"> & { - children?: React.ReactNode; -}) { - return ( - <div - data-slot="field-separator" - data-content={!!children} - className={cn( - "-my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2 relative", - className, - )} - {...props} - > - <Separator className="absolute inset-0 top-1/2" /> - {children && ( - <span - className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit" - data-slot="field-separator-content" - > - {children} - </span> - )} - </div> - ); -} - -function FieldError({ - className, - children, - errors, - ...props -}: React.ComponentProps<"div"> & { - errors?: Array<{ message?: string } | undefined>; -}) { - const content = useMemo(() => { - if (children) { - return children; - } - - if (!errors?.length) { - return null; - } - - const uniqueErrors = [ - ...new Map(errors.map((error) => [error?.message, error])).values(), - ]; - - if (uniqueErrors?.length === 1) { - return uniqueErrors[0]?.message; - } - - return ( - <ul className="ml-4 flex list-disc flex-col gap-1"> - {uniqueErrors.map( - (error, index) => - error?.message && ( - <li key={`${error.message.slice(6)}-${index}`}> - {error.message} - </li> - ), - )} - </ul> - ); - }, [children, errors]); - - if (!content) { - return null; - } - - return ( - <div - role="alert" - data-slot="field-error" - className={cn("text-destructive text-xs font-normal", className)} - {...props} - > - {content} - </div> - ); -} - -export { - Field, - FieldLabel, - FieldDescription, - FieldError, - FieldGroup, - FieldLegend, - FieldSeparator, - FieldSet, - FieldContent, - FieldTitle, -}; diff --git a/packages/ui-new/src/components/ui/input.tsx b/packages/ui-new/src/components/ui/input.tsx deleted file mode 100644 index bb0390a..0000000 --- a/packages/ui-new/src/components/ui/input.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Input as InputPrimitive } from "@base-ui/react/input"; -import type * as React from "react"; - -import { cn } from "@/lib/utils"; - -function Input({ className, type, ...props }: React.ComponentProps<"input">) { - return ( - <InputPrimitive - type={type} - data-slot="input" - className={cn( - "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-none border bg-transparent px-2.5 py-1 text-xs transition-colors file:h-6 file:text-xs file:font-medium focus-visible:ring-1 aria-invalid:ring-1 md:text-xs file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", - className, - )} - {...props} - /> - ); -} - -export { Input }; diff --git a/packages/ui-new/src/components/ui/label.tsx b/packages/ui-new/src/components/ui/label.tsx deleted file mode 100644 index 9a998c7..0000000 --- a/packages/ui-new/src/components/ui/label.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type * as React from "react"; - -import { cn } from "@/lib/utils"; - -function Label({ className, ...props }: React.ComponentProps<"label">) { - return ( - // biome-ignore lint/a11y/noLabelWithoutControl: shadcn component - <label - data-slot="label" - className={cn( - "gap-2 text-xs leading-none group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed", - className, - )} - {...props} - /> - ); -} - -export { Label }; diff --git a/packages/ui-new/src/components/ui/scroll-area.tsx b/packages/ui-new/src/components/ui/scroll-area.tsx deleted file mode 100644 index 4a68eb2..0000000 --- a/packages/ui-new/src/components/ui/scroll-area.tsx +++ /dev/null @@ -1,53 +0,0 @@ -"use client"; - -import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"; -import { cn } from "@/lib/utils"; - -function ScrollArea({ - className, - children, - ...props -}: ScrollAreaPrimitive.Root.Props) { - return ( - <ScrollAreaPrimitive.Root - data-slot="scroll-area" - className={cn("relative", className)} - {...props} - > - <ScrollAreaPrimitive.Viewport - data-slot="scroll-area-viewport" - className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1" - > - {children} - </ScrollAreaPrimitive.Viewport> - <ScrollBar /> - <ScrollAreaPrimitive.Corner /> - </ScrollAreaPrimitive.Root> - ); -} - -function ScrollBar({ - className, - orientation = "vertical", - ...props -}: ScrollAreaPrimitive.Scrollbar.Props) { - return ( - <ScrollAreaPrimitive.Scrollbar - data-slot="scroll-area-scrollbar" - data-orientation={orientation} - orientation={orientation} - className={cn( - "data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none", - className, - )} - {...props} - > - <ScrollAreaPrimitive.Thumb - data-slot="scroll-area-thumb" - className="rounded-none bg-border relative flex-1" - /> - </ScrollAreaPrimitive.Scrollbar> - ); -} - -export { ScrollArea, ScrollBar }; diff --git a/packages/ui-new/src/components/ui/select.tsx b/packages/ui-new/src/components/ui/select.tsx deleted file mode 100644 index 210adba..0000000 --- a/packages/ui-new/src/components/ui/select.tsx +++ /dev/null @@ -1,199 +0,0 @@ -import { Select as SelectPrimitive } from "@base-ui/react/select"; -import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"; -import type * as React from "react"; -import { cn } from "@/lib/utils"; - -const Select = SelectPrimitive.Root; - -function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) { - return ( - <SelectPrimitive.Group - data-slot="select-group" - className={cn("scroll-my-1", className)} - {...props} - /> - ); -} - -function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) { - return ( - <SelectPrimitive.Value - data-slot="select-value" - className={cn("flex flex-1 text-left", className)} - {...props} - /> - ); -} - -function SelectTrigger({ - className, - size = "default", - children, - ...props -}: SelectPrimitive.Trigger.Props & { - size?: "sm" | "default"; -}) { - return ( - <SelectPrimitive.Trigger - data-slot="select-trigger" - data-size={size} - className={cn( - "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0", - className, - )} - {...props} - > - {children} - <SelectPrimitive.Icon - render={ - <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" /> - } - /> - </SelectPrimitive.Trigger> - ); -} - -function SelectContent({ - className, - children, - side = "bottom", - sideOffset = 4, - align = "center", - alignOffset = 0, - alignItemWithTrigger = true, - ...props -}: SelectPrimitive.Popup.Props & - Pick< - SelectPrimitive.Positioner.Props, - "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger" - >) { - return ( - <SelectPrimitive.Portal> - <SelectPrimitive.Positioner - side={side} - sideOffset={sideOffset} - align={align} - alignOffset={alignOffset} - alignItemWithTrigger={alignItemWithTrigger} - className="isolate z-50" - > - <SelectPrimitive.Popup - data-slot="select-content" - data-align-trigger={alignItemWithTrigger} - className={cn( - "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", - className, - )} - {...props} - > - <SelectScrollUpButton /> - <SelectPrimitive.List>{children}</SelectPrimitive.List> - <SelectScrollDownButton /> - </SelectPrimitive.Popup> - </SelectPrimitive.Positioner> - </SelectPrimitive.Portal> - ); -} - -function SelectLabel({ - className, - ...props -}: SelectPrimitive.GroupLabel.Props) { - return ( - <SelectPrimitive.GroupLabel - data-slot="select-label" - className={cn("text-muted-foreground px-2 py-2 text-xs", className)} - {...props} - /> - ); -} - -function SelectItem({ - className, - children, - ...props -}: SelectPrimitive.Item.Props) { - return ( - <SelectPrimitive.Item - data-slot="select-item" - className={cn( - "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", - className, - )} - {...props} - > - <SelectPrimitive.ItemText className="flex flex-1 gap-2 shrink-0 whitespace-nowrap"> - {children} - </SelectPrimitive.ItemText> - <SelectPrimitive.ItemIndicator - render={ - <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" /> - } - > - <CheckIcon className="pointer-events-none" /> - </SelectPrimitive.ItemIndicator> - </SelectPrimitive.Item> - ); -} - -function SelectSeparator({ - className, - ...props -}: SelectPrimitive.Separator.Props) { - return ( - <SelectPrimitive.Separator - data-slot="select-separator" - className={cn("bg-border -mx-1 h-px pointer-events-none", className)} - {...props} - /> - ); -} - -function SelectScrollUpButton({ - className, - ...props -}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) { - return ( - <SelectPrimitive.ScrollUpArrow - data-slot="select-scroll-up-button" - className={cn( - "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", - className, - )} - {...props} - > - <ChevronUpIcon /> - </SelectPrimitive.ScrollUpArrow> - ); -} - -function SelectScrollDownButton({ - className, - ...props -}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) { - return ( - <SelectPrimitive.ScrollDownArrow - data-slot="select-scroll-down-button" - className={cn( - "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", - className, - )} - {...props} - > - <ChevronDownIcon /> - </SelectPrimitive.ScrollDownArrow> - ); -} - -export { - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectLabel, - SelectScrollDownButton, - SelectScrollUpButton, - SelectSeparator, - SelectTrigger, - SelectValue, -}; diff --git a/packages/ui-new/src/components/ui/separator.tsx b/packages/ui-new/src/components/ui/separator.tsx deleted file mode 100644 index e91a862..0000000 --- a/packages/ui-new/src/components/ui/separator.tsx +++ /dev/null @@ -1,25 +0,0 @@ -"use client"; - -import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"; - -import { cn } from "@/lib/utils"; - -function Separator({ - className, - orientation = "horizontal", - ...props -}: SeparatorPrimitive.Props) { - return ( - <SeparatorPrimitive - data-slot="separator" - orientation={orientation} - className={cn( - "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", - className, - )} - {...props} - /> - ); -} - -export { Separator }; diff --git a/packages/ui-new/src/components/ui/sonner.tsx b/packages/ui-new/src/components/ui/sonner.tsx deleted file mode 100644 index d6e293d..0000000 --- a/packages/ui-new/src/components/ui/sonner.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { - CircleCheckIcon, - InfoIcon, - Loader2Icon, - OctagonXIcon, - TriangleAlertIcon, -} from "lucide-react"; -import { useTheme } from "next-themes"; -import { Toaster as Sonner, type ToasterProps } from "sonner"; - -const Toaster = ({ ...props }: ToasterProps) => { - const { theme = "system" } = useTheme(); - - return ( - <Sonner - theme={theme as ToasterProps["theme"]} - className="toaster group" - icons={{ - success: <CircleCheckIcon className="size-4" />, - info: <InfoIcon className="size-4" />, - warning: <TriangleAlertIcon className="size-4" />, - error: <OctagonXIcon className="size-4" />, - loading: <Loader2Icon className="size-4 animate-spin" />, - }} - style={ - { - "--normal-bg": "var(--popover)", - "--normal-text": "var(--popover-foreground)", - "--normal-border": "var(--border)", - "--border-radius": "var(--radius)", - } as React.CSSProperties - } - toastOptions={{ - classNames: { - toast: "cn-toast", - }, - }} - {...props} - /> - ); -}; - -export { Toaster }; diff --git a/packages/ui-new/src/components/ui/spinner.tsx b/packages/ui-new/src/components/ui/spinner.tsx deleted file mode 100644 index 91f6a63..0000000 --- a/packages/ui-new/src/components/ui/spinner.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { cn } from "@/lib/utils" -import { Loader2Icon } from "lucide-react" - -function Spinner({ className, ...props }: React.ComponentProps<"svg">) { - return ( - <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} /> - ) -} - -export { Spinner } diff --git a/packages/ui-new/src/components/ui/switch.tsx b/packages/ui-new/src/components/ui/switch.tsx deleted file mode 100644 index fef14e3..0000000 --- a/packages/ui-new/src/components/ui/switch.tsx +++ /dev/null @@ -1,32 +0,0 @@ -"use client"; - -import { Switch as SwitchPrimitive } from "@base-ui/react/switch"; - -import { cn } from "@/lib/utils"; - -function Switch({ - className, - size = "default", - ...props -}: SwitchPrimitive.Root.Props & { - size?: "sm" | "default"; -}) { - return ( - <SwitchPrimitive.Root - data-slot="switch" - data-size={size} - className={cn( - "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", - className, - )} - {...props} - > - <SwitchPrimitive.Thumb - data-slot="switch-thumb" - className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform" - /> - </SwitchPrimitive.Root> - ); -} - -export { Switch }; diff --git a/packages/ui-new/src/components/ui/tabs.tsx b/packages/ui-new/src/components/ui/tabs.tsx deleted file mode 100644 index c66893f..0000000 --- a/packages/ui-new/src/components/ui/tabs.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"; -import { cva, type VariantProps } from "class-variance-authority"; - -import { cn } from "@/lib/utils"; - -function Tabs({ - className, - orientation = "horizontal", - ...props -}: TabsPrimitive.Root.Props) { - return ( - <TabsPrimitive.Root - data-slot="tabs" - data-orientation={orientation} - className={cn( - "gap-2 group/tabs flex data-horizontal:flex-col", - className, - )} - {...props} - /> - ); -} - -const tabsListVariants = cva( - "rounded-none p-0.75 group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", - { - variants: { - variant: { - default: "bg-muted", - line: "gap-1 bg-transparent", - }, - }, - defaultVariants: { - variant: "default", - }, - }, -); - -function TabsList({ - className, - variant = "default", - ...props -}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) { - return ( - <TabsPrimitive.List - data-slot="tabs-list" - data-variant={variant} - className={cn(tabsListVariants({ variant }), className)} - {...props} - /> - ); -} - -function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) { - return ( - <TabsPrimitive.Tab - data-slot="tabs-trigger" - className={cn( - "gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", - "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", - "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground", - "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", - className, - )} - {...props} - /> - ); -} - -function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) { - return ( - <TabsPrimitive.Panel - data-slot="tabs-content" - className={cn("text-xs/relaxed flex-1 outline-none", className)} - {...props} - /> - ); -} - -export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }; diff --git a/packages/ui-new/src/components/ui/textarea.tsx b/packages/ui-new/src/components/ui/textarea.tsx deleted file mode 100644 index 3c3e5d0..0000000 --- a/packages/ui-new/src/components/ui/textarea.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type * as React from "react"; - -import { cn } from "@/lib/utils"; - -function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { - return ( - <textarea - data-slot="textarea" - className={cn( - "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-none border bg-transparent px-2.5 py-2 text-xs transition-colors focus-visible:ring-1 aria-invalid:ring-1 md:text-xs placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50", - className, - )} - {...props} - /> - ); -} - -export { Textarea }; |