@camox/ui 0.7.3 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camox/ui",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "files": [
     "src"
   ],

package/src/components/button.tsx

@@ -10,11 +10,11 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80",
         outline:
-          "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",
+          "border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-accent/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",
+          "hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:hover:bg-accent/50",
         destructive:
           "bg-destructive/10 text-destructive hover:bg-destructive/20 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",

package/src/components/command.tsx

@@ -130,8 +130,9 @@ function CommandSeparator({
 function CommandItem({
   className,
   children,
+  hideCheck,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+}: React.ComponentProps<typeof CommandPrimitive.Item> & { hideCheck?: boolean }) {
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
@@ -142,7 +143,9 @@ function CommandItem({
       {...props}
     >
       {children}
-      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+      {!hideCheck && (
+        <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+      )}
     </CommandPrimitive.Item>
   );
 }

package/src/components/toggle.tsx

@@ -4,12 +4,12 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-accent dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-xs hover:bg-muted",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent",
       },
       size: {
         default:

package/src/styles/globals.css

@@ -14,7 +14,7 @@
   --secondary-foreground: theme(--color-zinc-900);
   --muted: theme(--color-zinc-100);
   --muted-foreground: theme(--color-zinc-500);
-  --accent: oklch(0.95 0.01 252);
+  --accent: oklch(0.95 0.01 190);
   --accent-foreground: theme(--color-slate-900);
   --destructive: theme(--color-red-600);
   --destructive-foreground: theme(--color-red-600);
@@ -50,7 +50,7 @@
   --secondary-foreground: theme(--color-zinc-50);
   --muted: theme(--color-zinc-800);
   --muted-foreground: theme(--color-zinc-400);
-  --accent: theme(--color-slate-800);
+  --accent: oklch(0.27 0.015 190);
   --accent-foreground: theme(--color-slate-50);
   --destructive: theme(--color-red-400);
   --destructive-foreground: theme(--color-red-500);
@@ -118,4 +118,7 @@
   body {
     @apply bg-background text-foreground;
   }
+  a:focus-visible {
+    @apply border-ring ring-ring/50 rounded-md ring-3 outline-none;
+  }
 }