@dax-ui/text-field 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @dax-ui/text-field
+
+## 0.1.0
+
+### Minor Changes
+
+- First public release: design tokens, theme and UIProvider, Button, TextField, the
+  @dax-ui/react bundle, and @dax-ui/nextjs for Next.js App Router.

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2026 Digital Auxilius. All rights reserved.
+
+This software and its source code are proprietary. They are made publicly available
+for viewing and installation only. No license is granted to use, copy, modify, merge,
+publish, distribute, sublicense or sell copies of this software, in whole or in part,
+except under a separate written agreement with Digital Auxilius.
+
+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 ARISING FROM, OUT OF OR
+IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,68 @@
-# Temporary Holding Version
+# @dax-ui/text-field
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Single- or multi-line text input with a label, helper text and error state.
+Wraps MUI's TextField, fixed to the outlined style, small and full width by default.
+
+## Installation
+
+```bash
+pnpm add @dax-ui/text-field
+```
+
+MUI and Emotion are included; the app only needs React 18 or 19.
+
+One-time setup per app (skip if the app already uses dax-ui): install
+[`@dax-ui/theme`](https://www.npmjs.com/package/@dax-ui/theme) and wrap the app in its `UIProvider`.
+
+```bash
+pnpm add @dax-ui/theme
+```
+
+## Usage
+
+```tsx
+import { TextField } from '@dax-ui/text-field';
+
+// Controlled
+const [email, setEmail] = useState('');
+<TextField label="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+
+// Validation message
+<TextField label="Email" error={!isValid} helperText={isValid ? ' ' : 'Enter a valid email address'} />
+
+// Required
+<TextField label="Company name" required />
+
+// Multi-line
+<TextField label="Notes" multiline minRows={3} maxRows={8} />
+
+// Uncontrolled, inside a form
+<form onSubmit={handleSubmit}>
+  <TextField label="Name" name="name" defaultValue="Ada" />
+</form>
+```
+
+## Props
+
+<!-- props:start TextField -->
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultValue` | `unknown` |  | Initial value, for an uncontrolled field. |
+| `disabled` | `boolean` | `false` | Disables the field. |
+| `error` | `boolean` | `false` | Shows the field in its error state and marks the input `aria-invalid`. Pair it with `helperText` explaining what is wrong. |
+| `fullWidth` | `boolean` | `true` | Stretches the field to the full width of its container. |
+| `helperText` | `ReactNode` |  | Text under the field: a hint normally, the error message when `error` is set. |
+| `label` | `ReactNode` |  | Label shown on the field's border. Also the input's accessible name, so always set it. |
+| `multiline` | `boolean` | `false` | Renders a growing `<textarea>` instead of an `<input>`. Use `minRows` / `maxRows` to bound it. |
+| `name` | `string` |  | Name submitted with the form. |
+| `onChange` | `ChangeEventHandler<HTMLInputElement \| HTMLTextAreaElement, Element>` |  | Called on every change; read the new value from `event.target.value`. |
+| `placeholder` | `string` |  | Hint shown inside the empty input. Don't use it instead of `label`. |
+| `required` | `boolean` | `false` | Marks the field as required: adds an asterisk to the label and `required` to the input. |
+| `size` | `"small" \| "medium"` | `small` | Field height: `small` (40px) or `medium` (56px). |
+| `type` | `HTMLInputTypeAttribute` | `text` | HTML input type, e.g. `email`, `password`, `number`. |
+| `value` | `unknown` |  | Current value, for a controlled field. Use with `onChange`. |
+<!-- props:end -->
+
+Any other [MUI TextField prop](https://mui.com/material-ui/api/text-field/) (`minRows`,
+`maxRows`, `autoComplete`, `slotProps`, `sx`, ...) is passed through to MUI. `variant` is
+fixed to `outlined`. `ref` is forwarded to the root element.

package/lib/index.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { OutlinedTextFieldProps } from '@mui/material/TextField';
+
+interface TextFieldProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+    /** Label shown on the field's border. Also the input's accessible name, so always set it. */
+    label?: OutlinedTextFieldProps['label'];
+    /** Hint shown inside the empty input. Don't use it instead of `label`. */
+    placeholder?: OutlinedTextFieldProps['placeholder'];
+    /** Text under the field: a hint normally, the error message when `error` is set. */
+    helperText?: OutlinedTextFieldProps['helperText'];
+    /**
+     * Shows the field in its error state and marks the input `aria-invalid`.
+     * Pair it with `helperText` explaining what is wrong.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Marks the field as required: adds an asterisk to the label and `required` to the input.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Disables the field.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Current value, for a controlled field. Use with `onChange`. */
+    value?: OutlinedTextFieldProps['value'];
+    /** Initial value, for an uncontrolled field. */
+    defaultValue?: OutlinedTextFieldProps['defaultValue'];
+    /** Called on every change; read the new value from `event.target.value`. */
+    onChange?: OutlinedTextFieldProps['onChange'];
+    /**
+     * HTML input type, e.g. `email`, `password`, `number`.
+     * @default 'text'
+     */
+    type?: OutlinedTextFieldProps['type'];
+    /**
+     * Field height: `small` (40px) or `medium` (56px).
+     * @default 'small'
+     */
+    size?: OutlinedTextFieldProps['size'];
+    /**
+     * Stretches the field to the full width of its container.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Renders a growing `<textarea>` instead of an `<input>`. Use `minRows` / `maxRows` to bound it.
+     * @default false
+     */
+    multiline?: boolean;
+    /** Name submitted with the form. */
+    name?: OutlinedTextFieldProps['name'];
+}
+
+/**
+ * Single- or multi-line text input with a label, helper text and error state.
+ * Wraps MUI's TextField, fixed to the outlined style, small and full width by default.
+ */
+declare const TextField: react.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { TextField, type TextFieldProps };

package/lib/index.js

@@ -0,0 +1,13 @@
+"use client";
+
+// src/TextField.tsx
+import { forwardRef } from "react";
+import MuiTextField from "@mui/material/TextField";
+import { jsx } from "react/jsx-runtime";
+var TextField = forwardRef(function TextField2({ size = "small", fullWidth = true, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(MuiTextField, { ref, variant: "outlined", size, fullWidth, ...rest });
+});
+export {
+  TextField
+};
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TextField.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport MuiTextField from '@mui/material/TextField';\nimport type { TextFieldProps } from './TextField.types';\n\n/**\n * Single- or multi-line text input with a label, helper text and error state.\n * Wraps MUI's TextField, fixed to the outlined style, small and full width by default.\n */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(function TextField(\n  { size = 'small', fullWidth = true, ...rest },\n  ref,\n) {\n  return <MuiTextField ref={ref} variant=\"outlined\" size={size} fullWidth={fullWidth} {...rest} />;\n});\n"],"mappings":";;;AAAA,SAAS,kBAAkB;AAC3B,OAAO,kBAAkB;AAWhB;AAJF,IAAM,YAAY,WAA2C,SAASA,WAC3E,EAAE,OAAO,SAAS,YAAY,MAAM,GAAG,KAAK,GAC5C,KACA;AACA,SAAO,oBAAC,gBAAa,KAAU,SAAQ,YAAW,MAAY,WAAuB,GAAG,MAAM;AAChG,CAAC;","names":["TextField"]}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@dax-ui/text-field",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "dax-ui TextField",
+  "keywords": [
+    "dax-ui",
+    "react",
+    "design-system",
+    "text-field",
+    "input",
+    "form",
+    "mui"
+  ],
+  "author": "Digital Auxilius",
+  "homepage": "https://github.com/FaaizHussain26/DAX-UI/tree/main/packages/text-field#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FaaizHussain26/DAX-UI.git",
+    "directory": "packages/text-field"
+  },
+  "bugs": {
+    "url": "https://github.com/FaaizHussain26/DAX-UI/issues"
+  },
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^9.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@dax-ui/builder": "^0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "builder"
+  }
 }