@saas-ui/react 3.0.0-alpha.17 → 3.0.0-alpha.19

package/dist/index.js

@@ -1,3 +1,9 @@
+import {
+  steps_exports
+} from "./chunk-VZG7EJ64.js";
+import {
+  Switch
+} from "./chunk-SA3OGTOO.js";
 import {
   Toaster,
   toast
@@ -8,6 +14,18 @@ import {
 import {
   colors
 } from "./chunk-3MO37LYW.js";
+import {
+  Persona,
+  PersonaAvatar,
+  defaultPresenceOptions
+} from "./chunk-4VH4IGVF.js";
+import {
+  PinInput
+} from "./chunk-2EUACKRH.js";
+import {
+  Radio,
+  RadioGroup
+} from "./chunk-WYLMBMAH.js";
 import {
   SearchInput
 } from "./chunk-46ISJZBS.js";
@@ -17,23 +35,15 @@ import {
 import {
   namespace_exports as namespace_exports3
 } from "./chunk-BU7QENBQ.js";
-import {
-  Persona,
-  PersonaAvatar,
-  defaultPresenceOptions
-} from "./chunk-4VH4IGVF.js";
-import {
-  steps_exports
-} from "./chunk-VZG7EJ64.js";
-import {
-  Switch
-} from "./chunk-SA3OGTOO.js";
 import {
   sidebar_exports,
   useSidebar,
   useSidebarItemStyles,
   useSidebarStyles
 } from "./chunk-GGAKUS66.js";
+import {
+  Link
+} from "./chunk-TZBAM4AD.js";
 import {
   loading_overlay_exports,
   useLoadingOverlayStyles
@@ -47,22 +57,27 @@ import {
 import {
   navbar_exports
 } from "./chunk-Q6SNJJO2.js";
+import {
+  SuiContext,
+  SuiProvider,
+  useLink,
+  useSui
+} from "./chunk-O2WVT2BP.js";
 import {
   NumberInput
-} from "./chunk-ULAJ3JEO.js";
+} from "./chunk-S5J6REMC.js";
 import {
   pagination_exports
-} from "./chunk-5ILYOY27.js";
+} from "./chunk-MLJN6IOJ.js";
 import {
   PasswordInput
 } from "./chunk-CD2JUFI2.js";
 import {
-  PinInput
-} from "./chunk-2EUACKRH.js";
+  InputGroup
+} from "./chunk-PKI6YH2V.js";
 import {
-  Radio,
-  RadioGroup
-} from "./chunk-WYLMBMAH.js";
+  Command
+} from "./chunk-UASXI64E.js";
 import {
   namespace_exports
 } from "./chunk-72LEGXHY.js";
@@ -72,25 +87,16 @@ import {
 import {
   EmptyState
 } from "./chunk-FJFNGSPL.js";
-import {
-  IconBadge
-} from "./chunk-I2RXEKTB.js";
 import {
   grid_list_exports
 } from "./chunk-NSD5HRIP.js";
-import "./chunk-KTLWEUNW.js";
-import {
-  InputGroup
-} from "./chunk-PKI6YH2V.js";
 import {
-  Link
-} from "./chunk-TZBAM4AD.js";
+  IconBadge
+} from "./chunk-I2RXEKTB.js";
 import {
-  SuiContext,
-  SuiProvider,
-  useLink,
-  useSui
-} from "./chunk-O2WVT2BP.js";
+  IconButton
+} from "./chunk-QVFJV6HJ.js";
+import "./chunk-KTLWEUNW.js";
 import {
   AppShell
 } from "./chunk-6ZNR6N2K.js";
@@ -111,9 +117,6 @@ import {
   CloseButton
 } from "./chunk-BKYGKH3L.js";
 import "./chunk-4TPVIHNO.js";
-import {
-  Command
-} from "./chunk-UASXI64E.js";
 import "./chunk-RTMS5TJN.js";
 
 // src/preset.ts
