@bento/pressable 0.1.1

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 GoDaddy Operating Company, LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.mdx

@@ -0,0 +1,95 @@
+import { Meta, ArgTypes, Story, Controls, Source } from '@storybook/addon-docs/blocks';
+import * as Stories from './pressable.stories.tsx';
+import DivExample from './examples/pressable-div.tsx?raw';
+import LinkExample from './examples/pressable-link-example.tsx?raw';
+import CustomExample from './examples/pressable-custom.tsx?raw';
+
+<Meta of={Stories} name="Overview" />
+
+# Pressable
+
+The `@bento/pressable` package provides a standardized foundation for interactive elements in the Bento library. It exports the **Pressable** primitive, which provides consistent press interactions and accessibility features for building interactive components.
+
+## Installation
+
+```bash
+npm install --save @bento/pressable
+```
+
+## Props
+
+The `@bento/pressable` package exports the `Pressable` primitive:
+
+```jsx
+import { Pressable } from '@bento/pressable';
+
+<Pressable onPress={() => console.log('Div pressed!')}>
+  <div>Press me</div>
+</Pressable>
+```
+
+The following properties are available to be used on the `Pressable` primitive:
+
+<ArgTypes of={Stories.Props} />
+
+For all other properties specified on the `Pressable` primitive, the component will pass them down to the direct child element of the component. Which would be the equivalent of you adding them directly to the child element.
+
+```tsx
+import { Pressable } from '@bento/pressable';
+
+function MyComponent() {
+  return (
+    <Pressable onPress={() => console.log('Pressed!')}>
+      <div>Press me</div>
+    </Pressable>
+  );
+}
+```
+
+### Examples
+
+#### Basic Div Element
+
+The simplest way to use Pressable is to wrap a div element. The component will handle all the necessary accessibility features and interaction states.
+
+<Source language='tsx' code={ DivExample } />
+
+#### Link Element
+
+You can also make link elements pressable while maintaining their semantic meaning and default browser behavior.
+
+<Source language='tsx' code={ LinkExample } />
+
+#### Custom Component
+
+For custom components, you need to forward the ref and pass props to the underlying element to ensure proper functionality.
+
+<Source language='tsx' code={ CustomExample } />
+
+## Accessibility
+
+The Pressable component automatically handles accessibility features:
+
+- **Keyboard Navigation**: Supports Enter and Space key activation
+- **Focus Management**: Proper focus handling and focus-visible states
+- **ARIA Attributes**: Automatically applies appropriate ARIA attributes
+- **Screen Reader Support**: Works seamlessly with assistive technologies
+
+### Data Attributes
+
+The following data attributes are exposed and can be used for styling:
+
+- `data-pressed` - True when the button is being pressed
+- `data-hovered` - True when the button is hovered
+- `data-focused` - True when the button has focus
+- `data-focus-visible` - True when focus should be visible (keyboard navigation)
+
+```css
+[data-pressed='true'] {
+  background-color: #ccc;
+}
+
+[data-focus-visible='true'] {
+  outline: 2px solid blue;
+}
+```

