few changes

2025-06-29 13:05:12 +05:30
parent e82685c7df
commit 99220fb9a9
20 changed files with 1743 additions and 197 deletions
--- a/packages/ui/Archive.zip
+++ b/packages/ui/Archive.zip
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -1,30 +1,33 @@
-import type * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";

-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";

 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-4 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transform active:scale-95",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring hover:scale-105 active:scale-95 transform-gpu",
  {
    variants: {
      variant: {
        default:
-          "bg-primary text-primary-foreground shadow-lg shadow-primary/25 hover:bg-primary/90 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 border border-primary/20",
+          "bg-primary text-primary-foreground shadow-lg shadow-primary/25 hover:bg-primary/85 hover:shadow-xl hover:shadow-primary/35",
        destructive:
-          "bg-destructive text-destructive-foreground shadow-lg shadow-destructive/25 hover:bg-destructive/90 hover:shadow-xl hover:shadow-destructive/30 hover:-translate-y-0.5 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 border border-destructive/20",
+          "bg-destructive text-destructive-foreground shadow-lg shadow-destructive/25 hover:bg-destructive/85 hover:shadow-xl hover:shadow-destructive/35",
        outline:
-          "bg-background border-2 border-border text-foreground shadow-md hover:bg-accent/10 hover:border-accent/50 hover:text-accent-foreground hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 ease-out backdrop-blur-sm",
+          "border-2 border-primary/20 bg-background hover:bg-primary/5 hover:text-primary hover:border-primary/40 shadow-md hover:shadow-lg hover:shadow-primary/15",
        secondary:
-          "bg-secondary text-secondary-foreground shadow-md shadow-secondary/20 hover:bg-secondary/80 hover:shadow-lg hover:-translate-y-0.5 border border-secondary/30",
-        ghost: "hover:bg-accent/10 hover:text-accent-foreground rounded-lg transition-all duration-200 hover:shadow-md",
-        link: "text-primary underline-offset-4 hover:underline hover:text-primary/80 transition-colors duration-200",
+          "bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80 hover:shadow-lg",
+        ghost:
+          "hover:bg-primary/10 hover:text-primary hover:shadow-md hover:shadow-primary/10",
+        link: "text-primary underline-offset-4 hover:underline hover:text-accent p-0 h-auto font-normal hover:scale-100 active:scale-100",
+        accent:
+          "bg-accent text-accent-foreground shadow-lg shadow-accent/25 hover:bg-accent/85 hover:shadow-xl hover:shadow-accent/35",
      },
      size: {
-        default: "h-11 px-6 py-3 has-[>svg]:px-5",
-        sm: "h-9 rounded-lg gap-1.5 px-4 has-[>svg]:px-3 text-xs font-medium",
-        lg: "h-13 rounded-xl px-8 has-[>svg]:px-6 text-base",
-        icon: "size-11 rounded-xl",
+        default: "h-10 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-12 rounded-lg px-6 text-base",
+        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
@@ -32,21 +35,26 @@ const buttonVariants = cva(
      size: "default",
    },
  },
-)
+);

-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }

-export { Button, buttonVariants }
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/packages/ui/src/components/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card"
      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-2xl border border-border/50 py-8 shadow-xl shadow-black/5 backdrop-blur-sm hover:shadow-2xl hover:shadow-black/10 transition-all duration-300 hover:-translate-y-1 bg-gradient-to-br from-card to-card/80",
+        "bg-card/90 text-card-foreground flex flex-col gap-6 rounded-2xl border border-border/50 py-8 shadow-xl shadow-black/5 backdrop-blur-sm hover:shadow-2xl hover:shadow-black/10 transition-all duration-300 hover:-translate-y-1",
        className,
      )}
      {...props}
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
      type={type}
      data-slot="input"
      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-12 w-full min-w-0 rounded-xl border-2 bg-transparent px-4 py-3 text-base shadow-md shadow-black/5 transition-all duration-200 outline-none file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm backdrop-blur-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-12 w-full min-w-0 rounded-md border-2 bg-transparent px-4 py-3 text-base shadow-md shadow-black/5 transition-all duration-200 outline-none file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm backdrop-blur-sm",
        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-4 focus-visible:shadow-lg focus-visible:shadow-primary/10",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        "hover:border-border/80 hover:shadow-lg",
