Arnab-Afk/nextplacement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

few changes

Browse Source
This commit is contained in:
Om Lanke
2025-06-29 13:05:12 +05:30
parent e82685c7df
commit 99220fb9a9
20 changed files with 1743 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/ui/src/components/button.tsx
View File

@@ -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 };

2
packages/ui/src/components/card.tsx
View File

@@ -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}

2
packages/ui/src/components/input.tsx
View File

@@ -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",

2
packages/ui/src/components/progress.tsx
View File

@@ -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>

2
packages/ui/src/components/separator.tsx
View File

@@ -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}

2
packages/ui/src/components/textarea.tsx
View File

@@ -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}

126
packages/ui/src/styles/globals.css
View File

@@ -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 {