@smitch/breeze 2.2.12 → 2.2.15
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/README.md +6 -0
- package/lib/form/Form.d.ts +2 -2
- package/lib/form/Form.js +14 -10
- package/lib/form/RegisterForm.d.ts +2 -2
- package/lib/form/RegisterForm.js +8 -5
- package/lib/form/types/index.d.ts +21 -21
- package/package.json +13 -9
package/README.md
CHANGED
|
@@ -60,8 +60,14 @@ dependency—install it if not already present (`npm install -D tailwindcss post
|
|
|
60
60
|
|
|
61
61
|
```bash
|
|
62
62
|
npm install @smitch/breeze
|
|
63
|
+
# or
|
|
64
|
+
pnpm add @smitch/breeze # recommended — auto-installs peers
|
|
65
|
+
# or
|
|
66
|
+
yarn add @smitch/breeze
|
|
63
67
|
```
|
|
64
68
|
|
|
69
|
+
> **Tip**: Using **pnpm** or **Yarn Berry**? All Tailwind peer dependencies install automatically!
|
|
70
|
+
|
|
65
71
|
### 2. Configure Tailwind 3
|
|
66
72
|
|
|
67
73
|
To ensure Breeze UI works correctly, configure Tailwind CSS v3. All releases use v3.x.
|
package/lib/form/Form.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { FormProps } from
|
|
2
|
-
declare const Form: ({ className, style, name,
|
|
1
|
+
import { FormProps } from "./types";
|
|
2
|
+
declare const Form: ({ className, style, name, onFormSubmit, onCancel, layout, showCancel, actions, children, submitLabel, cancelLabel, actionsLayout, actionsSpacing, submitBackground, submitColor, cancelBackground, cancelColor, submitOutline, submitOutlineColor, cancelOutline, cancelOutlineColor, buttonTextcase, buttonShape, buttonIsBold, separator, }: FormProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Form;
|
package/lib/form/Form.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
2
|
+
"use client";
|
|
3
3
|
var __assign = (this && this.__assign) || function () {
|
|
4
4
|
__assign = Object.assign || function(t) {
|
|
5
5
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -17,19 +17,23 @@ var react_1 = require("react");
|
|
|
17
17
|
var tailwind_merge_1 = require("tailwind-merge");
|
|
18
18
|
var __1 = require("..");
|
|
19
19
|
var layouts = {
|
|
20
|
-
col:
|
|
21
|
-
row:
|
|
20
|
+
col: "flex-col",
|
|
21
|
+
row: "flex-row flex-wrap",
|
|
22
22
|
};
|
|
23
23
|
var Form = function (_a) {
|
|
24
|
-
var _b = _a.className, className = _b === void 0 ?
|
|
24
|
+
var _b = _a.className, className = _b === void 0 ? "" : _b, style = _a.style, _c = _a.name, name = _c === void 0 ? "form" : _c, onFormSubmit = _a.onFormSubmit, onCancel = _a.onCancel, _d = _a.layout, layout = _d === void 0 ? "col" : _d, _e = _a.showCancel, showCancel = _e === void 0 ? false : _e, _f = _a.actions, actions = _f === void 0 ? true : _f, children = _a.children, _g = _a.submitLabel, submitLabel = _g === void 0 ? "Submit" : _g, _h = _a.cancelLabel, cancelLabel = _h === void 0 ? "Cancel" : _h, _j = _a.actionsLayout, actionsLayout = _j === void 0 ? "row" : _j, _k = _a.actionsSpacing, actionsSpacing = _k === void 0 ? "0" : _k, _l = _a.submitBackground, submitBackground = _l === void 0 ? "primary" : _l, _m = _a.submitColor, submitColor = _m === void 0 ? "light" : _m, _o = _a.cancelBackground, cancelBackground = _o === void 0 ? "transparent" : _o, _p = _a.cancelColor, cancelColor = _p === void 0 ? "current" : _p, _q = _a.submitOutline, submitOutline = _q === void 0 ? false : _q, _r = _a.submitOutlineColor, submitOutlineColor = _r === void 0 ? "current" : _r, _s = _a.cancelOutline, cancelOutline = _s === void 0 ? false : _s, _t = _a.cancelOutlineColor, cancelOutlineColor = _t === void 0 ? "current" : _t, _u = _a.buttonTextcase, buttonTextcase = _u === void 0 ? "normal-case" : _u, _v = _a.buttonShape, buttonShape = _v === void 0 ? "default" : _v, _w = _a.buttonIsBold, buttonIsBold = _w === void 0 ? false : _w, _x = _a.separator, separator = _x === void 0 ? false : _x;
|
|
25
25
|
var form = (0, react_1.useRef)(null);
|
|
26
26
|
var _y = (0, react_1.useState)(false), valid = _y[0], setValid = _y[1];
|
|
27
27
|
var _z = (0, react_1.useState)({}), formData = _z[0], setFormData = _z[1];
|
|
28
28
|
var layoutClasses = (0, react_1.useMemo)(function () { return layouts[layout]; }, [layout]);
|
|
29
29
|
var handleSubmit = function (e) {
|
|
30
30
|
e.preventDefault();
|
|
31
|
-
if (
|
|
32
|
-
|
|
31
|
+
if (form.current && !form.current.checkValidity()) {
|
|
32
|
+
setValid(false);
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
if (onFormSubmit) {
|
|
36
|
+
onFormSubmit(formData);
|
|
33
37
|
}
|
|
34
38
|
};
|
|
35
39
|
var handleCancel = function () {
|
|
@@ -52,15 +56,15 @@ var Form = function (_a) {
|
|
|
52
56
|
var setFormRef = (0, react_1.useCallback)(function (node) {
|
|
53
57
|
if (node) {
|
|
54
58
|
form.current = node;
|
|
55
|
-
node.addEventListener(
|
|
59
|
+
node.addEventListener("change", handleInputChange, true);
|
|
56
60
|
}
|
|
57
61
|
return function () {
|
|
58
62
|
if (node) {
|
|
59
|
-
node.removeEventListener(
|
|
63
|
+
node.removeEventListener("change", handleInputChange, true);
|
|
60
64
|
}
|
|
61
65
|
};
|
|
62
66
|
}, [handleInputChange]);
|
|
63
|
-
return ((0, jsx_runtime_1.jsxs)("form", { className: (0, tailwind_merge_1.twMerge)("form group flex ".concat(layoutClasses, " gap-8"), className), style: style, name: name, id: name, ref: setFormRef, onSubmit: handleSubmit, children: [children, actions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [separator && (0, jsx_runtime_1.jsx)("hr", { className:
|
|
67
|
+
return ((0, jsx_runtime_1.jsxs)("form", { className: (0, tailwind_merge_1.twMerge)("form group flex ".concat(layoutClasses, " gap-8"), className), style: style, name: name, id: name, ref: setFormRef, onSubmit: handleSubmit, children: [children, actions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [separator && (0, jsx_runtime_1.jsx)("hr", { className: "border-neutral border-t-2 opacity-70" }), (0, jsx_runtime_1.jsxs)("div", { className: "form-actions mt-auto flex group justify-between flex-grow flex-".concat(actionsLayout, " gap-").concat(actionsSpacing), children: [showCancel ? ((0, jsx_runtime_1.jsx)(__1.Button, { type: "button", className: "!justify-center flex-grow", btnBackground: cancelBackground, btnColor: cancelColor, outline: cancelOutline, outlineColor: cancelOutlineColor, textcase: buttonTextcase, layout: buttonShape, isBold: buttonIsBold, onClick: handleCancel, children: cancelLabel })) : null, (0, jsx_runtime_1.jsx)(__1.Button, { type: "submit", className: "!justify-center flex-grow", btnBackground: submitBackground, btnColor: submitColor, outline: submitOutline, outlineColor: submitOutlineColor, textcase: buttonTextcase, layout: buttonShape, isBold: buttonIsBold, disabled: !valid, children: submitLabel })] })] }))] }));
|
|
64
68
|
};
|
|
65
69
|
exports.default = Form;
|
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
70
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRm9ybS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91aS9mb3JtL0Zvcm0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxZQUFZLENBQUM7Ozs7Ozs7Ozs7Ozs7O0FBRWIsK0JBQXNFO0FBRXRFLGlEQUF5QztBQUV6Qyx3QkFBNEI7QUFJNUIsSUFBTSxPQUFPLEdBQUc7SUFDZCxHQUFHLEVBQUUsVUFBVTtJQUNmLEdBQUcsRUFBRSxvQkFBb0I7Q0FDMUIsQ0FBQztBQUVGLElBQU0sSUFBSSxHQUFHLFVBQUMsRUEwQkY7UUF6QlYsaUJBQWMsRUFBZCxTQUFTLG1CQUFHLEVBQUUsS0FBQSxFQUNkLEtBQUssV0FBQSxFQUNMLFlBQWEsRUFBYixJQUFJLG1CQUFHLE1BQU0sS0FBQSxFQUNiLFlBQVksa0JBQUEsRUFDWixRQUFRLGNBQUEsRUFDUixjQUFjLEVBQWQsTUFBTSxtQkFBRyxLQUFLLEtBQUEsRUFDZCxrQkFBa0IsRUFBbEIsVUFBVSxtQkFBRyxLQUFLLEtBQUEsRUFDbEIsZUFBYyxFQUFkLE9BQU8sbUJBQUcsSUFBSSxLQUFBLEVBQ2QsUUFBUSxjQUFBLEVBQ1IsbUJBQXNCLEVBQXRCLFdBQVcsbUJBQUcsUUFBUSxLQUFBLEVBQ3RCLG1CQUFzQixFQUF0QixXQUFXLG1CQUFHLFFBQVEsS0FBQSxFQUN0QixxQkFBcUIsRUFBckIsYUFBYSxtQkFBRyxLQUFLLEtBQUEsRUFDckIsc0JBQW9CLEVBQXBCLGNBQWMsbUJBQUcsR0FBRyxLQUFBLEVBQ3BCLHdCQUE0QixFQUE1QixnQkFBZ0IsbUJBQUcsU0FBUyxLQUFBLEVBQzVCLG1CQUFxQixFQUFyQixXQUFXLG1CQUFHLE9BQU8sS0FBQSxFQUNyQix3QkFBZ0MsRUFBaEMsZ0JBQWdCLG1CQUFHLGFBQWEsS0FBQSxFQUNoQyxtQkFBdUIsRUFBdkIsV0FBVyxtQkFBRyxTQUFTLEtBQUEsRUFDdkIscUJBQXFCLEVBQXJCLGFBQWEsbUJBQUcsS0FBSyxLQUFBLEVBQ3JC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
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { RegisterFormProps } from
|
|
2
|
-
declare const RegisterForm: ({ action, actionsLayout, actionsSpacing, onCancel,
|
|
1
|
+
import { RegisterFormProps } from "./types";
|
|
2
|
+
declare const RegisterForm: ({ action, actionsLayout, actionsSpacing, onCancel, onFormSubmit, showCancel, submitLabel, cancelLabel, submitBackground, submitColor, submitOutlineColor, cancelBackground, cancelColor, cancelOutlineColor, separator, name, className, style, buttonOutline, buttonTextcase, buttonShape, buttonIsBold, legendText, legendisBold, legendAlign, legendSize, spacing, hasBorder, userLabel, userAutocomplete, userPlaceholder, passwordLabel, passwordPlaceholder, passwordPattern, passwordTitle, confirmLabel, confirmPlaceholder, confirmTitle, inputsLayout, inputsSize, inputsRounded, checkLabel, checkLabelIsBold, checkRounded, checkHint, }: RegisterFormProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default RegisterForm;
|
package/lib/form/RegisterForm.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
2
|
+
"use client";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
var react_1 = require("react");
|
|
6
6
|
var __1 = require("..");
|
|
7
7
|
var RegisterForm = function (_a) {
|
|
8
|
-
var action = _a.action, _b = _a.actionsLayout, actionsLayout = _b === void 0 ?
|
|
9
|
-
var _5 = (0, react_1.useState)(
|
|
8
|
+
var action = _a.action, _b = _a.actionsLayout, actionsLayout = _b === void 0 ? "row" : _b, _c = _a.actionsSpacing, actionsSpacing = _c === void 0 ? "0" : _c, onCancel = _a.onCancel, onFormSubmit = _a.onFormSubmit, _d = _a.showCancel, showCancel = _d === void 0 ? true : _d, _e = _a.submitLabel, submitLabel = _e === void 0 ? "Register" : _e, _f = _a.cancelLabel, cancelLabel = _f === void 0 ? "Cancel" : _f, _g = _a.submitBackground, submitBackground = _g === void 0 ? "primary" : _g, _h = _a.submitColor, submitColor = _h === void 0 ? "light" : _h, _j = _a.submitOutlineColor, submitOutlineColor = _j === void 0 ? "current" : _j, _k = _a.cancelBackground, cancelBackground = _k === void 0 ? "transparent" : _k, _l = _a.cancelColor, cancelColor = _l === void 0 ? "current" : _l, _m = _a.cancelOutlineColor, cancelOutlineColor = _m === void 0 ? "current" : _m, _o = _a.separator, separator = _o === void 0 ? true : _o, _p = _a.name, name = _p === void 0 ? "register" : _p, _q = _a.className, className = _q === void 0 ? "" : _q, style = _a.style, _r = _a.buttonOutline, buttonOutline = _r === void 0 ? false : _r, _s = _a.buttonTextcase, buttonTextcase = _s === void 0 ? "normal-case" : _s, _t = _a.buttonShape, buttonShape = _t === void 0 ? "default" : _t, _u = _a.buttonIsBold, buttonIsBold = _u === void 0 ? true : _u, _v = _a.legendText, legendText = _v === void 0 ? "Register" : _v, _w = _a.legendisBold, legendisBold = _w === void 0 ? true : _w, _x = _a.legendAlign, legendAlign = _x === void 0 ? "center" : _x, _y = _a.legendSize, legendSize = _y === void 0 ? "md" : _y, _z = _a.spacing, spacing = _z === void 0 ? "4" : _z, _0 = _a.hasBorder, hasBorder = _0 === void 0 ? false : _0, userLabel = _a.userLabel, _1 = _a.userAutocomplete, userAutocomplete = _1 === void 0 ? "email" : _1, userPlaceholder = _a.userPlaceholder, passwordLabel = _a.passwordLabel, passwordPlaceholder = _a.passwordPlaceholder, passwordPattern = _a.passwordPattern, passwordTitle = _a.passwordTitle, confirmLabel = _a.confirmLabel, confirmPlaceholder = _a.confirmPlaceholder, confirmTitle = _a.confirmTitle, _2 = _a.inputsLayout, inputsLayout = _2 === void 0 ? "col" : _2, _3 = _a.inputsSize, inputsSize = _3 === void 0 ? "md" : _3, _4 = _a.inputsRounded, inputsRounded = _4 === void 0 ? "none" : _4, checkLabel = _a.checkLabel, checkLabelIsBold = _a.checkLabelIsBold, checkRounded = _a.checkRounded, checkHint = _a.checkHint;
|
|
9
|
+
var _5 = (0, react_1.useState)(""), newpassword = _5[0], setNewpassword = _5[1];
|
|
10
10
|
var handleCreatePassword = function (value) {
|
|
11
11
|
setNewpassword(value);
|
|
12
12
|
};
|
|
@@ -15,7 +15,10 @@ var RegisterForm = function (_a) {
|
|
|
15
15
|
onCancel();
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
var handleSubmit = function () {
|
|
19
|
+
console.log("handleSubmit");
|
|
20
|
+
};
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(__1.Form, { action: action, actionsLayout: actionsLayout, actionsSpacing: actionsSpacing, onCancel: handleCancel, onFormSubmit: handleSubmit, showCancel: showCancel, submitLabel: submitLabel, submitBackground: submitBackground, submitColor: submitColor, submitOutline: buttonOutline, submitOutlineColor: submitOutlineColor, cancelLabel: cancelLabel, cancelBackground: cancelBackground, cancelColor: cancelColor, cancelOutline: buttonOutline, cancelOutlineColor: cancelOutlineColor, separator: separator, name: name, method: "POST", className: className, style: style, buttonTextcase: buttonTextcase, buttonShape: buttonShape, buttonIsBold: buttonIsBold, children: (0, jsx_runtime_1.jsxs)(__1.Fieldset, { legendText: legendText, legendSize: legendSize, isBold: legendisBold, spacing: spacing, legendAlign: legendAlign, hasBorder: hasBorder, children: [(0, jsx_runtime_1.jsx)(__1.TextInput, { label: userLabel, autocomplete: userAutocomplete, placeholder: userPlaceholder, name: "user-name", id: "user-name", required: true, layout: inputsLayout, size: inputsSize, rounded: inputsRounded }), (0, jsx_runtime_1.jsx)(__1.PasswordInput, { name: "newpassword", label: passwordLabel, placeholder: passwordPlaceholder, title: passwordTitle, autocomplete: "new-password", pattern: passwordPattern, onInputChange: handleCreatePassword, layout: inputsLayout, size: inputsSize, rounded: inputsRounded, required: true, hint: true }), (0, jsx_runtime_1.jsx)(__1.PasswordInput, { label: confirmLabel, autocomplete: "new-password", placeholder: confirmPlaceholder, title: confirmTitle, name: "confirmpassword", pattern: newpassword, layout: inputsLayout, size: inputsSize, rounded: inputsRounded, required: true, hint: true }), (0, jsx_runtime_1.jsx)(__1.Checkbox, { label: checkLabel, labelIsBold: checkLabelIsBold, size: inputsSize, rounded: checkRounded, name: "terms", required: true, hint: checkHint })] }) }));
|
|
19
22
|
};
|
|
20
23
|
exports.default = RegisterForm;
|
|
21
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVnaXN0ZXJGb3JtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3VpL2Zvcm0vUmVnaXN0ZXJGb3JtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsWUFBWSxDQUFDOzs7QUFFYiwrQkFBd0M7QUFDeEMsd0JBQXdFO0FBR3hFLElBQU0sWUFBWSxHQUFHLFVBQUMsRUE4Q0Y7UUE3Q2xCLE1BQU0sWUFBQSxFQUNOLHFCQUFxQixFQUFyQixhQUFhLG1CQUFHLEtBQUssS0FBQSxFQUNyQixzQkFBb0IsRUFBcEIsY0FBYyxtQkFBRyxHQUFHLEtBQUEsRUFDcEIsUUFBUSxjQUFBLEVBQ1IsWUFBWSxrQkFBQSxFQUNaLGtCQUFpQixFQUFqQixVQUFVLG1CQUFHLElBQUksS0FBQSxFQUNqQixtQkFBd0IsRUFBeEIsV0FBVyxtQkFBRyxVQUFVLEtBQUEsRUFDeEIsbUJBQXNCLEVBQXRCLFdBQVcsbUJBQUcsUUFBUSxLQUFBLEVBQ3RCLHdCQUE0QixFQUE1QixnQkFBZ0IsbUJBQUcsU0FBUyxLQUFBLEVBQzVCLG1CQUFxQixFQUFyQixXQUFXLG1CQUFHLE9BQU8sS0FBQSxFQUNyQiwwQkFBOEIsRUFBOUIsa0JBQWtCLG1CQUFHLFNBQVMsS0FBQSxFQUM5Qix3QkFBZ0MsRUFBaEMsZ0JBQWdCLG1CQUFHLGFBQWEsS0FBQSxFQUNoQyxtQkFBdUIsRUFBdkIsV0FBVyxtQkFBRyxTQUFTLEtBQUEsRUFDdkIsMEJBQThCLEVBQTlCLGtCQUFrQixtQkFBRyxTQUFTLEtBQUEsRUFDOUIsaUJBQWdCLEVBQWhCLFNBQVMsbUJBQUcsSUFBSSxLQUFBLEVBQ2hCLFlBQWlCLEVBQWpCLElBQUksbUJBQUcsVUFBVSxLQUFBLEVBQ2pCLGlCQUFjLEVBQWQsU0FBUyxtQkFBRyxFQUFFLEtBQUEsRUFDZCxLQUFLLFdBQUEsRUFDTCxxQkFBcUIsRUFBckIsYUFBYSxtQkFBRyxLQUFLLEtBQUEsRUFDckIsc0JBQThCLEVBQTlCLGNBQWMsbUJBQUcs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
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
type BaseColorOption =
|
|
2
|
-
type ColorOption = BaseColorOption |
|
|
3
|
-
type OutlineColorOption = ColorOption |
|
|
4
|
-
type BackgroundOption = BaseColorOption |
|
|
5
|
-
type SpacingOption =
|
|
6
|
-
type AlignOption =
|
|
7
|
-
type SizeOption =
|
|
1
|
+
type BaseColorOption = "dark" | "light" | "info" | "success" | "warning" | "danger" | "primary" | "secondary";
|
|
2
|
+
type ColorOption = BaseColorOption | "current";
|
|
3
|
+
type OutlineColorOption = ColorOption | "accent";
|
|
4
|
+
type BackgroundOption = BaseColorOption | "transparent";
|
|
5
|
+
type SpacingOption = "0" | "1" | "2" | "4" | "8";
|
|
6
|
+
type AlignOption = "left" | "center" | "right";
|
|
7
|
+
type SizeOption = "sm" | "md" | "lg" | "xl";
|
|
8
8
|
interface CommonFormProps {
|
|
9
9
|
name?: string;
|
|
10
10
|
action?: string;
|
|
11
|
-
layout?:
|
|
11
|
+
layout?: "col" | "row";
|
|
12
12
|
className?: string;
|
|
13
13
|
style?: React.CSSProperties;
|
|
14
|
-
|
|
14
|
+
onFormSubmit?: (formData: {
|
|
15
15
|
[key: string]: string;
|
|
16
16
|
}) => void;
|
|
17
17
|
onCancel?: () => void;
|
|
18
18
|
showCancel?: boolean;
|
|
19
19
|
actions?: boolean;
|
|
20
|
-
actionsLayout?:
|
|
20
|
+
actionsLayout?: "row" | "row-reverse" | "col" | "col-reverse";
|
|
21
21
|
actionsSpacing?: SpacingOption;
|
|
22
22
|
separator?: boolean;
|
|
23
23
|
submitLabel?: string;
|
|
@@ -30,13 +30,13 @@ interface CommonFormProps {
|
|
|
30
30
|
submitOutlineColor?: OutlineColorOption;
|
|
31
31
|
cancelOutline?: boolean;
|
|
32
32
|
cancelOutlineColor?: ColorOption;
|
|
33
|
-
buttonTextcase?:
|
|
34
|
-
buttonShape?:
|
|
33
|
+
buttonTextcase?: "uppercase" | "lowercase" | "capitalize" | "normal-case";
|
|
34
|
+
buttonShape?: "default" | "rounded" | "pill";
|
|
35
35
|
buttonIsBold?: boolean;
|
|
36
36
|
}
|
|
37
37
|
export interface FormProps extends React.HTMLAttributes<HTMLFormElement>, CommonFormProps {
|
|
38
|
-
method?:
|
|
39
|
-
enctype?:
|
|
38
|
+
method?: "GET" | "POST" | "dialog" | string;
|
|
39
|
+
enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | string;
|
|
40
40
|
}
|
|
41
41
|
export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
|
|
42
42
|
legendText?: string;
|
|
@@ -45,7 +45,7 @@ export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSet
|
|
|
45
45
|
legendSize?: SizeOption;
|
|
46
46
|
hasBorder?: boolean;
|
|
47
47
|
isBold?: boolean;
|
|
48
|
-
spacing?:
|
|
48
|
+
spacing?: "4" | "8";
|
|
49
49
|
className?: string;
|
|
50
50
|
}
|
|
51
51
|
export interface LegendProps extends React.HTMLProps<HTMLLegendElement> {
|
|
@@ -59,11 +59,11 @@ export interface RegisterFormProps extends CommonFormProps {
|
|
|
59
59
|
legendisBold?: boolean;
|
|
60
60
|
legendAlign?: AlignOption;
|
|
61
61
|
legendSize?: SizeOption;
|
|
62
|
-
spacing?:
|
|
62
|
+
spacing?: "4" | "8";
|
|
63
63
|
hasBorder?: boolean;
|
|
64
64
|
buttonOutline?: boolean;
|
|
65
65
|
userLabel: string;
|
|
66
|
-
userAutocomplete?:
|
|
66
|
+
userAutocomplete?: "username" | "email" | "username email";
|
|
67
67
|
userPlaceholder?: string;
|
|
68
68
|
passwordLabel: string;
|
|
69
69
|
passwordPlaceholder?: string;
|
|
@@ -72,12 +72,12 @@ export interface RegisterFormProps extends CommonFormProps {
|
|
|
72
72
|
confirmLabel: string;
|
|
73
73
|
confirmPlaceholder?: string;
|
|
74
74
|
confirmTitle?: string;
|
|
75
|
-
inputsLayout?:
|
|
76
|
-
inputsSize?:
|
|
77
|
-
inputsRounded?:
|
|
75
|
+
inputsLayout?: "col" | "row";
|
|
76
|
+
inputsSize?: "md" | "lg" | "xl";
|
|
77
|
+
inputsRounded?: "none" | "md" | "lg" | "full";
|
|
78
78
|
checkLabel: string;
|
|
79
79
|
checkLabelIsBold?: boolean;
|
|
80
|
-
checkRounded?:
|
|
80
|
+
checkRounded?: "none" | "full";
|
|
81
81
|
checkHint?: React.ReactNode;
|
|
82
82
|
}
|
|
83
83
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@smitch/breeze",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.15",
|
|
4
4
|
"description": "A lightweight, Tailwind-powered React/Next.js UI component library.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -23,21 +23,25 @@
|
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@smitch/js-lib": "^0.3.22",
|
|
26
|
-
"tailwindcss": "^3.4.14",
|
|
27
|
-
"@tailwindcss/forms": "^0.5.9",
|
|
28
26
|
"react-icons": "^5.5.0",
|
|
29
27
|
"prismjs": "^1.30.0",
|
|
30
|
-
"tailwind-merge": "^2.5.4"
|
|
31
|
-
"postcss": "^8.4.47",
|
|
32
|
-
"autoprefixer": "^10.4.20",
|
|
33
|
-
"postcss-import": "^15.1.0"
|
|
28
|
+
"tailwind-merge": "^2.5.4"
|
|
34
29
|
},
|
|
35
30
|
"peerDependencies": {
|
|
36
31
|
"react": ">=19",
|
|
37
32
|
"react-dom": "^19.0.0",
|
|
38
|
-
"next": ">=15"
|
|
33
|
+
"next": ">=15",
|
|
34
|
+
"tailwindcss": "^3.4.0",
|
|
35
|
+
"@tailwindcss/forms": "^0.5.9",
|
|
36
|
+
"postcss": "^8.4.47",
|
|
37
|
+
"autoprefixer": "^10.4.20"
|
|
39
38
|
},
|
|
40
39
|
"devDependencies": {
|
|
41
|
-
"@types/prismjs": "^1.26.5"
|
|
40
|
+
"@types/prismjs": "^1.26.5",
|
|
41
|
+
"tailwindcss": "^3.4.14",
|
|
42
|
+
"@tailwindcss/forms": "^0.5.9",
|
|
43
|
+
"postcss": "^8.4.47",
|
|
44
|
+
"autoprefixer": "^10.4.20",
|
|
45
|
+
"postcss-import": "^15.1.0"
|
|
42
46
|
}
|
|
43
47
|
}
|