@asnewyla/unstyled-input 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XD
+
+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.md

@@ -0,0 +1,42 @@
+# @asnewyla/unstyled-input
+
+Unstyled, accessible text input primitive. Handles focus and invalid-state
+tracking without imposing any visual styling — the base layer under
+`@asnewyla/input`.
+
+## Install
+
+```bash
+npm install @asnewyla/unstyled-input
+```
+
+## Usage
+
+```tsx
+import { UnstyledInput } from '@asnewyla/unstyled-input';
+
+// Uncontrolled
+<UnstyledInput aria-label="Name" defaultValue="" />
+
+// Controlled
+<UnstyledInput aria-label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+
+// Invalid state
+<UnstyledInput aria-label="Email" invalid />
+```
+
+### Props
+
+| Prop | Type | Default |
+|---|---|---|
+| `value` / `defaultValue` | `string` | — |
+| `onChange` | `(event: React.ChangeEvent<HTMLInputElement>) => void` | — |
+| `disabled` | `boolean` | `false` |
+| `invalid` | `boolean` | `false` |
+
+Uncontrolled by default, same as a native `<input>` — pass `value` +
+`onChange` to control it yourself.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+
+type UnstyledInputProps = {
+    defaultValue?: string;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'value' | 'onChange' | 'disabled' | 'invalid'>;
+declare const UnstyledInput: react.ForwardRefExoticComponent<{
+    defaultValue?: string;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+} & Omit<react.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "value" | "onChange" | "disabled" | "invalid"> & react.RefAttributes<HTMLInputElement>>;
+
+export { UnstyledInput, type UnstyledInputProps };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+
+type UnstyledInputProps = {
+    defaultValue?: string;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'value' | 'onChange' | 'disabled' | 'invalid'>;
+declare const UnstyledInput: react.ForwardRefExoticComponent<{
+    defaultValue?: string;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+} & Omit<react.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "value" | "onChange" | "disabled" | "invalid"> & react.RefAttributes<HTMLInputElement>>;
+
+export { UnstyledInput, type UnstyledInputProps };

package/dist/index.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/UnstyledInput.tsx
+function booleanToString(value) {
+  return value ? "true" : void 0;
+}
+function UnstyledInputInner({
+  defaultValue,
+  value,
+  onChange,
+  disabled,
+  invalid,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const [focused, setFocused] = react.useState(false);
+  const handleFocus = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      defaultValue,
+      value,
+      onChange,
+      "data-focused": booleanToString(focused),
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      disabled,
+      "data-disabled": booleanToString(disabled),
+      "data-invalid": booleanToString(invalid),
+      "aria-invalid": invalid ? "true" : void 0,
+      ref,
+      ...rest
+    }
+  );
+}
+var UnstyledInput = react.forwardRef(
+  UnstyledInputInner
+);
+
+exports.UnstyledInput = UnstyledInput;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/UnstyledInput.tsx"],"names":["useState","jsx","forwardRef"],"mappings":";;;;;;AAaA,SAAS,gBAAgB,KAAA,EAAgD;AACvE,EAAA,OAAO,QAAQ,MAAA,GAAS,MAAA;AAC1B;AAEA,SAAS,kBAAA,CACP;AAAA,EACE,YAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA0C;AAC7D,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,OAAA,GAAU,CAAC,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,CAAA,KAA0C;AAC5D,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,MAAA,GAAS,CAAC,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,YAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA,EAAc,gBAAgB,OAAO,CAAA;AAAA,MACrC,OAAA,EAAS,WAAA;AAAA,MACT,MAAA,EAAQ,UAAA;AAAA,MACR,QAAA;AAAA,MACA,eAAA,EAAe,gBAAgB,QAAQ,CAAA;AAAA,MACvC,cAAA,EAAc,gBAAgB,OAAO,CAAA;AAAA,MACrC,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,MACjC,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEO,IAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B;AACF","file":"index.js","sourcesContent":["import { type ForwardedRef, forwardRef, useState } from 'react';\n\nexport type UnstyledInputProps = {\n  defaultValue?: string;\n  value?: string;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  invalid?: boolean;\n} & Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'defaultValue' | 'value' | 'onChange' | 'disabled' | 'invalid'\n>;\n\nfunction booleanToString(value: boolean | undefined): string | undefined {\n  return value ? 'true' : undefined;\n}\n\nfunction UnstyledInputInner(\n  {\n    defaultValue,\n    value,\n    onChange,\n    disabled,\n    invalid,\n    onFocus,\n    onBlur,\n    ...rest\n  }: UnstyledInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const [focused, setFocused] = useState(false);\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    onFocus?.(e);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    onBlur?.(e);\n  };\n\n  return (\n    <input\n      defaultValue={defaultValue}\n      value={value}\n      onChange={onChange}\n      data-focused={booleanToString(focused)}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      disabled={disabled}\n      data-disabled={booleanToString(disabled)}\n      data-invalid={booleanToString(invalid)}\n      aria-invalid={invalid ? 'true' : undefined}\n      ref={ref}\n      {...rest}\n    />\n  );\n}\n\nexport const UnstyledInput = forwardRef<HTMLInputElement, UnstyledInputProps>(\n  UnstyledInputInner,\n);\n"]}

