@kaio-xyz/design-system 1.0.25 → 1.0.27

package/dist/components/atoms/button/button.d.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 export type CommonButtonProps = {
     variant?: "primary" | "secondary" | "info" | "warning" | "danger" | "success";
     fullWidth?: boolean;

package/dist/components/atoms/loader/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from "./loader";

package/dist/components/atoms/loader/loader.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+type LoaderProps = PropsWithChildren<{
+    fullPage?: boolean;
+    text?: string;
+    isLightOverlay?: boolean;
+}>;
+export declare const Loader: ({ text, fullPage, isLightOverlay, children }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/loader/loader.stories.d.ts

@@ -0,0 +1,38 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: ({ text, fullPage, isLightOverlay, children }: {
+        fullPage?: boolean;
+        text?: string;
+        isLightOverlay?: boolean;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        fullPage: {
+            description: string;
+        };
+        text: {
+            description: string;
+        };
+        isLightOverlay: {
+            description: string;
+        };
+        children: {
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithText: Story;
+export declare const FullPage: Story;
+export declare const ContentArea: Story;
+export declare const LightOverlay: Story;
+export declare const LightOverlayContentArea: Story;
+export declare const WithChildren: Story;

package/dist/components/atoms/spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner } from "./spinner";

package/dist/components/atoms/spinner/spinner.d.ts

@@ -0,0 +1,7 @@
+type SpinnerProps = {
+    size?: number;
+    duration?: number;
+    className?: string;
+};
+export declare const Spinner: ({ size, duration, className, ...rest }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/spinner/spinner.stories.d.ts

@@ -0,0 +1,35 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: ({ size, duration, className, ...rest }: {
+        size?: number;
+        duration?: number;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        size: {
+            description: string;
+            control: {
+                type: "number";
+            };
+        };
+        duration: {
+            description: string;
+            control: {
+                type: "number";
+            };
+        };
+        className: {
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Slow: Story;
+export declare const Fast: Story;

package/dist/components/molecules/password-field/index.d.ts

@@ -1 +1,2 @@
 export { PasswordField } from "./password-field";
+export { ValidatePasswordField } from "./validate-password-field";

package/dist/index.cjs.js

@@ -214,16 +214,16 @@ var SvgChevronGrabber = function SvgChevronGrabber(props) {
   })));
 };
 
-var style$8 = {"root":"stack-module__root__AqSLk"};
+var style$b = {"root":"stack-module__root__AqSLk"};
 
 var Stack = function (_a) {
     var children = _a.children, _b = _a.space, space = _b === void 0 ? "s" : _b, className = _a.className, _c = _a.position, position = _c === void 0 ? "vertical" : _c, _d = _a.fullHeight, fullHeight = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, dataTest = _a.dataTest, dataAlignItems = _a.dataAlignItems, dataCapitalize = _a.dataCapitalize, dataMarginTop = _a.dataMarginTop, dataMarginBottom = _a.dataMarginBottom, dataMarginLeft = _a.dataMarginLeft, dataPaddingBottom = _a.dataPaddingBottom, rest = __rest(_a, ["children", "space", "className", "position", "fullHeight", "fullWidth", "dataTest", "dataAlignItems", "dataCapitalize", "dataMarginTop", "dataMarginBottom", "dataMarginLeft", "dataPaddingBottom"]);
-    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$8.root, className), "data-space": space, "data-position": position, "data-full-width": fullWidth, "data-full-height": fullHeight, "data-test": dataTest, "data-align-items": dataAlignItems, "data-capitalize": dataCapitalize, "data-margin-top": dataMarginTop, "data-margin-bottom": dataMarginBottom, "data-margin-left": dataMarginLeft, "data-padding-bottom": dataPaddingBottom }, rest, { children: children })));
+    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$b.root, className), "data-space": space, "data-position": position, "data-full-width": fullWidth, "data-full-height": fullHeight, "data-test": dataTest, "data-align-items": dataAlignItems, "data-capitalize": dataCapitalize, "data-margin-top": dataMarginTop, "data-margin-bottom": dataMarginBottom, "data-margin-left": dataMarginLeft, "data-padding-bottom": dataPaddingBottom }, rest, { children: children })));
 };
 
 var baseStyle = {"root":"badge-base-module__root__oUZlm"};
 
-var style$7 = {"root":"badge-module__root__rXpaz"};
+var style$a = {"root":"badge-module__root__rXpaz"};
 
 var BadgeStatuses = {
     success: "success",
@@ -242,31 +242,42 @@ var Badge = function (_a) {
             default: return jsxRuntime.jsx(SvgCircleDashed, {});
         }
     }, [status]);