@@ -200,7 +203,8 @@ var conditions = defineConditions({
   groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &, [role=group]:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &",
   groupExpanded: ".group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &, [role=group]:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &",
   groupInvalid: ".group:invalid &, [role=group]:invalid &",
-  parentHover: "button:hover > &, a:hover > &"
+  parentHover: "button:hover &, a:hover &, [role=button]:hover &",
+  pressable: "&:is(a, button, [role=button])"
 });
 
 // src/theme/global-css.ts
@@ -454,7 +458,7 @@ var buttonRecipe = defineRecipe({
       sm: {
         gap: "2",
         h: "7",
-        minW: "8",
+        minW: "7",
         textStyle: "sm",
         borderRadius: "md",
         px: "2.5"
@@ -567,10 +571,10 @@ var buttonRecipe = defineRecipe({
       ghost: {
         color: "colorPalette.fg",
         _hover: {
-          bg: "colorPalette.muted"
+          bg: "colorPalette.subtle"
         },
         _expanded: {
-          bg: "colorPalette.muted"
+          bg: "colorPalette.subtle"
         }
       },
       plain: {
@@ -578,6 +582,14 @@ var buttonRecipe = defineRecipe({
       }
     }
   },
+  compoundVariants: [
+    {
+      variant: "plain",
+      css: {
+        px: 0
+      }
+    }
+  ],
   defaultVariants: {
     size: "md",
     variant: "solid",
@@ -989,7 +1001,14 @@ var inputRecipe = defineRecipe10({
         bg: "transparent",
         borderWidth: "1px",
         borderColor: "border",
-        focusVisibleRing: "inside"
+        focusVisibleRing: "inside",
+        focusRingWidth: "0",
+        _hover: {
+          borderColor: "border.emphasized",
+          _focusVisible: {
+            borderColor: "var(--focus-ring-color)"
+          }
+        }
       },
       subtle: {
         borderWidth: "1px",
@@ -1192,9 +1211,7 @@ var radiomarkRecipe = defineRecipe15({
     borderRadius: "full",
     cursor: "radio",
     _focusVisible: {
-      outline: "2px solid",
-      outlineColor: "colorPalette.focusRing",
-      outlineOffset: "2px"
+      focusVisibleRing: "outside"
     },
     _invalid: {
       colorPalette: "red",
@@ -1470,29 +1487,29 @@ var textareaRecipe = defineRecipe20({
         borderRadius: "sm",
         textStyle: "xs",
         px: "2",
-        py: "1.5",
-        scrollPaddingBottom: "1.5"
+        py: "1",
+        scrollPaddingBottom: "1"
       },
       sm: {
         borderRadius: "sm",
         textStyle: "sm",
         px: "2.5",
-        py: "2",
-        scrollPaddingBottom: "2"
+        py: "1.5",
+        scrollPaddingBottom: "1.5"
       },
       md: {
         borderRadius: "md",
         textStyle: "sm",
         px: "3",
-        py: "2",
-        scrollPaddingBottom: "2"
+        py: "1.5",
+        scrollPaddingBottom: "1.5"
       },
       lg: {
         borderRadius: "md",
         textStyle: "md",
         px: "4",
-        py: "3",
-        scrollPaddingBottom: "3"
+        py: "2",
+        scrollPaddingBottom: "2"
       },
       xl: {
         borderRadius: "lg",
@@ -1507,7 +1524,8 @@ var textareaRecipe = defineRecipe20({
         bg: "transparent",
         borderWidth: "1px",
         borderColor: "border",
-        focusVisibleRing: "inside"
+        focusVisibleRing: "inside",
+        focusRingWidth: 0
       },
       subtle: {
         borderWidth: "1px",
@@ -1582,7 +1600,7 @@ var semanticColors = defineSemanticTokens.colors({
   },
   sidebar: {
     bg: {
-      value: { _light: "{colors.gray.50}", _dark: "{colors.gray.950}" }
+      value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
     },
     fg: {
       value: { _light: "{colors.gray.900}", _dark: "{colors.gray.200}" }
@@ -1592,7 +1610,7 @@ var semanticColors = defineSemanticTokens.colors({
     },
     accent: {
       bg: {
-        value: { _light: "{colors.gray.200/40}", _dark: "{colors.gray.900}" }
+        value: { _light: "{colors.gray.200/80}", _dark: "{colors.gray.900}" }
       },
       fg: {
         value: { _light: "{colors.gray.900}", _dark: "{colors.gray.200}" }
@@ -1689,9 +1707,6 @@ var semanticColors = defineSemanticTokens.colors({
       value: { _light: "{colors.blue.500}", _dark: "{colors.blue.400}" }
     }
   },
-  focusRing: {
-    value: { _light: "{colors.blue.600/50}", _dark: "{colors.blue.500/50}" }
-  },
   accent: {
     contrast: {
       value: { _light: "white", _dark: "white" }
@@ -2236,44 +2251,50 @@ import { defineSemanticTokens as defineSemanticTokens3 } from "@chakra-ui/react"
 var semanticShadows = defineSemanticTokens3.shadows({
   xs: {
     value: {
-      base: "0px 1px 2px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.100}",
-      _dark: "0px 1px 1px {colors.blackAlpha.800}, 0px 0px 1px inset {colors.whiteAlpha.300}"
+      _light: "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
+      _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
     }
   },
   sm: {
     value: {
-      base: "0px 4px 4px -1px {colors.blackAlpha.50}, 0px 0px 1px 1px {colors.blackAlpha.100}",
-      _dark: "0px 2px 4px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   md: {
     value: {
-      base: "0px 4px 8px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
-      _dark: "0px 4px 8px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   lg: {
     value: {
-      base: "0px 8px 16px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
-      _dark: "0px 8px 16px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   xl: {
     value: {
-      base: "0px 16px 24px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
-      _dark: "0px 16px 24px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   "2xl": {
     value: {
-      base: "0px 24px 40px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
-      _dark: "0px 24px 40px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  inner: {
+    value: {
+      _light: "inset 0 2px 4px 0 {black/5}",
+      _dark: "inset 0 2px 4px 0 black"
     }
   },
   inset: {
     value: {
-      base: "inset 0 0 0 1px {colors.blackAlpha.100}",
-      _dark: "inset 0 0 0 1px {colors.whiteAlpha.100}"
+      _light: "inset 0 1px 2px 0 {black/5}",
+      _dark: "inset 0 1px 2px 0 {colors.gray.300/5}"
     }
   }
 });
@@ -2305,7 +2326,7 @@ var appShellSlotRecipe = defineSlotRecipe({
     position: {
       static: {
         root: {
-          height: "100vh"
+          height: "100dvh"
         }
       },
       fullscreen: {
@@ -2316,18 +2337,12 @@ var appShellSlotRecipe = defineSlotRecipe({
       }
     },
     variant: {
-      plain: {},
-      raised: {
-        main: {
-          boxShadow: "xs",
-          zIndex: "layer-1"
-        }
-      }
+      plain: {}
     }
   },
   defaultVariants: {
     position: "static",
-    variant: "raised"
+    variant: "plain"
   }
 });
 
@@ -2338,7 +2353,6 @@ var gridListSlotRecipe = defineSlotRecipe2({
   slots: ["root", "item", "header", "cell"],
   base: {
     root: {
-      py: 2,
       position: "relative"
     },
     item: {
@@ -2347,35 +2361,14 @@ var gridListSlotRecipe = defineSlotRecipe2({
       alignItems: "center",
       justifyContent: "space-between",
       flex: 1,
-      cursor: "pointer",
       userSelect: "none",
-      transitionProperty: "common",
-      transitionDuration: "normal",
       borderRadius: "inherit",
       outline: "none",
-      _hover: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
       _focusVisible: {
         boxShadow: "outline"
       },
-      _focus: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
-      _active: {
-        bg: "blackAlpha.100",
-        _dark: {
-          bg: "whiteAlpha.100"
-        }
-      },
       _disabled: {
-        cursor: "inherit",
+        cursor: "disabled",
         opacity: 0.5,
         _hover: {
           bg: "transparent",
@@ -2397,50 +2390,92 @@ var gridListSlotRecipe = defineSlotRecipe2({
       position: "sticky",
       fontSize: "md",
       fontWeight: "semibold",
-      color: "muted"
+      color: "fg.muted"
     },
     cell: {
-      display: "flex",
       flexShrink: 0
     }
   },
   variants: {
+    interactive: {
+      true: {
+        item: {
+          cursor: "button",
+          transitionProperty: "bg",
+          transitionDuration: "fast",
+          _hover: {
+            bg: "bg.subtle"
+          },
+          _active: {
+            bg: "bg.subtle"
+          }
+        }
+      }
+    },
+    variant: {
+      simple: {},
+      rounded: {
+        item: {
+          borderRadius: "md",
+          mb: 0.5
+        }
+      }
+    },
     size: {
       sm: {
         root: {
-          fontSize: "sm"
+          textStyle: "sm",
+          py: 0.5
         },
         item: {
           py: 1,
-          px: 1
+          px: 2,
+          gap: 1
         },
         header: {
           py: 1,
-          px: 1
-        },
-        cell: {
-          px: 1
+          px: 2
         }
       },
       md: {
         root: {
-          fontSize: "md"
+          textStyle: "md",
+          py: 1
         },
         item: {
           py: 2,
-          px: 2
+          px: 3,
+          gap: 2
         },
         header: {
           py: 2,
-          px: 2
-        },
-        cell: {
-          px: 2
+          px: 3
         }
       }
     }
   },
+  compoundVariants: [
+    {
+      variant: "rounded",
+      size: "sm",
+      css: {
+        root: {
+          p: 1
+        }
+      }
+    },
+    {
+      variant: "rounded",
+      size: "md",
+      css: {
+        root: {
+          p: 2
+        }
+      }
+    }
+  ],
   defaultVariants: {
+    variant: "simple",
     size: "md"
   }
 });
@@ -2523,7 +2558,7 @@ var navbarSlotRecipe = defineSlotRecipe4({
       top: 0,
       insetX: 0,
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       transitionTimingFunction: "ease-in-out",
       _hidden: {
         transform: "translateY(-100%)"
@@ -2559,7 +2594,7 @@ var navbarSlotRecipe = defineSlotRecipe4({
       boxSizing: "border-box",
       borderRadius: "md",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       lineHeight: 1,
       _focusVisible: {
         outline: "none",
@@ -2626,7 +2661,8 @@ var baseStyleLabel = defineStyle({
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
-  minW: 0
+  minW: 0,
+  color: "fg"
 });
 var personaSlotRecipe = defineSlotRecipe5({
   className: "sui-persona",
@@ -2669,11 +2705,11 @@ var personaSlotRecipe = defineSlotRecipe5({
     label: baseStyleLabel,
     secondaryLabel: {
       ...baseStyleLabel,
-      color: "fg.muted"
+      color: "fg/60"
     },
     tertiaryLabel: {
       ...baseStyleLabel,
-      color: "fg.muted"
+      color: "fg/60"
     }
   },
   variants: {
@@ -2750,7 +2786,8 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
       cursor: "button",
       transitionProperty: "common",
       transitionDuration: "fast",
-      focusVisibleRing: "outside",
+      focusVisibleRing: "inside",
+      focusRingWidth: "1px",
       "& > svg": {
         boxSize: 4,
         color: "var(--sidebar-item-icon-color)"
@@ -2762,7 +2799,12 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
     endElement: {
       display: "flex",
       gap: "1px",
-      ms: "auto"
+      ms: "auto",
+      "& button": {
+        _hover: {
+          bg: "transparent"
+        }
+      }
     }
   },
   variants: {
@@ -2906,7 +2948,10 @@ var sidebarSlotRecipe = defineSlotRecipe7({
     },
     groupEndElement: {
       "& > button": {
-        boxSize: 6
+        boxSize: 6,
+        _hover: {
+          bg: "transparent"
+        }
       }
     },
     groupContent: {
@@ -3017,11 +3062,6 @@ var sidebarSlotRecipe = defineSlotRecipe7({
       },
       compact: {}
     },
-    variant: {
-      muted: {},
-      solid: {},
-      subtle: {}
-    },
     size: {
       md: {
         header: {
@@ -3041,7 +3081,6 @@ var sidebarSlotRecipe = defineSlotRecipe7({
   },
   defaultVariants: {
     mode: "collapsible",
-    variant: "muted",
     size: "md"
   }
 });
@@ -3709,7 +3748,7 @@ var cardSlotRecipe = defineSlotRecipe14({
       position: "relative",
       minWidth: "0",
       wordWrap: "break-word",
-      borderRadius: "l3",
+      borderRadius: "lg",
       color: "fg",
       textAlign: "start"
     },
@@ -3721,14 +3760,15 @@ var cardSlotRecipe = defineSlotRecipe14({
       fontSize: "sm"
     },
     header: {
-      paddingInline: "var(--card-padding)",
-      paddingTop: "var(--card-padding)",
+      padding: "var(--card-padding)",
+      paddingBlock: "calc(var(--card-padding) / 1.5)",
       display: "flex",
       flexDirection: "column",
       gap: "1.5"
     },
     body: {
       padding: "var(--card-padding)",
+      paddingBlock: "calc(var(--card-padding) / 1.5)",
       flex: "1",
       display: "flex",
       flexDirection: "column"
@@ -3737,15 +3777,15 @@ var cardSlotRecipe = defineSlotRecipe14({
       display: "flex",
       alignItems: "center",
       gap: "2",
-      paddingInline: "var(--card-padding)",
-      paddingBottom: "var(--card-padding)"
+      padding: "var(--card-padding)",
+      paddingBlock: "calc(var(--card-padding) / 1.5)"
     }
   },
   variants: {
     size: {
       sm: {
         root: {
-          "--card-padding": "spacing.4"
+          "--card-padding": "spacing.2"
         },
         title: {
           textStyle: "md"
@@ -3753,7 +3793,7 @@ var cardSlotRecipe = defineSlotRecipe14({
       },
       md: {
         root: {
-          "--card-padding": "spacing.6"
+          "--card-padding": "spacing.3"
         },
         title: {
           textStyle: "lg"
@@ -3761,7 +3801,7 @@ var cardSlotRecipe = defineSlotRecipe14({
       },
       lg: {
         root: {
-          "--card-padding": "spacing.7"
+          "--card-padding": "spacing.6"
         },
         title: {
           textStyle: "xl"
@@ -3772,19 +3812,41 @@ var cardSlotRecipe = defineSlotRecipe14({
       elevated: {
         root: {
           bg: "bg.panel",
-          boxShadow: "md"
+          boxShadow: "md",
+          borderWidth: "0.5px",
+          borderColor: "border",
+          _pressable: {
+            transitionProperty: "common",
+            transitionDuration: "fast",
+            _hover: {
+              borderColor: "border.emphasized"
+            }
+          }
         }
       },
       outline: {
         root: {
           bg: "bg.panel",
           borderWidth: "1px",
-          borderColor: "border"
+          borderColor: "border",
+          _pressable: {
+            transitionProperty: "common",
+            transitionDuration: "fast",
+            _hover: {
+              borderColor: "border.emphasized"
+            }
+          }
         }
       },
       subtle: {
         root: {
-          bg: "bg.muted"
+          bg: "colorPalette.muted"
+        }
+      },
+      solid: {
+        root: {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast"
         }
       }
     }
@@ -4071,14 +4133,14 @@ var collapsibleSlotRecipe = defineSlotRecipe17({
   className: "chakra-collapsible",
   base: {
     content: {
-      overflow: "hidden",
       _open: {
         animationName: "expand-height, fade-in",
         animationDuration: "moderate"
       },
       _closed: {
         animationName: "collapse-height, fade-out",
-        animationDuration: "moderate"
+        animationDuration: "moderate",
+        overflow: "hidden"
       }
     }
   }
@@ -4608,7 +4670,7 @@ var editableSlotRecipe = defineSlotRecipe21({
       display: "inline-flex",
       alignItems: "center",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       cursor: "text",
       _hover: {
         bg: "bg.muted"
@@ -4623,7 +4685,7 @@ var editableSlotRecipe = defineSlotRecipe21({
       py: "1",
       px: "1",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       width: "full",
       focusVisibleRing: "inside",
       focusRingWidth: "2px",
@@ -4673,7 +4735,12 @@ var emptyStateSlotRecipe = defineSlotRecipe22({
   className: "chakra-empty-state",
   base: {
     root: {
-      width: "full"
+      width: "full",
+      height: "full",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
     },
     content: {
       display: "flex",
@@ -4804,12 +4871,21 @@ var fieldSlotRecipe = defineSlotRecipe23({
       },
       horizontal: {
         root: {
-          flexDirection: "row",
+          display: "grid",
+          gridTemplateColumns: "var(--field-label-width, 8rem) 1fr",
           alignItems: "center",
-          justifyContent: "space-between"
+          "&:has(textarea)": {
+            alignItems: "flex-start",
+            "& label": {
+              pt: 1.5
+            }
+          }
         },
-        label: {
-          flex: "0 0 var(--field-label-width, 80px)"
+        helperText: {
+          gridColumn: 2
+        },
+        errorText: {
+          gridColumn: 2
         }
       }
     }
@@ -5196,6 +5272,7 @@ var selectSlotRecipe = defineSlotRecipe28({
       userSelect: "none",
       textAlign: "start",
       focusVisibleRing: "inside",
+      focusRingWidth: 0,
       _placeholderShown: {
         color: "fg.muted"
       },
@@ -5204,6 +5281,12 @@ var selectSlotRecipe = defineSlotRecipe28({
       },
       _invalid: {
         borderColor: "border.error"
+      },
+      _hover: {
+        borderColor: "border.emphasized",
+        _focusVisible: {
+          borderColor: "var(--focus-ring-color)"
+        }
       }
     },
     indicatorGroup: {
@@ -5638,7 +5721,8 @@ var numberInputSlotRecipe = defineSlotRecipe30({
     root: {
       position: "relative",
       zIndex: "0",
-      isolation: "isolate"
+      isolation: "isolate",
+      width: "full"
     },
     input: {
       ...inputRecipe.base,
@@ -6415,15 +6499,16 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
   slots: segmentGroupAnatomy.keys(),
   base: {
     root: {
-      "--segment-radius": "radii.l2",
-      borderRadius: "l2",
+      "--segment-radius": "radii.md",
+      borderRadius: "md",
       display: "inline-flex",
       boxShadow: "inset",
       minW: "max-content",
       textAlign: "center",
       position: "relative",
       isolation: "isolate",
-      bg: "bg.muted"
+      bg: "bg.muted",
+      borderWidth: "1px"
     },
     item: {
       display: "flex",
@@ -6431,23 +6516,31 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
       userSelect: "none",
       fontSize: "sm",
       position: "relative",
-      color: "fg",
+      color: "fg.subtle",
+      cursor: "button",
       borderRadius: "var(--segment-radius)",
       _disabled: {
         opacity: "0.5"
       },
+      _hover: {
+        color: "fg"
+      },
       "&:has(input:focus-visible)": {
-        focusRing: "outside"
+        focusRing: "inside",
+        focusRingWidth: "1px"
       },
       _before: {
         content: '""',
         position: "absolute",
         insetInlineStart: 0,
-        insetBlock: "1.5",
+        insetBlock: "0",
         bg: "border",
         width: "1px",
         transition: "opacity 0.2s"
       },
+      _checked: {
+        color: "fg"
+      },
       "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
         _before: {
           opacity: "0"
@@ -6456,13 +6549,17 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
       "&[data-state=checked][data-ssr]": {
         shadow: "sm",
         bg: "bg",
+        color: "fg",
         borderRadius: "var(--segment-radius)"
       }
     },
     indicator: {
       shadow: "sm",
       pos: "absolute",
-      bg: { _light: "bg", _dark: "bg.emphasized" },
+      bg: {
+        base: "bg",
+        _dark: "bg.emphasized"
+      },
       width: "var(--width)",
       height: "var(--height)",
       top: "var(--top)",
@@ -6485,7 +6582,7 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
       },
       sm: {
         root: {
-          height: "8"
+          height: "7"
         },
         item: {
           textStyle: "sm",
@@ -6495,7 +6592,7 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
       },
       md: {
         root: {
-          height: "10"
+          height: "8"
         },
         item: {
           textStyle: "sm",
@@ -7094,9 +7191,7 @@ var switchSlotRecipe = defineSlotRecipe43({
         cursor: "not-allowed"
       },
       _invalid: {
-        outline: "2px solid",
-        outlineColor: "border.error",
-        outlineOffset: "2px"
+        focusRingColor: "border.error"
       }
     },
     thumb: {
@@ -7401,8 +7496,7 @@ var tabsSlotRecipe = defineSlotRecipe45({
       gap: "2",
       _focusVisible: {
         zIndex: 1,
-        outline: "2px solid",
-        outlineColor: "colorPalette.focusRing"
+        focusVisibleRing: "outside"
       },
       _disabled: {
         cursor: "not-allowed",
@@ -8610,12 +8704,67 @@ var zIndices = defineTokens16.zIndex({
   max: { value: 2147483647 }
 });
 
+// src/theme/utilities.ts
+var createFocusRing = (selector) => {
+  return {
+    values: ["outside", "inside", "mixed", "none"],
+    transform(value, { token }) {
+      var _a8;
+      const focusRingColor = token("colors.colorPalette.focusRing");
+      const styles = {
+        inside: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            outlineOffset: "0px",
+            outlineWidth: "var(--focus-ring-width, 0)",
+            outlineColor: "var(--focus-ring-color)",
+            outlineStyle: "var(--focus-ring-style, solid)",
+            borderColor: "var(--focus-ring-color)"
+          }
+        },
+        outside: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            outlineWidth: "var(--focus-ring-width, 1px)",
+            outlineOffset: "var(--focus-ring-offset, 2px)",
+            outlineStyle: "var(--focus-ring-style, solid)",
+            outlineColor: "var(--focus-ring-color)"
+          }
+        },
+        mixed: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            outlineWidth: "var(--focus-ring-width, 3px)",
+            outlineStyle: "var(--focus-ring-style, solid)",
+            outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
+            borderColor: "var(--focus-ring-color)"
+          }
+        },
+        none: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            outline: "none"
+          }
+        }
+      };
+      return (_a8 = styles[value]) != null ? _a8 : {};
+    }
+  };
+};
+var utilities = {
+  focusRing: createFocusRing("&:is(:focus, [data-focus])"),
+  focusVisibleRing: createFocusRing(
+    "&:is(:focus-visible, [data-focus-visible])"
+  )
+};
+
 // src/theme/index.ts
 var defaultThemeConfig = defineConfig({
   preflight: true,
   cssVarsPrefix: "chakra",
   cssVarsRoot: ":where(html, .chakra-theme)",
   globalCss,
+  utilities,
   theme: {
     breakpoints,
     keyframes,
@@ -8654,6 +8803,11 @@ var defaultThemeConfig = defineConfig({
 
 // src/preset.ts
 var defaultConfig = mergeConfigs(defaultBaseConfig, defaultThemeConfig);
+var _a7;
+defaultConfig.utilities = Object.assign(
+  (_a7 = defaultConfig.utilities) != null ? _a7 : {},
+  utilities
+);
 var defaultSystem = createSystem(defaultConfig);
 
 // src/index.ts
@@ -8672,6 +8826,7 @@ export {
   EmptyState,
   grid_list_exports as GridList,
   IconBadge,
+  IconButton,
   InputGroup,
   Link,
   loading_overlay_exports as LoadingOverlay,