From d038c95d35eeab83c4dc38dc5baa9ced3d098405 Mon Sep 17 00:00:00 2001 From: gunshiz Date: Mon, 10 Aug 2026 16:26:52 +0700 Subject: [PATCH] feat(ui) : get a bit rounded ui --- Dockerfile | 8 +-- app/globals.css | 95 ++++++++++++++++----------------- app/layout.tsx | 10 ++-- app/page.tsx | 4 +- bun.lock | 2 +- components.json | 2 +- components/LinkCard.tsx | 4 +- components/ui/accordion.tsx | 11 ++-- components/ui/alert-dialog.tsx | 6 +-- components/ui/alert.tsx | 2 +- components/ui/badge.tsx | 4 +- components/ui/button.tsx | 20 +++---- components/ui/calendar.tsx | 2 +- components/ui/card.tsx | 13 +++-- components/ui/checkbox.tsx | 2 +- components/ui/context-menu.tsx | 16 +++--- components/ui/dialog.tsx | 9 ++-- components/ui/dropdown-menu.tsx | 16 +++--- components/ui/field.tsx | 2 +- components/ui/input-group.tsx | 30 +++++------ components/ui/input.tsx | 2 +- components/ui/kbd.tsx | 2 +- components/ui/pagination.tsx | 5 +- components/ui/popover.tsx | 4 +- components/ui/progress.tsx | 2 +- components/ui/scroll-area.tsx | 2 +- components/ui/select.tsx | 13 ++--- components/ui/sheet.tsx | 13 ++--- components/ui/sidebar.tsx | 33 ++++++------ components/ui/skeleton.tsx | 2 +- components/ui/spinner.tsx | 2 +- components/ui/switch.tsx | 2 +- components/ui/table.tsx | 4 +- components/ui/tabs.tsx | 4 +- components/ui/textarea.tsx | 2 +- components/ui/tooltip.tsx | 4 +- hooks/use-mobile.ts | 7 +-- lib/utils.ts | 10 ---- package.json | 2 +- 39 files changed, 174 insertions(+), 199 deletions(-) diff --git a/Dockerfile b/Dockerfile index 90b4fad..6dab2e0 100644 --- a/Dockerfile +++ b/Dockerfile @@ -5,9 +5,11 @@ FROM oven/bun:1.3.14-alpine AS deps WORKDIR /app # Copy only package files to leverage Docker layer caching COPY package.json bun.lock ./ -# Install dependencies -RUN --mount=type=cache,target=/root/.bun/install/cache \ - bun install --frozen-lockfile +# The Docker layer already caches dependencies until package.json or bun.lock +# changes. Avoid a persistent Bun cache mount here: stale package artifacts can +# survive dependency upgrades and produce a node_modules tree that disagrees +# with bun.lock. +RUN bun install --frozen-lockfile # Stage 2: Build the application FROM deps AS builder diff --git a/app/globals.css b/app/globals.css index 9309bbf..eeff821 100644 --- a/app/globals.css +++ b/app/globals.css @@ -8,9 +8,11 @@ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-inter), var(--font-anuphan); + --font-inter: var(--font-inter-family); + --font-anuphan: var(--font-anuphan-family); + --font-app: var(--font-inter-family), var(--font-anuphan-family); --font-mono: var(--font-geist-mono); - --font-heading: var(--font-sans); + --font-heading: var(--font-app); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); @@ -50,72 +52,72 @@ } :root { - --background: oklch(1 0 0); - --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); - --card-foreground: oklch(0.141 0.005 285.823); + --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); - --popover-foreground: oklch(0.141 0.005 285.823); - --primary: oklch(0.623 0.214 259.815); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.488 0.243 264.376); --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); - --muted: oklch(0.967 0.001 286.375); - --muted-foreground: oklch(0.552 0.016 285.938); - --accent: oklch(0.967 0.001 286.375); - --accent-foreground: oklch(0.21 0.006 285.885); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.92 0.004 286.32); - --input: oklch(0.92 0.004 286.32); - --ring: oklch(0.623 0.214 259.815); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --radius: 0; + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.828 0.111 230.318); + --chart-2: oklch(0.685 0.169 237.323); + --chart-3: oklch(0.588 0.158 241.966); + --chart-4: oklch(0.5 0.134 242.749); + --chart-5: oklch(0.443 0.11 240.79); + --radius: 0.625rem; --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.141 0.005 285.823); - --sidebar-primary: oklch(0.623 0.214 259.815); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.546 0.245 262.881); --sidebar-primary-foreground: oklch(0.97 0.014 254.604); - --sidebar-accent: oklch(0.967 0.001 286.375); - --sidebar-accent-foreground: oklch(0.21 0.006 285.885); - --sidebar-border: oklch(0.92 0.004 286.32); - --sidebar-ring: oklch(0.623 0.214 259.815); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); } .dark { - --background: oklch(0.141 0.005 285.823); + --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); - --card: oklch(0.21 0.006 285.885); + --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.21 0.006 285.885); + --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.546 0.245 262.881); - --primary-foreground: oklch(0.985 0 0); + --primary: oklch(0.424 0.199 265.638); + --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.274 0.006 286.033); - --muted-foreground: oklch(0.705 0.015 286.067); - --accent: oklch(0.274 0.006 286.033); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); - --ring: oklch(0.488 0.243 264.376); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.21 0.006 285.885); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.828 0.111 230.318); + --chart-2: oklch(0.685 0.169 237.323); + --chart-3: oklch(0.588 0.158 241.966); + --chart-4: oklch(0.5 0.134 242.749); + --chart-5: oklch(0.443 0.11 240.79); + --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.546 0.245 262.881); - --sidebar-primary-foreground: oklch(0.379 0.146 265.522); - --sidebar-accent: oklch(0.274 0.006 286.033); + --sidebar-primary: oklch(0.623 0.214 259.815); + --sidebar-primary-foreground: oklch(0.97 0.014 254.604); + --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.488 0.243 264.376); + --sidebar-ring: oklch(0.556 0 0); color-scheme: dark; } @@ -126,7 +128,4 @@ body { @apply bg-background text-foreground; } - html { - @apply font-sans; - } } diff --git a/app/layout.tsx b/app/layout.tsx index 6312503..b5afee6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,13 +5,14 @@ import { cn } from "@/lib/utils"; import { config } from "@/lib/config"; const inter = Inter({ - variable: "--font-inter", + variable: "--font-inter-family", subsets: ["latin"], display: "swap", + adjustFontFallback: false, }); const anuphan = Anuphan({ - variable: "--font-anuphan", + variable: "--font-anuphan-family", subsets: ["latin", "thai"], display: "swap", }); @@ -86,11 +87,10 @@ export default function RootLayout({ "antialiased", inter.variable, anuphan.variable, - "font-sans", )} suppressHydrationWarning > - + - + {children} diff --git a/app/page.tsx b/app/page.tsx index f5ce372..cd38b2b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -52,7 +52,7 @@ export default async function Home() { alt="Background" fill priority - className="fixed top-0 left-0 z-0 h-full w-full object-cover opacity-60" + className="fixed top-0 left-0 z-0 h-fit min-h-dvh w-full object-cover opacity-40" /> @@ -67,7 +67,7 @@ export default async function Home() { />
-

