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

package/dist/index.js

@@ -1,29 +1,40 @@
 import {
-  Tooltip
-} from "./chunk-QSNSWCTM.js";
+  steps_exports
+} from "./chunk-VZG7EJ64.js";
+import {
+  Switch
+} from "./chunk-SA3OGTOO.js";
 import {
   Toaster,
   toast
 } from "./chunk-HELHPHIQ.js";
+import {
+  Tooltip
+} from "./chunk-QSNSWCTM.js";
 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 {
-  SegmentedControl
-} from "./chunk-SKXSBAOS.js";
 import {
   SearchInput
 } from "./chunk-46ISJZBS.js";
+import {
+  SegmentedControl
+} from "./chunk-SKXSBAOS.js";
 import {
   namespace_exports as namespace_exports3
 } from "./chunk-BU7QENBQ.js";
-import {
-  steps_exports
-} from "./chunk-VZG7EJ64.js";
 import {
   sidebar_exports,
   useSidebar,
@@ -31,8 +42,15 @@ import {
   useSidebarStyles
 } from "./chunk-GGAKUS66.js";
 import {
-  Switch
-} from "./chunk-SA3OGTOO.js";
+  Link
+} from "./chunk-TZBAM4AD.js";
+import {
+  loading_overlay_exports,
+  useLoadingOverlayStyles
+} from "./chunk-7VSTNV2B.js";
+import {
+  Spinner
+} from "./chunk-32JGENDB.js";
 import {
   menu_exports
 } from "./chunk-C7B3ELC4.js";
@@ -40,29 +58,29 @@ import {
   navbar_exports
 } from "./chunk-Q6SNJJO2.js";
 import {
-  NumberInput
-} from "./chunk-ULAJ3JEO.js";
+  SuiContext,
+  SuiProvider,
+  useLink,
+  useSui
+} from "./chunk-O2WVT2BP.js";
 import {
-  loading_overlay_exports,
-  useLoadingOverlayStyles
-} from "./chunk-7VSTNV2B.js";
+  NumberInput
+} from "./chunk-S5J6REMC.js";
 import {
-  Spinner
-} from "./chunk-32JGENDB.js";
+  pagination_exports
+} from "./chunk-MLJN6IOJ.js";
 import {
   PasswordInput
 } from "./chunk-CD2JUFI2.js";
 import {
-  pagination_exports
-} from "./chunk-MLJN6IOJ.js";
+  InputGroup
+} from "./chunk-PKI6YH2V.js";
 import {
-  Persona,
-  PersonaAvatar,
-  defaultPresenceOptions
-} from "./chunk-4VH4IGVF.js";
+  Command
+} from "./chunk-UASXI64E.js";
 import {
-  PinInput
-} from "./chunk-2EUACKRH.js";
+  namespace_exports
+} from "./chunk-72LEGXHY.js";
 import {
   namespace_exports as namespace_exports2
 } from "./chunk-WS5XGFSL.js";
@@ -76,21 +94,9 @@ import {
   IconBadge
 } from "./chunk-I2RXEKTB.js";
 import {
-  namespace_exports
-} from "./chunk-72LEGXHY.js";
+  IconButton
+} from "./chunk-QVFJV6HJ.js";
 import "./chunk-KTLWEUNW.js";
-import {
-  InputGroup
-} from "./chunk-PKI6YH2V.js";
-import {
-  Link
-} from "./chunk-TZBAM4AD.js";
-import {
-  SuiContext,
-  SuiProvider,
-  useLink,
-  useSui
-} from "./chunk-O2WVT2BP.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}"
     }
   }
 });
