@negative-space/input 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Matheus Bastani
+
+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,15 @@
+# @negative-space/input
+
+Headless Input component by Negative Space, providing accessible behavior without visual constraints.
+
+## Installation
+
+    # Using Yarn
+    yarn add @negative-space/input
+
+    # Using npm
+    npm install @negative-space/input
+
+## Contributing
+
+Feel free to fork, tweak, and send a pull request!

package/dist/index.d.mts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { IconButtonProps } from '@negative-space/button';
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix' | 'style'> {
+    classNames?: {
+        field?: {
+            root?: string;
+            label?: string;
+            error?: string;
+        };
+        root?: string;
+        prefix?: string;
+        content?: string;
+        suffix?: string;
+    };
+    styles?: {
+        field?: {
+            root?: React.CSSProperties;
+            label?: React.CSSProperties;
+            error?: React.CSSProperties;
+        };
+        root?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        content?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+    };
+    label?: string;
+    error?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    htmlFor?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface InputPasswordProps extends Omit<InputProps, 'classNames' | 'styles' | 'suffix' | 'type'> {
+    classNames?: InputProps['classNames'] & {
+        button?: string;
+    };
+    styles?: InputProps['styles'] & {
+        button?: React.CSSProperties;
+    };
+    onToggleVisibility?: (visible: boolean) => void;
+    buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label'>;
+}
+declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, InputPassword, type InputPasswordProps, type InputProps };

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { IconButtonProps } from '@negative-space/button';
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix' | 'style'> {
+    classNames?: {
+        field?: {
+            root?: string;
+            label?: string;
+            error?: string;
+        };
+        root?: string;
+        prefix?: string;
+        content?: string;
+        suffix?: string;
+    };
+    styles?: {
+        field?: {
+            root?: React.CSSProperties;
+            label?: React.CSSProperties;
+            error?: React.CSSProperties;
+        };
+        root?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        content?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+    };
+    label?: string;
+    error?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    htmlFor?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface InputPasswordProps extends Omit<InputProps, 'classNames' | 'styles' | 'suffix' | 'type'> {
+    classNames?: InputProps['classNames'] & {
+        button?: string;
+    };
+    styles?: InputProps['styles'] & {
+        button?: React.CSSProperties;
+    };
+    onToggleVisibility?: (visible: boolean) => void;
+    buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label'>;
+}
+declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, InputPassword, type InputPasswordProps, type InputProps };

