@brut-ui/react 0.1.0 → 0.2.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.
- package/dist/index.cjs +30 -2
- package/dist/index.css +41 -0
- package/dist/index.d.cts +27 -1
- package/dist/index.d.ts +27 -1
- package/dist/index.js +28 -1
- package/package.json +9 -1
package/dist/index.cjs
CHANGED
|
@@ -20,7 +20,8 @@ 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
|
|
24
25
|
});
|
|
25
26
|
module.exports = __toCommonJS(index_exports);
|
|
26
27
|
|
|
@@ -61,7 +62,34 @@ var Button = (0, import_react.forwardRef)(
|
|
|
61
62
|
);
|
|
62
63
|
}
|
|
63
64
|
);
|
|
65
|
+
|
|
66
|
+
// src/components/input/input.tsx
|
|
67
|
+
var import_react2 = require("react");
|
|
68
|
+
|
|
69
|
+
// src/components/input/input.constants.ts
|
|
70
|
+
var INPUT_DEFAULTS = {
|
|
71
|
+
size: "medium"
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
// src/components/input/input.tsx
|
|
75
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
76
|
+
var Input = (0, import_react2.forwardRef)(function Input2({ size = INPUT_DEFAULTS.size, error, disabled, ...rest }, ref) {
|
|
77
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
78
|
+
"input",
|
|
79
|
+
{
|
|
80
|
+
ref,
|
|
81
|
+
"data-brut-input": "",
|
|
82
|
+
"data-size": size,
|
|
83
|
+
"data-error": error || void 0,
|
|
84
|
+
"data-disabled": disabled || void 0,
|
|
85
|
+
disabled,
|
|
86
|
+
"aria-invalid": error || void 0,
|
|
87
|
+
...rest
|
|
88
|
+
}
|
|
89
|
+
);
|
|
90
|
+
});
|
|
64
91
|
// Annotate the CommonJS export names for ESM import in node:
|
|
65
92
|
0 && (module.exports = {
|
|
66
|
-
Button
|
|
93
|
+
Button,
|
|
94
|
+
Input
|
|
67
95
|
});
|
package/dist/index.css
CHANGED
|
@@ -57,3 +57,44 @@
|
|
|
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
|
+
}
|
package/dist/index.d.cts
CHANGED
|
@@ -37,4 +37,30 @@ 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
|
-
|
|
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
|
+
export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, type InputSize };
|
package/dist/index.d.ts
CHANGED
|
@@ -37,4 +37,30 @@ 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
|
-
|
|
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
|
+
export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, type InputSize };
|
package/dist/index.js
CHANGED
|
@@ -35,6 +35,33 @@ 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
|
+
});
|
|
38
64
|
export {
|
|
39
|
-
Button
|
|
65
|
+
Button,
|
|
66
|
+
Input
|
|
40
67
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brut-ui/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.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",
|