@overmap-ai/blocks 1.0.31-tailwind-components.32 → 1.0.31-tailwind-components.33

package/dist/blocks.js

@@ -229,7 +229,7 @@ const buttonCva = cva(
     // disabled
     "disabled:opacity-50",
     "disabled:pointer-events-none",
-    "transition-colors"
+    "transition-[background,color,box-shadow]"
   ],
   {
     variants: {
@@ -261,22 +261,22 @@ const buttonCva = cva(
         ],
         surface: [
           "bg-(--accent-surface)",
-          "hover:ring-(--accent-a8)",
+          "hover:inset-ring-(--accent-a8)",
           "active:bg-(--accent-a3)",
-          "ring-1",
-          "ring-(--accent-a7)",
+          "inset-ring",
+          "inset-ring-(--accent-a7)",
           "text-(--accent-a11)",
           "data-[state='open']:bg-(--accent-a4)"
         ],
         outline: [
           "bg-transparent",
-          "ring-1",
-          "ring-(--accent-a7)",
-          "hover:ring-(--accent-a8)",
+          "inset-ring",
+          "inset-ring-(--accent-a7)",
+          "hover:inset-ring-(--accent-a8)",
           "hover:bg-(--accent-a3)",
           "active:bg-(--accent-a4)",
           "text-(--accent-a11)",
-          "data-[state='open']:ring-(--accent-a8)",
+          "data-[state='open']:inset-ring-(--accent-a8)",
           "data-[state='open']:bg-(--accent-a3)"
         ]
       },
@@ -478,8 +478,8 @@ const avatarFallback = cva(["flex", "items-center", "justify-center", "w-full",
     variant: {
       solid: ["bg-(--accent-9)", "text-(--accent-contrast)"],
       soft: ["bg-(--accent-a3)", "text-(--accent-a11)"],
-      outline: ["bg-transparent", "ring-1", "ring-inset", "ring-(--accent-a7)", "text-(--accent-a11)"],
-      surface: ["bg-(--accent-surface)", "ring-1", "ring-inset", "ring-(--accent-a7)", "text-(--accent-a11)"]
+      outline: ["bg-transparent", "inset-ring", "inset-ring-(--accent-a7)", "text-(--accent-a11)"],
+      surface: ["bg-(--accent-surface)", "inset-ring", "inset-ring-(--accent-a7)", "text-(--accent-a11)"]
     }
   },
   defaultVariants: {
@@ -548,8 +548,8 @@ const badge = cva(["inline-flex", "items-center", "shrink-0"], {
     variant: {
       solid: ["bg-(--accent-9)", "text-(--accent-contrast)"],
       soft: ["bg-(--accent-a3)", "text-(--accent-a11)"],
-      outline: ["bg-transparent", "ring-1", "ring-(--accent-a7)", "text-(--accent-a11)"],
-      surface: ["bg-(--accent-surface)", "ring-1", "ring-(--accent-a7)", "text-(--accent-a11)"]
+      outline: ["bg-transparent", "inset-ring", "inset-ring-(--accent-a7)", "text-(--accent-a11)"],
+      surface: ["bg-(--accent-surface)", "inset-ring", "inset-ring-(--accent-a7)", "text-(--accent-a11)"]
     }
   },
   compoundVariants: [
@@ -638,8 +638,8 @@ const cardCva = cva([], {
   variants: {
     variant: {
       soft: ["bg-(--accent-2)"],
-      surface: ["bg-(--accent-2)", "ring-1", "ring-(--accent-a6)"],
-      outline: ["ring-1", "ring-(--accent-a6)"]
+      surface: ["bg-(--accent-2)", "inset-ring", "inset-ring-(--accent-a6)"],
+      outline: ["inset-ring-1", "inset-ring-(--accent-a6)"]
     },
     size: {
       xs: ["p-2", "text-xs"],
@@ -699,22 +699,21 @@ const checkbox = cva(
     // disabled
     "disabled:opacity-50",
     "disabled:pointer-events-none",
-    "transition-colors"
+    "transition-[background,color,box-shadow]"
   ],
   {
     variants: {
       variant: {
         surface: [
-          "ring-1",
-          "ring-inset",
-          "ring-(--base-a7)",
+          "inset-ring",
+          "inset-ring-(--base-a7)",
           "bg-(--base-surface)",
           "data-[state='checked']:bg-(--accent-indicator)",
-          "data-[state='checked']:ring-(--accent-indicator)",
+          "data-[state='checked']:inset-ring-(--accent-indicator)",
           "text-(--accent-contrast)"
         ],
         soft: ["bg-(--accent-a5)", "text-(--accent-a11)"],
-        outline: ["bg-transparent", "ring-1", "ring-(--accent-a7)", "text-(--accent-a11)"]
+        outline: ["bg-transparent", "inset-ring", "inset-ring-(--accent-a7)", "text-(--accent-a11)"]
       },
       size: {
         xs: ["h-4", "w-4", "text-xs"],
@@ -1206,18 +1205,19 @@ const inputRoot$1 = cva(
   [
     "flex",
     "items-stretch",
-    "transition-colors",
-    "has-[:focus]:ring-2",
-    "has-[:focus]:ring-(--accent-a8)",
+    "has-[:focus]:outline-2",
+    "has-[:focus]:outline-(--accent-8)",
+    "has-[:focus]:-outline-offset-1",
     "has-[:disabled]:opacity-50",
-    "has-[:disabled]:pointer-events-none"
+    "has-[:disabled]:pointer-events-none",
+    "transition-[background,color,box-shadow]"
   ],
   {
     variants: {
       variant: {
-        surface: ["ring-1", "ring-(--accent-a7)", "bg-(--accent-surface)", "text-(--accent-a12)"],
+        surface: ["inset-ring", "inset-ring-(--accent-a7)", "bg-(--accent-surface)", "text-(--accent-a12)"],
         soft: ["bg-(--accent-a3)", "text-(--accent-12)"],
-        outline: ["ring-1", "ring-(--base-a7)", "bg-transparent", "text-(--base-12)"]
+        outline: ["inset-ring", "inset-ring-(--base-a7)", "bg-transparent", "text-(--base-12)"]
       },
       size: {
         xs: ["h-5", "text-xs"],
@@ -2848,13 +2848,13 @@ RadioGroupIndicator.displayName = "RadioGroupIndicator";
 const RadioGroupContext = createContext({});
 const radioGroupItem = cva(
   [
-    "outline-none",
     "rounded-full",
     "focus-visible:outline-2",
     "focus-visible:outline-(--accent-a8)",
     "focus-visible:outline-offset-2",
     "disabled:opacity-50",
-    "disabled:pointer-events-none"
+    "disabled:pointer-events-none",
+    "data-[state='checked']:transition-[background,color,box-shadow]"
   ],
   {
     variants: {
@@ -2862,10 +2862,9 @@ const radioGroupItem = cva(
         surface: [
           "bg-(--base-surface)",
           "data-[state='checked']:bg-(--accent-indicator)",
-          "ring-1",
-          "ring-inset",
-          "ring-(--base-a6)",
-          "data-[state='checked']:ring-(--accent-indicator)",
+          "inset-ring",
+          "inset-ring-(--base-a6)",
+          "data-[state='checked']:inset-ring-(--accent-indicator)",
           "text-(--accent-contrast)"
         ],
         soft: ["bg-(--accent-a3)", "text-(--accent-a11)"]
@@ -2921,8 +2920,8 @@ const segmentedControlRootCva = cva(["shrink-0", "transition-colors", "flex"], {
   variants: {
     variant: {
       soft: ["bg-(--accent-a3)"],
-      surface: ["bg-(--accent-surface)", "ring-1", "ring-(--accent-a6)"],
-      outline: ["bg-transparent", "ring-1", "ring-(--accent-a6)"]
+      surface: ["bg-(--accent-surface)", "inset-ring", "inset-ring-(--accent-a6)"],
+      outline: ["bg-transparent", "inset-ring-1", "inset-ring-(--accent-a6)"]
     },
     size: {
       xs: ["h-5", "text-xs"],
@@ -3324,7 +3323,7 @@ const SlideOutV2 = memo(
   })
 );
 const Spinner = memo(() => {
-  return /* @__PURE__ */ jsx("div", { className: "size-5 animate-spin rounded-full border border-2 border-(--base-a12) border-b-transparent" });
+  return /* @__PURE__ */ jsx("div", { className: "size-5 animate-spin rounded-full border-2 border-(--base-a12) border-b-transparent" });
 });
 Spinner.displayName = "Spinner";
 const SwitchContext = createContext({});
@@ -3339,13 +3338,13 @@ const switchRoot = cva(
     "focus-visible:outline-offset-2",
     "focus-visible:outline-(--accent-a8)",
     // ring
-    "ring-1",
-    "ring-(--base-a4)",
-    "data-[state=checked]:ring-(--accent-track)",
+    "inset-ring",
+    "inset-ring-(--base-a4)",
+    "data-[state=checked]:inset-ring-(--accent-track)",
     // bg
     "bg-(--base-4)",
     "data-[state=checked]:bg-(--accent-track)",
-    "transition-colors"
+    "transition-[background,color,box-shadow]"
   ],
   {
     variants: {
@@ -3368,17 +3367,18 @@ const switchThumb = cva(
     "items-center",
     "justify-center",
     "transition-transform",
-    "data-[state='checked']:translate-x-[100%]",
+    "data-[state='unchecked']:translate-x-[1px]",
+    "data-[state='checked']:translate-x-[calc(100%+1px)]",
     "bg-(--base-contrast)"
   ],
   {
     variants: {
       size: {
-        xs: ["h-5", "w-5"],
-        sm: ["h-6", "w-6"],
-        md: ["h-7", "w-7"],
-        lg: ["h-8", "w-8"],
-        xl: ["h-9", "w-9"]
+        xs: ["size-[calc(calc(var(--spacing)*5)-1px)]"],
+        sm: ["size-[calc(calc(var(--spacing)*6)-1px)]"],
+        md: ["size-[calc(calc(var(--spacing)*7)-1px)]"],
+        lg: ["size-[calc(calc(var(--spacing)*8)-1px)]"],
+        xl: ["size-[calc(calc(var(--spacing)*9)-1px)]"]
       }
     },
     defaultVariants: {
@@ -3686,14 +3686,14 @@ const Text = forwardRef((props, ref) => {
 Text.displayName = "Text";
 const textAreaCva = cva(
   [
-    "focus:ring-2",
-    "focus:ring-(--accent-a8)",
+    "focus:outline-(--accent-a8)",
+    "focus:outline-2",
+    "focus:-outline-offset-1",
     "disabled:opacity-50",
     "disabled:pointer-events-none",
-    "transition-colors",
     "[scrollbar-width:thin]",
     "[scrollbar-color:var(--base-6)_transparent]",
-    "outline-none"
+    "transition-[background,color,box-shadow]"
   ],
   {
     variants: {
@@ -3701,8 +3701,8 @@ const textAreaCva = cva(
         outline: [
           "placeholder-(--base-a9)",
           "selection:bg-(--accent-a5)",
-          "ring-1",
-          "ring-(--base-a7)",
+          "inset-ring",
+          "inset-ring-(--base-a7)",
           "bg-transparent",
           "text-(--base-12)"
         ],
@@ -3710,8 +3710,8 @@ const textAreaCva = cva(
           "placeholder-(--accent-12)",
           "placeholder:opacity-60",
           "selection:bg-(--accent-a5)",
-          "ring-1",
-          "ring-(--accent-a7)",
+          "inset-ring",
+          "inset-ring-(--accent-a7)",
           "bg-(--accent-surface)",
           "text-(--accent-a12)"
         ],
@@ -3940,18 +3940,17 @@ const toggleButtonCva = cva(
     // Disabled
     "disabled:opacity-50",
     "disabled:pointer-events-none",
-    "transition-colors"
+    "transition-[background,color,box-shadow]"
   ],
   {
     variants: {
       variant: {
         outline: [
           // ring
-          "ring-1",
-          "ring-inset",
-          "ring-(--accent-a4)",
-          "data-[state=off]:hover:ring-transparent",
-          "data-[state=on]:ring-transparent",
+          "inset-ring",
+          "inset-ring-(--accent-a4)",
+          "data-[state=off]:hover:inset-ring-transparent",
+          "data-[state=on]:inset-ring-transparent",
           // text
           "text-(--accent-a11)",
           "data-[state=on]:text-(--accent-a12)",