package/dist/index.mjs

@@ -0,0 +1,51 @@
+import { forwardRef, useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/UnstyledInput.tsx
+function booleanToString(value) {
+  return value ? "true" : void 0;
+}
+function UnstyledInputInner({
+  defaultValue,
+  value,
+  onChange,
+  disabled,
+  invalid,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const [focused, setFocused] = useState(false);
+  const handleFocus = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      defaultValue,
+      value,
+      onChange,
+      "data-focused": booleanToString(focused),
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      disabled,
+      "data-disabled": booleanToString(disabled),
+      "data-invalid": booleanToString(invalid),
+      "aria-invalid": invalid ? "true" : void 0,
+      ref,
+      ...rest
+    }
+  );
+}
+var UnstyledInput = forwardRef(
+  UnstyledInputInner
+);
+
+export { UnstyledInput };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/UnstyledInput.tsx"],"names":[],"mappings":";;;;AAaA,SAAS,gBAAgB,KAAA,EAAgD;AACvE,EAAA,OAAO,QAAQ,MAAA,GAAS,MAAA;AAC1B;AAEA,SAAS,kBAAA,CACP;AAAA,EACE,YAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA0C;AAC7D,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,OAAA,GAAU,CAAC,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,CAAA,KAA0C;AAC5D,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,MAAA,GAAS,CAAC,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,YAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA,EAAc,gBAAgB,OAAO,CAAA;AAAA,MACrC,OAAA,EAAS,WAAA;AAAA,MACT,MAAA,EAAQ,UAAA;AAAA,MACR,QAAA;AAAA,MACA,eAAA,EAAe,gBAAgB,QAAQ,CAAA;AAAA,MACvC,cAAA,EAAc,gBAAgB,OAAO,CAAA;AAAA,MACrC,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,MACjC,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEO,IAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B;AACF","file":"index.mjs","sourcesContent":["import { type ForwardedRef, forwardRef, useState } from 'react';\n\nexport type UnstyledInputProps = {\n  defaultValue?: string;\n  value?: string;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  invalid?: boolean;\n} & Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'defaultValue' | 'value' | 'onChange' | 'disabled' | 'invalid'\n>;\n\nfunction booleanToString(value: boolean | undefined): string | undefined {\n  return value ? 'true' : undefined;\n}\n\nfunction UnstyledInputInner(\n  {\n    defaultValue,\n    value,\n    onChange,\n    disabled,\n    invalid,\n    onFocus,\n    onBlur,\n    ...rest\n  }: UnstyledInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const [focused, setFocused] = useState(false);\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    onFocus?.(e);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    onBlur?.(e);\n  };\n\n  return (\n    <input\n      defaultValue={defaultValue}\n      value={value}\n      onChange={onChange}\n      data-focused={booleanToString(focused)}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      disabled={disabled}\n      data-disabled={booleanToString(disabled)}\n      data-invalid={booleanToString(invalid)}\n      aria-invalid={invalid ? 'true' : undefined}\n      ref={ref}\n      {...rest}\n    />\n  );\n}\n\nexport const UnstyledInput = forwardRef<HTMLInputElement, UnstyledInputProps>(\n  UnstyledInputInner,\n);\n"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@asnewyla/unstyled-input",
+  "version": "0.2.0",
+  "description": "Unstyled text input primitive with accessibility",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xavierDelaFuente/xd-components.git",
+    "directory": "packages/unstyled-input"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "input",
+    "unstyled",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.1.0",
+    "vitest": "^2.0.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "jsdom": "^24.0.0",
+    "typescript": "^5.5.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit"
+  }
+}