Select primitive

.changeset/mighty-cats-like.md

@@ -0,0 +1,29 @@
+---
+"@bento/visually-hidden": minor
+"@bento/use-svg-sprite": minor
+"@bento/illustration": minor
+"@bento/field-error": minor
+"@bento/scroll-lock": minor
+"@bento/focus-lock": minor
+"@bento/container": minor
+"@bento/pressable": minor
+"@bento/use-props": minor
+"@bento/checkbox": minor
+"@bento/dismiss": minor
+"@bento/divider": minor
+"@bento/forward": minor
+"@bento/heading": minor
+"@bento/listbox": minor
+"@bento/overlay": minor
+"@bento/button": minor
+"@bento/portal": minor
+"@bento/select": minor
+"@bento/error": minor
+"@bento/radio": minor
+"@bento/slots": minor
+"@bento/icon": minor
+"@bento/text": minor
+"@bento/box": minor
+---
+
+Add @bento/select primitive. Includes Button refactor for forwardRef support and renderProp falsy value fix.

apps/docs/package.json

@@ -33,6 +33,7 @@
     "@bento/pressable": "*",
     "@bento/radio": "*",
     "@bento/scroll-lock": "*",
+    "@bento/select": "*",
     "@bento/slots": "*",
     "@bento/storybook-addon-helpers": "*",
     "@bento/svg-parser": "*",

packages/button/examples/button.tsx

@@ -1,15 +1,43 @@
-import { Button } from '@bento/button';
 /* v8 ignore next */
 import React from 'react';
+import { Button, type ButtonProps } from '@bento/button';
 