package/dist/index.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var reactAria = require('react-aria');
+var utils = require('@react-aria/utils');
+var useDataAttributes = require('@bento/use-data-attributes');
+var useProps = require('@bento/use-props');
+var slots = require('@bento/slots');
+var React = require('react');
+var style = require('./pressable.module-JXZDAJ3U.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var style__default = /*#__PURE__*/_interopDefault(style);
+
+// src/index.tsx
+var Pressable = slots.withSlots("BentoPressable", function Pressable2(args) {
+  const { props, apply } = useProps.useProps(args);
+  const ref = React.useRef(null);
+  const { children, ...restProps } = props;
+  const child = React__default.default.Children.only(children);
+  const { focusableProps } = reactAria.useFocusable(restProps, ref);
+  const { focusProps, isFocused, isFocusVisible } = reactAria.useFocusRing(restProps);
+  const { hoverProps, isHovered } = reactAria.useHover(restProps);
+  const { pressProps, isPressed } = reactAria.usePress({ ...restProps, ref });
+  return React__default.default.cloneElement(child, {
+    ...apply(
+      {
+        ...reactAria.mergeProps(pressProps, focusProps, focusableProps, hoverProps),
+        className: style__default.default.pressable
+      },
+      ["onPress", "onPressStart", "onPressEnd", "onPressUp", "onPressChange", "children"]
+    ),
+    ...useDataAttributes.useDataAttributes({
+      pressed: isPressed,
+      hovered: isHovered,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    }),
+    ref: utils.mergeRefs(child.ref, ref)
+  });
+});
+
+exports.Pressable = Pressable;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["withSlots","Pressable","useProps","useRef","React","useFocusable","useFocusRing","useHover","usePress","mergeProps","style","useDataAttributes","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;AA2DO,IAAM,SAAA,GAAYA,eAAA,CAAU,gBAAA,EAAkB,SAASC,WAAU,IAAA,EAAsB;AAC5F,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAM,GAAIC,kBAAS,IAAI,CAAA;AACtC,EAAA,MAAM,GAAA,GAAMC,aAA2B,IAAI,CAAA;AAC3C,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,SAAA,EAAU,GAAI,KAAA;AACnC,EAAA,MAAM,KAAA,GAAQC,sBAAA,CAAM,QAAA,CAAS,IAAA,CAAK,QAAQ,CAAA;AAC1C,EAAA,MAAM,EAAE,cAAA,EAAe,GAAIC,sBAAA,CAAa,WAAW,GAAG,CAAA;AACtD,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAW,cAAA,EAAe,GAAIC,uBAAa,SAAS,CAAA;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAU,GAAIC,mBAAS,SAAS,CAAA;AACpD,EAAA,MAAM,EAAE,YAAY,SAAA,EAAU,GAAIC,mBAAS,EAAE,GAAG,SAAA,EAAW,GAAA,EAAK,CAAA;AAEhE,EAAA,OAAOJ,sBAAA,CAAM,aAAa,KAAA,EAAO;AAAA,IAC/B,GAAG,KAAA;AAAA,MACD;AAAA,QACE,GAAGK,oBAAA,CAAW,UAAA,EAAY,UAAA,EAAY,gBAAgB,UAAU,CAAA;AAAA,QAChE,WAAWC,sBAAA,CAAM;AAAA,OACnB;AAAA,MACA,CAAC,SAAA,EAAW,cAAA,EAAgB,YAAA,EAAc,WAAA,EAAa,iBAAiB,UAAU;AAAA,KACpF;AAAA,IACA,GAAGC,mCAAA,CAAkB;AAAA,MACnB,OAAA,EAAS,SAAA;AAAA,MACT,OAAA,EAAS,SAAA;AAAA,MACT,OAAA,EAAS,SAAA;AAAA,MACT,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,IACD,GAAA,EAAKC,eAAA,CAAW,KAAA,CAA2C,GAAA,EAAK,GAAG;AAAA,GACpE,CAAA;AACH,CAAC","file":"index.cjs","sourcesContent":["import {\n  usePress,\n  useFocusRing,\n  useHover,\n  mergeProps,\n  type PressProps,\n  useFocusable,\n  type PressEvent\n} from 'react-aria';\nimport { mergeRefs } from '@react-aria/utils';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport React, { type HTMLAttributes, useRef } from 'react';\nimport style from './pressable.module.css';\n\nexport interface PressableProps extends PressProps, Omit<HTMLAttributes<HTMLElement>, keyof PressProps> {\n  /** A single React element that will be made pressable. */\n  children: React.ReactElement;\n\n  /**\n   * Handler that is called when the pressable is pressed.\n   * Similar to the standard `onClick` event, but normalized to handle all interaction methods consistently.\n   */\n  onPress?: (e: PressEvent) => void;\n\n  /** Handler that is called when a press interaction starts. */\n  onPressStart?: (e: PressEvent) => void;\n\n  /**\n   * Handler that is called when a press interaction ends, either\n   * over the target or when the pointer leaves the target.\n   */\n  onPressEnd?: (e: PressEvent) => void;\n\n  /** Handler that is called when the press state changes. */\n  onPressChange?: (isPressed: boolean) => void;\n\n  /**\n   * Handler that is called when a press is released over the target, regardless of\n   * whether it started on the target or not.\n   */\n  onPressUp?: (e: PressEvent) => void;\n}\n\n/**\n *\n * A behavioral primitive that can be used to make any element pressable while maintaining\n * consistent behavior across devices (mouse, touch, keyboard). It handles edge cases like\n * touch movement and quick releases, and provides proper ARIA attributes for accessibility.\n *\n * @example\n * ```tsx\n * // Make a div pressable\n * <Pressable onPress={handlePress}>\n *   <div>Click here</div>\n * </Pressable>\n * ```\n */\nexport const Pressable = withSlots('BentoPressable', function Pressable(args: PressableProps) {\n  const { props, apply } = useProps(args);\n  const ref = useRef<HTMLElement | null>(null);\n  const { children, ...restProps } = props;\n  const child = React.Children.only(children);\n  const { focusableProps } = useFocusable(restProps, ref);\n  const { focusProps, isFocused, isFocusVisible } = useFocusRing(restProps);\n  const { hoverProps, isHovered } = useHover(restProps);\n  const { pressProps, isPressed } = usePress({ ...restProps, ref });\n\n  return React.cloneElement(child, {\n    ...apply(\n      {\n        ...mergeProps(pressProps, focusProps, focusableProps, hoverProps),\n        className: style.pressable\n      },\n      ['onPress', 'onPressStart', 'onPressEnd', 'onPressUp', 'onPressChange', 'children']\n    ),\n    ...useDataAttributes({\n      pressed: isPressed,\n      hovered: isHovered,\n      focused: isFocused,\n      focusVisible: isFocusVisible\n    }),\n    ref: mergeRefs((child as { ref?: React.Ref<HTMLElement> }).ref, ref)\n  });\n});\n"]}

package/dist/index.d.cts

@@ -0,0 +1,44 @@
+import * as _bento_slots from '@bento/slots';
+import { PressProps, PressEvent } from 'react-aria';
+import React, { HTMLAttributes } from 'react';
+
+interface PressableProps extends PressProps, Omit<HTMLAttributes<HTMLElement>, keyof PressProps> {
+    /** A single React element that will be made pressable. */
+    children: React.ReactElement;
+    /**
+     * Handler that is called when the pressable is pressed.
+     * Similar to the standard `onClick` event, but normalized to handle all interaction methods consistently.
+     */
+    onPress?: (e: PressEvent) => void;
+    /** Handler that is called when a press interaction starts. */
+    onPressStart?: (e: PressEvent) => void;
+    /**
+     * Handler that is called when a press interaction ends, either
+     * over the target or when the pointer leaves the target.
+     */
+    onPressEnd?: (e: PressEvent) => void;
+    /** Handler that is called when the press state changes. */
+    onPressChange?: (isPressed: boolean) => void;
+    /**
+     * Handler that is called when a press is released over the target, regardless of
+     * whether it started on the target or not.
+     */
+    onPressUp?: (e: PressEvent) => void;
+}
+/**
+ *
+ * A behavioral primitive that can be used to make any element pressable while maintaining
+ * consistent behavior across devices (mouse, touch, keyboard). It handles edge cases like
+ * touch movement and quick releases, and provides proper ARIA attributes for accessibility.
+ *
+ * @example
+ * ```tsx
+ * // Make a div pressable
+ * <Pressable onPress={handlePress}>
+ *   <div>Click here</div>
+ * </Pressable>
+ * ```
+ */
+declare const Pressable: React.NamedExoticComponent<PressableProps & _bento_slots.Slots>;
+
+export { Pressable, type PressableProps };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import * as _bento_slots from '@bento/slots';
+import { PressProps, PressEvent } from 'react-aria';
+import React, { HTMLAttributes } from 'react';
+
+interface PressableProps extends PressProps, Omit<HTMLAttributes<HTMLElement>, keyof PressProps> {
+    /** A single React element that will be made pressable. */
+    children: React.ReactElement;
+    /**
+     * Handler that is called when the pressable is pressed.
+     * Similar to the standard `onClick` event, but normalized to handle all interaction methods consistently.
+     */
+    onPress?: (e: PressEvent) => void;
+    /** Handler that is called when a press interaction starts. */
+    onPressStart?: (e: PressEvent) => void;
+    /**
+     * Handler that is called when a press interaction ends, either
+     * over the target or when the pointer leaves the target.
+     */
+    onPressEnd?: (e: PressEvent) => void;
+    /** Handler that is called when the press state changes. */
+    onPressChange?: (isPressed: boolean) => void;
+    /**
+     * Handler that is called when a press is released over the target, regardless of
+     * whether it started on the target or not.
+     */
+    onPressUp?: (e: PressEvent) => void;
+}
+/**
+ *
+ * A behavioral primitive that can be used to make any element pressable while maintaining
+ * consistent behavior across devices (mouse, touch, keyboard). It handles edge cases like
+ * touch movement and quick releases, and provides proper ARIA attributes for accessibility.
+ *
+ * @example
+ * ```tsx
+ * // Make a div pressable
+ * <Pressable onPress={handlePress}>
+ *   <div>Click here</div>
+ * </Pressable>
+ * ```
+ */
+declare const Pressable: React.NamedExoticComponent<PressableProps & _bento_slots.Slots>;
+
+export { Pressable, type PressableProps };

package/dist/index.js

@@ -0,0 +1,39 @@
+import { useFocusable, useFocusRing, useHover, usePress, mergeProps } from 'react-aria';
+import { mergeRefs } from '@react-aria/utils';
+import { useDataAttributes } from '@bento/use-data-attributes';
+import { useProps } from '@bento/use-props';
+import { withSlots } from '@bento/slots';
+import React, { useRef } from 'react';
+import style from './pressable.module-JXZDAJ3U.module.css';
+
+// src/index.tsx
+var Pressable = withSlots("BentoPressable", function Pressable2(args) {
+  const { props, apply } = useProps(args);
+  const ref = useRef(null);
+  const { children, ...restProps } = props;
+  const child = React.Children.only(children);
+  const { focusableProps } = useFocusable(restProps, ref);
+  const { focusProps, isFocused, isFocusVisible } = useFocusRing(restProps);
+  const { hoverProps, isHovered } = useHover(restProps);
+  const { pressProps, isPressed } = usePress({ ...restProps, ref });
+  return React.cloneElement(child, {
+    ...apply(
+      {
+        ...mergeProps(pressProps, focusProps, focusableProps, hoverProps),
+        className: style.pressable
+      },
+      ["onPress", "onPressStart", "onPressEnd", "onPressUp", "onPressChange", "children"]
+    ),
+    ...useDataAttributes({
+      pressed: isPressed,
+      hovered: isHovered,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    }),
+    ref: mergeRefs(child.ref, ref)
+  });
+});
+
+export { Pressable };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["Pressable"],"mappings":";;;;;;;;;AA2DO,IAAM,SAAA,GAAY,SAAA,CAAU,gBAAA,EAAkB,SAASA,WAAU,IAAA,EAAsB;AAC5F,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAM,GAAI,SAAS,IAAI,CAAA;AACtC,EAAA,MAAM,GAAA,GAAM,OAA2B,IAAI,CAAA;AAC3C,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,SAAA,EAAU,GAAI,KAAA;AACnC,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,QAAA,CAAS,IAAA,CAAK,QAAQ,CAAA;AAC1C,EAAA,MAAM,EAAE,cAAA,EAAe,GAAI,YAAA,CAAa,WAAW,GAAG,CAAA;AACtD,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAW,cAAA,EAAe,GAAI,aAAa,SAAS,CAAA;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAU,GAAI,SAAS,SAAS,CAAA;AACpD,EAAA,MAAM,EAAE,YAAY,SAAA,EAAU,GAAI,SAAS,EAAE,GAAG,SAAA,EAAW,GAAA,EAAK,CAAA;AAEhE,EAAA,OAAO,KAAA,CAAM,aAAa,KAAA,EAAO;AAAA,IAC/B,GAAG,KAAA;AAAA,MACD;AAAA,QACE,GAAG,UAAA,CAAW,UAAA,EAAY,UAAA,EAAY,gBAAgB,UAAU,CAAA;AAAA,QAChE,WAAW,KAAA,CAAM;AAAA,OACnB;AAAA,MACA,CAAC,SAAA,EAAW,cAAA,EAAgB,YAAA,EAAc,WAAA,EAAa,iBAAiB,UAAU;AAAA,KACpF;AAAA,IACA,GAAG,iBAAA,CAAkB;AAAA,MACnB,OAAA,EAAS,SAAA;AAAA,MACT,OAAA,EAAS,SAAA;AAAA,MACT,OAAA,EAAS,SAAA;AAAA,MACT,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,IACD,GAAA,EAAK,SAAA,CAAW,KAAA,CAA2C,GAAA,EAAK,GAAG;AAAA,GACpE,CAAA;AACH,CAAC","file":"index.js","sourcesContent":["import {\n  usePress,\n  useFocusRing,\n  useHover,\n  mergeProps,\n  type PressProps,\n  useFocusable,\n  type PressEvent\n} from 'react-aria';\nimport { mergeRefs } from '@react-aria/utils';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport React, { type HTMLAttributes, useRef } from 'react';\nimport style from './pressable.module.css';\n\nexport interface PressableProps extends PressProps, Omit<HTMLAttributes<HTMLElement>, keyof PressProps> {\n  /** A single React element that will be made pressable. */\n  children: React.ReactElement;\n\n  /**\n   * Handler that is called when the pressable is pressed.\n   * Similar to the standard `onClick` event, but normalized to handle all interaction methods consistently.\n   */\n  onPress?: (e: PressEvent) => void;\n\n  /** Handler that is called when a press interaction starts. */\n  onPressStart?: (e: PressEvent) => void;\n\n  /**\n   * Handler that is called when a press interaction ends, either\n   * over the target or when the pointer leaves the target.\n   */\n  onPressEnd?: (e: PressEvent) => void;\n\n  /** Handler that is called when the press state changes. */\n  onPressChange?: (isPressed: boolean) => void;\n\n  /**\n   * Handler that is called when a press is released over the target, regardless of\n   * whether it started on the target or not.\n   */\n  onPressUp?: (e: PressEvent) => void;\n}\n\n/**\n *\n * A behavioral primitive that can be used to make any element pressable while maintaining\n * consistent behavior across devices (mouse, touch, keyboard). It handles edge cases like\n * touch movement and quick releases, and provides proper ARIA attributes for accessibility.\n *\n * @example\n * ```tsx\n * // Make a div pressable\n * <Pressable onPress={handlePress}>\n *   <div>Click here</div>\n * </Pressable>\n * ```\n */\nexport const Pressable = withSlots('BentoPressable', function Pressable(args: PressableProps) {\n  const { props, apply } = useProps(args);\n  const ref = useRef<HTMLElement | null>(null);\n  const { children, ...restProps } = props;\n  const child = React.Children.only(children);\n  const { focusableProps } = useFocusable(restProps, ref);\n  const { focusProps, isFocused, isFocusVisible } = useFocusRing(restProps);\n  const { hoverProps, isHovered } = useHover(restProps);\n  const { pressProps, isPressed } = usePress({ ...restProps, ref });\n\n  return React.cloneElement(child, {\n    ...apply(\n      {\n        ...mergeProps(pressProps, focusProps, focusableProps, hoverProps),\n        className: style.pressable\n      },\n      ['onPress', 'onPressStart', 'onPressEnd', 'onPressUp', 'onPressChange', 'children']\n    ),\n    ...useDataAttributes({\n      pressed: isPressed,\n      hovered: isHovered,\n      focused: isFocused,\n      focusVisible: isFocusVisible\n    }),\n    ref: mergeRefs((child as { ref?: React.Ref<HTMLElement> }).ref, ref)\n  });\n});\n"]}

