larkup 0.1.14 → 0.1.21

package/components/theme-switcher.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import { useState, useEffect, Suspense } from "react";
-import { useSearchParams } from "next/navigation";
-import { GlobalSettings } from "./global-settings";
+import { useState, useEffect, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { GlobalSettings } from './global-settings';
 
 import {
   useThemeCustomizer,
@@ -12,8 +12,8 @@ import {
   LayoutVariant,
   RadiusVariant,
   PageStyleVariant,
-} from "./theme-customizer-provider";
-import { useWorkspace } from "@/components/workspace/workspace-provider";
+} from './theme-customizer-provider';
+import { useWorkspace } from '@/components/workspace/workspace-provider';
 import {
   SlidersHorizontal,
   LayoutTemplate,
@@ -24,41 +24,33 @@ import {
   User,
   Check,
   Settings,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Input } from "./ui/input";
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Input } from './ui/input';
 
 const THEMES: { id: ThemeVariant; name: string; color: string }[] = [
-  { id: "default", name: "Caffee", color: "#f2efe4" },
-  { id: "theme-gaia", name: "Emerald Green", color: "#2b935f" },
-  { id: "theme-docker", name: "Ocean Blue", color: "#1d63ed" },
-  { id: "theme-pinecone", name: "Deep Indigo", color: "#6e56cf" },
-  { id: "theme-vercel", name: "Minimal Black", color: "#000000" },
-  { id: "theme-elevenlabs", name: "Soft Cream", color: "#f8f7f5" },
-  { id: "theme-espresso", name: "Espresso", color: "#6B3F2A" },
-  { id: "theme-sienna", name: "Warm Sienna", color: "#A0522D" },
-  { id: "theme-caramel", name: "Caramel", color: "#C47C3E" },
+  { id: 'default', name: 'Caffee', color: '#f2efe4' },
+  { id: 'theme-gaia', name: 'Emerald Green', color: '#2b935f' },
+  { id: 'theme-docker', name: 'Ocean Blue', color: '#1d63ed' },
+  { id: 'theme-pinecone', name: 'Deep Indigo', color: '#6e56cf' },
+  { id: 'theme-vercel', name: 'Minimal Black', color: '#000000' },
+  { id: 'theme-elevenlabs', name: 'Soft Cream', color: '#f8f7f5' },
+  { id: 'theme-espresso', name: 'Espresso', color: '#6B3F2A' },
+  { id: 'theme-sienna', name: 'Warm Sienna', color: '#A0522D' },
+  { id: 'theme-caramel', name: 'Caramel', color: '#C47C3E' },
 ];
 
 const BACKGROUNDS: { id: BackgroundVariant; name: string; color: string }[] = [
-  { id: "bg-default", name: "White", color: "#FFFFFF" },
-  { id: "bg-pure", name: "Pure White", color: "#FFFFFF" },
-  { id: "bg-silver", name: "Silver", color: "#F8F8F8" },
-  { id: "bg-soft", name: "Soft", color: "#FBFAF8" },
-  { id: "bg-stone", name: "Stone", color: "#F5F5F2" },
-  { id: "bg-sage", name: "Sage", color: "#EDEDE8" },
-  { id: "bg-warm", name: "Warm Cream", color: "#F7F1EA" },
+  { id: 'bg-default', name: 'White', color: '#FFFFFF' },
+  { id: 'bg-pure', name: 'Pure White', color: '#FFFFFF' },
+  { id: 'bg-fafafa', name: 'Near White', color: '#F4F4F4' },
+  { id: 'bg-silver', name: 'Silver', color: '#F8F8F8' },
+  { id: 'bg-soft', name: 'Soft', color: '#FBFAF8' },
+  { id: 'bg-stone', name: 'Stone', color: '#F5F5F2' },
+  { id: 'bg-sage', name: 'Sage', color: '#EDEDE8' },
+  { id: 'bg-warm', name: 'Warm Cream', color: '#F7F1EA' },
 ];
 
 const PANEL_BACKGROUNDS: {
@@ -66,35 +58,37 @@ const PANEL_BACKGROUNDS: {
   name: string;
   color: string;
 }[] = [
-  { id: "panel-default", name: "Theme Default", color: "#FAFAFA" },
-  { id: "panel-white", name: "White", color: "#FFFFFF" },
-  { id: "panel-fafafa", name: "Near White", color: "#F4F4F4" },
-  { id: "panel-silver", name: "Silver", color: "#F8F8F8" },
-  { id: "panel-soft", name: "Soft", color: "#FBFAF8" },
-  { id: "panel-stone", name: "Stone", color: "#F5F5F2" },
-  { id: "panel-warm", name: "Warm Cream", color: "#F7F1EA" },
+  { id: 'panel-default', name: 'Theme Default', color: '#FAFAFA' },
+  { id: 'panel-white', name: 'White', color: '#FFFFFF' },
+  { id: 'panel-fafafa', name: 'Near White', color: '#F4F4F4' },
+  { id: 'panel-silver', name: 'Silver', color: '#F8F8F8' },
+  { id: 'panel-soft', name: 'Soft', color: '#FBFAF8' },
+  { id: 'panel-stone', name: 'Stone', color: '#F5F5F2' },
+  { id: 'panel-warm', name: 'Warm Cream', color: '#F7F1EA' },
 ];
 
 const LAYOUTS: { id: LayoutVariant; name: string }[] = [
-  { id: "sidebar", name: "Sidebar (Left)" },
-  { id: "topnav", name: "Top Navigation" },
+  { id: 'sidebar', name: 'Sidebar (Left)' },
+  { id: 'topnav', name: 'Top Navigation' },
 ];
 
 const RADIUSES: { id: RadiusVariant; name: string; value: string }[] = [
-  { id: "radius-0", name: "Sharp (0)", value: "0" },
-  { id: "radius-sm", name: "Small", value: "0.3rem" },
-  { id: "radius-default", name: "Default", value: "0.625rem" },
-  { id: "radius-lg", name: "Large", value: "1rem" },
+  { id: 'radius-0', name: 'Sharp (0)', value: '0' },
+  { id: 'radius-sm', name: 'Small', value: '0.3rem' },
+  { id: 'radius-default', name: 'Default', value: '0.625rem' },
+  { id: 'radius-lg', name: 'Large', value: '1rem' },
 ];
 
 const PAGE_STYLES: { id: PageStyleVariant; name: string }[] = [
-  { id: "card", name: "Card (Rounded/Shadow)" },
-  { id: "fused", name: "Fused (Flat)" },
+  { id: 'card', name: 'Card (Rounded/Shadow)' },
+  { id: 'fused', name: 'Fused (Flat)' },
 ];
 
 export function ThemeSwitcher({ floating = true }: { floating?: boolean }) {
   return (
-    <Suspense fallback={<div className={floating ? "fixed bottom-6 right-6 z-50 h-12 w-12" : "size-9"} />}>
+    <Suspense
+      fallback={<div className={floating ? 'fixed bottom-6 right-6 z-50 h-12 w-12' : 'size-9'} />}
+    >
       <ThemeSwitcherContent floating={floating} />
     </Suspense>
   );
@@ -121,9 +115,8 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
 
   const { username, setUsername } = useWorkspace();
 
-  const [localName, setLocalName] = useState(username || "");
+  const [localName, setLocalName] = useState(username || '');
 
-  // Sync local input when context username changes (e.g. on mount)
   const syncedRef = useState({ synced: false })[0];
   if (isMounted && !syncedRef.synced && username && localName !== username) {
     setLocalName(username);
@@ -131,13 +124,13 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
   }
 
   const searchParams = useSearchParams();
-  const [view, setView] = useState<"main" | "settings">("main");
+  const [view, setView] = useState<'main' | 'settings'>('main');
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
-    if (searchParams?.get("settings")) {
+    if (searchParams?.get('settings')) {
       setOpen(true);
-      setView("settings");
+      setView('settings');
     }
   }, [searchParams]);
 
@@ -147,34 +140,28 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
 
   if (!isMounted) return null;
 
-  const wrapperClass = floating
-    ? "fixed bottom-6 right-6 z-50"
-    : "flex items-center";
+  const wrapperClass = floating ? 'fixed bottom-6 right-6 z-50' : 'flex items-center';
   const buttonClass = floating
-    ? "h-12 w-12 rounded-full shadow-xl"
-    : "size-9 rounded-lg border border-border bg-card text-primary shadow-sm hover:bg-accent hover:text-accent-foreground";
+    ? 'h-12 w-12 rounded-full '
+    : 'size-9 rounded-lg border border-border bg-card text-primary  hover:bg-accent hover:text-accent-foreground';
 
   return (
     <div className={wrapperClass}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
           render={
-            <Button
-              variant={floating ? "default" : "ghost"}
-              size="icon"
-              className={buttonClass}
-            >
-              <SlidersHorizontal className={floating ? "h-5 w-5" : "h-4 w-4"} />
+            <Button variant={floating ? 'default' : 'ghost'} size="icon" className={buttonClass}>
+              <SlidersHorizontal className={floating ? 'h-5 w-5' : 'h-4 w-4'} />
             </Button>
           }
         />
         <PopoverContent
           align="end"
-          className="w-80 p-0 shadow-2xl flex flex-col max-h-[85vh] overflow-hidden"
+          className="w-80 p-0  flex flex-col max-h-[85vh] overflow-hidden"
         >
-          {view === "settings" ? (
+          {view === 'settings' ? (
             <div className="flex flex-col min-h-0 flex-1 h-full animate-in slide-in-from-right-4 duration-300">
-              <GlobalSettings onBack={() => setView("main")} />
+              <GlobalSettings onBack={() => setView('main')} />
             </div>
           ) : (
             <div className="flex flex-col min-h-0 flex-1 h-full animate-in slide-in-from-left-4 duration-300">
@@ -182,7 +169,12 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                 <div className="flex items-center gap-2">
                   <Palette className="h-4 w-4" /> Preferences
                 </div>
-                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setView("settings")}>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  onClick={() => setView('settings')}
+                >
                   <Settings className="h-4 w-4 text-muted-foreground" />
                 </Button>
               </div>
@@ -196,7 +188,7 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                     <Input
                       value={localName}
                       onChange={(e) => setLocalName(e.target.value)}
-                      onKeyDown={(e) => e.key === "Enter" && handleSaveUsername()}
+                      onKeyDown={(e) => e.key === 'Enter' && handleSaveUsername()}
                       placeholder="Enter your name"
                       className="flex-1 rounded-md border border-input bg-background px-3 h-7 text-sm outline-none "
                     />
@@ -215,8 +207,7 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                 {/* Color Theme */}
                 <div className="space-y-3">
                   <label className="text-sm font-medium flex items-center gap-2">
-                    <Palette className="h-4 w-4 text-muted-foreground" /> Color
-                    Palette
+                    <Palette className="h-4 w-4 text-muted-foreground" /> Color Palette
                   </label>
                   <div className="grid grid-cols-3 gap-2">
                     {THEMES.map((t) => (
@@ -224,18 +215,14 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                         key={t.id}
                         onClick={() => setTheme(t.id)}
                         className={`flex flex-col items-center justify-center gap-2 rounded-md border-2 p-2 text-xs transition-all hover:bg-muted ${
-                          theme === t.id
-                            ? "border-primary bg-primary/5"
-                            : "border-transparent"
+                          theme === t.id ? 'border-primary bg-primary/5' : 'border-transparent'
                         }`}
                       >
                         <div
-                          className="h-6 w-6 rounded-full border shadow-sm"
+                          className="h-6 w-6 rounded-full border "
                           style={{ background: t.color }}
                         />
-                        <span className="truncate w-full text-center">
-                          {t.name}
-                        </span>
+                        <span className="truncate w-full text-center">{t.name}</span>
                       </button>
                     ))}
                   </div>
@@ -245,8 +232,7 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                 <TooltipProvider delay={200}>
                   <div className="space-y-3">
                     <label className="text-sm font-medium flex items-center gap-2">
-                      <SquareDashed className="h-4 w-4 text-muted-foreground" />{" "}
-                      Page Background
+                      <SquareDashed className="h-4 w-4 text-muted-foreground" /> Page Background
                     </label>
                     <p className="text-[11px] text-muted-foreground -mt-1">
                       Full page background behind everything
@@ -259,15 +245,15 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                               <button
                                 onClick={() => setBackground(bg.id)}
                                 className={`flex items-center justify-center rounded-full border-2 p-0.5 transition-all hover:scale-110 ${
-                                  background === bg.id
-                                    ? "border-primary"
-                                    : "border-transparent"
+                                  background === bg.id ? 'border-primary' : 'border-transparent'
                                 }`}
                               />
                             }
                           >
                             <div
-                              className={`h-6 w-6 rounded-full border shrink-0 ${bg.id === "bg-default" ? "border-dashed" : "shadow-sm"}`}
+                              className={`h-6 w-6 rounded-full border shrink-0 ${
+                                bg.id === 'bg-default' ? 'border-dashed' : ''
+                              }`}
                               style={{ background: bg.color }}
                             />
                           </TooltipTrigger>
@@ -287,8 +273,8 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                 <TooltipProvider delay={200}>
                   <div className="space-y-3">
                     <label className="text-sm font-medium flex items-center gap-2">
-                      <PanelTop className="h-4 w-4 text-muted-foreground" /> Content
-                      Panel Background
+                      <PanelTop className="h-4 w-4 text-muted-foreground" /> Content Panel
+                      Background
                     </label>
                     <p className="text-[11px] text-muted-foreground -mt-1">
                       Inner content area (card / main panel)
@@ -301,15 +287,15 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                               <button
                                 onClick={() => setPanelBg(pb.id)}
                                 className={`flex items-center justify-center rounded-full border-2 p-0.5 transition-all hover:scale-110 ${
-                                  panelBg === pb.id
-                                    ? "border-primary"
-                                    : "border-transparent"
+                                  panelBg === pb.id ? 'border-primary' : 'border-transparent'
                                 }`}
                               />
                             }
                           >
                             <div
-                              className={`h-6 w-6 rounded-full border shrink-0 ${pb.id === "panel-default" ? "border-dashed" : "shadow-sm"}`}
+                              className={`h-6 w-6 rounded-full border shrink-0 ${
+                                pb.id === 'panel-default' ? 'border-dashed' : ''
+                              }`}
                               style={{ background: pb.color }}
                             />
                           </TooltipTrigger>
@@ -329,7 +315,8 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                 <TooltipProvider delay={200}>
                   <div className="space-y-3">
                     <label className="text-sm font-medium flex items-center gap-2">
-                      <LayoutTemplate className="h-4 w-4 text-muted-foreground" /> Sidebar / Topnav Background
+                      <LayoutTemplate className="h-4 w-4 text-muted-foreground" /> Sidebar / Topnav
+                      Background
                     </label>
                     <p className="text-[11px] text-muted-foreground -mt-1">
                       Background color for the side or top navigation
@@ -342,15 +329,15 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                               <button
                                 onClick={() => setNavBg(pb.id)}
                                 className={`flex items-center justify-center rounded-full border-2 p-0.5 transition-all hover:scale-110 ${
-                                  navBg === pb.id
-                                    ? "border-primary"
-                                    : "border-transparent"
+                                  navBg === pb.id ? 'border-primary' : 'border-transparent'
                                 }`}
                               />
                             }
                           >
                             <div
-                              className={`h-6 w-6 rounded-full border shrink-0 ${pb.id === "panel-default" ? "border-dashed" : "shadow-sm"}`}
+                              className={`h-6 w-6 rounded-full border shrink-0 ${
+                                pb.id === 'panel-default' ? 'border-dashed' : ''
+                              }`}
                               style={{ background: pb.color }}
                             />
                           </TooltipTrigger>
@@ -369,8 +356,7 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                 {/* Layout */}
                 <div className="space-y-3">
                   <label className="text-sm font-medium flex items-center gap-2">
-                    <LayoutTemplate className="h-4 w-4 text-muted-foreground" />{" "}
-                    Layout Style
+                    <LayoutTemplate className="h-4 w-4 text-muted-foreground" /> Layout Style
                   </label>
                   <div className="grid grid-cols-2 gap-2">
                     {LAYOUTS.map((l) => (
@@ -378,9 +364,7 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                         key={l.id}
                         onClick={() => setLayout(l.id)}
                         className={`rounded-md border-2 p-2 text-sm transition-all hover:bg-muted ${
-                          layout === l.id
-                            ? "border-primary bg-primary/5"
-                            : "border-border"
+                          layout === l.id ? 'border-primary bg-primary/5' : 'border-border'
                         }`}
                       >
                         {l.name}
@@ -392,8 +376,7 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                 {/* Page Style */}
                 <div className="space-y-3">
                   <label className="text-sm font-medium flex items-center gap-2">
-                    <SquareDashed className="h-4 w-4 text-muted-foreground" /> Page
-                    Style
+                    <SquareDashed className="h-4 w-4 text-muted-foreground" /> Page Style
                   </label>
                   <div className="grid grid-cols-2 gap-2">
                     {PAGE_STYLES.map((ps) => (
@@ -401,9 +384,7 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                         key={ps.id}
                         onClick={() => setPageStyle(ps.id)}
                         className={`rounded-md border-2 p-2 text-xs transition-all hover:bg-muted ${
-                          pageStyle === ps.id
-                            ? "border-primary bg-primary/5"
-                            : "border-border"
+                          pageStyle === ps.id ? 'border-primary bg-primary/5' : 'border-border'
                         }`}
                       >
                         {ps.name}
@@ -415,8 +396,7 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                 {/* Border Radius */}
                 <div className="space-y-3">
                   <label className="text-sm font-medium flex items-center gap-2">
-                    <Monitor className="h-4 w-4 text-muted-foreground" /> Border
-                    Radius
+                    <Monitor className="h-4 w-4 text-muted-foreground" /> Border Radius
                   </label>
                   <div className="flex flex-wrap gap-2">
                     {RADIUSES.map((r) => (
@@ -424,9 +404,7 @@ function ThemeSwitcherContent({ floating = true }: { floating?: boolean }) {
                         key={r.id}
                         onClick={() => setRadius(r.id)}
                         className={`rounded-md border-2 px-3 py-1 text-xs transition-all hover:bg-muted ${
-                          radius === r.id
-                            ? "border-primary bg-primary/5"
-                            : "border-border"
+                          radius === r.id ? 'border-primary bg-primary/5' : 'border-border'
                         }`}
                         style={{ borderRadius: r.value }}
                       >

package/components/ui/button.tsx

@@ -4,34 +4,32 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "group/button cursor-pointer inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none  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",
+  "group/button cursor-pointer  inline-flex shrink-0 items-center justify-center rounded-[5px] border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none  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-black text-primary-foreground hover:bg-black/80",
         success: "bg-green-700 text-primary-foreground hover:bg-green-700/80",
         outline:
-          "border-border bg-white 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",
+          "border-border bg-white hover:bg-muted/50 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",
         ghost:
           "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
         destructive:
-          "bg-red-500 text-white hover:bg-red-600 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+          "bg-red-500 text-white! hover:bg-red-600 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default:
-          "h-9 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-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg 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-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg 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-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
+        default: "h-10 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md 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 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-[0.8rem]",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
         "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
+          "size-6 rounded-md in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-md in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {

package/components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Card({
   className,
@@ -12,12 +12,12 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl border bg-card py-4 text-sm text-card-foreground  has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -26,11 +26,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-header"
       className={cn(
         "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -39,11 +39,11 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-title"
       className={cn(
         "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -53,7 +53,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
@@ -62,11 +62,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-action"
       className={cn(
         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -76,7 +76,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -84,12 +84,12 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
-        className
+        "flex items-center rounded-b-xl border-none  p-4 group-data-[size=sm]/card:p-3",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -100,4 +100,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-}
+};

package/components/ui/checkbox.tsx

@@ -1,16 +1,16 @@
-"use client";
+'use client';
 
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 
-import { cn } from "@/lib/utils";
-import { CheckIcon } from "lucide-react";
+import { cn } from '@/lib/utils';
+import { CheckIcon } from 'lucide-react';
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2  disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        'peer relative flex size-4 shrink-0 items-center justify-center rounded-lg border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2  disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
         className,
       )}
       {...props}

package/components/ui/dialog.tsx

@@ -53,7 +53,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full  -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none  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",
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100vw-2rem)] sm:max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none  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}