@bento/input 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -1,45 +1,62 @@
-'use strict';
-
-var React = require('react');
-var useDataAttributes = require('@bento/use-data-attributes');
-var useProps = require('@bento/use-props');
-var slots = require('@bento/slots');
-var reactAria = require('react-aria');
-var utils = require('@react-aria/utils');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-// src/index.tsx
-var Input = slots.withSlots("BentoInput", function Input2(...args) {
-  const { props, apply } = useProps.useProps(args);
-  const { autoFocus } = props;
-  const { isFocused, isFocusVisible, focusProps } = reactAria.useFocusRing({
-    isTextInput: true,
-    autoFocus
-  });
-  const { hoverProps, isHovered } = reactAria.useHover(props);
-  const mergedProps = utils.mergeProps(props, focusProps, hoverProps);
-  return /* @__PURE__ */ React__default.default.createElement(
-    "input",
-    {
-      ...apply(mergedProps),
-      ...useDataAttributes.useDataAttributes({
-        focused: isFocused,
-        hovered: isHovered,
-        focusVisible: isFocusVisible,
-        disabled: props.disabled || false,
-        invalid: !!props["aria-invalid"] && props["aria-invalid"] !== "false",
-        readonly: props.readOnly || false,
-        required: props.required || false,
-        empty: props.value === "" || props.value === void 0 || props.value === null,
-        checked: props.type === "checkbox" || props.type === "radio" ? !!props.checked : void 0
-      })
-    }
-  );
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#endregion
+require("react");
+let _bento_use_data_attributes = require("@bento/use-data-attributes");
+let _bento_use_props = require("@bento/use-props");
+let _bento_slots = require("@bento/slots");
+let react_aria = require("react-aria");
+let _react_aria_utils = require("@react-aria/utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/index.tsx
+/* v8 ignore next */
+/**
+* A universal input primitive component that renders an `<input>` element with React Aria interactions.
+* Supports all HTML input types with proper accessibility, hover, and focus management.
+*
+* @component
+* @param {InputProps} props - The properties passed to the Input component.
+*
+* @example
+* ```tsx
+* // Text input
+* <Input type="text" placeholder="Enter text" />
+*
+* // Checkbox
+* <Input type="checkbox" />
+*
+* // With render props
+* <Input
+*   type="email"
+*   className={(state) => state.isFocusVisible ? 'focused' : ''}
+* />
+* ```
+*
+* @public
+*/
+const Input = (0, _bento_slots.withSlots)("BentoInput", function Input(...args) {
+	const { props, apply } = (0, _bento_use_props.useProps)(args);
+	const { autoFocus } = props;
+	const { isFocused, isFocusVisible, focusProps } = (0, react_aria.useFocusRing)({
+		isTextInput: true,
+		autoFocus
+	});
+	const { hoverProps, isHovered } = (0, react_aria.useHover)(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...apply((0, _react_aria_utils.mergeProps)(props, focusProps, hoverProps)),
+		...(0, _bento_use_data_attributes.useDataAttributes)({
+			focused: isFocused,
+			hovered: isHovered,
+			focusVisible: isFocusVisible,
+			disabled: props.disabled || false,
+			invalid: !!props["aria-invalid"] && props["aria-invalid"] !== "false",
+			readonly: props.readOnly || false,
+			required: props.required || false,
+			empty: props.value === "" || props.value === void 0 || props.value === null,
+			checked: props.type === "checkbox" || props.type === "radio" ? !!props.checked : void 0
+		})
+	});
 });
-
+//#endregion
 exports.Input = Input;
-//# sourceMappingURL=index.cjs.map
+
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"names":["withSlots","Input","useProps","useFocusRing","useHover","mergeProps","React","useDataAttributes"],"mappings":";;;;;;;;;;;;;;AA0CO,IAAM,KAAA,GAAQA,eAAA,CAAU,YAAA,EAAc,SAASC,UAAS,IAAA,EAAkD;AAC/G,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAM,GAAIC,kBAAS,IAAI,CAAA;AACtC,EAAA,MAAM,EAAE,WAAU,GAAI,KAAA;AAEtB,EAAA,MAAM,EAAE,SAAA,EAAW,cAAA,EAAgB,UAAA,KAAeC,sBAAA,CAAa;AAAA,IAC7D,WAAA,EAAa,IAAA;AAAA,IACb;AAAA,GACD,CAAA;AACD,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAU,GAAIC,mBAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,WAAA,GAAcC,gBAAA,CAAW,KAAA,EAAO,UAAA,EAAY,UAAU,CAAA;AAE5D,EAAA,uBACEC,sBAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAM,WAAW,CAAA;AAAA,MACpB,GAAGC,mCAAA,CAAkB;AAAA,QACpB,OAAA,EAAS,SAAA;AAAA,QACT,OAAA,EAAS,SAAA;AAAA,QACT,YAAA,EAAc,cAAA;AAAA,QACd,QAAA,EAAU,MAAM,QAAA,IAAY,KAAA;AAAA,QAC5B,OAAA,EAAS,CAAC,CAAC,KAAA,CAAM,cAAc,CAAA,IAAK,KAAA,CAAM,cAAc,CAAA,KAAM,OAAA;AAAA,QAC9D,QAAA,EAAU,MAAM,QAAA,IAAY,KAAA;AAAA,QAC5B,QAAA,EAAU,MAAM,QAAA,IAAY,KAAA;AAAA,QAC5B,KAAA,EAAO,MAAM,KAAA,KAAU,EAAA,IAAM,MAAM,KAAA,KAAU,MAAA,IAAa,MAAM,KAAA,KAAU,IAAA;AAAA,QAC1E,OAAA,EAAS,KAAA,CAAM,IAAA,KAAS,UAAA,IAAc,KAAA,CAAM,SAAS,OAAA,GAAU,CAAC,CAAC,KAAA,CAAM,OAAA,GAAU;AAAA,OAClF;AAAA;AAAA,GACH;AAEJ,CAAC","file":"index.cjs","sourcesContent":["/* v8 ignore next */\nimport React from 'react';\nimport type { InputHTMLAttributes } from 'react';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport { useFocusRing, useHover } from 'react-aria';\nimport { mergeProps } from '@react-aria/utils';\nimport type { HoverEvents } from 'react-aria';\n\n/**\n * Props for the Input component.\n */\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, keyof HoverEvents> {\n  /** Whether the input should be focused on mount. */\n  autoFocus?: boolean;\n}\n\n/**\n * A universal input primitive component that renders an `<input>` element with React Aria interactions.\n * Supports all HTML input types with proper accessibility, hover, and focus management.\n *\n * @component\n * @param {InputProps} props - The properties passed to the Input component.\n *\n * @example\n * ```tsx\n * // Text input\n * <Input type=\"text\" placeholder=\"Enter text\" />\n *\n * // Checkbox\n * <Input type=\"checkbox\" />\n *\n * // With render props\n * <Input\n *   type=\"email\"\n *   className={(state) => state.isFocusVisible ? 'focused' : ''}\n * />\n * ```\n *\n * @public\n */\nexport const Input = withSlots('BentoInput', function Input(...args: [InputProps, React.Ref<HTMLInputElement>?]) {\n  const { props, apply } = useProps(args);\n  const { autoFocus } = props;\n\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing({\n    isTextInput: true,\n    autoFocus: autoFocus\n  });\n  const { hoverProps, isHovered } = useHover(props);\n\n  const mergedProps = mergeProps(props, focusProps, hoverProps);\n\n  return (\n    <input\n      {...apply(mergedProps)}\n      {...useDataAttributes({\n        focused: isFocused,\n        hovered: isHovered,\n        focusVisible: isFocusVisible,\n        disabled: props.disabled || false,\n        invalid: !!props['aria-invalid'] && props['aria-invalid'] !== 'false',\n        readonly: props.readOnly || false,\n        required: props.required || false,\n        empty: props.value === '' || props.value === undefined || props.value === null,\n        checked: props.type === 'checkbox' || props.type === 'radio' ? !!props.checked : undefined\n      })}\n    />\n  );\n}) as React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;\n"]}
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/index.tsx"],"sourcesContent":["/* v8 ignore next */\nimport React from 'react';\nimport type { InputHTMLAttributes } from 'react';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport { useFocusRing, useHover } from 'react-aria';\nimport { mergeProps } from '@react-aria/utils';\nimport type { HoverEvents } from 'react-aria';\n\n/**\n * Props for the Input component.\n */\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, keyof HoverEvents> {\n  /** Whether the input should be focused on mount. */\n  autoFocus?: boolean;\n}\n\n/**\n * A universal input primitive component that renders an `<input>` element with React Aria interactions.\n * Supports all HTML input types with proper accessibility, hover, and focus management.\n *\n * @component\n * @param {InputProps} props - The properties passed to the Input component.\n *\n * @example\n * ```tsx\n * // Text input\n * <Input type=\"text\" placeholder=\"Enter text\" />\n *\n * // Checkbox\n * <Input type=\"checkbox\" />\n *\n * // With render props\n * <Input\n *   type=\"email\"\n *   className={(state) => state.isFocusVisible ? 'focused' : ''}\n * />\n * ```\n *\n * @public\n */\nexport const Input = withSlots('BentoInput', function Input(...args: [InputProps, React.Ref<HTMLInputElement>?]) {\n  const { props, apply } = useProps(args);\n  const { autoFocus } = props;\n\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing({\n    isTextInput: true,\n    autoFocus: autoFocus\n  });\n  const { hoverProps, isHovered } = useHover(props);\n\n  const mergedProps = mergeProps(props, focusProps, hoverProps);\n\n  return (\n    <input\n      {...apply(mergedProps)}\n      {...useDataAttributes({\n        focused: isFocused,\n        hovered: isHovered,\n        focusVisible: isFocusVisible,\n        disabled: props.disabled || false,\n        invalid: !!props['aria-invalid'] && props['aria-invalid'] !== 'false',\n        readonly: props.readOnly || false,\n        required: props.required || false,\n        empty: props.value === '' || props.value === undefined || props.value === null,\n        checked: props.type === 'checkbox' || props.type === 'radio' ? !!props.checked : undefined\n      })}\n    />\n  );\n}) as React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,SAAA,GAAA,aAAA,WAAkB,cAAc,SAAS,MAAM,GAAG,MAAkD;CAC/G,MAAM,EAAE,OAAO,WAAA,GAAA,iBAAA,UAAmB,IAAI;CACtC,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,WAAW,gBAAgB,gBAAA,GAAA,WAAA,cAA4B;EAC7D,aAAa;EACF;CACb,CAAC;CACD,MAAM,EAAE,YAAY,eAAA,GAAA,WAAA,UAAuB,KAAK;CAIhD,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,GAAI,OAAA,GAAA,kBAAA,YAJuB,OAAO,YAAY,UAI1B,CAAC;EACrB,IAAA,GAAA,2BAAA,mBAAsB;GACpB,SAAS;GACT,SAAS;GACT,cAAc;GACd,UAAU,MAAM,YAAY;GAC5B,SAAS,CAAC,CAAC,MAAM,mBAAmB,MAAM,oBAAoB;GAC9D,UAAU,MAAM,YAAY;GAC5B,UAAU,MAAM,YAAY;GAC5B,OAAO,MAAM,UAAU,MAAM,MAAM,UAAU,KAAA,KAAa,MAAM,UAAU;GAC1E,SAAS,MAAM,SAAS,cAAc,MAAM,SAAS,UAAU,CAAC,CAAC,MAAM,UAAU,KAAA;EACnF,CAAC;CACF,CAAA;AAEL,CAAC"}

package/dist/index.d.cts

@@ -1,12 +1,13 @@
-import React, { InputHTMLAttributes } from 'react';
-import { HoverEvents } from 'react-aria';
+import React, { InputHTMLAttributes } from "react";
+import { HoverEvents } from "react-aria";
 
+//#region src/index.d.ts
 /**
  * Props for the Input component.
  */
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, keyof HoverEvents> {
-    /** Whether the input should be focused on mount. */
-    autoFocus?: boolean;
+  /** Whether the input should be focused on mount. */
+  autoFocus?: boolean;
 }
 /**
  * A universal input primitive component that renders an `<input>` element with React Aria interactions.
@@ -33,5 +34,6 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, keyof H
  * @public
  */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-
-export { Input, type InputProps };
+//#endregion
+export { Input, InputProps };
+//# 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":";;;;;AAaA;;UAAiB,UAAA,SAAmB,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,WAAA;EAAzB;EAE3D,SAAA;AAAA;;;;;;;;;;AAAS;AA2BX;;;;;;;;;;;;;;cAAa,KAAA,EA4BP,KAAA,CAAM,yBAAA,CAA0B,UAAA,GAAa,KAAA,CAAM,aAAA,CAAc,gBAAA"}

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

@@ -1,12 +1,13 @@
-import React, { InputHTMLAttributes } from 'react';
-import { HoverEvents } from 'react-aria';
+import React, { InputHTMLAttributes } from "react";
+import { HoverEvents } from "react-aria";
 
+//#region src/index.d.ts
 /**
  * Props for the Input component.
  */
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, keyof HoverEvents> {
-    /** Whether the input should be focused on mount. */
-    autoFocus?: boolean;
+  /** Whether the input should be focused on mount. */
+  autoFocus?: boolean;
 }
 /**
  * A universal input primitive component that renders an `<input>` element with React Aria interactions.
@@ -33,5 +34,6 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, keyof H
  * @public
  */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-
-export { Input, type InputProps };
+//#endregion
+export { Input, InputProps };
+//# 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":";;;;;AAaA;;UAAiB,UAAA,SAAmB,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,WAAA;EAAzB;EAE3D,SAAA;AAAA;;;;;;;;;;AAAS;AA2BX;;;;;;;;;;;;;;cAAa,KAAA,EA4BP,KAAA,CAAM,yBAAA,CAA0B,UAAA,GAAa,KAAA,CAAM,aAAA,CAAc,gBAAA"}

package/dist/index.mjs

@@ -0,0 +1,59 @@
+import "react";
+import { useDataAttributes } from "@bento/use-data-attributes";
+import { useProps } from "@bento/use-props";
+import { withSlots } from "@bento/slots";
+import { useFocusRing, useHover } from "react-aria";
+import { mergeProps } from "@react-aria/utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/index.tsx
+/**
+* A universal input primitive component that renders an `<input>` element with React Aria interactions.
+* Supports all HTML input types with proper accessibility, hover, and focus management.
+*
+* @component
+* @param {InputProps} props - The properties passed to the Input component.
+*
+* @example
+* ```tsx
+* // Text input
+* <Input type="text" placeholder="Enter text" />
+*
+* // Checkbox
+* <Input type="checkbox" />
+*
+* // With render props
+* <Input
+*   type="email"
+*   className={(state) => state.isFocusVisible ? 'focused' : ''}
+* />
+* ```
+*
+* @public
+*/
+const Input = withSlots("BentoInput", function Input(...args) {
+	const { props, apply } = useProps(args);
+	const { autoFocus } = props;
+	const { isFocused, isFocusVisible, focusProps } = useFocusRing({
+		isTextInput: true,
+		autoFocus
+	});
+	const { hoverProps, isHovered } = useHover(props);
+	return /* @__PURE__ */ jsx("input", {
+		...apply(mergeProps(props, focusProps, hoverProps)),
+		...useDataAttributes({
+			focused: isFocused,
+			hovered: isHovered,
+			focusVisible: isFocusVisible,
+			disabled: props.disabled || false,
+			invalid: !!props["aria-invalid"] && props["aria-invalid"] !== "false",
+			readonly: props.readOnly || false,
+			required: props.required || false,
+			empty: props.value === "" || props.value === void 0 || props.value === null,
+			checked: props.type === "checkbox" || props.type === "radio" ? !!props.checked : void 0
+		})
+	});
+});
+//#endregion
+export { Input };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.tsx"],"sourcesContent":["/* v8 ignore next */\nimport React from 'react';\nimport type { InputHTMLAttributes } from 'react';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport { useFocusRing, useHover } from 'react-aria';\nimport { mergeProps } from '@react-aria/utils';\nimport type { HoverEvents } from 'react-aria';\n\n/**\n * Props for the Input component.\n */\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, keyof HoverEvents> {\n  /** Whether the input should be focused on mount. */\n  autoFocus?: boolean;\n}\n\n/**\n * A universal input primitive component that renders an `<input>` element with React Aria interactions.\n * Supports all HTML input types with proper accessibility, hover, and focus management.\n *\n * @component\n * @param {InputProps} props - The properties passed to the Input component.\n *\n * @example\n * ```tsx\n * // Text input\n * <Input type=\"text\" placeholder=\"Enter text\" />\n *\n * // Checkbox\n * <Input type=\"checkbox\" />\n *\n * // With render props\n * <Input\n *   type=\"email\"\n *   className={(state) => state.isFocusVisible ? 'focused' : ''}\n * />\n * ```\n *\n * @public\n */\nexport const Input = withSlots('BentoInput', function Input(...args: [InputProps, React.Ref<HTMLInputElement>?]) {\n  const { props, apply } = useProps(args);\n  const { autoFocus } = props;\n\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing({\n    isTextInput: true,\n    autoFocus: autoFocus\n  });\n  const { hoverProps, isHovered } = useHover(props);\n\n  const mergedProps = mergeProps(props, focusProps, hoverProps);\n\n  return (\n    <input\n      {...apply(mergedProps)}\n      {...useDataAttributes({\n        focused: isFocused,\n        hovered: isHovered,\n        focusVisible: isFocusVisible,\n        disabled: props.disabled || false,\n        invalid: !!props['aria-invalid'] && props['aria-invalid'] !== 'false',\n        readonly: props.readOnly || false,\n        required: props.required || false,\n        empty: props.value === '' || props.value === undefined || props.value === null,\n        checked: props.type === 'checkbox' || props.type === 'radio' ? !!props.checked : undefined\n      })}\n    />\n  );\n}) as React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,QAAQ,UAAU,cAAc,SAAS,MAAM,GAAG,MAAkD;CAC/G,MAAM,EAAE,OAAO,UAAU,SAAS,IAAI;CACtC,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,WAAW,gBAAgB,eAAe,aAAa;EAC7D,aAAa;EACF;CACb,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS,KAAK;CAIhD,OACE,oBAAC,SAAD;EACE,GAAI,MAJY,WAAW,OAAO,YAAY,UAI1B,CAAC;EACrB,GAAI,kBAAkB;GACpB,SAAS;GACT,SAAS;GACT,cAAc;GACd,UAAU,MAAM,YAAY;GAC5B,SAAS,CAAC,CAAC,MAAM,mBAAmB,MAAM,oBAAoB;GAC9D,UAAU,MAAM,YAAY;GAC5B,UAAU,MAAM,YAAY;GAC5B,OAAO,MAAM,UAAU,MAAM,MAAM,UAAU,KAAA,KAAa,MAAM,UAAU;GAC1E,SAAS,MAAM,SAAS,cAAc,MAAM,SAAS,UAAU,CAAC,CAAC,MAAM,UAAU,KAAA;EACnF,CAAC;CACF,CAAA;AAEL,CAAC"}

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@bento/input",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Universal input primitive component supporting all HTML input types",
   "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",
-    "pretest": "npm run build",
+    "build": "tsdown",
+    "lint": "biome lint && tsgo --noEmit",
     "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",
@@ -29,9 +28,9 @@
   "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",
@@ -42,9 +41,17 @@
     "@bento/slots": "^0.3.0",
     "@bento/text": "^0.1.4",
     "@bento/use-data-attributes": "^0.1.1",
-    "@bento/use-props": "^0.2.1",
-    "@react-aria/utils": "^3.30.0",
-    "react-aria": "^3.44.0"
+    "@bento/use-props": "^0.2.3",
+    "@react-aria/utils": "^3.34.0",
+    "react-aria": "^3.48.0"
+  },
+  "devDependencies": {
+    "@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",
@@ -53,8 +60,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/dist/index.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { useDataAttributes } from '@bento/use-data-attributes';
-import { useProps } from '@bento/use-props';
-import { withSlots } from '@bento/slots';
-import { useFocusRing, useHover } from 'react-aria';
-import { mergeProps } from '@react-aria/utils';
-
-// src/index.tsx
-var Input = withSlots("BentoInput", function Input2(...args) {
-  const { props, apply } = useProps(args);
-  const { autoFocus } = props;
-  const { isFocused, isFocusVisible, focusProps } = useFocusRing({
-    isTextInput: true,
-    autoFocus
-  });
-  const { hoverProps, isHovered } = useHover(props);
-  const mergedProps = mergeProps(props, focusProps, hoverProps);
-  return /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      ...apply(mergedProps),
-      ...useDataAttributes({
-        focused: isFocused,
-        hovered: isHovered,
-        focusVisible: isFocusVisible,
-        disabled: props.disabled || false,
-        invalid: !!props["aria-invalid"] && props["aria-invalid"] !== "false",
-        readonly: props.readOnly || false,
-        required: props.required || false,
-        empty: props.value === "" || props.value === void 0 || props.value === null,
-        checked: props.type === "checkbox" || props.type === "radio" ? !!props.checked : void 0
-      })
-    }
-  );
-});
-
-export { Input };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.tsx"],"names":["Input"],"mappings":";;;;;;;;AA0CO,IAAM,KAAA,GAAQ,SAAA,CAAU,YAAA,EAAc,SAASA,UAAS,IAAA,EAAkD;AAC/G,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAM,GAAI,SAAS,IAAI,CAAA;AACtC,EAAA,MAAM,EAAE,WAAU,GAAI,KAAA;AAEtB,EAAA,MAAM,EAAE,SAAA,EAAW,cAAA,EAAgB,UAAA,KAAe,YAAA,CAAa;AAAA,IAC7D,WAAA,EAAa,IAAA;AAAA,IACb;AAAA,GACD,CAAA;AACD,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAU,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,KAAA,EAAO,UAAA,EAAY,UAAU,CAAA;AAE5D,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAM,WAAW,CAAA;AAAA,MACpB,GAAG,iBAAA,CAAkB;AAAA,QACpB,OAAA,EAAS,SAAA;AAAA,QACT,OAAA,EAAS,SAAA;AAAA,QACT,YAAA,EAAc,cAAA;AAAA,QACd,QAAA,EAAU,MAAM,QAAA,IAAY,KAAA;AAAA,QAC5B,OAAA,EAAS,CAAC,CAAC,KAAA,CAAM,cAAc,CAAA,IAAK,KAAA,CAAM,cAAc,CAAA,KAAM,OAAA;AAAA,QAC9D,QAAA,EAAU,MAAM,QAAA,IAAY,KAAA;AAAA,QAC5B,QAAA,EAAU,MAAM,QAAA,IAAY,KAAA;AAAA,QAC5B,KAAA,EAAO,MAAM,KAAA,KAAU,EAAA,IAAM,MAAM,KAAA,KAAU,MAAA,IAAa,MAAM,KAAA,KAAU,IAAA;AAAA,QAC1E,OAAA,EAAS,KAAA,CAAM,IAAA,KAAS,UAAA,IAAc,KAAA,CAAM,SAAS,OAAA,GAAU,CAAC,CAAC,KAAA,CAAM,OAAA,GAAU;AAAA,OAClF;AAAA;AAAA,GACH;AAEJ,CAAC","file":"index.js","sourcesContent":["/* v8 ignore next */\nimport React from 'react';\nimport type { InputHTMLAttributes } from 'react';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport { useFocusRing, useHover } from 'react-aria';\nimport { mergeProps } from '@react-aria/utils';\nimport type { HoverEvents } from 'react-aria';\n\n/**\n * Props for the Input component.\n */\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, keyof HoverEvents> {\n  /** Whether the input should be focused on mount. */\n  autoFocus?: boolean;\n}\n\n/**\n * A universal input primitive component that renders an `<input>` element with React Aria interactions.\n * Supports all HTML input types with proper accessibility, hover, and focus management.\n *\n * @component\n * @param {InputProps} props - The properties passed to the Input component.\n *\n * @example\n * ```tsx\n * // Text input\n * <Input type=\"text\" placeholder=\"Enter text\" />\n *\n * // Checkbox\n * <Input type=\"checkbox\" />\n *\n * // With render props\n * <Input\n *   type=\"email\"\n *   className={(state) => state.isFocusVisible ? 'focused' : ''}\n * />\n * ```\n *\n * @public\n */\nexport const Input = withSlots('BentoInput', function Input(...args: [InputProps, React.Ref<HTMLInputElement>?]) {\n  const { props, apply } = useProps(args);\n  const { autoFocus } = props;\n\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing({\n    isTextInput: true,\n    autoFocus: autoFocus\n  });\n  const { hoverProps, isHovered } = useHover(props);\n\n  const mergedProps = mergeProps(props, focusProps, hoverProps);\n\n  return (\n    <input\n      {...apply(mergedProps)}\n      {...useDataAttributes({\n        focused: isFocused,\n        hovered: isHovered,\n        focusVisible: isFocusVisible,\n        disabled: props.disabled || false,\n        invalid: !!props['aria-invalid'] && props['aria-invalid'] !== 'false',\n        readonly: props.readOnly || false,\n        required: props.required || false,\n        empty: props.value === '' || props.value === undefined || props.value === null,\n        checked: props.type === 'checkbox' || props.type === 'radio' ? !!props.checked : undefined\n      })}\n    />\n  );\n}) as React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;\n"]}