@bento/focus-lock 0.0.1 → 0.0.3

package/README.md

@@ -18,19 +18,19 @@ The following properties are available to be used on the `FocusLock` component:
 
 | Prop | Type | Required | Description |
 |------|------|----------|------------|
-| `contain` | `boolean` | No | Whether to contain focus within the scope.
+| `contain` | `boolean \| undefined` | No | Whether to contain focus within the scope.
 When true, focus will cycle between focusable elements within the scope. |
-| `restoreFocus` | `boolean` | No | Whether to restore focus to the previously focused element when the focus scope unmounts. |
-| `autoFocus` | `boolean` | No | Whether to automatically focus the first focusable element when the focus scope mounts. |
+| `restoreFocus` | `boolean \| undefined` | No | Whether to restore focus to the previously focused element when the focus scope unmounts. |
+| `autoFocus` | `boolean \| undefined` | No | Whether to automatically focus the first focusable element when the focus scope mounts. |
 | `children` | `ReactNode` | No | The content to render inside the focus lock.
 Can be a single element or multiple elements. |
-| `onFocusEnter` | `(e: FocusEvent<Element, Element>) => void` | No | Callback fired when focus enters the scope |
-| `onFocusLeave` | `(e: FocusEvent<Element, Element>) => void` | No | Callback fired when focus leaves the scope |
-| `className` | `string \| ((state: FocusLockState) => string)` | No | Render prop for className |
-| `style` | `((state: FocusLockState) => CSSProperties) \| CSSProperties` | No | Render prop for style |
-| `slot` | `string` | No | A named part of a component that can be customized. This is implemented by the consuming component.
+| `onFocusEnter` | `((e: FocusEvent<Element, Element>) => void) \| undefined` | No | Callback fired when focus enters the scope |
+| `onFocusLeave` | `((e: FocusEvent<Element, Element>) => void) \| undefined` | No | Callback fired when focus leaves the scope |
+| `className` | `string \| ((state: FocusLockState) => string) \| undefined` | No | Render prop for className |
+| `style` | `((state: FocusLockState) => CSSProperties) \| CSSProperties \| undefined` | No | Render prop for style |
+| `slot` | `string \| undefined` | No | A named part of a component that can be customized. This is implemented by the consuming component.
 The exposed slot names of a component are available in the components documentation. |
-| `slots` | `Record<string, object \| Function>` | No | An object that contains the customizations for the slots.
+| `slots` | `Record<string, object \| Function> \| undefined` | No | An object that contains the customizations for the slots.
 The main way you interact with the slot system as a consumer. |
 
 For all other properties specified on the `FocusLock` component, they will be

package/dist/index.cjs

