@brut-ui/react 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +68 -2
  2. package/dist/index.css +83 -0
  3. package/dist/index.d.cts +53 -1
  4. package/dist/index.d.ts +53 -1
  5. package/dist/index.js +65 -1
  6. package/package.json +9 -1
package/dist/index.cjs CHANGED
@@ -20,7 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // src/index.ts
21
21
  var index_exports = {};
22
22
  __export(index_exports, {
23
- Button: () => Button
23
+ Button: () => Button,
24
+ Input: () => Input,
25
+ Textarea: () => Textarea
24
26
  });
25
27
  module.exports = __toCommonJS(index_exports);
26
28
 
@@ -61,7 +63,71 @@ var Button = (0, import_react.forwardRef)(
61
63
  );
62
64
  }
63
65
  );
66
+
67
+ // src/components/input/input.tsx
68
+ var import_react2 = require("react");
69
+
70
+ // src/components/input/input.constants.ts
71
+ var INPUT_DEFAULTS = {
72
+ size: "medium"
73
+ };
74
+
75
+ // src/components/input/input.tsx
76
+ var import_jsx_runtime2 = require("react/jsx-runtime");
77
+ var Input = (0, import_react2.forwardRef)(function Input2({ size = INPUT_DEFAULTS.size, error, disabled, ...rest }, ref) {
78
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
79
+ "input",
80
+ {
81
+ ref,
82
+ "data-brut-input": "",
83
+ "data-size": size,
84
+ "data-error": error || void 0,
85
+ "data-disabled": disabled || void 0,
86
+ disabled,
87
+ "aria-invalid": error || void 0,
88
+ ...rest
89
+ }
90
+ );
91
+ });
92
+
93
+ // src/components/textarea/textarea.tsx
94
+ var import_react3 = require("react");
95
+
96
+ // src/components/textarea/textarea.constants.ts
97
+ var TEXTAREA_DEFAULTS = {
98
+ size: "medium",
99
+ rows: 4
100
+ };
101
+
102
+ // src/components/textarea/textarea.tsx
103
+ var import_jsx_runtime3 = require("react/jsx-runtime");
104
+ var Textarea = (0, import_react3.forwardRef)(
105
+ function Textarea2({
106
+ size = TEXTAREA_DEFAULTS.size,
107
+ rows = TEXTAREA_DEFAULTS.rows,
108
+ error,
109
+ disabled,
110
+ ...rest
111
+ }, ref) {
112
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
113
+ "textarea",
114
+ {
115
+ ref,
116
+ "data-brut-textarea": "",
117
+ "data-size": size,
118
+ "data-error": error || void 0,
119
+ "data-disabled": disabled || void 0,
120
+ disabled,
121
+ "aria-invalid": error || void 0,
122
+ rows,
123
+ ...rest
124
+ }
125
+ );
126
+ }
127
+ );
64
128
  // Annotate the CommonJS export names for ESM import in node:
65
129
  0 && (module.exports = {
66
- Button
130
+ Button,
131
+ Input,
132
+ Textarea
67
133
  });
package/dist/index.css CHANGED
@@ -57,3 +57,86 @@
57
57
  opacity: 0.4;
58
58
  cursor: not-allowed;
59
59
  }