-    return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$7.root), title: text, "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size }, props, { children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, text] }) })));
+    return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$a.root), title: text, "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size }, props, { children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, text] }) })));
 };
 
-var style$6 = {"root":"button-module__root__CDCDX"};
+var style$9 = {"root":"button-module__root__CDCDX"};
+
+var style$8 = {"spinner":"spinner-module__spinner__VzZj2"};
+
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 22 : _b, _c = _a.duration, duration = _c === void 0 ? 1 : _c, _d = _a.className, className = _d === void 0 ? '' : _d, rest = __rest(_a, ["size", "duration", "className"]);
+    return (jsxRuntime.jsx("div", { className: clsx(style$8.spinner, className), style: {
+            width: size,
+            height: size,
+            animationDuration: "".concat(duration, "s"),
+        }, children: jsxRuntime.jsx(SvgLoader, __assign({ width: size, height: size }, rest)) }));
+};
 
 var isAnchor = function (props) { return props.href !== undefined; };
 var Button = React.forwardRef(function (_a, ref) {
     var _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? "primary" : _c, _d = _a.size, size = _d === void 0 ? "normal" : _d, _e = _a.isInverted, isInverted = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.iconSize, iconSize = _g === void 0 ? 22 : _g, Icon = _a.icon, props = __rest(_a, ["fullWidth", "variant", "size", "isInverted", "isLoading", "iconSize", "icon"]);
     var iconProps = { width: iconSize, height: iconSize, "aria-hidden": "true" };
     var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps));
-    var loadingIcon = isLoading && jsxRuntime.jsx(SvgLoader, __assign({}, iconProps));
+    var loadingIcon = isLoading && jsxRuntime.jsx(Spinner, __assign({ size: iconSize }, iconProps));
     var iconChild = loadingIcon || baseIcon || null;
-    var classes = clsx(style$6.root, props.className);
+    var classes = clsx(style$9.root, props.className);
     return (isAnchor(props) ? (jsxRuntime.jsx("a", __assign({ "aria-disabled": props.disabled, ref: ref }, props, { className: classes, children: props.children }))) : (jsxRuntime.jsx("button", __assign({ "aria-disabled": props.disabled, ref: ref, type: "button" }, props, { className: classes, "data-type": variant, "data-size": size, "data-full-width": fullWidth, "data-inverted": isInverted, disabled: props.disabled || isLoading, "data-is-loading": isLoading, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconChild, isLoading ? "Loading" : props.children] }) }))));
 });
 Button.displayName = "Button";
 
-var style$5 = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
+var style$7 = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
 
 var Hint = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
-    return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$5.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$5.children, children: children })] })));
+    return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$7.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$7.children, children: children })] })));
 };
 
-var style$4 = {"field":"text-field-module__field__iZ0TF","label":"text-field-module__label__ClJkz","container":"text-field-module__container__IKtNZ","fieldWrapper":"text-field-module__fieldWrapper__nQ7l8","textField":"text-field-module__textField__756eR","hint":"text-field-module__hint__Ad6VA"};
+var style$6 = {"field":"text-field-module__field__iZ0TF","label":"text-field-module__label__ClJkz","container":"text-field-module__container__IKtNZ","fieldWrapper":"text-field-module__fieldWrapper__nQ7l8","textField":"text-field-module__textField__756eR","hint":"text-field-module__hint__Ad6VA"};
 
 var TextField = React.forwardRef(function (_a, ref) {
     var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, invalid = _a.invalid, button = _a.button, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "invalid", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur"]);
@@ -303,35 +314,65 @@ var TextField = React.forwardRef(function (_a, ref) {
         setHasValue(e.target.value.length > 0);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     };
-    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$4.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$4.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$4.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$4.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$4.field, readOnly: readOnly, "data-type": "single", "data-size": size, "data-floating-label": floatingLabel, id: id, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, "data-invalid": invalid, ref: inputRef, type: "text", value: value, defaultValue: defaultValue }, attributes)), button ? button : null] }), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$4.hint, children: hint })] }) }));
+    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$6.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$6.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$6.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$6.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$6.field, readOnly: readOnly, "data-type": "single", "data-size": size, "data-floating-label": floatingLabel, id: id, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, "data-invalid": invalid, ref: inputRef, type: "text", value: value, defaultValue: defaultValue }, attributes)), button ? button : null] }), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$6.hint, children: hint })] }) }));
 });
 TextField.displayName = "TextField";
 
-var style$3 = {"container":"container-module__container__CAxQw"};
+var style$5 = {"container":"container-module__container__CAxQw"};
 
 var Container = function (_a) {
     var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
-    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$3.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
+    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$5.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
 };
 