-export function ButtonExample() {
+export function ButtonExample(props: ButtonProps) {
+  return <Button {...props}>{props.children || 'Click me'}</Button>;
+}
+
+export function ButtonWithAriaExample() {
   return (
-    <Button
-      onPress={function handlePress() {
-        console.log('button pressed!');
-      }}
-    >
-      Click me!
+    <Button aria-label="Close dialog" aria-expanded="false" aria-haspopup="dialog">
+      Close
     </Button>
   );
 }
+
+export function ButtonWithDataAttributesExample() {
+  return (
+    <Button data-testid="my-button" data-foo="bar" data-select-trigger="true">
+      Trigger
+    </Button>
+  );
+}
+
+export function ButtonInFormExample() {
+  return (
+    <form id="test-form">
+      <Button type="submit" form="test-form" name="action" value="submit">
+        Submit
+      </Button>
+    </form>
+  );
+}
+
+export function DisabledButtonExample() {
+  return <Button isDisabled>Disabled Button</Button>;
+}
+
+export function ButtonWithRenderPropExample() {
+  return (
+    <Button onPress={() => console.log('pressed')}>{({ isHovered }) => (isHovered ? 'Hover!' : 'Click me')}</Button>
+  );
+}

packages/button/package.json

@@ -7,6 +7,7 @@
   "module": "./dist/index.js",
   "scripts": {
     "build": "tsup-node",
+    "dev": "tsup-node --watch",
     "lint": "biome lint && tsc",
     "posttest": "npm run lint",
     "prepublishOnly": "node ../../scripts/compile-readme.ts",
@@ -41,9 +42,10 @@
     "package.json"
   ],
   "dependencies": {
-    "@bento/pressable": "^0.1.3",
     "@bento/slots": "^0.2.0",
+    "@bento/use-data-attributes": "^0.1.0",
     "@bento/use-props": "^0.2.0",
+    "@react-aria/utils": "^3.30.0",
     "react-aria": "^3.44.0"
   },
   "peerDependencies": {

packages/button/src/index.tsx

@@ -1,38 +1,102 @@
-import { useProps } from '@bento/use-props';
 import { withSlots } from '@bento/slots';
-import { Pressable, type PressableProps } from '@bento/pressable';
-import { useButton } from 'react-aria';
-import React, { ComponentProps } from 'react';
+import { useProps } from '@bento/use-props';
+import { useDataAttributes } from '@bento/use-data-attributes';
+import { useButton, useFocusRing, useHover, mergeProps, type AriaButtonProps, type HoverEvents } from 'react-aria';
+import { mergeRefs } from '@react-aria/utils';
+/* v8 ignore next */
+import React from 'react';
 
 export interface ButtonProps
-  extends Omit<PressableProps, 'children'>,
-    Omit<ComponentProps<'button'>, keyof PressableProps> {
-  /** A ref to the button element. This is useful if you want to access the button element directly. */
-  childRef?: React.Ref<HTMLButtonElement>;
-
+  extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>,
+    HoverEvents,
+    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof AriaButtonProps | 'children'> {
   /** The content to display inside the button. */
-  children: React.ReactNode;
+  children: React.ReactNode | ((props: ButtonRenderProps) => React.ReactNode);
+}
+
+export interface ButtonRenderProps {
+  /** Whether the button is currently pressed. */
+  isPressed: boolean;
+  /** Whether the button is currently hovered. */
+  isHovered: boolean;
+  /** Whether the button is focused. */
+  isFocused: boolean;
+  /** Whether the button is keyboard focused. */
+  isFocusVisible: boolean;
 }
 
 /**
- * A complete button component built on top of the Pressable primitive.
- * Renders as a native button element with all accessibility and interaction features.
+ * A button component built on React Aria's useButton.
+ *
+ * @example
+ * <Button onPress={() => console.log('pressed')}>Click me</Button>
  *
  * @example
- * ```tsx
- * <Button onPress={() => console.log('Button pressed!')}>Click me</Button>
- * ```
+ * <Button>{({ isPressed }) => isPressed ? 'Pressing...' : 'Click me'}</Button>
  */
-export const Button = withSlots('BentoButton', function Button(args: ButtonProps) {
-  const { props } = useProps(args);
-  const { children, childRef, ...restProps } = props;
-  const { buttonProps } = useButton(restProps, childRef);
-
-  return (
-    <Pressable {...restProps} slot="pressable">
-      <button {...buttonProps} ref={childRef}>
-        {children}
+export const Button = withSlots(
+  'BentoButton',
+  function Button(args: ButtonProps, forwardedRef: React.Ref<HTMLButtonElement>) {
+    // First pass: merge slot props so React Aria hooks see complete props
+    const { props: mergedProps, ref: mergedRef } = useProps(args, {}, forwardedRef);
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+    // React Aria hooks receive slot-merged props and internal ref
+    const { buttonProps, isPressed } = useButton(mergedProps, buttonRef);
+    const { focusProps, isFocused, isFocusVisible } = useFocusRing(mergedProps);
+    const { hoverProps, isHovered } = useHover(mergedProps);
+
+    // Render state for children render function
+    const renderState: ButtonRenderProps = {
+      isPressed,
+      isHovered,
+      isFocused,
+      isFocusVisible
+    };
+
+    // Execute children render prop explicitly (before useProps to prevent incorrect execution)
+    const content = typeof args.children === 'function' ? args.children(renderState) : args.children;
+
+    // Second pass: apply user props with render state via apply()
+    // Apply merges React Aria props as defaults that slots can override
+    const { apply } = useProps(args, renderState);
+
+    const dataAttrs = useDataAttributes({
+      pressed: isPressed,
+      hovered: isHovered,
+      focused: isFocused,
+      focusVisible: isFocusVisible,
+      disabled: mergedProps.isDisabled
+    });
+
+    return (
+      <button
+        {...apply(
+          {
+            ...mergeProps(buttonProps, focusProps, hoverProps)
+          },
+          [
+            'ref',
+            'children',
+            'isDisabled',
+            'excludeFromTabOrder',
+            'preventFocusOnPress',
+            'onPress',
+            'onPressStart',
+            'onPressEnd',
+            'onPressUp',
+            'onPressChange',
+            'onHoverStart',
+            'onHoverEnd',
+            'onHoverChange',
+            'onFocusChange'
+          ]
+        )}
+        {...dataAttrs}
+        ref={mergeRefs(buttonRef, mergedRef)}
+      >
+        {content}
       </button>
-    </Pressable>
-  );
-});
+    );
+  }
+);