@brut-ui/react 0.0.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Brut UI
+
+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/dist/index.cjs

@@ -20,7 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Button: () => Button
+  Button: () => Button,
+  Input: () => Input
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -61,7 +62,34 @@ var Button = (0, import_react.forwardRef)(
     );
   }
 );
+
+// src/components/input/input.tsx
+var import_react2 = require("react");
+
+// src/components/input/input.constants.ts
+var INPUT_DEFAULTS = {
+  size: "medium"
+};
+
+// src/components/input/input.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Input = (0, import_react2.forwardRef)(function Input2({ size = INPUT_DEFAULTS.size, error, disabled, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "input",
+    {
+      ref,
+      "data-brut-input": "",
+      "data-size": size,
+      "data-error": error || void 0,
+      "data-disabled": disabled || void 0,
+      disabled,
+      "aria-invalid": error || void 0,
+      ...rest
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  Button,
+  Input
 });

package/dist/index.css

@@ -57,3 +57,44 @@
   opacity: 0.4;
   cursor: not-allowed;
 }
+
+/* src/components/input/input.css */
+[data-brut-input] {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  font-family: var(--brut-font-mono);
+  font-weight: 400;
+  border: var(--brut-border);
+  border-radius: var(--brut-radius);
+  background: var(--brut-white);
+  color: var(--brut-black);
+  padding: var(--brut-space-sm) var(--brut-space-md);
+  line-height: 1.2;
+}
+[data-brut-input]::placeholder {
+  color: var(--brut-gray);
+  opacity: 1;
+}
+[data-brut-input][data-size=small] {
+  font-size: 0.75rem;
+  padding: var(--brut-space-xs) var(--brut-space-sm);
+}
+[data-brut-input][data-size=medium] {
+  font-size: 0.875rem;
+}
+[data-brut-input][data-size=large] {
+  font-size: 1.125rem;
+  padding: var(--brut-space-sm) var(--brut-space-lg);
+}
+[data-brut-input][data-error] {
+  border-color: var(--brut-error);
+}
+[data-brut-input]:focus-visible {
+  outline: var(--brut-focus-outline);
+  outline-offset: var(--brut-focus-offset);
+}
+[data-brut-input][data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/dist/index.d.cts

@@ -37,4 +37,30 @@ interface ButtonProps<T extends ElementType = "button"> {
 type PolymorphicButtonProps<T extends ElementType = "button"> = ButtonProps<T> & Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>;
 declare const Button: <T extends ElementType = "button">(props: PolymorphicButtonProps<T>) => ReactNode;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
+/** Available size presets for Input. */
+declare const INPUT_SIZES: readonly ["small", "medium", "large"];
+type InputSize = (typeof INPUT_SIZES)[number];
+
+/**
+ * Input — a brutalist text input.
+ *
+ * Renders an accessible text input with thick square borders
+ * and monospace typography. Supports `small`, `medium`, and `large` sizes.
+ *
+ * Error state sets `aria-invalid` and `data-error` for styling hooks.
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter your name" />
+ * <Input size="large" error />
+ * ```
+ */
+interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size"> {
+    /** Size preset. @default "medium" */
+    size?: InputSize;
+    /** Error state — sets `data-error` and `aria-invalid`. */
+    error?: boolean;
+}
+declare const Input: (props: InputProps) => ReactNode;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, type InputSize };

package/dist/index.d.ts

@@ -37,4 +37,30 @@ interface ButtonProps<T extends ElementType = "button"> {
 type PolymorphicButtonProps<T extends ElementType = "button"> = ButtonProps<T> & Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>;
 declare const Button: <T extends ElementType = "button">(props: PolymorphicButtonProps<T>) => ReactNode;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
+/** Available size presets for Input. */
+declare const INPUT_SIZES: readonly ["small", "medium", "large"];
+type InputSize = (typeof INPUT_SIZES)[number];
+
+/**
+ * Input — a brutalist text input.
+ *
+ * Renders an accessible text input with thick square borders
+ * and monospace typography. Supports `small`, `medium`, and `large` sizes.
+ *
+ * Error state sets `aria-invalid` and `data-error` for styling hooks.
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter your name" />
+ * <Input size="large" error />
+ * ```
+ */
+interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size"> {
+    /** Size preset. @default "medium" */
+    size?: InputSize;
+    /** Error state — sets `data-error` and `aria-invalid`. */
+    error?: boolean;
+}
+declare const Input: (props: InputProps) => ReactNode;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, type InputSize };

package/dist/index.js

@@ -35,6 +35,33 @@ var Button = forwardRef(
     );
   }
 );
+
+// src/components/input/input.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/components/input/input.constants.ts
+var INPUT_DEFAULTS = {
+  size: "medium"
+};
+
+// src/components/input/input.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Input = forwardRef2(function Input2({ size = INPUT_DEFAULTS.size, error, disabled, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      ref,
+      "data-brut-input": "",
+      "data-size": size,
+      "data-error": error || void 0,
+      "data-disabled": disabled || void 0,
+      disabled,
+      "aria-invalid": error || void 0,
+      ...rest
+    }
+  );
+});
 export {
-  Button
+  Button,
+  Input
 };

package/package.json

@@ -1,14 +1,21 @@
 {
   "name": "@brut-ui/react",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "description": "Ultra-light brutalist React component library",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "brutalist",
+    "design-system",
+    "accessible"
+  ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/xdebbie/brut.git",
+    "url": "git+https://github.com/brut-ui/brut.git",
     "directory": "packages/brut-ui"
   },
   "publishConfig": {
-    "provenance": true,
     "access": "public"
   },
   "type": "module",
@@ -29,12 +36,6 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "scripts": {
-    "build": "tsup",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
@@ -53,5 +54,11 @@
     "typescript": "^5.7.0",
     "@vitest/coverage-v8": "^3.0.0",
     "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
-}
+}