Add new component and remove dark classes.

.changeset/tricky-turkeys-smell.md

@@ -0,0 +1,5 @@
+---
+"@itsrakesh/ui": minor
+---
+
+Added new component and removed dark classes.

packages/ui/package.json

@@ -104,6 +104,7 @@
  "@radix-ui/react-slot": "^1.0.2",
  "@radix-ui/react-switch": "^1.0.3",
  "@radix-ui/react-toast": "^1.1.4",
+ "@radix-ui/react-tooltip": "^1.0.7",
  "class-variance-authority": "^0.7.0",
  "react-hook-form": "^7.46.1",
  "tailwindcss-animate": "^1.0.7"

packages/ui/src/components/Alert/Alert.tsx

@@ -3,12 +3,11 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@itsrakesh/utils";
 
 const alertVariants = cva(
- "relative w-full rounded-lg border dark:border-border-dark px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+ "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
  {
  variants: {
  variant: {
- default:
- "bg-background dark:bg-background-dark text-foreground dark:text-foreground-dark",
+ default: "bg-background text-foreground",
  destructive:
  "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
  },

packages/ui/src/components/AlertDialog/AlertDialog.tsx

@@ -24,7 +24,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
  className={cn(
- "fixed inset-0 z-50 bg-background/80 dark:bg-background-dark/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+ "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
  className
  )}
  {...props}
@@ -42,7 +42,7 @@ const AlertDialogContent = React.forwardRef<
  <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 dark:text-foreground-dark border dark:border-border-dark bg-background dark:bg-background-dark 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 md:w-full",
+ "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background 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 md:w-full",
  className
  )}
  {...props}
@@ -97,7 +97,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
  ref={ref}
- className={cn("text-sm text-muted-foreground dark:text-muted", className)}
+ className={cn("text-sm text-muted-foreground", className)}
  {...props}
  />
 ));

packages/ui/src/components/Badge/Badge.tsx

@@ -18,7 +18,7 @@ const badgeVariants = cva(
  info: "border-transparent bg-info text-info-foreground shadow hover:opacity-80",
  destructive:
  "border-transparent bg-destructive text-destructive-foreground shadow hover:opacity-80",
- outline: "text-foreground dark:text-foreground-dark",
+ outline: "text-foreground",
  },
  },
  defaultVariants: {

packages/ui/src/components/Button/Button.tsx

@@ -16,7 +16,7 @@ const buttonVariants = cva(
  destructive:
  "bg-destructive text-destructive-foreground shadow-sm hover:opacity-80",
  outline:
- "border border-input bg-transparent shadow-sm dark:text-foreground-dark hover:bg-accent hover:text-accent-foreground dark:hover:text-foreground",
+ "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
  secondary:
  "bg-secondary text-secondary-foreground shadow-sm hover:opacity-80",
  ghost: "hover:bg-accent hover:text-accent-foreground",

packages/ui/src/components/Dialog/Dialog.tsx

@@ -24,7 +24,7 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
  ref={ref}
  className={cn(
- "fixed inset-0 z-50 bg-background/80 dark:bg-background-dark/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+ "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
  className
  )}
  {...props}
@@ -41,13 +41,13 @@ const DialogContent = React.forwardRef<
  <DialogPrimitive.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 dark:text-foreground-dark border dark:border-border-dark bg-background dark:bg-background-dark 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 md:w-full",
+ "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background 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 md:w-full",
  className
  )}
  {...props}
  >
  {children}
- <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background dark:ring-offset-background-dark transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+ <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
  <Cross2Icon className="h-4 w-4" />
  <span className="sr-only">Close</span>
  </DialogPrimitive.Close>
@@ -105,7 +105,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
  ref={ref}
- className={cn("text-sm text-muted-foreground dark:text-muted", className)}
+ className={cn("text-sm text-muted-foreground", className)}
  {...props}
  />
 ));

packages/ui/src/components/Form/Form.tsx

@@ -137,10 +137,7 @@ const FormDescription = React.forwardRef<
  <p
  ref={ref}
  id={formDescriptionId}
- className={cn(
- "text-[0.8rem] text-muted-foreground dark:text-muted",
- className
- )}
+ className={cn("text-[0.8rem] text-muted-foreground", className)}
  {...props}
  />
  );

packages/ui/src/components/Input/Input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
  <input
  type={type}
  className={cn(
- "flex h-9 w-full rounded-md dark:text-foreground-dark border border-input dark:border-input-dark bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground dark:placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+ "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
  className
  )}
  ref={ref}