-var style$2 = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
+var style$4 = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
 
 var PasswordField = React.forwardRef(function (_a, ref) {
     var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
     var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
-    var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$2.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
-    return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$2.field })));
+    var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$4.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
+    return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$4.field })));
 });
 PasswordField.displayName = "PasswordField";
 
-var style$1 = {"root":"label-module__root__34bJr"};
+var style$3 = {"validator":"validate-password-field-module__validator__Do-6w"};
+
+var rules = {
+    length: /^.{8,}$/,
+    case: /^(?=.*[a-z])(?=.*[A-Z]).*$/,
+    number: /^(?=.*\d).*$/,
+    special: /^(?=.*[@$!%*?&_#]).*$/,
+};
+var ValidatePasswordField = React.forwardRef(function (_a, ref) {
+    var onChange = _a.onChange, setIsPasswordValid = _a.setIsPasswordValid, rest = __rest(_a, ["onChange", "setIsPasswordValid"]);
+    var _b = React.useState(false), isLenghtCheckOk = _b[0], setIslengthCheckOk = _b[1];
+    var _c = React.useState(false), isCaseCheckOk = _c[0], setIsCaseCheckOk = _c[1];
+    var _d = React.useState(false), isNumberCheckOk = _d[0], setIsNumberCheckOk = _d[1];
+    var _e = React.useState(false), isSpecialCheckOk = _e[0], setIsSpecialCheckOk = _e[1];
+    var onHandleChange = function (e) {
+        var value = e.target.value;
+        setIslengthCheckOk(rules.length.test(value));
+        setIsCaseCheckOk(rules.case.test(value));
+        setIsNumberCheckOk(rules.number.test(value));
+        setIsSpecialCheckOk(rules.special.test(value));
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    React.useEffect(function () {
+        setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
+    }, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
+    var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$3.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
+    return (jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx(PasswordField, __assign({ onChange: onHandleChange, ref: ref }, rest)), jsxRuntime.jsxs(Stack, { children: [getValidator(isLenghtCheckOk, "At least 8 characters"), getValidator(isCaseCheckOk, "Include uppercase & lowercase letters"), getValidator(isNumberCheckOk, "Include at least one number"), getValidator(isSpecialCheckOk, "Include at least one special character (allowed: @ $ ! % * ? & _ #)")] })] }));
+});
+ValidatePasswordField.displayName = "ValidatePasswordField";
+
+var style$2 = {"root":"label-module__root__34bJr"};
 
 var Label = function (_a) {
     var id = _a.id, label = _a.label, className = _a.className, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b, _c = _a.hasHalfMargin, hasHalfMargin = _c === void 0 ? false : _c, _d = _a.hasCursorPointer, hasCursorPointer = _d === void 0 ? false : _d;
-    return (jsxRuntime.jsx("label", { className: clsx(style$1.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
+    return (jsxRuntime.jsx("label", { className: clsx(style$2.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
 };
 
-var style = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
+var style$1 = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
 
 var IconAndLabel = function (_a) {
     var children = _a.children, Icon = _a.icon;
@@ -352,7 +393,7 @@ var CustomSingleValue = function (_a) {
 };
 var Select = function (_a) {
     var id = _a.id, label = _a.label, dataTest = _a.dataTest, isDisabled = _a.isDisabled, className = _a.className, error = _a.error, customComponents = _a.components, rest = __rest(_a, ["id", "label", "dataTest", "isDisabled", "className", "error", "components"]);
-    return (jsxRuntime.jsxs("div", { className: clsx(style.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style.selector, "data-error": !!error, children: [jsxRuntime.jsx(ReactSelect, __assign({ id: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style.hint, children: error })] })] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(style$1.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$1.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$1.selector, "data-error": !!error, children: [jsxRuntime.jsx(ReactSelect, __assign({ id: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style$1.hint, children: error })] })] }));
 };
 Select.displayName = "Select";
 
@@ -365,12 +406,22 @@ var FormSelect = function (_a) {
 };
 FormSelect.displayName = "FormSelect";
 
+var style = {"root":"loader-module__root__qnInQ"};
+
+var Loader = function (_a) {
+    var text = _a.text, _b = _a.fullPage, fullPage = _b === void 0 ? true : _b, _c = _a.isLightOverlay, isLightOverlay = _c === void 0 ? false : _c, children = _a.children;
+    return (jsxRuntime.jsx("div", { className: style.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx(Spinner, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
+};
+
 exports.Badge = Badge;
 exports.Button = Button;
 exports.Container = Container;
 exports.FormSelect = FormSelect;
+exports.Loader = Loader;
 exports.PasswordField = PasswordField;
 exports.Select = Select;
+exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.TextField = TextField;
+exports.ValidatePasswordField = ValidatePasswordField;
 //# sourceMappingURL=index.cjs.js.map