package/dist/index.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var system = require('@negative-space/system');
+var field = require('@negative-space/field');
+var flex = require('@negative-space/flex');
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('@negative-space/button');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/Input.tsx
+var Input = React__default.default.forwardRef(
+  ({ classNames, styles, label, error, prefix, suffix, htmlFor, id, ...props }, ref) => {
+    const { global } = system.useNSUI();
+    const generatedId = React__default.default.useId();
+    const inputId = id ?? generatedId;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      field.Field,
+      {
+        classNames: classNames?.field,
+        styles: styles?.field,
+        label,
+        error,
+        htmlFor: htmlFor ?? inputId,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          flex.Flex,
+          {
+            alignItems: "center",
+            className: system.cn(`${global.prefixCls}-input-root`, classNames?.root),
+            style: { marginTop: "6px", ...styles?.root },
+            children: [
+              prefix && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: system.cn(`${global.prefixCls}-input-prefix`, classNames?.prefix),
+                  style: styles?.prefix,
+                  children: prefix
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ...props,
+                  ref,
+                  id: inputId,
+                  className: system.cn(`${global.prefixCls}-input-content`, classNames?.content),
+                  style: { outline: "none", ...styles?.content }
+                }
+              ),
+              suffix && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: system.cn(`${global.prefixCls}-input-suffix`, classNames?.suffix),
+                  style: styles?.suffix,
+                  children: suffix
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var InputPassword = React__default.default.forwardRef(
+  ({ onToggleVisibility, classNames, styles, buttonProps, ...rest }, ref) => {
+    const { global } = system.useNSUI();
+    const [visible, setVisible] = React__default.default.useState(false);
+    const handleToggle = () => {
+      setVisible((prev) => {
+        const next = !prev;
+        onToggleVisibility?.(next);
+        return next;
+      });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        ...rest,
+        ref,
+        type: visible ? "text" : "password",
+        "data-visible": visible,
+        classNames: {
+          ...classNames,
+          root: system.cn(classNames?.root, `${global.prefixCls}-input-password`)
+        },
+        styles,
+        suffix: /* @__PURE__ */ jsxRuntime.jsx(
+          button.IconButton,
+          {
+            ...buttonProps,
+            onClick: handleToggle,
+            "aria-label": visible ? "Hide password" : "Show password",
+            className: classNames?.button,
+            style: styles?.button,
+            children: visible ? /* @__PURE__ */ jsxRuntime.jsx(system.EyeOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(system.Eye, {})
+          }
+        )
+      }
+    );
+  }
+);
+InputPassword.displayName = "InputPassword";
+
+exports.Input = Input;
+exports.InputPassword = InputPassword;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Input.tsx","../src/InputPassword.tsx"],"names":["React","useNSUI","jsx","Field","jsxs","Flex","cn","IconButton","EyeOff","Eye"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Field } from '@negative-space/field'\nimport { Flex } from '@negative-space/flex'\n\nexport interface InputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'className' | 'prefix' | 'style'\n> {\n  classNames?: {\n    field?: {\n      root?: string\n      label?: string\n      error?: string\n    }\n    root?: string\n    prefix?: string\n    content?: string\n    suffix?: string\n  }\n  styles?: {\n    field?: {\n      root?: React.CSSProperties\n      label?: React.CSSProperties\n      error?: React.CSSProperties\n    }\n    root?: React.CSSProperties\n    prefix?: React.CSSProperties\n    content?: React.CSSProperties\n    suffix?: React.CSSProperties\n  }\n  label?: string\n  error?: string\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n  htmlFor?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ classNames, styles, label, error, prefix, suffix, htmlFor, id, ...props }, ref) => {\n    const { global } = useNSUI()\n    const generatedId = React.useId()\n    const inputId = id ?? generatedId\n\n    return (\n      <Field\n        classNames={classNames?.field}\n        styles={styles?.field}\n        label={label}\n        error={error}\n        htmlFor={htmlFor ?? inputId}\n      >\n        <Flex\n          alignItems=\"center\"\n          className={cn(`${global.prefixCls}-input-root`, classNames?.root)}\n          style={{ marginTop: '6px', ...styles?.root }}\n        >\n          {prefix && (\n            <span\n              className={cn(`${global.prefixCls}-input-prefix`, classNames?.prefix)}\n              style={styles?.prefix}\n            >\n              {prefix}\n            </span>\n          )}\n\n          <input\n            {...props}\n            ref={ref}\n            id={inputId}\n            className={cn(`${global.prefixCls}-input-content`, classNames?.content)}\n            style={{ outline: 'none', ...styles?.content }}\n          />\n\n          {suffix && (\n            <span\n              className={cn(`${global.prefixCls}-input-suffix`, classNames?.suffix)}\n              style={styles?.suffix}\n            >\n              {suffix}\n            </span>\n          )}\n        </Flex>\n      </Field>\n    )\n  }\n)\n\nInput.displayName = 'Input'\n","import React from 'react'\nimport { cn, useNSUI, Eye, EyeOff } from '@negative-space/system'\nimport { Input, type InputProps } from '.'\nimport { IconButton, type IconButtonProps } from '@negative-space/button'\n\nexport interface InputPasswordProps extends Omit<\n  InputProps,\n  'classNames' | 'styles' | 'suffix' | 'type'\n> {\n  classNames?: InputProps['classNames'] & {\n    button?: string\n  }\n  styles?: InputProps['styles'] & {\n    button?: React.CSSProperties\n  }\n  onToggleVisibility?: (visible: boolean) => void\n  buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label'>\n}\n\nexport const InputPassword = React.forwardRef<HTMLInputElement, InputPasswordProps>(\n  ({ onToggleVisibility, classNames, styles, buttonProps, ...rest }, ref) => {\n    const { global } = useNSUI()\n    const [visible, setVisible] = React.useState(false)\n\n    const handleToggle = () => {\n      setVisible((prev) => {\n        const next = !prev\n        onToggleVisibility?.(next)\n        return next\n      })\n    }\n\n    return (\n      <Input\n        {...rest}\n        ref={ref}\n        type={visible ? 'text' : 'password'}\n        data-visible={visible}\n        classNames={{\n          ...classNames,\n          root: cn(classNames?.root, `${global.prefixCls}-input-password`)\n        }}\n        styles={styles}\n        suffix={\n          <IconButton\n            {...buttonProps}\n            onClick={handleToggle}\n            aria-label={visible ? 'Hide password' : 'Show password'}\n            className={classNames?.button}\n            style={styles?.button}\n          >\n            {visible ? <EyeOff /> : <Eye />}\n          </IconButton>\n        }\n      />\n    )\n  }\n)\n\nInputPassword.displayName = 'InputPassword'\n"]}

package/dist/index.mjs

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useNSUI, cn, EyeOff, Eye } from '@negative-space/system';
+import { Field } from '@negative-space/field';
+import { Flex } from '@negative-space/flex';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconButton } from '@negative-space/button';
+
+// src/Input.tsx
+var Input = React.forwardRef(
+  ({ classNames, styles, label, error, prefix, suffix, htmlFor, id, ...props }, ref) => {
+    const { global } = useNSUI();
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        classNames: classNames?.field,
+        styles: styles?.field,
+        label,
+        error,
+        htmlFor: htmlFor ?? inputId,
+        children: /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            alignItems: "center",
+            className: cn(`${global.prefixCls}-input-root`, classNames?.root),
+            style: { marginTop: "6px", ...styles?.root },
+            children: [
+              prefix && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(`${global.prefixCls}-input-prefix`, classNames?.prefix),
+                  style: styles?.prefix,
+                  children: prefix
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...props,
+                  ref,
+                  id: inputId,
+                  className: cn(`${global.prefixCls}-input-content`, classNames?.content),
+                  style: { outline: "none", ...styles?.content }
+                }
+              ),
+              suffix && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(`${global.prefixCls}-input-suffix`, classNames?.suffix),
+                  style: styles?.suffix,
+                  children: suffix
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var InputPassword = React.forwardRef(
+  ({ onToggleVisibility, classNames, styles, buttonProps, ...rest }, ref) => {
+    const { global } = useNSUI();
+    const [visible, setVisible] = React.useState(false);
+    const handleToggle = () => {
+      setVisible((prev) => {
+        const next = !prev;
+        onToggleVisibility?.(next);
+        return next;
+      });
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...rest,
+        ref,
+        type: visible ? "text" : "password",
+        "data-visible": visible,
+        classNames: {
+          ...classNames,
+          root: cn(classNames?.root, `${global.prefixCls}-input-password`)
+        },
+        styles,
+        suffix: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ...buttonProps,
+            onClick: handleToggle,
+            "aria-label": visible ? "Hide password" : "Show password",
+            className: classNames?.button,
+            style: styles?.button,
+            children: visible ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+          }
+        )
+      }
+    );
+  }
+);
+InputPassword.displayName = "InputPassword";
+
+export { Input, InputPassword };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Input.tsx","../src/InputPassword.tsx"],"names":["React","useNSUI","jsx","cn"],"mappings":"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","file":"index.mjs","sourcesContent":["import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Field } from '@negative-space/field'\nimport { Flex } from '@negative-space/flex'\n\nexport interface InputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'className' | 'prefix' | 'style'\n> {\n  classNames?: {\n    field?: {\n      root?: string\n      label?: string\n      error?: string\n    }\n    root?: string\n    prefix?: string\n    content?: string\n    suffix?: string\n  }\n  styles?: {\n    field?: {\n      root?: React.CSSProperties\n      label?: React.CSSProperties\n      error?: React.CSSProperties\n    }\n    root?: React.CSSProperties\n    prefix?: React.CSSProperties\n    content?: React.CSSProperties\n    suffix?: React.CSSProperties\n  }\n  label?: string\n  error?: string\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n  htmlFor?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ classNames, styles, label, error, prefix, suffix, htmlFor, id, ...props }, ref) => {\n    const { global } = useNSUI()\n    const generatedId = React.useId()\n    const inputId = id ?? generatedId\n\n    return (\n      <Field\n        classNames={classNames?.field}\n        styles={styles?.field}\n        label={label}\n        error={error}\n        htmlFor={htmlFor ?? inputId}\n      >\n        <Flex\n          alignItems=\"center\"\n          className={cn(`${global.prefixCls}-input-root`, classNames?.root)}\n          style={{ marginTop: '6px', ...styles?.root }}\n        >\n          {prefix && (\n            <span\n              className={cn(`${global.prefixCls}-input-prefix`, classNames?.prefix)}\n              style={styles?.prefix}\n            >\n              {prefix}\n            </span>\n          )}\n\n          <input\n            {...props}\n            ref={ref}\n            id={inputId}\n            className={cn(`${global.prefixCls}-input-content`, classNames?.content)}\n            style={{ outline: 'none', ...styles?.content }}\n          />\n\n          {suffix && (\n            <span\n              className={cn(`${global.prefixCls}-input-suffix`, classNames?.suffix)}\n              style={styles?.suffix}\n            >\n              {suffix}\n            </span>\n          )}\n        </Flex>\n      </Field>\n    )\n  }\n)\n\nInput.displayName = 'Input'\n","import React from 'react'\nimport { cn, useNSUI, Eye, EyeOff } from '@negative-space/system'\nimport { Input, type InputProps } from '.'\nimport { IconButton, type IconButtonProps } from '@negative-space/button'\n\nexport interface InputPasswordProps extends Omit<\n  InputProps,\n  'classNames' | 'styles' | 'suffix' | 'type'\n> {\n  classNames?: InputProps['classNames'] & {\n    button?: string\n  }\n  styles?: InputProps['styles'] & {\n    button?: React.CSSProperties\n  }\n  onToggleVisibility?: (visible: boolean) => void\n  buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label'>\n}\n\nexport const InputPassword = React.forwardRef<HTMLInputElement, InputPasswordProps>(\n  ({ onToggleVisibility, classNames, styles, buttonProps, ...rest }, ref) => {\n    const { global } = useNSUI()\n    const [visible, setVisible] = React.useState(false)\n\n    const handleToggle = () => {\n      setVisible((prev) => {\n        const next = !prev\n        onToggleVisibility?.(next)\n        return next\n      })\n    }\n\n    return (\n      <Input\n        {...rest}\n        ref={ref}\n        type={visible ? 'text' : 'password'}\n        data-visible={visible}\n        classNames={{\n          ...classNames,\n          root: cn(classNames?.root, `${global.prefixCls}-input-password`)\n        }}\n        styles={styles}\n        suffix={\n          <IconButton\n            {...buttonProps}\n            onClick={handleToggle}\n            aria-label={visible ? 'Hide password' : 'Show password'}\n            className={classNames?.button}\n            style={styles?.button}\n          >\n            {visible ? <EyeOff /> : <Eye />}\n          </IconButton>\n        }\n      />\n    )\n  }\n)\n\nInputPassword.displayName = 'InputPassword'\n"]}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@negative-space/input",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Headless Input component by Negative Space, providing accessible behavior without visual constraints",
+  "keywords": [
+    "data-entry",
+    "input",
+    "negative-space",
+    "nsui",
+    "ui"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/negative-space-ui/nsui",
+    "directory": "packages/ui/input"
+  },
+  "bugs": {
+    "url": "https://github.com/negative-space-ui/nsui/issues"
+  },
+  "dependencies": {
+    "@negative-space/button": "2.4.2",
+    "@negative-space/field": "1.0.1",
+    "@negative-space/flex": "1.2.2",
+    "@negative-space/system": "1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3"
+  },
+  "clean-package": "../../../../clean-package.config.json",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf dist .turbo",
+    "dev": "pnpm build:fast --watch",
+    "lint": "eslint . --ext ts,tsx",
+    "typecheck": "tsc --noEmit"
+  }
+}