@bento/pressable 0.1.1 → 0.1.3

package/README.md

@@ -0,0 +1,103 @@
+# 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:
+
+| Prop | Type | Required | Description |
+|------|------|----------|------------|
+| `children` | `ReactElement<any, string \| JSXElementConstructor<any>>` | Yes | A single React element that will be made pressable. |
+| `onPress` | `(e: PressEvent) => void` | No | Handler that is called when the pressable is pressed.
+Similar to the standard `onClick` event, but normalized to handle all interaction methods consistently. |
+| `onPressStart` | `(e: PressEvent) => void` | No | Handler that is called when a press interaction starts. |
+| `onPressEnd` | `(e: PressEvent) => void` | No | Handler that is called when a press interaction ends, either
+over the target or when the pointer leaves the target. |
+| `onPressChange` | `(isPressed: boolean) => void` | No | Handler that is called when the press state changes. |
+| `onPressUp` | `(e: PressEvent) => void` | No | Handler that is called when a press is released over the target, regardless of
+whether it started on the target or not. |
+| `slot` | `string` | 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.
+The main way you interact with the slot system as a consumer. |
+
+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:
+
+| Attribute            | Description                                             | Example Values |
+| -------------------- | ------------------------------------------------------- | -------------- |
+| `data-pressed`       | Indicates the element is being pressed                  | "true"         |
+| `data-hovered`       | Indicates the element is hovered                        | "true"         |
+| `data-focused`       | Indicates the element has focus                         | "true"         |
+| `data-focus-visible` | Indicates focus should be visible (keyboard navigation) | "true"         |
+
+```css
+[data-pressed='true'] {
+  background-color: #ccc;
+}
+
+[data-focus-visible='true'] {
+  outline: 2px solid blue;
+}
+```

package/README.mdx

@@ -79,10 +79,12 @@ The Pressable component automatically handles accessibility features:
 
 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)
+| Attribute            | Description                                             | Example Values |
+| -------------------- | ------------------------------------------------------- | -------------- |
+| `data-pressed`       | Indicates the element is being pressed                  | "true"         |
+| `data-hovered`       | Indicates the element is hovered                        | "true"         |
+| `data-focused`       | Indicates the element has focus                         | "true"         |
+| `data-focus-visible` | Indicates focus should be visible (keyboard navigation) | "true"         |
 
 ```css
 [data-pressed='true'] {

package/dist/index.d.cts

@@ -39,6 +39,6 @@ interface PressableProps extends PressProps, Omit<HTMLAttributes<HTMLElement>, k
  * </Pressable>
  * ```
  */
-declare const Pressable: React.NamedExoticComponent<PressableProps & _bento_slots.Slots>;
+declare const Pressable: React.MemoExoticComponent<React.ComponentType<PressableProps & _bento_slots.Slots>>;
 
 export { Pressable, type PressableProps };

package/dist/index.d.ts

@@ -39,6 +39,6 @@ interface PressableProps extends PressProps, Omit<HTMLAttributes<HTMLElement>, k
  * </Pressable>
  * ```
  */
-declare const Pressable: React.NamedExoticComponent<PressableProps & _bento_slots.Slots>;
+declare const Pressable: React.MemoExoticComponent<React.ComponentType<PressableProps & _bento_slots.Slots>>;
 
 export { Pressable, type PressableProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento/pressable",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Pressable primitive provides consistent press interactions and accessibility features for building interactive components",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -9,6 +9,7 @@
     "build": "tsup-node",
     "lint": "biome lint && tsc",
     "posttest": "npm run lint",
+    "prepublishOnly": "node ../../scripts/compile-readme.ts",
     "pretest": "npm run build",
     "test": "vitest --run",
     "test:watch": "vitest"
@@ -39,9 +40,9 @@
     "package.json"
   ],
   "dependencies": {
-    "@bento/slots": "^0.1.1",
-    "@bento/use-data-attributes": "^0.1.0",
-    "@bento/use-props": "^0.1.0",
+    "@bento/slots": "^0.2.0",
+    "@bento/use-data-attributes": "^0.1.1",
+    "@bento/use-props": "^0.2.0",
     "@react-aria/utils": "^3.30.0",
     "react-aria": "^3.44.0"
   },