packages/ui/src/components/Label/Label.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@itsrakesh/utils";
 
 const labelVariants = cva(
- "text-sm dark:text-foreground-dark font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 
 const Label = React.forwardRef<

packages/ui/src/components/Menubar/Menubar.tsx

@@ -26,7 +26,7 @@ const Menubar = React.forwardRef<
  <MenubarPrimitive.Root
  ref={ref}
  className={cn(
- "flex h-9 items-center space-x-1 rounded-md border dark:border-border-dark dark:text-foreground-dark bg-background dark:bg-background-dark p-1 shadow-sm",
+ "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
  className
  )}
  {...props}
@@ -41,7 +41,7 @@ const MenubarTrigger = React.forwardRef<
  <MenubarPrimitive.Trigger
  ref={ref}
  className={cn(
- "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent dark:focus:bg-accent-foreground focus:text-accent-foreground dark:focus:text-accent data-[state=open]:bg-accent dark:data-[state=open]:bg-accent-foreground data-[state=open]:text-accent-foreground dark:data-[state=open]:text-accent",
+ "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
  className
  )}
  {...props}
@@ -58,7 +58,7 @@ const MenubarSubTrigger = React.forwardRef<
  <MenubarPrimitive.SubTrigger
  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 dark:focus:bg-accent-foreground focus:text-accent-foreground dark:focus:text-accent data-[state=open]:bg-accent dark:data-[state=open]:bg-accent-foreground data-[state=open]:text-accent-foreground dark:data-[state=open]:text-accent",
+ "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-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
  inset && "pl-8",
  className
  )}
@@ -77,7 +77,7 @@ const MenubarSubContent = React.forwardRef<
  <MenubarPrimitive.SubContent
  ref={ref}
  className={cn(
- "z-50 min-w-[8rem] overflow-hidden rounded-md border dark:border-border-dark bg-popover dark:bg-background-dark p-1 text-popover-foreground dark:text-popover shadow-lg 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-[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",
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[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",
  className
  )}
  {...props}
@@ -100,7 +100,7 @@ const MenubarContent = React.forwardRef<
  alignOffset={alignOffset}
  sideOffset={sideOffset}
  className={cn(
- "z-50 min-w-[12rem] overflow-hidden rounded-md border dark:border-border-dark bg-popover dark:bg-background-dark p-1 text-popover-foreground dark:text-popover shadow-md data-[state=open]:animate-in 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-[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",
+ "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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-[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",
  className
  )}
  {...props}
@@ -119,7 +119,7 @@ const MenubarItem = React.forwardRef<
  <MenubarPrimitive.Item
  ref={ref}
  className={cn(
- "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none dark:bg-background-dark focus:bg-accent dark:focus:bg-accent-foreground focus:text-accent-foreground dark:focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+ "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",
  inset && "pl-8",
  className
  )}
@@ -135,7 +135,7 @@ const MenubarCheckboxItem = React.forwardRef<
  <MenubarPrimitive.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 dark:focus:bg-accent-foreground focus:text-accent-foreground dark:focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+ "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",
  className
  )}
  checked={checked}
@@ -158,7 +158,7 @@ const MenubarRadioItem = React.forwardRef<
  <MenubarPrimitive.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 dark:focus:bg-accent-foreground focus:text-accent-foreground dark:focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+ "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",
  className
  )}
  {...props}
@@ -197,10 +197,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
  ref={ref}
- className={cn(
- "-mx-1 my-1 h-px bg-muted dark:bg-muted-foreground",
- className
- )}
+ className={cn("-mx-1 my-1 h-px bg-muted", className)}
  {...props}
  />
 ));

packages/ui/src/components/ScrollArea/ScrollArea.tsx

@@ -10,10 +10,7 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
  ref={ref}
- className={cn(
- "relative overflow-hidden dark:text-foreground-dark",
- className
- )}
+ className={cn("relative overflow-hidden", className)}
  {...props}
  >
  <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
@@ -42,7 +39,7 @@ const ScrollBar = React.forwardRef<
  )}
  {...props}
  >
- <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border dark:bg-border-dark" />
+ <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

packages/ui/src/components/Select/Select.tsx

@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
  ref={ref}
  className={cn(
- "flex h-9 w-full items-center justify-between rounded-md dark:text-foreground-dark border border-input dark:border-input-dark bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+ "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
  className
  )}
  {...props}
@@ -39,7 +39,7 @@ const SelectContent = React.forwardRef<
  <SelectPrimitive.Content
  ref={ref}
  className={cn(
- "relative z-50 min-w-[8rem] overflow-hidden rounded-md border dark:border-border-dark bg-popover dark:bg-background-dark text-popover-foreground dark:text-popover shadow-md 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-[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",
+ "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[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",
  position === "popper" &&
  "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
  className
@@ -80,7 +80,7 @@ const SelectItem = React.forwardRef<
  <SelectPrimitive.Item
  ref={ref}
  className={cn(
- "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent dark:focus:bg-accent-foreground focus:text-accent-foreground dark:focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+ "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
  className
  )}
  {...props}

packages/ui/src/components/Separator/Separator.tsx

@@ -17,7 +17,7 @@ const Separator = React.forwardRef<
  decorative={decorative}
  orientation={orientation}
  className={cn(
- "shrink-0 bg-border dark:bg-border-dark",
+ "shrink-0 bg-border",
  orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
  className
  )}