@dynatrace/strato-components 1.16.1 → 1.17.0

package/content/skeleton/Skeleton.css

@@ -1,27 +1,27 @@
-._1a1ozfd0-1-16-1 {
+._1a1ozfd0-1-17-0 {
   position: relative;
   overflow: hidden;
 }
-._1a1ozfd1-1-16-1 {
+._1a1ozfd1-1-17-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd2-1-16-1 {
+._1a1ozfd2-1-17-0 {
   border-radius: 9999px;
 }
-._1a1ozfd3-1-16-1 {
+._1a1ozfd3-1-17-0 {
   width: 100%;
   height: 100%;
 }
-._1a1ozfd4-1-16-1 stop {
+._1a1ozfd4-1-17-0 stop {
   stop-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd5-1-16-1 {
+._1a1ozfd5-1-17-0 {
   width: 100%;
   height: 100%;
   fill: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
 @media (prefers-reduced-motion) {
-  ._1a1ozfd6-1-16-1 {
+  ._1a1ozfd6-1-17-0 {
     display: contents;
   }
 }

package/content/skeleton/Skeleton.js

@@ -37,6 +37,7 @@ var import_react = require("react");
 var import_Skeleton_css = require("./Skeleton.sty.js");
 var import_utils = require("./utils.js");
 var import_useId = require("../../core/hooks/useId.js");
+const COMPONENT_NAME = "Skeleton";
 const Skeleton = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
     const {
@@ -58,6 +59,7 @@ const Skeleton = (0, import_react.forwardRef)(
         className: (0, import_clsx.default)((0, import_Skeleton_css.skeletonPlaceholderCSS)({ variant }), consumerClassName),
         style: { width, height, ...consumerStyle },
         ...remainingProps,
+        "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: import_Skeleton_css.skeletonSvgCSS, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_utils.SkeletonGradient, { id: gradientId }) }),
@@ -69,3 +71,4 @@ const Skeleton = (0, import_react.forwardRef)(
     );
   }
 );
+Skeleton.displayName = COMPONENT_NAME;

package/content/skeleton/Skeleton.sty.js

@@ -27,8 +27,8 @@ __export(Skeleton_css_exports, {
 module.exports = __toCommonJS(Skeleton_css_exports);
 var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-1-16-1", variantClassNames: { variant: { "default": "_1a1ozfd1-1-16-1", rounded: "_1a1ozfd2-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-1-16-1";
-var skeletonSvgCSS = "_1a1ozfd3-1-16-1";
-var skeletonSvgGradientCSS = "_1a1ozfd4-1-16-1";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-1-16-1";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-1-17-0", variantClassNames: { variant: { "default": "_1a1ozfd1-1-17-0", rounded: "_1a1ozfd2-1-17-0" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-1-17-0";
+var skeletonSvgCSS = "_1a1ozfd3-1-17-0";
+var skeletonSvgGradientCSS = "_1a1ozfd4-1-17-0";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-1-17-0";

package/content/skeleton/SkeletonText.js

@@ -26,6 +26,7 @@ var import_react = require("react");
 var import_Skeleton_css = require("./Skeleton.sty.js");
 var import_utils = require("./utils.js");
 var import_useId = require("../../core/hooks/useId.js");
+const COMPONENT_NAME = "SkeletonText";
 const lineHeight = 12;
 const linePadding = 8;
 const baseYOffset = linePadding * 0.5;
@@ -61,6 +62,7 @@ const SkeletonText = (0, import_react.forwardRef)(
           ...consumerStyle
         },
         ...remainingProps,
+        "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: import_Skeleton_css.skeletonSvgCSS, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_utils.SkeletonGradient, { id: gradientId }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mask", { id: maskId, children: new Array(lines).fill(null).map((_, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -86,3 +88,4 @@ const SkeletonText = (0, import_react.forwardRef)(
     );
   }
 );
+SkeletonText.displayName = COMPONENT_NAME;

package/core/index.d.ts

@@ -3,6 +3,7 @@ export { FocusScope, type FocusScopeProps, } from './components/focus-scope/Focu
 export { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';
 export { useCurrentTheme } from './hooks/useCurrentTheme.js';
 export { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';
+export { type VariantType, type UseFocusRingProps, type FocusRingProps, useFocusRing, } from './styles/useFocusRing.js';
 export { FocusProvider as _FocusProvider, type Modality as _Modality, } from './providers/FocusProvider.js';
 export type { MaskingProps } from './types/masking-props.js';
 export type { DataTestId } from './types/data-props.js';

package/core/index.js

@@ -34,6 +34,7 @@ __export(core_exports, {
   _useFocusContext: () => import_useFocusContext.useFocusContext,
   _useSafeForwardProps: () => import_useSafeForwardProps.useSafeForwardProps,
   useCurrentTheme: () => import_useCurrentTheme.useCurrentTheme,
+  useFocusRing: () => import_useFocusRing.useFocusRing,
   useId: () => import_useId.useId
 });
 module.exports = __toCommonJS(core_exports);
@@ -41,6 +42,7 @@ var import_AppRoot = require("./components/app-root/AppRoot.js");
 var import_FocusScope = require("./components/focus-scope/FocusScope.js");
 var import_useCurrentTheme = require("./hooks/useCurrentTheme.js");
 var import_useFocusContext = require("./hooks/useFocusContext.js");
+var import_useFocusRing = require("./styles/useFocusRing.js");
 var import_FocusProvider = require("./providers/FocusProvider.js");
 var import_attempt_focus = require("./utils/focus-management/attempt-focus.js");
 var import_focus_first_descendant = require("./utils/focus-management/focus-first-descendant.js");

package/core/styles/focusRing.css

@@ -1,75 +1,75 @@
-._z2r50s3-1-16-1 {
+._z2r50s3-1-17-0 {
   outline: none;
 }
-._z2r50s3-1-16-1:focus-visible {
+._z2r50s3-1-17-0:focus-visible {
   outline: none;
 }
-._z2r50s4-1-16-1 {
+._z2r50s4-1-17-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-16-1);
-  background-color: var(--_z2r50s2-1-16-1);
-}
-._z2r50s5-1-16-1._z2r50s5-1-16-1 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-16-1), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-16-1);
-}
-._z2r50s6-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50s7-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50s8-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50s9-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50sa-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._z2r50sb-1-16-1:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-17-0);
+  background-color: var(--_z2r50s2-1-17-0);
+}
+._z2r50s5-1-17-0._z2r50s5-1-17-0 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-17-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-17-0);
+}
+._z2r50s6-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50s7-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50s8-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50s9-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50sa-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._z2r50sb-1-17-0:focus-within {
   outline: none;
 }
-._z2r50sc-1-16-1:focus-within {
+._z2r50sc-1-17-0._z2r50sc-1-17-0:focus-within {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-16-1);
-  background-color: var(--_z2r50s2-1-16-1);
-}
-._z2r50sd-1-16-1:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-16-1), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-16-1);
-}
-._z2r50se-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50sf-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50sg-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50sh-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50si-1-16-1 {
-  --_z2r50s0-1-16-1: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-1-16-1: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-1-16-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-17-0);
+  background-color: var(--_z2r50s2-1-17-0);
+}
+._z2r50sd-1-17-0._z2r50sd-1-17-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-17-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-17-0);
+}
+._z2r50se-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50sf-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50sg-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50sh-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50si-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }

package/core/styles/focusRing.sty.d.ts

@@ -57,15 +57,19 @@ export declare const focusRingCSS: import("@vanilla-extract/recipes").RuntimeFn<
 export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes").RuntimeFn<{
     minimal: {
         true: {
-            ':focus-within': {
-                borderRadius: string;
-                boxShadow: string;
-                backgroundColor: `var(--${string})`;
+            selectors: {
+                '&&:focus-within': {
+                    borderRadius: string;
+                    boxShadow: string;
+                    backgroundColor: `var(--${string})`;
+                };
             };
         };
         false: {
-            ':focus-within': {
-                boxShadow: string;
+            selectors: {
+                '&&:focus-within': {
+                    boxShadow: string;
+                };
             };
         };
     };

package/core/styles/focusRing.sty.js

@@ -24,5 +24,5 @@ __export(focusRing_css_exports, {
 module.exports = __toCommonJS(focusRing_css_exports);
 var import_focusRing_css_ts_vanilla = require("./focusRing.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-16-1", variantClassNames: { minimal: { true: "_z2r50s4-1-16-1", false: "_z2r50s5-1-16-1" }, variant: { neutral: "_z2r50s6-1-16-1", primary: "_z2r50s7-1-16-1", success: "_z2r50s8-1-16-1", warning: "_z2r50s9-1-16-1", critical: "_z2r50sa-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-16-1", variantClassNames: { minimal: { true: "_z2r50sc-1-16-1", false: "_z2r50sd-1-16-1" }, variant: { neutral: "_z2r50se-1-16-1", primary: "_z2r50sf-1-16-1", success: "_z2r50sg-1-16-1", warning: "_z2r50sh-1-16-1", critical: "_z2r50si-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-17-0", variantClassNames: { minimal: { true: "_z2r50s4-1-17-0", false: "_z2r50s5-1-17-0" }, variant: { neutral: "_z2r50s6-1-17-0", primary: "_z2r50s7-1-17-0", success: "_z2r50s8-1-17-0", warning: "_z2r50s9-1-17-0", critical: "_z2r50sa-1-17-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-17-0", variantClassNames: { minimal: { true: "_z2r50sc-1-17-0", false: "_z2r50sd-1-17-0" }, variant: { neutral: "_z2r50se-1-17-0", primary: "_z2r50sf-1-17-0", success: "_z2r50sg-1-17-0", warning: "_z2r50sh-1-17-0", critical: "_z2r50si-1-17-0" } }, defaultVariants: {}, compoundVariants: [] });

package/core/styles/focusRingStatic.css

@@ -0,0 +1,44 @@
+._z0fq9b4-1-17-0 {
+  outline: none;
+  box-shadow: none;
+}
+._z0fq9b5-1-17-0 {
+  --_z0fq9b3-1-17-0: var(--dt-borders-width-default, 1px);
+  --_z0fq9b2-1-17-0: 0 0 0 var(--_z0fq9b3-1-17-0) var(--_z0fq9b0-1-17-0) inset;
+}
+._z0fq9b6-1-17-0 {
+  --_z0fq9b3-1-17-0: var(--dt-borders-width-emphasized, 2px);
+  --_z0fq9b2-1-17-0: 0 0 0 var(--_z0fq9b3-1-17-0) var(--_z0fq9b0-1-17-0) inset, 0 0 0 calc(var(--_z0fq9b3-1-17-0) + 1px) var(--_z0fq9b1-1-17-0) inset;
+}
+._z0fq9b7-1-17-0 {
+  --_z0fq9b2-1-17-0: none;
+}
+._z0fq9b8-1-17-0:focus-visible {
+  box-shadow: var(--_z0fq9b2-1-17-0);
+}
+._z0fq9b9-1-17-0:focus-within {
+  box-shadow: var(--_z0fq9b2-1-17-0);
+}
+._z0fq9ba-1-17-0:focus {
+  box-shadow: var(--_z0fq9b2-1-17-0);
+}
+._z0fq9bb-1-17-0 {
+  --_z0fq9b0-1-17-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z0fq9b1-1-17-0: var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._z0fq9bc-1-17-0 {
+  --_z0fq9b0-1-17-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z0fq9b1-1-17-0: var(--dt-colors-border-primary-default, #d5dbf6);
+}
+._z0fq9bd-1-17-0 {
+  --_z0fq9b0-1-17-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z0fq9b1-1-17-0: var(--dt-colors-border-success-default, #d3dedd);
+}
+._z0fq9be-1-17-0 {
+  --_z0fq9b0-1-17-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z0fq9b1-1-17-0: var(--dt-colors-border-warning-default, #f9ebdb);
+}
+._z0fq9bf-1-17-0 {
+  --_z0fq9b0-1-17-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z0fq9b1-1-17-0: var(--dt-colors-border-critical-default, #f6d6d5);
+}

package/core/styles/focusRingStatic.sty.d.ts

@@ -0,0 +1,77 @@
+declare const outerColor: `var(--${string})`;
+declare const innerColor: `var(--${string})`;
+declare const boxShadow: `var(--${string})`;
+declare const width: `var(--${string})`;
+export declare const focusRingStatic: import("@vanilla-extract/recipes").RuntimeFn<{
+    minimal: {
+        true: {
+            vars: {
+                [width]: string;
+                [boxShadow]: string;
+            };
+        };
+        false: {
+            vars: {
+                [width]: string;
+                [boxShadow]: string;
+            };
+        };
+    };
+    disabled: {
+        true: {
+            vars: {
+                [boxShadow]: string;
+            };
+        };
+    };
+    when: {
+        'focus-visible': {
+            ':focus-visible': {
+                boxShadow: `var(--${string})`;
+            };
+        };
+        'focus-within': {
+            ':focus-within': {
+                boxShadow: `var(--${string})`;
+            };
+        };
+        focus: {
+            ':focus': {
+                boxShadow: `var(--${string})`;
+            };
+        };
+    };
+    color: {
+        neutral: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+        success: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+        critical: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+    };
+}>;
+export {};

package/core/styles/focusRingStatic.sty.js

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var focusRingStatic_css_exports = {};
+__export(focusRingStatic_css_exports, {
+  focusRingStatic: () => focusRingStatic
+});
+module.exports = __toCommonJS(focusRingStatic_css_exports);
+var import_focusRingStatic_css_ts_vanilla = require("./focusRingStatic.css");
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-1-17-0", variantClassNames: { minimal: { true: "_z0fq9b5-1-17-0", false: "_z0fq9b6-1-17-0" }, disabled: { true: "_z0fq9b7-1-17-0" }, when: { "focus-visible": "_z0fq9b8-1-17-0", "focus-within": "_z0fq9b9-1-17-0", focus: "_z0fq9ba-1-17-0" }, color: { neutral: "_z0fq9bb-1-17-0", primary: "_z0fq9bc-1-17-0", success: "_z0fq9bd-1-17-0", warning: "_z0fq9be-1-17-0", critical: "_z0fq9bf-1-17-0" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });

package/core/styles/useFocusRing.d.ts

@@ -1,7 +1,7 @@
 import { type FocusEvent as ReactFocusEvent } from 'react';
-/** @internal */
+/** @public */
 export type VariantType = 'neutral' | 'primary' | 'success' | 'warning' | 'critical';
-/** @internal */
+/** @public */
 export type UseFocusRingProps = {
     /**
      * A minimal focus outline is available for smaller content elements like links. This variant is applied when set to true.
@@ -27,20 +27,21 @@ export type UseFocusRingProps = {
      */
     disabled?: boolean;
 };
+/** @public */
 export type FocusRingProps = {
     /** The focus styles that depend on modality. */
     focusClassName: string;
     /** Focus handlers used to manage the focus state. Must be applied to the element that receives the focus.*/
     focusProps: {
-        onFocus: (e: ReactFocusEvent) => void;
-        onBlur: (e: ReactFocusEvent) => void;
+        onFocus?: (e: ReactFocusEvent) => void;
+        onBlur?: (e: ReactFocusEvent) => void;
     };
     /** Whether or not the element got focus via keyboard. */
     isFocusVisible: boolean;
 };
 /**
  * Custom hook used to determine focus styling depending on modality.
- * Returns the css classes (vanilla) that can be applied to the component in order to show the correct focus outline.
- * @internal
+ * Returns the css classNames that can be applied to the component in order to show the correct focus outline.
+ * @public
  */
 export declare function useFocusRing(props?: UseFocusRingProps): FocusRingProps;

package/core/styles/useFocusRing.js

@@ -39,20 +39,20 @@ function useFocusRing(props = {}) {
       setIsFocused(false);
     }
   }, [disabled]);
-  const onBlur = (0, import_react.useCallback)((e) => {
-    if (e.currentTarget === e.target) {
-      setIsFocused(false);
-    }
-  }, []);
-  const onFocus = (0, import_react.useCallback)((e) => {
-    if (e.currentTarget === e.target) {
-      setIsFocused(true);
-    }
+  const focusProps = (0, import_react.useMemo)(() => {
+    return {
+      onBlur: (event) => {
+        if (event.currentTarget === event.target) {
+          setIsFocused(false);
+        }
+      },
+      onFocus: (event) => {
+        if (event.currentTarget === event.target) {
+          setIsFocused(true);
+        }
+      }
+    };
   }, []);
-  const focusProps = {
-    onFocus,
-    onBlur
-  };
   if ((ignoreModality || modality === "keyboard") && isFocused || focusWithin) {
     if (isMinimal) {
       return {