package/dist/pressable.module-JXZDAJ3U.module.css

@@ -0,0 +1,4 @@
+.pressable {
+  display: inline-flex;
+  appearance: none;
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@bento/pressable",
+  "version": "0.1.1",
+  "description": "Pressable primitive provides consistent press interactions and accessibility features for building interactive components",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "scripts": {
+    "build": "tsup-node",
+    "lint": "biome lint && tsc",
+    "posttest": "npm run lint",
+    "pretest": "npm run build",
+    "test": "vitest --run",
+    "test:watch": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/godaddy/bento.git"
+  },
+  "keywords": [
+    "accessibility",
+    "aria",
+    "bento",
+    "component",
+    "interactive",
+    "library",
+    "pressable",
+    "react"
+  ],
+  "author": "GoDaddy Operating Company, LLC",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/godaddy/bento/issues"
+  },
+  "homepage": "https://github.com/godaddy/bento#readme",
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ],
+  "dependencies": {
+    "@bento/slots": "^0.1.1",
+    "@bento/use-data-attributes": "^0.1.0",
+    "@bento/use-props": "^0.1.0",
+    "@react-aria/utils": "^3.30.0",
+    "react-aria": "^3.44.0"
+  },
+  "peerDependencies": {
+    "react": "18.x || 19.x",
+    "react-dom": "18.x || 19.x"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,86 @@
+import {
+  usePress,
+  useFocusRing,
+  useHover,
+  mergeProps,
+  type PressProps,
+  useFocusable,
+  type PressEvent
+} from 'react-aria';
+import { mergeRefs } from '@react-aria/utils';
+import { useDataAttributes } from '@bento/use-data-attributes';
+import { useProps } from '@bento/use-props';
+import { withSlots } from '@bento/slots';
+import React, { type HTMLAttributes, useRef } from 'react';
+import style from './pressable.module.css';
+
+export interface PressableProps extends PressProps, Omit<HTMLAttributes<HTMLElement>, keyof PressProps> {
+  /** A single React element that will be made pressable. */
+  children: React.ReactElement;
+
+  /**
+   * Handler that is called when the pressable is pressed.
+   * Similar to the standard `onClick` event, but normalized to handle all interaction methods consistently.
+   */
+  onPress?: (e: PressEvent) => void;
+
+  /** Handler that is called when a press interaction starts. */
+  onPressStart?: (e: PressEvent) => void;
+
+  /**
+   * Handler that is called when a press interaction ends, either
+   * over the target or when the pointer leaves the target.
+   */
+  onPressEnd?: (e: PressEvent) => void;
+
+  /** Handler that is called when the press state changes. */
+  onPressChange?: (isPressed: boolean) => void;
+
+  /**
+   * Handler that is called when a press is released over the target, regardless of
+   * whether it started on the target or not.
+   */
+  onPressUp?: (e: PressEvent) => void;
+}
+
+/**
+ *
+ * A behavioral primitive that can be used to make any element pressable while maintaining
+ * consistent behavior across devices (mouse, touch, keyboard). It handles edge cases like
+ * touch movement and quick releases, and provides proper ARIA attributes for accessibility.
+ *
+ * @example
+ * ```tsx
+ * // Make a div pressable
+ * <Pressable onPress={handlePress}>
+ *   <div>Click here</div>
+ * </Pressable>
+ * ```
+ */
+export const Pressable = withSlots('BentoPressable', function Pressable(args: PressableProps) {
+  const { props, apply } = useProps(args);
+  const ref = useRef<HTMLElement | null>(null);
+  const { children, ...restProps } = props;
+  const child = React.Children.only(children);
+  const { focusableProps } = useFocusable(restProps, ref);
+  const { focusProps, isFocused, isFocusVisible } = useFocusRing(restProps);
+  const { hoverProps, isHovered } = useHover(restProps);
+  const { pressProps, isPressed } = usePress({ ...restProps, ref });
+
+  return React.cloneElement(child, {
+    ...apply(
+      {
+        ...mergeProps(pressProps, focusProps, focusableProps, hoverProps),
+        className: style.pressable
+      },
+      ['onPress', 'onPressStart', 'onPressEnd', 'onPressUp', 'onPressChange', 'children']
+    ),
+    ...useDataAttributes({
+      pressed: isPressed,
+      hovered: isHovered,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    }),
+    ref: mergeRefs((child as { ref?: React.Ref<HTMLElement> }).ref, ref)
+  });
+});

package/src/pressable.module.css

@@ -0,0 +1,4 @@
+.pressable {
+  display: inline-flex;
+  appearance: none;
+}