@ladder-ui/input 0.0.3

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Input, type InputProps } from "./input";
+export { Input as default } from "./input";

package/dist/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var concatClassNames = require('@ladder-ui/core/concatClassNames');
+
+/**
+ * Input — a fully accessible, themeable text input.
+ *
+ * - Renders a single native `<input>` element with no wrapper.
+ * - Border, background, and focus ring are applied directly via `:focus-visible`.
+ * - `ref` is forwarded to the native `<input>` element (React 19 pattern).
+ * - `className` applies to the `<input>` itself.
+ * - `status="error"` automatically sets `aria-invalid="true"`.
+ * - Works with all standard HTML input types: text, email, password, number, search, tel,
+ *   url, file, date, and more.
+ * - For icon decoration or button addons, use `InputGroup` from `@ladder-ui/input-group`.
+ */
+function Input({ ref, className, size = "md", status = "default", fullWidth = true, disabled, readOnly, ...props }) {
+    // Respect explicit aria-invalid from consumer; auto-set on error status.
+    const ariaInvalid = props["aria-invalid"] ?? (status === "error" ? true : undefined);
+    const inputClasses = concatClassNames("lui-input", `lui-input--${size}`, status !== "default" && `lui-input--${status}`, fullWidth && "lui-input--full-width", disabled && "lui-input--disabled", readOnly && "lui-input--readonly", className);
+    return (jsxRuntime.jsx("input", { ref: ref, className: inputClasses, disabled: disabled, readOnly: readOnly, "aria-invalid": ariaInvalid, ...props }));
+}
+Input.displayName = "Input";
+
+exports.Input = Input;
+exports.default = Input;

package/dist/index.mjs

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import concatClassNames from '@ladder-ui/core/concatClassNames';
+
+/**
+ * Input — a fully accessible, themeable text input.
+ *
+ * - Renders a single native `<input>` element with no wrapper.
+ * - Border, background, and focus ring are applied directly via `:focus-visible`.
+ * - `ref` is forwarded to the native `<input>` element (React 19 pattern).
+ * - `className` applies to the `<input>` itself.
+ * - `status="error"` automatically sets `aria-invalid="true"`.
+ * - Works with all standard HTML input types: text, email, password, number, search, tel,
+ *   url, file, date, and more.
+ * - For icon decoration or button addons, use `InputGroup` from `@ladder-ui/input-group`.
+ */
+function Input({ ref, className, size = "md", status = "default", fullWidth = true, disabled, readOnly, ...props }) {
+    // Respect explicit aria-invalid from consumer; auto-set on error status.
+    const ariaInvalid = props["aria-invalid"] ?? (status === "error" ? true : undefined);
+    const inputClasses = concatClassNames("lui-input", `lui-input--${size}`, status !== "default" && `lui-input--${status}`, fullWidth && "lui-input--full-width", disabled && "lui-input--disabled", readOnly && "lui-input--readonly", className);
+    return (jsx("input", { ref: ref, className: inputClasses, disabled: disabled, readOnly: readOnly, "aria-invalid": ariaInvalid, ...props }));
+}
+Input.displayName = "Input";
+
+export { Input, Input as default };

package/dist/input.css

@@ -0,0 +1,109 @@
+.lui-input {
+  display: block;
+  background-color: var(--lui-input-bg);
+  border: var(--lui-border-width) solid var(--lui-input-border);
+  border-radius: var(--lui-input-radius);
+  color: var(--lui-input-text);
+  font-family: var(--lui-font-family);
+  font-weight: var(--lui-font-weight);
+  line-height: 1.5;
+  min-width: 0;
+  transition: var(--lui-transition);
+}
+.lui-input:focus-visible {
+  outline: none;
+  border-color: var(--lui-input-focus-border);
+  box-shadow: 0 0 0 2px var(--lui-input-focus-ring-color);
+}
+.lui-input::placeholder {
+  color: var(--lui-input-placeholder);
+}
+.lui-input--disabled, .lui-input:disabled {
+  opacity: var(--lui-disabled-opacity);
+  cursor: not-allowed;
+}
+.lui-input--readonly {
+  cursor: default;
+}
+.lui-input--full-width {
+  width: 100%;
+}
+
+.lui-input--error {
+  border-color: var(--lui-error);
+}
+.lui-input--error:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-error) 40%, transparent);
+}
+
+.lui-input--success {
+  border-color: var(--lui-success);
+}
+.lui-input--success:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-success) 40%, transparent);
+}
+
+.lui-input--warning {
+  border-color: var(--lui-warning);
+}
+.lui-input--warning:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-warning) 40%, transparent);
+}
+
+.lui-input--xs {
+  padding: 0.25rem 0.5rem;
+  font-size: var(--lui-font-size-xs);
+}
+
+.lui-input--sm {
+  padding: 0.375rem 0.625rem;
+  font-size: var(--lui-font-size-sm);
+}
+
+.lui-input--md {
+  padding: 0.5rem 0.75rem;
+  font-size: var(--lui-font-size-md);
+}
+
+.lui-input--lg {
+  padding: 0.625rem 0.875rem;
+  font-size: var(--lui-font-size-lg);
+}
+
+.lui-input--xl {
+  padding: 0.75rem 1rem;
+  font-size: var(--lui-font-size-xl);
+}
+
+.lui-input[type=file] {
+  cursor: pointer;
+}
+.lui-input[type=file]::file-selector-button {
+  font-family: var(--lui-font-family);
+  font-size: inherit;
+  font-weight: 500;
+  background: transparent;
+  color: var(--lui-surface-text);
+  border: none;
+  border-right: var(--lui-border-width) solid var(--lui-input-file-btn-border);
+  padding: 0 0.75em 0 0;
+  margin-right: 0.75em;
+  cursor: pointer;
+  transition: var(--lui-transition);
+}
+.lui-input[type=file]::file-selector-button:hover {
+  color: var(--lui-primary);
+}
+.lui-input[type=search]::-webkit-search-decoration, .lui-input[type=search]::-webkit-search-cancel-button, .lui-input[type=search]::-webkit-search-results-button, .lui-input[type=search]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+.lui-input[type=number] {
+  -moz-appearance: textfield;
+}
+.lui-input[type=number]::-webkit-inner-spin-button, .lui-input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.lui-input[type=date], .lui-input[type=time], .lui-input[type=datetime-local], .lui-input[type=month], .lui-input[type=week] {
+  color-scheme: light dark;
+}

