@nattui/react-components 0.0.14 → 0.0.16
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.d.mts +5 -5
- package/dist/index.mjs +35 -18
- package/package.json +2 -2
- package/dist/index.mjs.map +0 -1
package/dist/index.d.mts
CHANGED
|
@@ -12,18 +12,18 @@ interface ButtonPropsInternal extends Omit<ComponentProps<"button">, "aria-press
|
|
|
12
12
|
size?: 32 | 36 | 40 | 44;
|
|
13
13
|
variant?: "accent" | "ghost" | "primary" | "secondary";
|
|
14
14
|
}
|
|
15
|
-
interface
|
|
15
|
+
interface ButtonIconProps extends ButtonPropsInternal {
|
|
16
16
|
children?: ReactNode;
|
|
17
17
|
iconEnd?: never;
|
|
18
18
|
iconOnly: true;
|
|
19
19
|
iconStart?: never;
|
|
20
20
|
}
|
|
21
|
-
interface
|
|
21
|
+
interface ButtonProps extends ButtonPropsInternal {
|
|
22
22
|
children?: string;
|
|
23
23
|
iconOnly?: false;
|
|
24
24
|
}
|
|
25
|
-
type
|
|
26
|
-
declare function Button(props:
|
|
25
|
+
type ButtonUnionProps = ButtonIconProps | ButtonProps;
|
|
26
|
+
declare function Button(props: ButtonUnionProps): JSX.Element;
|
|
27
27
|
declare const BUTTON_CLASS_NAME: {
|
|
28
28
|
readonly BASE: string;
|
|
29
29
|
readonly ICON_ONLY: string;
|
|
@@ -68,4 +68,4 @@ declare const LABEL_CLASS_NAME: {
|
|
|
68
68
|
readonly BASE: string;
|
|
69
69
|
};
|
|
70
70
|
|
|
71
|
-
export { BUTTON_CLASS_NAME, Button, type ButtonProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps };
|
|
71
|
+
export { BUTTON_CLASS_NAME, Button, type ButtonIconProps, type ButtonProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps };
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import styles3 from './button.module-VAXL2INY.module.css';
|
|
2
|
-
import styles from './button-background.module-Y3DFESUY.module.css';
|
|
3
|
-
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
4
|
-
import styles2 from './button-spinner.module-T3OGVJS4.module.css';
|
|
5
|
-
import styles4 from './input.module-GMZ6XJ62.module.css';
|
|
6
|
-
import styles5 from './label.module-3W6OLN6C.module.css';
|
|
7
|
-
|
|
8
1
|
// src/button.tsx
|
|
2
|
+
import styles3 from "./button.module-VAXL2INY.module.css";
|
|
3
|
+
|
|
4
|
+
// src/button-background.tsx
|
|
5
|
+
import styles from "./button-background.module-Y3DFESUY.module.css";
|
|
6
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
9
7
|
function ButtonBackground(props) {
|
|
10
8
|
const { isRounded = false, variant = "primary" } = props;
|
|
11
9
|
const combinedBackgroundStyles = `
|
|
@@ -34,17 +32,24 @@ var BUTTON_BACKGROUND_CLASS_NAME = {
|
|
|
34
32
|
PRIMARY: styles.button_background__variant_primary
|
|
35
33
|
}
|
|
36
34
|
};
|
|
35
|
+
|
|
36
|
+
// src/button-spinner.tsx
|
|
37
|
+
import styles2 from "./button-spinner.module-T3OGVJS4.module.css";
|
|
38
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
37
39
|
function ButtonSpinner(props) {
|
|
38
40
|
const { size = 16 } = props;
|
|
39
|
-
return /* @__PURE__ */
|
|
41
|
+
return /* @__PURE__ */ jsx2(
|
|
40
42
|
"div",
|
|
41
43
|
{
|
|
42
44
|
className: styles2.button_spinner,
|
|
43
45
|
style: { "--size": `${size}px` },
|
|
44
|
-
children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */
|
|
46
|
+
children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx2("div", {}, index))
|
|
45
47
|
}
|
|
46
48
|
);
|
|
47
49
|
}
|
|
50
|
+
|
|
51
|
+
// src/button.tsx
|
|
52
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
48
53
|
function Button(props) {
|
|
49
54
|
const {
|
|
50
55
|
children = "",
|
|
@@ -80,10 +85,10 @@ function Button(props) {
|
|
|
80
85
|
type,
|
|
81
86
|
...rest,
|
|
82
87
|
children: [
|
|
83
|
-
/* @__PURE__ */
|
|
84
|
-
isLoading && /* @__PURE__ */
|
|
88
|
+
/* @__PURE__ */ jsx3(ButtonBackground, { isRounded, variant }),
|
|
89
|
+
isLoading && /* @__PURE__ */ jsx3(ButtonSpinner, {}),
|
|
85
90
|
!isLoading && iconStart,
|
|
86
|
-
iconOnly ? children : /* @__PURE__ */
|
|
91
|
+
iconOnly ? children : /* @__PURE__ */ jsx3("span", { children }),
|
|
87
92
|
!isLoading && iconEnd
|
|
88
93
|
]
|
|
89
94
|
}
|
|
@@ -113,6 +118,10 @@ var BUTTON_CLASS_NAME = {
|
|
|
113
118
|
FULL: styles3.button__width_full
|
|
114
119
|
}
|
|
115
120
|
};
|
|
121
|
+
|
|
122
|
+
// src/input.tsx
|
|
123
|
+
import styles4 from "./input.module-GMZ6XJ62.module.css";
|
|
124
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
116
125
|
function Input(props) {
|
|
117
126
|
const {
|
|
118
127
|
className: customClassName = "",
|
|
@@ -129,7 +138,7 @@ function Input(props) {
|
|
|
129
138
|
${isPassword ? INPUT_CLASS_NAME.PASSWORD : ""}
|
|
130
139
|
${customClassName}
|
|
131
140
|
`.replaceAll(/\s+/g, " ").trim();
|
|
132
|
-
return /* @__PURE__ */
|
|
141
|
+
return /* @__PURE__ */ jsx4(
|
|
133
142
|
"input",
|
|
134
143
|
{
|
|
135
144
|
"aria-pressed": isActive,
|
|
@@ -146,18 +155,26 @@ var INPUT_CLASS_NAME = {
|
|
|
146
155
|
BASE: styles4.input,
|
|
147
156
|
PASSWORD: styles4.input__password
|
|
148
157
|
};
|
|
158
|
+
|
|
159
|
+
// src/label.tsx
|
|
160
|
+
import styles5 from "./label.module-3W6OLN6C.module.css";
|
|
161
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
149
162
|
function Label(props) {
|
|
150
163
|
const { className: customClassName = "", ...rest } = props;
|
|
151
164
|
const combinedClassName = `
|
|
152
165
|
${LABEL_CLASS_NAME.BASE}
|
|
153
166
|
${customClassName}
|
|
154
167
|
`.replaceAll(/\s+/g, " ").trim();
|
|
155
|
-
return /* @__PURE__ */
|
|
168
|
+
return /* @__PURE__ */ jsx5("label", { className: combinedClassName, ...rest });
|
|
156
169
|
}
|
|
157
170
|
var LABEL_CLASS_NAME = {
|
|
158
171
|
BASE: styles5.label
|
|
159
172
|
};
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
173
|
+
export {
|
|
174
|
+
BUTTON_CLASS_NAME,
|
|
175
|
+
Button,
|
|
176
|
+
INPUT_CLASS_NAME,
|
|
177
|
+
Input,
|
|
178
|
+
LABEL_CLASS_NAME,
|
|
179
|
+
Label
|
|
180
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nattui/react-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.16",
|
|
4
4
|
"description": "A collection of reusable React components built with TypeScript and CSS Modules",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"author": "Natt Nguyen <hello@natt.sh> (https://natt.sh)",
|
|
19
19
|
"exports": {
|
|
20
20
|
".": {
|
|
21
|
-
"types": "./dist/index.d.
|
|
21
|
+
"types": "./dist/index.d.mts",
|
|
22
22
|
"import": "./dist/index.mjs"
|
|
23
23
|
}
|
|
24
24
|
},
|
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx","../src/input.tsx","../src/label.tsx"],"names":["jsx","styles"],"mappings":"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","file":"index.mjs","sourcesContent":["import type { JSX } from \"react\"\nimport type { ButtonProps } from \"@/button\"\nimport styles from \"@/button-background.module.css\"\n\nexport interface ButtonBackgroundProps\n extends Pick<ButtonProps, \"isRounded\" | \"variant\"> {}\n\nexport function ButtonBackground(props: ButtonBackgroundProps): JSX.Element {\n const { isRounded = false, variant = \"primary\" } = props\n\n const combinedBackgroundStyles = `\n ${BUTTON_BACKGROUND_CLASS_NAME.BASE}\n ${isRounded ? BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.FULL : BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.BASE}\n ${variant === \"accent\" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.ACCENT : \"\"}\n ${variant === \"primary\" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.PRIMARY : \"\"}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n if (!(variant === \"accent\" || variant === \"primary\")) return <></>\n\n return (\n <div\n className={combinedBackgroundStyles}\n data-element=\"button-background\"\n />\n )\n}\n\nexport const BUTTON_BACKGROUND_CLASS_NAME = {\n BASE: styles.button_background,\n ROUNDED: {\n BASE: styles.button_background__rounded_base,\n FULL: styles.button_background__rounded_full,\n },\n VARIANT: {\n ACCENT: styles.button_background__variant_accent,\n PRIMARY: styles.button_background__variant_primary,\n },\n} as const\n","import type { CSSProperties, JSX } from \"react\"\nimport styles from \"@/button-spinner.module.css\"\n\nexport interface ButtonSpinnerProps {\n size?: number\n}\n\nexport function ButtonSpinner(props: ButtonSpinnerProps): JSX.Element {\n const { size = 16 } = props\n\n return (\n <div\n className={styles.button_spinner}\n style={{ \"--size\": `${size}px` } as CSSProperties}\n >\n {Array.from({ length: 12 }).map((_, index) => (\n <div key={index} />\n ))}\n </div>\n )\n}\n","import type { ComponentProps, JSX, ReactNode } from \"react\"\nimport styles from \"@/button.module.css\"\nimport { ButtonBackground } from \"@/button-background\"\nimport { ButtonSpinner } from \"@/button-spinner\"\n\ninterface ButtonPropsInternal\n extends Omit<ComponentProps<\"button\">, \"aria-pressed\" | \"disabled\"> {\n iconEnd?: ReactNode\n iconOnly?: boolean\n iconStart?: ReactNode\n isActive?: boolean\n isDisabled?: boolean\n isFullWidth?: boolean\n isLoading?: boolean\n isRounded?: boolean\n size?: 32 | 36 | 40 | 44\n variant?: \"accent\" | \"ghost\" | \"primary\" | \"secondary\"\n}\n\ninterface ButtonPropsWithIcon extends ButtonPropsInternal {\n children?: ReactNode\n iconEnd?: never\n iconOnly: true\n iconStart?: never\n}\n\ninterface ButtonPropsWithText extends ButtonPropsInternal {\n children?: string\n iconOnly?: false\n}\n\nexport type ButtonProps = ButtonPropsWithIcon | ButtonPropsWithText\n\nexport function Button(props: ButtonProps): JSX.Element {\n const {\n children = \"\",\n className: customClassName = \"\",\n iconEnd = \"\",\n iconOnly = false,\n iconStart = \"\",\n isActive = false,\n isDisabled = false,\n isFullWidth = false,\n isLoading = false,\n isRounded = false,\n size = 36,\n type = \"button\",\n variant = \"primary\",\n ...rest\n } = props\n\n const combinedClassName = `\n ${BUTTON_CLASS_NAME.BASE}\n ${BUTTON_CLASS_NAME.SIZE[size]}\n ${BUTTON_CLASS_NAME.VARIANT[variant.toUpperCase() as keyof typeof BUTTON_CLASS_NAME.VARIANT]}\n ${isFullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}\n ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : \"\"}\n ${isRounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}\n ${customClassName}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n return (\n <button\n aria-pressed={isActive}\n className={combinedClassName}\n disabled={isDisabled || isLoading}\n type={type}\n {...rest}\n >\n <ButtonBackground isRounded={isRounded} variant={variant} />\n {isLoading && <ButtonSpinner />}\n {!isLoading && iconStart}\n {iconOnly ? children : <span>{children}</span>}\n {!isLoading && iconEnd}\n </button>\n )\n}\n\nexport const BUTTON_CLASS_NAME = {\n BASE: styles.button,\n ICON_ONLY: styles.button__icon_only,\n ROUNDED: {\n BASE: styles.button__rounded_base,\n FULL: styles.button__rounded_full,\n },\n SIZE: {\n 32: styles.button__size_32,\n 36: styles.button__size_36,\n 40: styles.button__size_40,\n 44: styles.button__size_44,\n },\n VARIANT: {\n ACCENT: styles.button__variant_accent,\n GHOST: styles.button__variant_ghost,\n PRIMARY: styles.button__variant_primary,\n SECONDARY: styles.button__variant_secondary,\n },\n WIDTH: {\n BASE: styles.button__width_base,\n FULL: styles.button__width_full,\n },\n} as const\n","import type { ComponentProps, JSX } from \"react\"\nimport styles from \"@/input.module.css\"\n\nexport interface InputProps\n extends Omit<\n ComponentProps<\"input\">,\n \"aria-pressed\" | \"disabled\" | \"readOnly\" | \"required\"\n > {\n isActive?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n isRequired?: boolean\n}\n\nexport function Input(props: InputProps): JSX.Element {\n const {\n className: customClassName = \"\",\n isActive = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n type = \"text\",\n ...rest\n } = props\n\n const isPassword = type === \"password\"\n\n const combinedClassName = `\n ${INPUT_CLASS_NAME.BASE}\n ${isPassword ? INPUT_CLASS_NAME.PASSWORD : \"\"}\n ${customClassName}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n return (\n <input\n aria-pressed={isActive}\n className={combinedClassName}\n disabled={isDisabled}\n readOnly={isReadOnly}\n required={isRequired}\n type={type}\n {...rest}\n />\n )\n}\n\nexport const INPUT_CLASS_NAME = {\n BASE: styles.input,\n PASSWORD: styles.input__password,\n} as const\n","import type { ComponentProps, JSX } from \"react\"\nimport styles from \"@/label.module.css\"\n\nexport interface LabelProps extends ComponentProps<\"label\"> {}\n\nexport function Label(props: LabelProps): JSX.Element {\n const { className: customClassName = \"\", ...rest } = props\n\n const combinedClassName = `\n ${LABEL_CLASS_NAME.BASE}\n ${customClassName}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n return <label className={combinedClassName} {...rest} />\n}\n\nexport const LABEL_CLASS_NAME = {\n BASE: styles.label,\n} as const\n"]}
|