--- a/packages/ui/src/components/progress.tsx
+++ b/packages/ui/src/components/progress.tsx
@@ -17,7 +17,7 @@ function Progress({ className, value, ...props }: React.ComponentProps<typeof Pr
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
-        className="bg-gradient-to-r from-primary to-accent h-full w-full flex-1 transition-all duration-500 ease-out rounded-full shadow-sm"
+        className="bg-gradient-to-r from-accent to-primary h-full w-full flex-1 transition-all duration-500 ease-out rounded-full shadow-sm"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
--- a/packages/ui/src/components/separator.tsx
+++ b/packages/ui/src/components/separator.tsx
@@ -17,7 +17,7 @@ function Separator({
      decorative={decorative}
      orientation={orientation}
      className={cn(
-        "bg-gradient-to-r from-transparent via-border to-transparent shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px data-[orientation=vertical]:bg-gradient-to-b",
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px data-[orientation=vertical]:bg-gradient-to-b",
        className,
      )}
      {...props}
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
    <textarea
      data-slot="textarea"
      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-primary focus-visible:ring-primary/20 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-20 w-full rounded-xl border-2 bg-transparent px-4 py-3 text-base shadow-md shadow-black/5 transition-all duration-200 outline-none focus-visible:ring-4 focus-visible:shadow-lg focus-visible:shadow-primary/10 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm backdrop-blur-sm hover:border-border/80 hover:shadow-lg resize-none",
+        "border-input placeholder:text-muted-foreground focus-visible:border-primary focus-visible:ring-primary/20 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-20 w-full rounded-md border-2 bg-transparent px-4 py-3 text-base shadow-md shadow-black/5 transition-all duration-200 outline-none focus-visible:ring-4 focus-visible:shadow-lg focus-visible:shadow-primary/10 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm backdrop-blur-sm hover:border-border/80 hover:shadow-lg resize-none",
        className,
      )}
      {...props}
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -13,74 +13,74 @@
@custom-variant dark (&:is(.dark *));

 :root {
-  --background: oklch(0.9889 0.004 286.33);
-  --foreground: oklch(0.2442 0.006 0.59);
-  --card: oklch(0.97 0.004 286.33);
-  --card-foreground: oklch(0.2442 0.006 0.59);
+  --background: oklch(0.98 0.003 240);
+  --foreground: oklch(0.12 0.008 240);
+  --card: oklch(0.96 0.004 240);
+  --card-foreground: oklch(0.12 0.008 240);
  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.2442 0.006 0.59);
-  --primary: oklch(0.5044 0.184 22.51);
-  --primary-foreground: oklch(0.9889 0.004 286.33);
-  --secondary: oklch(0.4605 0.005 271.31);
-  --secondary-foreground: oklch(0.9889 0.004 286.33);
-  --muted: oklch(0.92 0.003 286.33);
-  --muted-foreground: oklch(0.44 0.004 286.33);
-  --accent: oklch(0.6034 0.234 27.23);
-  --accent-foreground: oklch(0.9889 0.004 286.33);
-  --destructive: oklch(0.55 0.18 27.23);
-  --destructive-foreground: oklch(0.9889 0.004 286.33);
-  --border: oklch(0.88 0.003 286.33);
-  --input: oklch(0.97 0.004 286.33);
-  --ring: oklch(0.6034 0.234 27.23);
-  --chart-1: oklch(0.5044 0.184 22.51);
-  --chart-2: oklch(0.6034 0.234 27.23);
-  --chart-3: oklch(0.4605 0.005 271.31);
-  --chart-4: oklch(0.7 0.15 120);
-  --chart-5: oklch(0.7 0.15 300);
+  --popover-foreground: oklch(0.12 0.008 240);
+  --primary: oklch(0.35 0.18 240);
+  --primary-foreground: oklch(0.98 0.003 240);
+  --secondary: oklch(0.88 0.008 240);
+  --secondary-foreground: oklch(0.12 0.008 240);
+  --muted: oklch(0.92 0.006 240);
+  --muted-foreground: oklch(0.4 0.01 240);
+  --accent: oklch(0.42 0.22 10);
+  --accent-foreground: oklch(0.98 0.003 240);
+  --destructive: oklch(0.45 0.25 15);
+  --destructive-foreground: oklch(0.98 0.003 240);
+  --border: oklch(0.86 0.008 240);
+  --input: oklch(0.94 0.006 240);
+  --ring: oklch(0.35 0.18 240);
+  --chart-1: oklch(0.35 0.18 240);
+  --chart-2: oklch(0.42 0.22 10);
+  --chart-3: oklch(0.38 0.16 260);
+  --chart-4: oklch(0.4 0.2 350);
+  --chart-5: oklch(0.36 0.15 220);
  --radius: 0.625rem;
-  --sidebar: oklch(0.97 0.004 286.33);
-  --sidebar-foreground: oklch(0.2442 0.006 0.59);
-  --sidebar-primary: oklch(0.5044 0.184 22.51);
-  --sidebar-primary-foreground: oklch(0.9889 0.004 286.33);
-  --sidebar-accent: oklch(0.6034 0.234 27.23);
-  --sidebar-accent-foreground: oklch(0.9889 0.004 286.33);
-  --sidebar-border: oklch(0.88 0.003 286.33);
-  --sidebar-ring: oklch(0.6034 0.234 27.23);
+  --sidebar: oklch(0.94 0.006 240);
+  --sidebar-foreground: oklch(0.12 0.008 240);
+  --sidebar-primary: oklch(0.35 0.18 240);
+  --sidebar-primary-foreground: oklch(0.98 0.003 240);
+  --sidebar-accent: oklch(0.42 0.22 10);
+  --sidebar-accent-foreground: oklch(0.98 0.003 240);
+  --sidebar-border: oklch(0.86 0.008 240);
+  --sidebar-ring: oklch(0.35 0.18 240);
 }

 .dark {
-  --background: oklch(0.18 0.01 286.33);
-  --foreground: oklch(0.9889 0.004 286.33);
-  --card: oklch(0.22 0.01 286.33);
-  --card-foreground: oklch(0.9889 0.004 286.33);
-  --popover: oklch(0.22 0.01 286.33);
-  --popover-foreground: oklch(0.9889 0.004 286.33);
-  --primary: oklch(0.7044 0.184 22.51);
-  --primary-foreground: oklch(0.18 0.01 286.33);
-  --secondary: oklch(0.36 0.005 271.31);
-  --secondary-foreground: oklch(0.9889 0.004 286.33);
-  --muted: oklch(0.25 0.01 286.33);
-  --muted-foreground: oklch(0.7 0.01 286.33);
-  --accent: oklch(0.8034 0.234 27.23);
-  --accent-foreground: oklch(0.18 0.01 286.33);
-  --destructive: oklch(0.65 0.18 27.23);
-  --destructive-foreground: oklch(0.18 0.01 286.33);
-  --border: oklch(0.25 0.01 286.33);
-  --input: oklch(0.22 0.01 286.33);
-  --ring: oklch(0.8034 0.234 27.23);
-  --chart-1: oklch(0.7044 0.184 22.51);
-  --chart-2: oklch(0.8034 0.234 27.23);
-  --chart-3: oklch(0.36 0.005 271.31);
-  --chart-4: oklch(0.7 0.15 120);
-  --chart-5: oklch(0.7 0.15 300);
-  --sidebar: oklch(0.22 0.01 286.33);
-  --sidebar-foreground: oklch(0.9889 0.004 286.33);
-  --sidebar-primary: oklch(0.7044 0.184 22.51);
-  --sidebar-primary-foreground: oklch(0.18 0.01 286.33);
-  --sidebar-accent: oklch(0.8034 0.234 27.23);
-  --sidebar-accent-foreground: oklch(0.18 0.01 286.33);
-  --sidebar-border: oklch(0.25 0.01 286.33);
-  --sidebar-ring: oklch(0.8034 0.234 27.23);
+  --background: oklch(0.06 0.008 240);
+  --foreground: oklch(0.94 0.004 240);
+  --card: oklch(0.1 0.01 240);
+  --card-foreground: oklch(0.94 0.004 240);
+  --popover: oklch(0.1 0.01 240);
+  --popover-foreground: oklch(0.94 0.004 240);
+  --primary: oklch(0.55 0.22 240);
+  --primary-foreground: oklch(0.06 0.008 240);
+  --secondary: oklch(0.16 0.01 240);
+  --secondary-foreground: oklch(0.94 0.004 240);
+  --muted: oklch(0.12 0.01 240);
+  --muted-foreground: oklch(0.6 0.01 240);
+  --accent: oklch(0.62 0.28 10);
+  --accent-foreground: oklch(0.06 0.008 240);
+  --destructive: oklch(0.65 0.3 15);
+  --destructive-foreground: oklch(0.06 0.008 240);
+  --border: oklch(0.18 0.01 240);
+  --input: oklch(0.14 0.01 240);
+  --ring: oklch(0.55 0.22 240);
+  --chart-1: oklch(0.55 0.22 240);
+  --chart-2: oklch(0.62 0.28 10);
+  --chart-3: oklch(0.58 0.2 260);
+  --chart-4: oklch(0.6 0.25 350);
+  --chart-5: oklch(0.56 0.18 220);
+  --sidebar: oklch(0.08 0.01 240);
+  --sidebar-foreground: oklch(0.94 0.004 240);
+  --sidebar-primary: oklch(0.55 0.22 240);
+  --sidebar-primary-foreground: oklch(0.06 0.008 240);
+  --sidebar-accent: oklch(0.62 0.28 10);
+  --sidebar-accent-foreground: oklch(0.06 0.008 240);
+  --sidebar-border: oklch(0.18 0.01 240);
+  --sidebar-ring: oklch(0.55 0.22 240);
 }

@theme inline {