+

{profileName}

{visitorCount > 0 && ( diff --git a/bun.lock b/bun.lock index 8c18e8e..2abc82d 100644 --- a/bun.lock +++ b/bun.lock @@ -48,7 +48,7 @@ "eslint": "^9.39.4", "eslint-config-next": "16.2.12", "knip": "6.29.0", - "shadcn": "4.16.2", + "shadcn": "^4.16.2", "tailwindcss": "^4.3.2", "typescript": "^5.9.3", }, diff --git a/components.json b/components.json index 55fb42b..637130e 100644 --- a/components.json +++ b/components.json @@ -1,6 +1,6 @@ { "$schema": "https://ui.shadcn.com/schema.json", - "style": "radix-lyra", + "style": "radix-vega", "rsc": true, "tsx": true, "tailwind": { diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx index d5f0bc9..1ef3041 100644 --- a/components/LinkCard.tsx +++ b/components/LinkCard.tsx @@ -51,8 +51,8 @@ function LinkList({ > - - + + diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx index 5a4812c..7b2524c 100644 --- a/components/ui/accordion.tsx +++ b/components/ui/accordion.tsx @@ -13,10 +13,7 @@ function Accordion({ return ( ) @@ -29,7 +26,7 @@ function AccordionItem({ return ( ) @@ -45,7 +42,7 @@ function AccordionTrigger({
svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", + "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", { variants: { variant: { diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx index b319efd..cacff11 100644 --- a/components/ui/badge.tsx +++ b/components/ui/badge.tsx @@ -5,7 +5,7 @@ import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( - "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", + "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { @@ -15,7 +15,7 @@ const badgeVariants = cva( destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: - "border-border bg-input/30 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", + "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", diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 5a7845b..6f9b6c1 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -5,15 +5,15 @@ import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const buttonVariants = cva( - "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/80", outline: - "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground", + "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", + "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", destructive: @@ -22,13 +22,15 @@ const buttonVariants = cva( }, size: { default: - "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5", - xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3", - sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", - lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3", + "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", + xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", + sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5", + lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-9", - "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3", - "icon-sm": "size-8", + "icon-xs": + "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", + "icon-sm": + "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md", "icon-lg": "size-10", }, }, diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx index cb4859c..7178cd1 100644 --- a/components/ui/calendar.tsx +++ b/components/ui/calendar.tsx @@ -31,7 +31,7 @@ function Calendar({ svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className diff --git a/components/ui/card.tsx b/components/ui/card.tsx index 930db08..30b72eb 100644 --- a/components/ui/card.tsx +++ b/components/ui/card.tsx @@ -12,7 +12,7 @@ function Card({ data-slot="card" data-size={size} className={cn( - "group/card flex flex-col gap-4 overflow-hidden rounded-none bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none", + "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className )} {...props} @@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
) { return (
) @@ -70,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (
) @@ -81,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -90,7 +90,7 @@ function ContextMenuItem({ data-inset={inset} data-variant={variant} className={cn( - "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", + "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className )} {...props} @@ -111,7 +111,7 @@ function ContextMenuSubTrigger({ data-slot="context-menu-sub-trigger" data-inset={inset} className={cn( - "flex cursor-default items-center rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} @@ -129,7 +129,7 @@ function ContextMenuSubContent({ return ( ) @@ -149,7 +149,7 @@ function ContextMenuCheckboxItem({ data-slot="context-menu-checkbox-item" data-inset={inset} className={cn( - "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} checked={checked} @@ -179,7 +179,7 @@ function ContextMenuRadioItem({ data-slot="context-menu-radio-item" data-inset={inset} className={cn( - "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} @@ -207,7 +207,7 @@ function ContextMenuLabel({ data-slot="context-menu-label" data-inset={inset} className={cn( - "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5", + "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className )} {...props} @@ -222,7 +222,7 @@ function ContextMenuSeparator({ return ( ) diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx index a6f473b..7caed7d 100644 --- a/components/ui/dialog.tsx +++ b/components/ui/dialog.tsx @@ -39,7 +39,7 @@ function DialogOverlay({ ) diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx index 9756f35..1dd116b 100644 --- a/components/ui/dropdown-menu.tsx +++ b/components/ui/dropdown-menu.tsx @@ -43,7 +43,7 @@ function DropdownMenuContent({ data-slot="dropdown-menu-content" sideOffset={sideOffset} align={align} - className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 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 data-[state=closed]:overflow-hidden dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )} + className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )} {...props} /> @@ -73,7 +73,7 @@ function DropdownMenuItem({ data-inset={inset} data-variant={variant} className={cn( - "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", + "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className )} {...props} @@ -95,7 +95,7 @@ function DropdownMenuCheckboxItem({ data-slot="dropdown-menu-checkbox-item" data-inset={inset} className={cn( - "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} checked={checked} @@ -139,7 +139,7 @@ function DropdownMenuRadioItem({ data-slot="dropdown-menu-radio-item" data-inset={inset} className={cn( - "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} @@ -170,7 +170,7 @@ function DropdownMenuLabel({ data-slot="dropdown-menu-label" data-inset={inset} className={cn( - "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5", + "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className )} {...props} @@ -185,7 +185,7 @@ function DropdownMenuSeparator({ return ( ) @@ -226,7 +226,7 @@ function DropdownMenuSubTrigger({ data-slot="dropdown-menu-sub-trigger" data-inset={inset} className={cn( - "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} @@ -244,7 +244,7 @@ function DropdownMenuSubContent({ return ( ) diff --git a/components/ui/field.tsx b/components/ui/field.tsx index 0b3c1c8..383e7c8 100644 --- a/components/ui/field.tsx +++ b/components/ui/field.tsx @@ -106,7 +106,7 @@ function FieldLabel({