60
+
61
+ /* src/components/input/input.css */
62
+ [data-brut-input] {
63
+ display: block;
64
+ box-sizing: border-box;
65
+ width: 100%;
66
+ font-family: var(--brut-font-mono);
67
+ font-weight: 400;
68
+ border: var(--brut-border);
69
+ border-radius: var(--brut-radius);
70
+ background: var(--brut-white);
71
+ color: var(--brut-black);
72
+ padding: var(--brut-space-sm) var(--brut-space-md);
73
+ line-height: 1.2;
74
+ }
75
+ [data-brut-input]::placeholder {
76
+ color: var(--brut-gray);
77
+ opacity: 1;
78
+ }
79
+ [data-brut-input][data-size=small] {
80
+ font-size: 0.75rem;
81
+ padding: var(--brut-space-xs) var(--brut-space-sm);
82
+ }
83
+ [data-brut-input][data-size=medium] {
84
+ font-size: 0.875rem;
85
+ }
86
+ [data-brut-input][data-size=large] {
87
+ font-size: 1.125rem;
88
+ padding: var(--brut-space-sm) var(--brut-space-lg);
89
+ }
90
+ [data-brut-input][data-error] {
91
+ border-color: var(--brut-error);
92
+ }
93
+ [data-brut-input]:focus-visible {
94
+ outline: var(--brut-focus-outline);
95
+ outline-offset: var(--brut-focus-offset);
96
+ }
97
+ [data-brut-input][data-disabled] {
98
+ opacity: 0.4;
99
+ cursor: not-allowed;
100
+ }
101
+
102
+ /* src/components/textarea/textarea.css */
103
+ [data-brut-textarea] {
104
+ display: block;
105
+ box-sizing: border-box;
106
+ width: 100%;
107
+ font-family: var(--brut-font-mono);
108
+ font-weight: 400;
109
+ border: var(--brut-border);
110
+ border-radius: var(--brut-radius);
111
+ background: var(--brut-white);
112
+ color: var(--brut-black);
113
+ padding: var(--brut-space-sm) var(--brut-space-md);
114
+ line-height: 1.4;
115
+ resize: vertical;
116
+ }
117
+ [data-brut-textarea]::placeholder {
118
+ color: var(--brut-gray);
119
+ opacity: 1;
120
+ }
121
+ [data-brut-textarea][data-size=small] {
122
+ font-size: 0.75rem;
123
+ padding: var(--brut-space-xs) var(--brut-space-sm);
124
+ }
125
+ [data-brut-textarea][data-size=medium] {
126
+ font-size: 0.875rem;
127
+ }
128
+ [data-brut-textarea][data-size=large] {
129
+ font-size: 1.125rem;
130
+ padding: var(--brut-space-sm) var(--brut-space-lg);
131
+ }
132
+ [data-brut-textarea][data-error] {
133
+ border-color: var(--brut-error);
134
+ }
135
+ [data-brut-textarea]:focus-visible {
136
+ outline: var(--brut-focus-outline);
137
+ outline-offset: var(--brut-focus-offset);
138
+ }
139
+ [data-brut-textarea][data-disabled] {
140
+ opacity: 0.4;
141
+ cursor: not-allowed;
142
+ }
package/dist/index.d.cts CHANGED
@@ -37,4 +37,56 @@ interface ButtonProps<T extends ElementType = "button"> {
37
37
  type PolymorphicButtonProps<T extends ElementType = "button"> = ButtonProps<T> & Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>;
38
38
  declare const Button: <T extends ElementType = "button">(props: PolymorphicButtonProps<T>) => ReactNode;
39
39
 
40
- export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
40
+ /** Available size presets for Input. */
41
+ declare const INPUT_SIZES: readonly ["small", "medium", "large"];
42
+ type InputSize = (typeof INPUT_SIZES)[number];
43
+
44
+ /**
45
+ * Input — a brutalist text input.
46
+ *
47
+ * Renders an accessible text input with thick square borders
48
+ * and monospace typography. Supports `small`, `medium`, and `large` sizes.
49
+ *
50
+ * Error state sets `aria-invalid` and `data-error` for styling hooks.
51
+ *
52
+ * @example
53
+ * ```tsx
54
+ * <Input placeholder="Enter your name" />
55
+ * <Input size="large" error />
56
+ * ```
57
+ */
58
+ interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size"> {
59
+ /** Size preset. @default "medium" */
60
+ size?: InputSize;
61
+ /** Error state — sets `data-error` and `aria-invalid`. */
62
+ error?: boolean;
63
+ }
64
+ declare const Input: (props: InputProps) => ReactNode;
65
+
66
+ /** Available size presets for Textarea. */
67
+ declare const TEXTAREA_SIZES: readonly ["small", "medium", "large"];
68
+ type TextareaSize = (typeof TEXTAREA_SIZES)[number];
69
+
70
+ /**
71
+ * Textarea — a brutalist multiline text input.
72
+ *
73
+ * Renders an accessible textarea with thick square borders
74
+ * and monospace typography. Supports `small`, `medium`, and `large` sizes.
75
+ *
76
+ * Error state sets `aria-invalid` and `data-error` for styling hooks.
77
+ *
78
+ * @example
79
+ * ```tsx
80
+ * <Textarea placeholder="Write something..." />
81
+ * <Textarea size="large" error rows={6} />
82
+ * ```
83
+ */
84
+ interface TextareaProps extends Omit<ComponentPropsWithRef<"textarea">, "size"> {
85
+ /** Size preset. @default "medium" */
86
+ size?: TextareaSize;
87
+ /** Error state — sets `data-error` and `aria-invalid`. */
88
+ error?: boolean;
89
+ }
90
+ declare const Textarea: (props: TextareaProps) => ReactNode;
91
+
92
+ export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, type InputSize, Textarea, type TextareaProps, type TextareaSize };
package/dist/index.d.ts CHANGED
@@ -37,4 +37,56 @@ interface ButtonProps<T extends ElementType = "button"> {
37
37
  type PolymorphicButtonProps<T extends ElementType = "button"> = ButtonProps<T> & Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>;
38
38
  declare const Button: <T extends ElementType = "button">(props: PolymorphicButtonProps<T>) => ReactNode;
39
39
 
40
- export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
40
+ /** Available size presets for Input. */
41
+ declare const INPUT_SIZES: readonly ["small", "medium", "large"];
42
+ type InputSize = (typeof INPUT_SIZES)[number];
43
+
44
+ /**
45
+ * Input — a brutalist text input.
46
+ *
47
+ * Renders an accessible text input with thick square borders
48
+ * and monospace typography. Supports `small`, `medium`, and `large` sizes.
49
+ *
50
+ * Error state sets `aria-invalid` and `data-error` for styling hooks.
51
+ *
52
+ * @example
53
+ * ```tsx
54
+ * <Input placeholder="Enter your name" />
55
+ * <Input size="large" error />
56
+ * ```
57
+ */
58
+ interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size"> {
59
+ /** Size preset. @default "medium" */
60
+ size?: InputSize;
61
+ /** Error state — sets `data-error` and `aria-invalid`. */
62
+ error?: boolean;
63
+ }
64
+ declare const Input: (props: InputProps) => ReactNode;
65
+
66
+ /** Available size presets for Textarea. */
67
+ declare const TEXTAREA_SIZES: readonly ["small", "medium", "large"];
68
+ type TextareaSize = (typeof TEXTAREA_SIZES)[number];
69
+
70
+ /**
71
+ * Textarea — a brutalist multiline text input.
72
+ *
73
+ * Renders an accessible textarea with thick square borders
74
+ * and monospace typography. Supports `small`, `medium`, and `large` sizes.
75
+ *
76
+ * Error state sets `aria-invalid` and `data-error` for styling hooks.
77
+ *
78
+ * @example
79
+ * ```tsx
80
+ * <Textarea placeholder="Write something..." />
81
+ * <Textarea size="large" error rows={6} />
82
+ * ```
83
+ */
84
+ interface TextareaProps extends Omit<ComponentPropsWithRef<"textarea">, "size"> {
85
+ /** Size preset. @default "medium" */
86
+ size?: TextareaSize;
87
+ /** Error state — sets `data-error` and `aria-invalid`. */
88
+ error?: boolean;
89
+ }
90
+ declare const Textarea: (props: TextareaProps) => ReactNode;
91
+
92
+ export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, type InputSize, Textarea, type TextareaProps, type TextareaSize };
package/dist/index.js CHANGED
@@ -35,6 +35,70 @@ var Button = forwardRef(
35
35
  );