package/dist/input.d.ts

@@ -0,0 +1,39 @@
+import type { Ref } from "react";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** React 19 ref — points to the native <input> element */
+    ref?: Ref<HTMLInputElement>;
+    /** Size variant. Follows the same scale as Button. @default "md" */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Visual status. Sets border color and focus ring.
+     * "error" also sets aria-invalid="true" on the native input.
+     * @default "default"
+     */
+    status?: "default" | "error" | "success" | "warning";
+    /**
+     * Stretch the input to fill its container's full width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * className is applied directly to the <input> element.
+     * Use this to control width, margin, or layout of the input.
+     */
+    className?: string;
+}
+/**
+ * Input — a fully accessible, themeable text input.
+ *
+ * - Renders a single native `<input>` element with no wrapper.
+ * - Border, background, and focus ring are applied directly via `:focus-visible`.
+ * - `ref` is forwarded to the native `<input>` element (React 19 pattern).
+ * - `className` applies to the `<input>` itself.
+ * - `status="error"` automatically sets `aria-invalid="true"`.
+ * - Works with all standard HTML input types: text, email, password, number, search, tel,
+ *   url, file, date, and more.
+ * - For icon decoration or button addons, use `InputGroup` from `@ladder-ui/input-group`.
+ */
+export declare function Input({ ref, className, size, status, fullWidth, disabled, readOnly, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Input {
+    var displayName: string;
+}

package/dist/input.vars.css

@@ -0,0 +1,18 @@
+@layer input {
+  :root {
+    /* Background & text */
+    --lui-input-bg: var(--lui-surface);
+    --lui-input-text: var(--lui-surface-text);
+    --lui-input-placeholder: color-mix(in srgb, var(--lui-surface-text) 40%, transparent);
+    /* Border */
+    --lui-input-border: color-mix(in srgb, var(--lui-surface-border) 93%, var(--lui-surface-text));
+    --lui-input-focus-border: var(--lui-primary);
+    --lui-input-focus-ring-color: color-mix(in srgb, var(--lui-primary) 40%, transparent);
+    /* Icon color */
+    --lui-input-icon-color: color-mix(in srgb, var(--lui-surface-text) 50%, transparent);
+    /* Shape */
+    --lui-input-radius: var(--lui-radius-sm);
+    /* File selector button */
+    --lui-input-file-btn-border: var(--lui-surface-border);
+  }
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@ladder-ui/input",
+  "version": "0.0.3",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*.css": "./dist/*.css",
+    "./styles/*.css": "./dist/*.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "nodejs",
+    "react",
+    "ui",
+    "components",
+    "library",
+    "input",
+    "form"
+  ],
+  "author": "Ivan Avila <ivelaval@gmail.com> - https://www.vennet.dev",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ivelaval/ladder-ui/issues"
+  },
+  "homepage": "https://github.com/ivelaval/ladder-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^19.0.0",
+    "rollup": "^4.59.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.90.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "@ladder-ui/core": "0.0.3"
+  },
+  "peerDependencies": {
+    "@ladder-ui/core": ">=0.0.0",
+    "react": ">=18.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "pnpm clean && rollup -c",
+    "dev": "rollup -c -w",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}