@@ -2640,7 +2661,8 @@ var baseStyleLabel = defineStyle({
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
-  minW: 0
+  minW: 0,
+  color: "fg"
 });
 var personaSlotRecipe = defineSlotRecipe5({
   className: "sui-persona",
@@ -2683,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: {
@@ -2764,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)"
@@ -2776,7 +2799,12 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
     endElement: {
       display: "flex",
       gap: "1px",
-      ms: "auto"
+      ms: "auto",
+      "& button": {
+        _hover: {
+          bg: "transparent"
+        }
+      }
     }
   },
   variants: {
@@ -2920,7 +2948,10 @@ var sidebarSlotRecipe = defineSlotRecipe7({
     },
     groupEndElement: {
       "& > button": {
-        boxSize: 6
+        boxSize: 6,
+        _hover: {
+          bg: "transparent"
+        }
       }
     },
     groupContent: {
@@ -3031,11 +3062,6 @@ var sidebarSlotRecipe = defineSlotRecipe7({
       },
       compact: {}
     },
-    variant: {
-      muted: {},
-      solid: {},
-      subtle: {}
-    },
     size: {
       md: {
         header: {
@@ -3055,7 +3081,6 @@ var sidebarSlotRecipe = defineSlotRecipe7({
   },
   defaultVariants: {
     mode: "collapsible",
-    variant: "muted",
     size: "md"
   }
 });
@@ -3723,7 +3748,7 @@ var cardSlotRecipe = defineSlotRecipe14({
       position: "relative",
       minWidth: "0",
       wordWrap: "break-word",
-      borderRadius: "l3",
+      borderRadius: "lg",
       color: "fg",
       textAlign: "start"
     },
@@ -3735,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"
@@ -3751,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"
@@ -3767,7 +3793,7 @@ var cardSlotRecipe = defineSlotRecipe14({
       },
       md: {
         root: {
-          "--card-padding": "spacing.6"
+          "--card-padding": "spacing.3"
         },
         title: {
           textStyle: "lg"
@@ -3775,7 +3801,7 @@ var cardSlotRecipe = defineSlotRecipe14({
       },
       lg: {
         root: {
-          "--card-padding": "spacing.7"
+          "--card-padding": "spacing.6"
         },
         title: {
           textStyle: "xl"
@@ -3786,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"
         }
       }
     }
@@ -4085,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"
       }
     }
   }
@@ -4687,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",
@@ -4818,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
         }
       }
     }
@@ -5210,6 +5272,7 @@ var selectSlotRecipe = defineSlotRecipe28({
       userSelect: "none",
       textAlign: "start",
       focusVisibleRing: "inside",
+      focusRingWidth: 0,
       _placeholderShown: {
         color: "fg.muted"
       },
@@ -5218,6 +5281,12 @@ var selectSlotRecipe = defineSlotRecipe28({
       },
       _invalid: {
         borderColor: "border.error"
+      },
+      _hover: {
+        borderColor: "border.emphasized",
+        _focusVisible: {
+          borderColor: "var(--focus-ring-color)"
+        }
       }
     },
     indicatorGroup: {
@@ -5652,7 +5721,8 @@ var numberInputSlotRecipe = defineSlotRecipe30({
     root: {
       position: "relative",
       zIndex: "0",
-      isolation: "isolate"
+      isolation: "isolate",
+      width: "full"
     },
     input: {
       ...inputRecipe.base,
@@ -6429,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",
@@ -6445,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"
@@ -6470,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)",
@@ -6499,7 +6582,7 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
       },
       sm: {
         root: {
-          height: "8"
+          height: "7"
         },
         item: {
           textStyle: "sm",
@@ -6509,7 +6592,7 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
       },
       md: {
         root: {
-          height: "10"
+          height: "8"
         },
         item: {
           textStyle: "sm",
@@ -7108,9 +7191,7 @@ var switchSlotRecipe = defineSlotRecipe43({
         cursor: "not-allowed"
       },
       _invalid: {
-        outline: "2px solid",
-        outlineColor: "border.error",
-        outlineOffset: "2px"
+        focusRingColor: "border.error"
       }
     },
     thumb: {
@@ -7415,8 +7496,7 @@ var tabsSlotRecipe = defineSlotRecipe45({
       gap: "2",
       _focusVisible: {
         zIndex: 1,
-        outline: "2px solid",
-        outlineColor: "colorPalette.focusRing"
+        focusVisibleRing: "outside"
       },
       _disabled: {
         cursor: "not-allowed",
@@ -8624,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,
@@ -8668,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
@@ -8686,6 +8826,7 @@ export {
   EmptyState,
   grid_list_exports as GridList,
   IconBadge,
+  IconButton,
   InputGroup,
   Link,
   loading_overlay_exports as LoadingOverlay,