36
36
  }
37
37
  );
38
+
39
+ // src/components/input/input.tsx
40
+ import { forwardRef as forwardRef2 } from "react";
41
+
42
+ // src/components/input/input.constants.ts
43
+ var INPUT_DEFAULTS = {
44
+ size: "medium"
45
+ };
46
+
47
+ // src/components/input/input.tsx
48
+ import { jsx as jsx2 } from "react/jsx-runtime";
49
+ var Input = forwardRef2(function Input2({ size = INPUT_DEFAULTS.size, error, disabled, ...rest }, ref) {
50
+ return /* @__PURE__ */ jsx2(
51
+ "input",
52
+ {
53
+ ref,
54
+ "data-brut-input": "",
55
+ "data-size": size,
56
+ "data-error": error || void 0,
57
+ "data-disabled": disabled || void 0,
58
+ disabled,
59
+ "aria-invalid": error || void 0,
60
+ ...rest
61
+ }
62
+ );
63
+ });
64
+
65
+ // src/components/textarea/textarea.tsx
66
+ import { forwardRef as forwardRef3 } from "react";
67
+
68
+ // src/components/textarea/textarea.constants.ts
69
+ var TEXTAREA_DEFAULTS = {
70
+ size: "medium",
71
+ rows: 4
72
+ };
73
+
74
+ // src/components/textarea/textarea.tsx
75
+ import { jsx as jsx3 } from "react/jsx-runtime";
76
+ var Textarea = forwardRef3(
77
+ function Textarea2({
78
+ size = TEXTAREA_DEFAULTS.size,
79
+ rows = TEXTAREA_DEFAULTS.rows,
80
+ error,
81
+ disabled,
82
+ ...rest
83
+ }, ref) {
84
+ return /* @__PURE__ */ jsx3(
85
+ "textarea",
86
+ {
87
+ ref,
88
+ "data-brut-textarea": "",
89
+ "data-size": size,
90
+ "data-error": error || void 0,
91
+ "data-disabled": disabled || void 0,
92
+ disabled,
93
+ "aria-invalid": error || void 0,
94
+ rows,
95
+ ...rest
96
+ }
97
+ );
98
+ }
99
+ );
38
100
  export {
39
- Button
101
+ Button,
102
+ Input,
103
+ Textarea
40
104
  };
package/package.json CHANGED
@@ -1,7 +1,15 @@
1
1
  {
2
2
  "name": "@brut-ui/react",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "Ultra-light brutalist React component library",
5
+ "keywords": [
6
+ "react",
7
+ "components",
8
+ "ui",
9
+ "brutalist",
10
+ "design-system",
11
+ "accessible"
12
+ ],
5
13
  "repository": {
6
14
  "type": "git",
7
15
  "url": "git+https://github.com/brut-ui/brut.git",