@@ -1,44 +1,131 @@
-'use strict';
-
-var React = require('react');
-var useDataAttributes = require('@bento/use-data-attributes');
-var interactions = require('@react-aria/interactions');
-var slots = require('@bento/slots');
-var focus = require('@react-aria/focus');
-var useProps = require('@bento/use-props');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-// src/index.tsx
-var FocusLock = slots.withSlots("BentoFocusLock", function FocusLock2(args) {
-  const { contain = false, restoreFocus = false, autoFocus = false, children, onFocusEnter, onFocusLeave } = args;
-  const [hasFocus, setHasFocus] = React.useState(false);
-  const { focusWithinProps } = interactions.useFocusWithin({
-    onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {
-      setHasFocus(isFocusWithin);
-    },
-    onFocusWithin: onFocusEnter,
-    onBlurWithin: onFocusLeave
-  });
-  const state = {
-    hasFocus,
-    isContained: contain
-  };
-  const { apply } = useProps.useProps(args, state);
-  const data = useDataAttributes.useDataAttributes({
-    "focus-contained": contain,
-    "has-focus": hasFocus
-  });
-  if (!children) return null;
-  const spread = apply({ contain, restoreFocus, autoFocus }, ["children", "onFocusEnter", "onFocusLeave"]);
-  const kids = { ...focusWithinProps, ...data };
-  return /* @__PURE__ */ React__default.default.createElement(focus.FocusScope, { ...spread }, React.Children.map(children, function applyDataAttributes(child) {
-    return React.isValidElement(child) ? React.cloneElement(child, kids) : child;
-  }));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let _bento_use_data_attributes = require("@bento/use-data-attributes");
+let _react_aria_interactions = require("@react-aria/interactions");
+let _bento_slots = require("@bento/slots");
+let _react_aria_focus = require("@react-aria/focus");
+let _bento_use_props = require("@bento/use-props");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/index.tsx
+/**
+* FocusLock manages focus within a scope, preventing focus from escaping and optionally
+* restoring focus when the scope is removed. Built on top of React ARIA's FocusScope.
+*
+* The FocusLock primitive provides essential focus management for modals, dialogs, drawers,
+* select popovers, and other overlay components that need to trap focus within their boundaries.
+*
+* This component does not add any wrapper elements - it applies data attributes directly to
+* its children, allowing for flexible composition with multiple elements or single elements.
+*
+* @component
+* @param args - The properties {@link FocusLockProps} passed to the FocusLock component.
+*
+* @example
+* ```tsx
+* // Overlay with multiple children (backdrop + content)
+* <FocusLock contain restoreFocus autoFocus>
+*   <div slot="backdrop" />
+*   <div slot="content">
+*     <h2>Modal Title</h2>
+*     <button>Close</button>
+*   </div>
+* </FocusLock>
+* ```
+*
+* @example
+* ```tsx
+* // Select popover with single child
+* <FocusLock contain restoreFocus autoFocus>
+*   <div className="popover">
+*     <ListBox>
+*       <ListBoxItem>Option 1</ListBoxItem>
+*       <ListBoxItem>Option 2</ListBoxItem>
+*     </ListBox>
+*   </div>
+* </FocusLock>
+* ```
+*
+* @example
+* ```tsx
+* // With render props for dynamic styling
+* <FocusLock
+*   contain
+*   className={({ hasFocus, isContained }) =>
+*     `modal ${isContained ? 'contained' : ''} ${hasFocus ? 'focused' : ''}`
+*   }
+*   style={({ hasFocus }) => ({
+*     opacity: hasFocus ? 1 : 0.8
+*   })}
+* >
+*   <div>Content</div>
+* </FocusLock>
+* ```
+*
+* @public
+*/
+const FocusLock = (0, _bento_slots.withSlots)("BentoFocusLock", function FocusLock(args) {
+	const { contain = false, restoreFocus = false, autoFocus = false, children, onFocusEnter, onFocusLeave } = args;
+	const [hasFocus, setHasFocus] = (0, react.useState)(false);
+	const { focusWithinProps } = (0, _react_aria_interactions.useFocusWithin)({
+		onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {
+			setHasFocus(isFocusWithin);
+		},
+		onFocusWithin: onFocusEnter,
+		onBlurWithin: onFocusLeave
+	});
+	const { apply } = (0, _bento_use_props.useProps)(args, {
+		hasFocus,
+		isContained: contain
+	});
+	const data = (0, _bento_use_data_attributes.useDataAttributes)({
+		"focus-contained": contain,
+		"has-focus": hasFocus
+	});
+	if (!children) return null;
+	const spread = apply({
+		contain,
+		restoreFocus,
+		autoFocus
+	}, [
+		"children",
+		"onFocusEnter",
+		"onFocusLeave"
+	]);
+	const kids = {
+		...focusWithinProps,
+		...data
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_aria_focus.FocusScope, {
+		...spread,
+		children: react.default.Children.map(children, function applyDataAttributes(child) {
+			return (0, react.isValidElement)(child) ? (0, react.cloneElement)(child, kids) : child;
+		})
+	});
 });
-
+//#endregion
 exports.FocusLock = FocusLock;
-//# sourceMappingURL=index.cjs.map
+
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"names":["withSlots","FocusLock","useState","useFocusWithin","useProps","useDataAttributes","React","FocusScope","Children","isValidElement","cloneElement"],"mappings":";;;;;;;;;;;;;;AAiIO,IAAM,SAAA,GAAYA,eAAA,CAAU,gBAAA,EAAkB,SAASC,WAAU,IAAA,EAAsB;AAC5F,EAAA,MAAM,EAAE,OAAA,GAAU,KAAA,EAAO,YAAA,GAAe,KAAA,EAAO,YAAY,KAAA,EAAO,QAAA,EAAU,YAAA,EAAc,YAAA,EAAa,GAAI,IAAA;AAC3G,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAG9C,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAIC,2BAAA,CAAe;AAAA,IAC1C,mBAAA,EAAqB,SAAS,mBAAA,CAAoB,aAAA,EAAe;AAC/D,MAAA,WAAA,CAAY,aAAa,CAAA;AAAA,IAC3B,CAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf,YAAA,EAAc;AAAA,GACf,CAAA;AAGD,EAAA,MAAM,KAAA,GAAwB;AAAA,IAC5B,QAAA;AAAA,IACA,WAAA,EAAa;AAAA,GACf;AAGA,EAAA,MAAM,EAAE,KAAA,EAAM,GAAIC,iBAAA,CAAS,MAAM,KAAK,CAAA;AAGtC,EAAA,MAAM,OAAOC,mCAAA,CAAkB;AAAA,IAC7B,iBAAA,EAAmB,OAAA;AAAA,IACnB,WAAA,EAAa;AAAA,GACd,CAAA;AAED,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AAKtB,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA,EAAU,EAAG,CAAC,UAAA,EAAY,cAAA,EAAgB,cAAc,CAAC,CAAA;AAKvG,EAAA,MAAM,IAAA,GAAO,EAAE,GAAG,gBAAA,EAAkB,GAAG,IAAA,EAAK;AAE5C,EAAA,uBACEC,sBAAA,CAAA,aAAA,CAACC,oBAAY,GAAG,MAAA,EAAA,EACbC,eAAS,GAAA,CAAI,QAAA,EAAU,SAAS,mBAAA,CAAoB,KAAA,EAAO;AAC1D,IAAA,OAAOC,qBAAe,KAAK,CAAA,GAAIC,kBAAA,CAAa,KAAA,EAA6B,IAAI,CAAA,GAAI,KAAA;AAAA,EACnF,CAAC,CACH,CAAA;AAEJ,CAAC","file":"index.cjs","sourcesContent":["import React, { Children, cloneElement, isValidElement, type ReactNode, useState } from 'react';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { withSlots, type Slots } from '@bento/slots';\nimport { FocusScope } from '@react-aria/focus';\nimport { useProps } from '@bento/use-props';\n\n/**\n * State object passed to render prop functions\n * @public\n */\nexport interface FocusLockState {\n  /**\n   * Whether focus is currently within the scope\n   */\n  hasFocus: boolean;\n\n  /**\n   * Whether focus is contained within the scope\n   */\n  isContained: boolean;\n}\n\nexport interface FocusLockProps extends Slots {\n  /**\n   * Whether to contain focus within the scope.\n   * When true, focus will cycle between focusable elements within the scope.\n   *\n   * @default false\n   */\n  contain?: boolean;\n\n  /**\n   * Whether to restore focus to the previously focused element when the focus scope unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean;\n\n  /**\n   * Whether to automatically focus the first focusable element when the focus scope mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The content to render inside the focus lock.\n   * Can be a single element or multiple elements.\n   */\n  children?: ReactNode;\n\n  /**\n   * Callback fired when focus enters the scope\n   */\n  onFocusEnter?: (e: React.FocusEvent) => void;\n\n  /**\n   * Callback fired when focus leaves the scope\n   */\n  onFocusLeave?: (e: React.FocusEvent) => void;\n\n  /**\n   * Render prop for className\n   */\n  className?: ((state: FocusLockState) => string) | string;\n\n  /**\n   * Render prop for style\n   */\n  style?: ((state: FocusLockState) => React.CSSProperties) | React.CSSProperties;\n}\n\n/**\n * FocusLock manages focus within a scope, preventing focus from escaping and optionally\n * restoring focus when the scope is removed. Built on top of React ARIA's FocusScope.\n *\n * The FocusLock primitive provides essential focus management for modals, dialogs, drawers,\n * select popovers, and other overlay components that need to trap focus within their boundaries.\n *\n * This component does not add any wrapper elements - it applies data attributes directly to\n * its children, allowing for flexible composition with multiple elements or single elements.\n *\n * @component\n * @param args - The properties {@link FocusLockProps} passed to the FocusLock component.\n *\n * @example\n * ```tsx\n * // Overlay with multiple children (backdrop + content)\n * <FocusLock contain restoreFocus autoFocus>\n *   <div slot=\"backdrop\" />\n *   <div slot=\"content\">\n *     <h2>Modal Title</h2>\n *     <button>Close</button>\n *   </div>\n * </FocusLock>\n * ```\n *\n * @example\n * ```tsx\n * // Select popover with single child\n * <FocusLock contain restoreFocus autoFocus>\n *   <div className=\"popover\">\n *     <ListBox>\n *       <ListBoxItem>Option 1</ListBoxItem>\n *       <ListBoxItem>Option 2</ListBoxItem>\n *     </ListBox>\n *   </div>\n * </FocusLock>\n * ```\n *\n * @example\n * ```tsx\n * // With render props for dynamic styling\n * <FocusLock\n *   contain\n *   className={({ hasFocus, isContained }) =>\n *     `modal ${isContained ? 'contained' : ''} ${hasFocus ? 'focused' : ''}`\n *   }\n *   style={({ hasFocus }) => ({\n *     opacity: hasFocus ? 1 : 0.8\n *   })}\n * >\n *   <div>Content</div>\n * </FocusLock>\n * ```\n *\n * @public\n */\nexport const FocusLock = withSlots('BentoFocusLock', function FocusLock(args: FocusLockProps) {\n  const { contain = false, restoreFocus = false, autoFocus = false, children, onFocusEnter, onFocusLeave } = args;\n  const [hasFocus, setHasFocus] = useState(false);\n\n  // Track focus within the scope using React ARIA\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {\n      setHasFocus(isFocusWithin);\n    },\n    onFocusWithin: onFocusEnter,\n    onBlurWithin: onFocusLeave\n  });\n\n  // Create state object for render props\n  const state: FocusLockState = {\n    hasFocus,\n    isContained: contain\n  };\n\n  // Pass state to useProps so render props can access it\n  const { apply } = useProps(args, state);\n\n  // Generate data attributes for focus lock state\n  const data = useDataAttributes({\n    'focus-contained': contain,\n    'has-focus': hasFocus\n  });\n\n  if (!children) return null;\n\n  //\n  // Apply props to FocusScope for slot inheritance\n  //\n  const spread = apply({ contain, restoreFocus, autoFocus }, ['children', 'onFocusEnter', 'onFocusLeave']);\n\n  //\n  // Merge focus tracking props with data attributes to apply to children\n  //\n  const kids = { ...focusWithinProps, ...data };\n\n  return (\n    <FocusScope {...spread}>\n      {Children.map(children, function applyDataAttributes(child) {\n        return isValidElement(child) ? cloneElement(child as React.ReactElement, kids) : child;\n      })}\n    </FocusScope>\n  );\n}) as (props: FocusLockProps) => React.ReactElement | null;\n"]}
+{"version":3,"file":"index.cjs","names":["FocusScope","React"],"sources":["../src/index.tsx"],"sourcesContent":["import React, { cloneElement, isValidElement, type ReactNode, useState } from 'react';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { withSlots, type Slots } from '@bento/slots';\nimport { FocusScope } from '@react-aria/focus';\nimport { useProps } from '@bento/use-props';\n\n/**\n * State object passed to render prop functions\n * @public\n */\nexport interface FocusLockState {\n  /**\n   * Whether focus is currently within the scope\n   */\n  hasFocus: boolean;\n\n  /**\n   * Whether focus is contained within the scope\n   */\n  isContained: boolean;\n}\n\nexport interface FocusLockProps extends Slots {\n  /**\n   * Whether to contain focus within the scope.\n   * When true, focus will cycle between focusable elements within the scope.\n   *\n   * @default false\n   */\n  contain?: boolean;\n\n  /**\n   * Whether to restore focus to the previously focused element when the focus scope unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean;\n\n  /**\n   * Whether to automatically focus the first focusable element when the focus scope mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The content to render inside the focus lock.\n   * Can be a single element or multiple elements.\n   */\n  children?: ReactNode;\n\n  /**\n   * Callback fired when focus enters the scope\n   */\n  onFocusEnter?: (e: React.FocusEvent) => void;\n\n  /**\n   * Callback fired when focus leaves the scope\n   */\n  onFocusLeave?: (e: React.FocusEvent) => void;\n\n  /**\n   * Render prop for className\n   */\n  className?: ((state: FocusLockState) => string) | string;\n\n  /**\n   * Render prop for style\n   */\n  style?: ((state: FocusLockState) => React.CSSProperties) | React.CSSProperties;\n}\n\n/**\n * FocusLock manages focus within a scope, preventing focus from escaping and optionally\n * restoring focus when the scope is removed. Built on top of React ARIA's FocusScope.\n *\n * The FocusLock primitive provides essential focus management for modals, dialogs, drawers,\n * select popovers, and other overlay components that need to trap focus within their boundaries.\n *\n * This component does not add any wrapper elements - it applies data attributes directly to\n * its children, allowing for flexible composition with multiple elements or single elements.\n *\n * @component\n * @param args - The properties {@link FocusLockProps} passed to the FocusLock component.\n *\n * @example\n * ```tsx\n * // Overlay with multiple children (backdrop + content)\n * <FocusLock contain restoreFocus autoFocus>\n *   <div slot=\"backdrop\" />\n *   <div slot=\"content\">\n *     <h2>Modal Title</h2>\n *     <button>Close</button>\n *   </div>\n * </FocusLock>\n * ```\n *\n * @example\n * ```tsx\n * // Select popover with single child\n * <FocusLock contain restoreFocus autoFocus>\n *   <div className=\"popover\">\n *     <ListBox>\n *       <ListBoxItem>Option 1</ListBoxItem>\n *       <ListBoxItem>Option 2</ListBoxItem>\n *     </ListBox>\n *   </div>\n * </FocusLock>\n * ```\n *\n * @example\n * ```tsx\n * // With render props for dynamic styling\n * <FocusLock\n *   contain\n *   className={({ hasFocus, isContained }) =>\n *     `modal ${isContained ? 'contained' : ''} ${hasFocus ? 'focused' : ''}`\n *   }\n *   style={({ hasFocus }) => ({\n *     opacity: hasFocus ? 1 : 0.8\n *   })}\n * >\n *   <div>Content</div>\n * </FocusLock>\n * ```\n *\n * @public\n */\nexport const FocusLock = withSlots('BentoFocusLock', function FocusLock(args: FocusLockProps) {\n  const { contain = false, restoreFocus = false, autoFocus = false, children, onFocusEnter, onFocusLeave } = args;\n  const [hasFocus, setHasFocus] = useState(false);\n\n  // Track focus within the scope using React ARIA\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {\n      setHasFocus(isFocusWithin);\n    },\n    onFocusWithin: onFocusEnter,\n    onBlurWithin: onFocusLeave\n  });\n\n  // Create state object for render props\n  const state: FocusLockState = {\n    hasFocus,\n    isContained: contain\n  };\n\n  // Pass state to useProps so render props can access it\n  const { apply } = useProps(args, state);\n\n  // Generate data attributes for focus lock state\n  const data = useDataAttributes({\n    'focus-contained': contain,\n    'has-focus': hasFocus\n  });\n\n  if (!children) return null;\n\n  //\n  // Apply props to FocusScope for slot inheritance\n  //\n  const spread = apply({ contain, restoreFocus, autoFocus }, ['children', 'onFocusEnter', 'onFocusLeave']);\n\n  //\n  // Merge focus tracking props with data attributes to apply to children\n  //\n  const kids = { ...focusWithinProps, ...data };\n\n  return (\n    <FocusScope {...spread}>\n      {React.Children.map(children, function applyDataAttributes(child) {\n        return isValidElement(child) ? cloneElement(child as React.ReactElement, kids) : child;\n      })}\n    </FocusScope>\n  );\n}) as (props: FocusLockProps) => React.ReactElement | null;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,MAAa,aAAA,GAAA,aAAA,WAAsB,kBAAkB,SAAS,UAAU,MAAsB;CAC5F,MAAM,EAAE,UAAU,OAAO,eAAe,OAAO,YAAY,OAAO,UAAU,cAAc,iBAAiB;CAC3G,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwB,KAAK;CAG9C,MAAM,EAAE,sBAAA,GAAA,yBAAA,gBAAoC;EAC1C,qBAAqB,SAAS,oBAAoB,eAAe;GAC/D,YAAY,aAAa;EAC3B;EACA,eAAe;EACf,cAAc;CAChB,CAAC;CASD,MAAM,EAAE,WAAA,GAAA,iBAAA,UAAmB,MAAM;EAL/B;EACA,aAAa;CAIsB,CAAC;CAGtC,MAAM,QAAA,GAAA,2BAAA,mBAAyB;EAC7B,mBAAmB;EACnB,aAAa;CACf,CAAC;CAED,IAAI,CAAC,UAAU,OAAO;CAKtB,MAAM,SAAS,MAAM;EAAE;EAAS;EAAc;CAAU,GAAG;EAAC;EAAY;EAAgB;CAAc,CAAC;CAKvG,MAAM,OAAO;EAAE,GAAG;EAAkB,GAAG;CAAK;CAE5C,OACE,iBAAA,GAAA,kBAAA,KAACA,kBAAAA,YAAD;EAAY,GAAI;YACbC,MAAAA,QAAM,SAAS,IAAI,UAAU,SAAS,oBAAoB,OAAO;GAChE,QAAA,GAAA,MAAA,gBAAsB,KAAK,KAAA,GAAA,MAAA,cAAiB,OAA6B,IAAI,IAAI;EACnF,CAAC;CACS,CAAA;AAEhB,CAAC"}

package/dist/index.d.cts

@@ -1,61 +1,62 @@
-import React, { ReactNode } from 'react';
-import { Slots } from '@bento/slots';
+import React, { ReactNode } from "react";
+import { Slots } from "@bento/slots";
 
+//#region src/index.d.ts
 /**
  * State object passed to render prop functions
  * @public
  */
 interface FocusLockState {
-    /**
-     * Whether focus is currently within the scope
-     */
-    hasFocus: boolean;
-    /**
-     * Whether focus is contained within the scope
-     */
-    isContained: boolean;
+  /**
+   * Whether focus is currently within the scope
+   */
+  hasFocus: boolean;
+  /**
+   * Whether focus is contained within the scope
+   */
+  isContained: boolean;
 }
 interface FocusLockProps extends Slots {
-    /**
-     * Whether to contain focus within the scope.
-     * When true, focus will cycle between focusable elements within the scope.
-     *
-     * @default false
-     */
-    contain?: boolean;
-    /**
-     * Whether to restore focus to the previously focused element when the focus scope unmounts.
-     *
-     * @default false
-     */
-    restoreFocus?: boolean;
-    /**
-     * Whether to automatically focus the first focusable element when the focus scope mounts.
-     *
-     * @default false
-     */
-    autoFocus?: boolean;
-    /**
-     * The content to render inside the focus lock.
-     * Can be a single element or multiple elements.
-     */
-    children?: ReactNode;
-    /**
-     * Callback fired when focus enters the scope
-     */
-    onFocusEnter?: (e: React.FocusEvent) => void;
-    /**
-     * Callback fired when focus leaves the scope
-     */
-    onFocusLeave?: (e: React.FocusEvent) => void;
-    /**
-     * Render prop for className
-     */
-    className?: ((state: FocusLockState) => string) | string;
-    /**
-     * Render prop for style
-     */
-    style?: ((state: FocusLockState) => React.CSSProperties) | React.CSSProperties;
+  /**
+   * Whether to contain focus within the scope.
+   * When true, focus will cycle between focusable elements within the scope.
+   *
+   * @default false
+   */
+  contain?: boolean;
+  /**
+   * Whether to restore focus to the previously focused element when the focus scope unmounts.
+   *
+   * @default false
+   */
+  restoreFocus?: boolean;
+  /**
+   * Whether to automatically focus the first focusable element when the focus scope mounts.
+   *
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * The content to render inside the focus lock.
+   * Can be a single element or multiple elements.
+   */
+  children?: ReactNode;
+  /**
+   * Callback fired when focus enters the scope
+   */
+  onFocusEnter?: (e: React.FocusEvent) => void;
+  /**
+   * Callback fired when focus leaves the scope
+   */
+  onFocusLeave?: (e: React.FocusEvent) => void;
+  /**
+   * Render prop for className
+   */
+  className?: ((state: FocusLockState) => string) | string;
+  /**
+   * Render prop for style
+   */
+  style?: ((state: FocusLockState) => React.CSSProperties) | React.CSSProperties;
 }
 /**
  * FocusLock manages focus within a scope, preventing focus from escaping and optionally
@@ -113,6 +114,7 @@ interface FocusLockProps extends Slots {
  *
  * @public
  */
-declare const FocusLock: (props: FocusLockProps) => React.ReactElement | null;
-
-export { FocusLock, type FocusLockProps, type FocusLockState };
+declare const FocusLock: (props: FocusLockProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+//#endregion
+export { FocusLock, FocusLockProps, FocusLockState };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.tsx"],"mappings":";;;;;;AAWA;;UAAiB,cAAA;EAIf;AAKW;AAGb;EARE,QAAA;;;;EAKA,WAAW;AAAA;AAAA,UAGI,cAAA,SAAuB,KAAA;EA+CF;;;;;;EAxCpC,OAAA;EAOA;;;;;EAAA,YAAA;EAkByB;;;;;EAXzB,SAAA;EAqBA;;;;EAfA,QAAA,GAAW,SAAA;EAoBD;;;EAfV,YAAA,IAAgB,CAAA,EAAG,KAAA,CAAM,UAAA;EAewC;;AAAa;EAV9E,YAAA,IAAgB,CAAA,EAAG,KAAA,CAAM,UAAA;EAoH+B;;;EA/GxD,SAAA,KAAc,KAAA,EAAO,cAAA;EA+GU;;;EA1G/B,KAAA,KAAU,KAAA,EAAO,cAAA,KAAmB,KAAA,CAAM,aAAA,IAAiB,KAAA,CAAM,aAAA;AAAA;;;;;;AA0GlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA/CpB,SAAA,GA+CN,KAAA,EAAK,cAAA,KAAqB,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA"}

package/dist/{index.d.ts → index.d.mts}

@@ -1,61 +1,62 @@
-import React, { ReactNode } from 'react';
-import { Slots } from '@bento/slots';
+import React, { ReactNode } from "react";
+import { Slots } from "@bento/slots";
 
+//#region src/index.d.ts
 /**
  * State object passed to render prop functions
  * @public
  */
 interface FocusLockState {
-    /**
-     * Whether focus is currently within the scope
-     */
-    hasFocus: boolean;
-    /**
-     * Whether focus is contained within the scope
-     */
-    isContained: boolean;
+  /**
+   * Whether focus is currently within the scope
+   */
+  hasFocus: boolean;
+  /**
+   * Whether focus is contained within the scope
+   */
+  isContained: boolean;
 }
 interface FocusLockProps extends Slots {
-    /**
-     * Whether to contain focus within the scope.
-     * When true, focus will cycle between focusable elements within the scope.
-     *
-     * @default false
-     */
-    contain?: boolean;
-    /**
-     * Whether to restore focus to the previously focused element when the focus scope unmounts.
-     *
-     * @default false
-     */
-    restoreFocus?: boolean;
-    /**
-     * Whether to automatically focus the first focusable element when the focus scope mounts.
-     *
-     * @default false
-     */
-    autoFocus?: boolean;
-    /**
-     * The content to render inside the focus lock.
-     * Can be a single element or multiple elements.
-     */
-    children?: ReactNode;
-    /**
-     * Callback fired when focus enters the scope
-     */
-    onFocusEnter?: (e: React.FocusEvent) => void;
-    /**
-     * Callback fired when focus leaves the scope
-     */
-    onFocusLeave?: (e: React.FocusEvent) => void;
-    /**
-     * Render prop for className
-     */
-    className?: ((state: FocusLockState) => string) | string;
-    /**
-     * Render prop for style
-     */
-    style?: ((state: FocusLockState) => React.CSSProperties) | React.CSSProperties;
+  /**
+   * Whether to contain focus within the scope.
+   * When true, focus will cycle between focusable elements within the scope.
+   *
+   * @default false
+   */
+  contain?: boolean;
+  /**
+   * Whether to restore focus to the previously focused element when the focus scope unmounts.
+   *
+   * @default false
+   */
+  restoreFocus?: boolean;
+  /**
+   * Whether to automatically focus the first focusable element when the focus scope mounts.
+   *
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * The content to render inside the focus lock.
+   * Can be a single element or multiple elements.
+   */
+  children?: ReactNode;
+  /**
+   * Callback fired when focus enters the scope
+   */
+  onFocusEnter?: (e: React.FocusEvent) => void;
+  /**
+   * Callback fired when focus leaves the scope
+   */
+  onFocusLeave?: (e: React.FocusEvent) => void;
+  /**
+   * Render prop for className
+   */
+  className?: ((state: FocusLockState) => string) | string;
+  /**
+   * Render prop for style
+   */
+  style?: ((state: FocusLockState) => React.CSSProperties) | React.CSSProperties;
 }
 /**
  * FocusLock manages focus within a scope, preventing focus from escaping and optionally
@@ -113,6 +114,7 @@ interface FocusLockProps extends Slots {
  *
  * @public
  */
-declare const FocusLock: (props: FocusLockProps) => React.ReactElement | null;
-
-export { FocusLock, type FocusLockProps, type FocusLockState };
+declare const FocusLock: (props: FocusLockProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+//#endregion
+export { FocusLock, FocusLockProps, FocusLockState };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.tsx"],"mappings":";;;;;;AAWA;;UAAiB,cAAA;EAIf;AAKW;AAGb;EARE,QAAA;;;;EAKA,WAAW;AAAA;AAAA,UAGI,cAAA,SAAuB,KAAA;EA+CF;;;;;;EAxCpC,OAAA;EAOA;;;;;EAAA,YAAA;EAkByB;;;;;EAXzB,SAAA;EAqBA;;;;EAfA,QAAA,GAAW,SAAA;EAoBD;;;EAfV,YAAA,IAAgB,CAAA,EAAG,KAAA,CAAM,UAAA;EAewC;;AAAa;EAV9E,YAAA,IAAgB,CAAA,EAAG,KAAA,CAAM,UAAA;EAoH+B;;;EA/GxD,SAAA,KAAc,KAAA,EAAO,cAAA;EA+GU;;;EA1G/B,KAAA,KAAU,KAAA,EAAO,cAAA,KAAmB,KAAA,CAAM,aAAA,IAAiB,KAAA,CAAM,aAAA;AAAA;;;;;;AA0GlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA/CpB,SAAA,GA+CN,KAAA,EAAK,cAAA,KAAqB,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA"}

package/dist/index.mjs

@@ -0,0 +1,107 @@
+import React, { cloneElement, isValidElement, useState } from "react";
+import { useDataAttributes } from "@bento/use-data-attributes";
+import { useFocusWithin } from "@react-aria/interactions";
+import { withSlots } from "@bento/slots";
+import { FocusScope } from "@react-aria/focus";
+import { useProps } from "@bento/use-props";
+import { jsx } from "react/jsx-runtime";
+//#region src/index.tsx
+/**
+* FocusLock manages focus within a scope, preventing focus from escaping and optionally
+* restoring focus when the scope is removed. Built on top of React ARIA's FocusScope.
+*
+* The FocusLock primitive provides essential focus management for modals, dialogs, drawers,
+* select popovers, and other overlay components that need to trap focus within their boundaries.
+*
+* This component does not add any wrapper elements - it applies data attributes directly to
+* its children, allowing for flexible composition with multiple elements or single elements.
+*
+* @component
+* @param args - The properties {@link FocusLockProps} passed to the FocusLock component.
+*
+* @example
+* ```tsx
+* // Overlay with multiple children (backdrop + content)
+* <FocusLock contain restoreFocus autoFocus>
+*   <div slot="backdrop" />
+*   <div slot="content">
+*     <h2>Modal Title</h2>
+*     <button>Close</button>
+*   </div>
+* </FocusLock>
+* ```
+*
+* @example
+* ```tsx
+* // Select popover with single child
+* <FocusLock contain restoreFocus autoFocus>
+*   <div className="popover">
+*     <ListBox>
+*       <ListBoxItem>Option 1</ListBoxItem>
+*       <ListBoxItem>Option 2</ListBoxItem>
+*     </ListBox>
+*   </div>
+* </FocusLock>
+* ```
+*
+* @example
+* ```tsx
+* // With render props for dynamic styling
+* <FocusLock
+*   contain
+*   className={({ hasFocus, isContained }) =>
+*     `modal ${isContained ? 'contained' : ''} ${hasFocus ? 'focused' : ''}`
+*   }
+*   style={({ hasFocus }) => ({
+*     opacity: hasFocus ? 1 : 0.8
+*   })}
+* >
+*   <div>Content</div>
+* </FocusLock>
+* ```
+*
+* @public
+*/
+const FocusLock = withSlots("BentoFocusLock", function FocusLock(args) {
+	const { contain = false, restoreFocus = false, autoFocus = false, children, onFocusEnter, onFocusLeave } = args;
+	const [hasFocus, setHasFocus] = useState(false);
+	const { focusWithinProps } = useFocusWithin({
+		onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {
+			setHasFocus(isFocusWithin);
+		},
+		onFocusWithin: onFocusEnter,
+		onBlurWithin: onFocusLeave
+	});
+	const { apply } = useProps(args, {
+		hasFocus,
+		isContained: contain
+	});
+	const data = useDataAttributes({
+		"focus-contained": contain,
+		"has-focus": hasFocus
+	});
+	if (!children) return null;
+	const spread = apply({
+		contain,
+		restoreFocus,
+		autoFocus
+	}, [
+		"children",
+		"onFocusEnter",
+		"onFocusLeave"
+	]);
+	const kids = {
+		...focusWithinProps,
+		...data
+	};
+	return /* @__PURE__ */ jsx(FocusScope, {
+		...spread,
+		children: React.Children.map(children, function applyDataAttributes(child) {
+			return isValidElement(child) ? cloneElement(child, kids) : child;
+		})
+	});
+});
+//#endregion
+export { FocusLock };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.tsx"],"sourcesContent":["import React, { cloneElement, isValidElement, type ReactNode, useState } from 'react';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { withSlots, type Slots } from '@bento/slots';\nimport { FocusScope } from '@react-aria/focus';\nimport { useProps } from '@bento/use-props';\n\n/**\n * State object passed to render prop functions\n * @public\n */\nexport interface FocusLockState {\n  /**\n   * Whether focus is currently within the scope\n   */\n  hasFocus: boolean;\n\n  /**\n   * Whether focus is contained within the scope\n   */\n  isContained: boolean;\n}\n\nexport interface FocusLockProps extends Slots {\n  /**\n   * Whether to contain focus within the scope.\n   * When true, focus will cycle between focusable elements within the scope.\n   *\n   * @default false\n   */\n  contain?: boolean;\n\n  /**\n   * Whether to restore focus to the previously focused element when the focus scope unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean;\n\n  /**\n   * Whether to automatically focus the first focusable element when the focus scope mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The content to render inside the focus lock.\n   * Can be a single element or multiple elements.\n   */\n  children?: ReactNode;\n\n  /**\n   * Callback fired when focus enters the scope\n   */\n  onFocusEnter?: (e: React.FocusEvent) => void;\n\n  /**\n   * Callback fired when focus leaves the scope\n   */\n  onFocusLeave?: (e: React.FocusEvent) => void;\n\n  /**\n   * Render prop for className\n   */\n  className?: ((state: FocusLockState) => string) | string;\n\n  /**\n   * Render prop for style\n   */\n  style?: ((state: FocusLockState) => React.CSSProperties) | React.CSSProperties;\n}\n\n/**\n * FocusLock manages focus within a scope, preventing focus from escaping and optionally\n * restoring focus when the scope is removed. Built on top of React ARIA's FocusScope.\n *\n * The FocusLock primitive provides essential focus management for modals, dialogs, drawers,\n * select popovers, and other overlay components that need to trap focus within their boundaries.\n *\n * This component does not add any wrapper elements - it applies data attributes directly to\n * its children, allowing for flexible composition with multiple elements or single elements.\n *\n * @component\n * @param args - The properties {@link FocusLockProps} passed to the FocusLock component.\n *\n * @example\n * ```tsx\n * // Overlay with multiple children (backdrop + content)\n * <FocusLock contain restoreFocus autoFocus>\n *   <div slot=\"backdrop\" />\n *   <div slot=\"content\">\n *     <h2>Modal Title</h2>\n *     <button>Close</button>\n *   </div>\n * </FocusLock>\n * ```\n *\n * @example\n * ```tsx\n * // Select popover with single child\n * <FocusLock contain restoreFocus autoFocus>\n *   <div className=\"popover\">\n *     <ListBox>\n *       <ListBoxItem>Option 1</ListBoxItem>\n *       <ListBoxItem>Option 2</ListBoxItem>\n *     </ListBox>\n *   </div>\n * </FocusLock>\n * ```\n *\n * @example\n * ```tsx\n * // With render props for dynamic styling\n * <FocusLock\n *   contain\n *   className={({ hasFocus, isContained }) =>\n *     `modal ${isContained ? 'contained' : ''} ${hasFocus ? 'focused' : ''}`\n *   }\n *   style={({ hasFocus }) => ({\n *     opacity: hasFocus ? 1 : 0.8\n *   })}\n * >\n *   <div>Content</div>\n * </FocusLock>\n * ```\n *\n * @public\n */\nexport const FocusLock = withSlots('BentoFocusLock', function FocusLock(args: FocusLockProps) {\n  const { contain = false, restoreFocus = false, autoFocus = false, children, onFocusEnter, onFocusLeave } = args;\n  const [hasFocus, setHasFocus] = useState(false);\n\n  // Track focus within the scope using React ARIA\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {\n      setHasFocus(isFocusWithin);\n    },\n    onFocusWithin: onFocusEnter,\n    onBlurWithin: onFocusLeave\n  });\n\n  // Create state object for render props\n  const state: FocusLockState = {\n    hasFocus,\n    isContained: contain\n  };\n\n  // Pass state to useProps so render props can access it\n  const { apply } = useProps(args, state);\n\n  // Generate data attributes for focus lock state\n  const data = useDataAttributes({\n    'focus-contained': contain,\n    'has-focus': hasFocus\n  });\n\n  if (!children) return null;\n\n  //\n  // Apply props to FocusScope for slot inheritance\n  //\n  const spread = apply({ contain, restoreFocus, autoFocus }, ['children', 'onFocusEnter', 'onFocusLeave']);\n\n  //\n  // Merge focus tracking props with data attributes to apply to children\n  //\n  const kids = { ...focusWithinProps, ...data };\n\n  return (\n    <FocusScope {...spread}>\n      {React.Children.map(children, function applyDataAttributes(child) {\n        return isValidElement(child) ? cloneElement(child as React.ReactElement, kids) : child;\n      })}\n    </FocusScope>\n  );\n}) as (props: FocusLockProps) => React.ReactElement | null;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,MAAa,YAAY,UAAU,kBAAkB,SAAS,UAAU,MAAsB;CAC5F,MAAM,EAAE,UAAU,OAAO,eAAe,OAAO,YAAY,OAAO,UAAU,cAAc,iBAAiB;CAC3G,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAG9C,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,SAAS,oBAAoB,eAAe;GAC/D,YAAY,aAAa;EAC3B;EACA,eAAe;EACf,cAAc;CAChB,CAAC;CASD,MAAM,EAAE,UAAU,SAAS,MAAM;EAL/B;EACA,aAAa;CAIsB,CAAC;CAGtC,MAAM,OAAO,kBAAkB;EAC7B,mBAAmB;EACnB,aAAa;CACf,CAAC;CAED,IAAI,CAAC,UAAU,OAAO;CAKtB,MAAM,SAAS,MAAM;EAAE;EAAS;EAAc;CAAU,GAAG;EAAC;EAAY;EAAgB;CAAc,CAAC;CAKvG,MAAM,OAAO;EAAE,GAAG;EAAkB,GAAG;CAAK;CAE5C,OACE,oBAAC,YAAD;EAAY,GAAI;YACb,MAAM,SAAS,IAAI,UAAU,SAAS,oBAAoB,OAAO;GAChE,OAAO,eAAe,KAAK,IAAI,aAAa,OAA6B,IAAI,IAAI;EACnF,CAAC;CACS,CAAA;AAEhB,CAAC"}

package/package.json

@@ -1,22 +1,21 @@
 {
   "name": "@bento/focus-lock",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Focus lock primitive for managing focus within a scope",
   "type": "module",
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "scripts": {
-    "build": "tsup-node",
-    "lint": "biome lint && tsc",
-    "posttest": "npm run lint",
-    "prepublishOnly": "node ../../scripts/compile-readme.ts",
-    "pretest": "npm run build",
+    "build": "tsdown",
+    "lint": "biome lint && tsgo --noEmit",
+    "prepublishOnly": "node ../../../scripts/compile-readme.ts",
     "test": "vitest --run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "typecheck": "tsgo --noEmit -p tsconfig.json"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/godaddy/bento.git"
+    "url": "git+https://github.com/godaddy/antares.git"
   },
   "keywords": [
     "accessibility",
@@ -33,20 +32,20 @@
   "author": "GoDaddy Operating Company, LLC",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/godaddy/bento/issues"
+    "url": "https://github.com/godaddy/antares/issues"
   },
-  "homepage": "https://github.com/godaddy/bento#readme",
+  "homepage": "https://github.com/godaddy/antares#readme",
   "files": [
     "dist",
     "src",
     "package.json"
   ],
   "dependencies": {
-    "@bento/slots": "^0.2.0",
+    "@bento/slots": "^0.3.0",
     "@bento/use-data-attributes": "^0.1.1",
-    "@bento/use-props": "^0.2.0",
-    "@react-aria/focus": "^3.18.6",
-    "@react-aria/interactions": "^3.22.6"
+    "@bento/use-props": "^0.2.3",
+    "@react-aria/focus": "^3.22.0",
+    "@react-aria/interactions": "^3.28.0"
   },
   "devDependencies": {
     "@bento/button": "*",
@@ -54,7 +53,13 @@
     "@bento/heading": "*",
     "@bento/listbox": "*",
     "@bento/radio": "*",
-    "@bento/text": "*"
+    "@bento/text": "*",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "tsdown": "^0.22.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.7",
+    "vitest-browser-react": "^2.2.0"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",
@@ -63,8 +68,8 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
       },
       "require": {
         "types": "./dist/index.d.cts",

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement, isValidElement, type ReactNode, useState } from 'react';
+import React, { cloneElement, isValidElement, type ReactNode, useState } from 'react';
 import { useDataAttributes } from '@bento/use-data-attributes';
 import { useFocusWithin } from '@react-aria/interactions';
 import { withSlots, type Slots } from '@bento/slots';
@@ -169,7 +169,7 @@ export const FocusLock = withSlots('BentoFocusLock', function FocusLock(args: Fo
 
   return (
     <FocusScope {...spread}>
-      {Children.map(children, function applyDataAttributes(child) {
+      {React.Children.map(children, function applyDataAttributes(child) {
         return isValidElement(child) ? cloneElement(child as React.ReactElement, kids) : child;
       })}
     </FocusScope>

package/dist/index.js

@@ -1,38 +0,0 @@
-import React, { useState, Children, cloneElement, isValidElement } from 'react';
-import { useDataAttributes } from '@bento/use-data-attributes';
-import { useFocusWithin } from '@react-aria/interactions';
-import { withSlots } from '@bento/slots';
-import { FocusScope } from '@react-aria/focus';
-import { useProps } from '@bento/use-props';
-
-// src/index.tsx
-var FocusLock = withSlots("BentoFocusLock", function FocusLock2(args) {
-  const { contain = false, restoreFocus = false, autoFocus = false, children, onFocusEnter, onFocusLeave } = args;
-  const [hasFocus, setHasFocus] = useState(false);
-  const { focusWithinProps } = useFocusWithin({
-    onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {
-      setHasFocus(isFocusWithin);
-    },
-    onFocusWithin: onFocusEnter,
-    onBlurWithin: onFocusLeave
-  });
-  const state = {
-    hasFocus,
-    isContained: contain
-  };
-  const { apply } = useProps(args, state);
-  const data = useDataAttributes({
-    "focus-contained": contain,
-    "has-focus": hasFocus
-  });
-  if (!children) return null;
-  const spread = apply({ contain, restoreFocus, autoFocus }, ["children", "onFocusEnter", "onFocusLeave"]);
-  const kids = { ...focusWithinProps, ...data };
-  return /* @__PURE__ */ React.createElement(FocusScope, { ...spread }, Children.map(children, function applyDataAttributes(child) {
-    return isValidElement(child) ? cloneElement(child, kids) : child;
-  }));
-});
-
-export { FocusLock };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.tsx"],"names":["FocusLock"],"mappings":";;;;;;;;AAiIO,IAAM,SAAA,GAAY,SAAA,CAAU,gBAAA,EAAkB,SAASA,WAAU,IAAA,EAAsB;AAC5F,EAAA,MAAM,EAAE,OAAA,GAAU,KAAA,EAAO,YAAA,GAAe,KAAA,EAAO,YAAY,KAAA,EAAO,QAAA,EAAU,YAAA,EAAc,YAAA,EAAa,GAAI,IAAA;AAC3G,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAG9C,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,cAAA,CAAe;AAAA,IAC1C,mBAAA,EAAqB,SAAS,mBAAA,CAAoB,aAAA,EAAe;AAC/D,MAAA,WAAA,CAAY,aAAa,CAAA;AAAA,IAC3B,CAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf,YAAA,EAAc;AAAA,GACf,CAAA;AAGD,EAAA,MAAM,KAAA,GAAwB;AAAA,IAC5B,QAAA;AAAA,IACA,WAAA,EAAa;AAAA,GACf;AAGA,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,QAAA,CAAS,MAAM,KAAK,CAAA;AAGtC,EAAA,MAAM,OAAO,iBAAA,CAAkB;AAAA,IAC7B,iBAAA,EAAmB,OAAA;AAAA,IACnB,WAAA,EAAa;AAAA,GACd,CAAA;AAED,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AAKtB,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA,EAAU,EAAG,CAAC,UAAA,EAAY,cAAA,EAAgB,cAAc,CAAC,CAAA;AAKvG,EAAA,MAAM,IAAA,GAAO,EAAE,GAAG,gBAAA,EAAkB,GAAG,IAAA,EAAK;AAE5C,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,cAAY,GAAG,MAAA,EAAA,EACb,SAAS,GAAA,CAAI,QAAA,EAAU,SAAS,mBAAA,CAAoB,KAAA,EAAO;AAC1D,IAAA,OAAO,eAAe,KAAK,CAAA,GAAI,YAAA,CAAa,KAAA,EAA6B,IAAI,CAAA,GAAI,KAAA;AAAA,EACnF,CAAC,CACH,CAAA;AAEJ,CAAC","file":"index.js","sourcesContent":["import React, { Children, cloneElement, isValidElement, type ReactNode, useState } from 'react';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { withSlots, type Slots } from '@bento/slots';\nimport { FocusScope } from '@react-aria/focus';\nimport { useProps } from '@bento/use-props';\n\n/**\n * State object passed to render prop functions\n * @public\n */\nexport interface FocusLockState {\n  /**\n   * Whether focus is currently within the scope\n   */\n  hasFocus: boolean;\n\n  /**\n   * Whether focus is contained within the scope\n   */\n  isContained: boolean;\n}\n\nexport interface FocusLockProps extends Slots {\n  /**\n   * Whether to contain focus within the scope.\n   * When true, focus will cycle between focusable elements within the scope.\n   *\n   * @default false\n   */\n  contain?: boolean;\n\n  /**\n   * Whether to restore focus to the previously focused element when the focus scope unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean;\n\n  /**\n   * Whether to automatically focus the first focusable element when the focus scope mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The content to render inside the focus lock.\n   * Can be a single element or multiple elements.\n   */\n  children?: ReactNode;\n\n  /**\n   * Callback fired when focus enters the scope\n   */\n  onFocusEnter?: (e: React.FocusEvent) => void;\n\n  /**\n   * Callback fired when focus leaves the scope\n   */\n  onFocusLeave?: (e: React.FocusEvent) => void;\n\n  /**\n   * Render prop for className\n   */\n  className?: ((state: FocusLockState) => string) | string;\n\n  /**\n   * Render prop for style\n   */\n  style?: ((state: FocusLockState) => React.CSSProperties) | React.CSSProperties;\n}\n\n/**\n * FocusLock manages focus within a scope, preventing focus from escaping and optionally\n * restoring focus when the scope is removed. Built on top of React ARIA's FocusScope.\n *\n * The FocusLock primitive provides essential focus management for modals, dialogs, drawers,\n * select popovers, and other overlay components that need to trap focus within their boundaries.\n *\n * This component does not add any wrapper elements - it applies data attributes directly to\n * its children, allowing for flexible composition with multiple elements or single elements.\n *\n * @component\n * @param args - The properties {@link FocusLockProps} passed to the FocusLock component.\n *\n * @example\n * ```tsx\n * // Overlay with multiple children (backdrop + content)\n * <FocusLock contain restoreFocus autoFocus>\n *   <div slot=\"backdrop\" />\n *   <div slot=\"content\">\n *     <h2>Modal Title</h2>\n *     <button>Close</button>\n *   </div>\n * </FocusLock>\n * ```\n *\n * @example\n * ```tsx\n * // Select popover with single child\n * <FocusLock contain restoreFocus autoFocus>\n *   <div className=\"popover\">\n *     <ListBox>\n *       <ListBoxItem>Option 1</ListBoxItem>\n *       <ListBoxItem>Option 2</ListBoxItem>\n *     </ListBox>\n *   </div>\n * </FocusLock>\n * ```\n *\n * @example\n * ```tsx\n * // With render props for dynamic styling\n * <FocusLock\n *   contain\n *   className={({ hasFocus, isContained }) =>\n *     `modal ${isContained ? 'contained' : ''} ${hasFocus ? 'focused' : ''}`\n *   }\n *   style={({ hasFocus }) => ({\n *     opacity: hasFocus ? 1 : 0.8\n *   })}\n * >\n *   <div>Content</div>\n * </FocusLock>\n * ```\n *\n * @public\n */\nexport const FocusLock = withSlots('BentoFocusLock', function FocusLock(args: FocusLockProps) {\n  const { contain = false, restoreFocus = false, autoFocus = false, children, onFocusEnter, onFocusLeave } = args;\n  const [hasFocus, setHasFocus] = useState(false);\n\n  // Track focus within the scope using React ARIA\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {\n      setHasFocus(isFocusWithin);\n    },\n    onFocusWithin: onFocusEnter,\n    onBlurWithin: onFocusLeave\n  });\n\n  // Create state object for render props\n  const state: FocusLockState = {\n    hasFocus,\n    isContained: contain\n  };\n\n  // Pass state to useProps so render props can access it\n  const { apply } = useProps(args, state);\n\n  // Generate data attributes for focus lock state\n  const data = useDataAttributes({\n    'focus-contained': contain,\n    'has-focus': hasFocus\n  });\n\n  if (!children) return null;\n\n  //\n  // Apply props to FocusScope for slot inheritance\n  //\n  const spread = apply({ contain, restoreFocus, autoFocus }, ['children', 'onFocusEnter', 'onFocusLeave']);\n\n  //\n  // Merge focus tracking props with data attributes to apply to children\n  //\n  const kids = { ...focusWithinProps, ...data };\n\n  return (\n    <FocusScope {...spread}>\n      {Children.map(children, function applyDataAttributes(child) {\n        return isValidElement(child) ? cloneElement(child as React.ReactElement, kids) : child;\n      })}\n    </FocusScope>\n  );\n}) as (props: FocusLockProps) => React.ReactElement | null;\n"]}