@rovula/ui 0.1.13 → 0.1.14

package/dist/cjs/types/components/AlertDialog/AlertDialog.stories.d.ts

@@ -25,3 +25,6 @@ export declare const CustomStyle: {
 export declare const FigmaFail: {
     render: () => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FigmaConfirmRequirePassword: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Dialog/Dialog.stories.d.ts

@@ -23,6 +23,9 @@ export declare const Demo: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const FigmaChangePassword: {
+export declare const FigmaFunctionForm: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FigmaFunctionFormWithAction: {
     render: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/AlertDialog/AlertDialog.js

@@ -25,7 +25,7 @@ const AlertDialogOverlay = React.forwardRef((_a, ref) => {
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 const AlertDialogContent = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[460px] translate-x-[-50%] translate-y-[-50%] gap-8 rounded-md bg-modal-surface px-6 py-8 text-text-contrast-max shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props))] }));
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[460px] translate-x-[-50%] translate-y-[-50%] gap-6 rounded-md bg-modal-surface px-6 py-8 text-text-contrast-max shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props))] }));
 });
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 const AlertDialogHeader = (_a) => {
@@ -35,7 +35,7 @@ const AlertDialogHeader = (_a) => {
 AlertDialogHeader.displayName = "AlertDialogHeader";
 const AlertDialogFooter = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse items-center justify-center gap-3 sm:flex-row sm:gap-4", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-row items-center justify-center gap-4", className) }, props)));
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
 const AlertDialogTitle = React.forwardRef((_a, ref) => {
@@ -45,18 +45,18 @@ const AlertDialogTitle = React.forwardRef((_a, ref) => {
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 const AlertDialogDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-small1 text-text-contrast-max", className) }, props)));
+    return (_jsx(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-body3 text-text-contrast-max", className) }, props)));
 });
 AlertDialogDescription.displayName =
     AlertDialogPrimitive.Description.displayName;
 const AlertDialogAction = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Action, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false }), className) }, props)));
+    return (_jsx(AlertDialogPrimitive.Action, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false }), "w-[100px] justify-center", className) }, props)));
 });
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 const AlertDialogCancel = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Cancel, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false, variant: "outline" }), "mt-2 sm:mt-0", className) }, props)));
+    return (_jsx(AlertDialogPrimitive.Cancel, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false, variant: "outline" }), "w-[100px] justify-center", className) }, props)));
 });
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/AlertDialog/AlertDialog.stories.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./AlertDialog";
+import { TextInput } from "../TextInput/TextInput";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
     title: "Components/AlertDialog",
@@ -41,3 +43,23 @@ export const CustomStyle = {
 export const FigmaFail = {
     render: () => (_jsx("div", { className: "flex w-full", children: _jsx(AlertDialog, { defaultOpen: true, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Infomation update failed" }), _jsx(AlertDialogDescription, { children: "Please login again and complete your profile to activate your account." })] }), _jsx(AlertDialogFooter, { children: _jsx(AlertDialogAction, { className: "w-[140px] justify-center", children: "Try again" }) })] }) }) })),
 };
+export const FigmaConfirmRequirePassword = {
+    render: () => {
+        const [value, setValue] = useState("");
+        const [submitted, setSubmitted] = useState(false);
+        const isRequired = submitted && value === "";
+        const isWrongWord = submitted && value !== "" && value !== "confirm";
+        const isValid = value === "confirm";
+        return (_jsx("div", { className: "flex w-full", children: _jsx(AlertDialog, { defaultOpen: true, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Title" }), _jsx(AlertDialogDescription, { children: "Subtitle description" })] }), _jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsx("p", { className: "typography-small1 text-text-contrast-max", children: "Type \u201Cconfirm\u201D to proceed." }), _jsx(TextInput, { label: "Type to confirm", required: true, value: value, onChange: (e) => {
+                                        setValue(e.target.value);
+                                        setSubmitted(false);
+                                    }, errorMessage: isRequired
+                                        ? "This field is required."
+                                        : isWrongWord
+                                            ? "Please type 'confirm' to proceed"
+                                            : undefined, hasClearIcon: true, keepFooterSpace: true, fullwidth: true })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: () => {
+                                        setValue("");
+                                        setSubmitted(false);
+                                    }, children: "Cancel" }), _jsx(AlertDialogAction, { disabled: !isValid, onClick: () => setSubmitted(true), children: "Confirm" })] })] }) }) }));
+    },
+};

package/dist/components/Dialog/Dialog.js

@@ -26,32 +26,32 @@ const DialogOverlay = React.forwardRef((_a, ref) => {
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef((_a, ref) => {
     var { className, children, showCloseButton = false, closeButtonClassName } = _a, props = __rest(_a, ["className", "children", "showCloseButton", "closeButtonClassName"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("absolute right-8 top-8 rounded-sm opacity-70 ring-offset-bg-bg1 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-input-active-stroke focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-state-primary-text-solid", closeButtonClassName), children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col gap-6 rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("absolute right-8 top-8 rounded-sm opacity-70 ring-offset-bg-bg1 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-input-active-stroke focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-state-primary-text-solid", closeButtonClassName), children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col gap-2 text-left", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col gap-1 text-left", className) }, props)));
 };
 DialogHeader.displayName = "DialogHeader";
 const DialogBody = (_a) => {
     var { className, scrollable = false } = _a, props = __rest(_a, ["className", "scrollable"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-1 min-h-0 flex-col mt-8", scrollable && "overflow-y-auto", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-1 min-h-0 flex-col", scrollable && "overflow-y-auto", className) }, props)));
 };
 DialogBody.displayName = "DialogBody";
 const DialogFooter = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end sm:gap-6", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-row items-center justify-end gap-4", className) }, props)));
 };
 DialogFooter.displayName = "DialogFooter";
 const DialogTitle = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-h4 tracking-tight text-text-contrast-max", className) }, props)));
+    return (_jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-h6 tracking-tight text-text-contrast-max", className) }, props)));
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-subtitle1 text-text-g-contrast-medium", className) }, props)));
+    return (_jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-body3 text-text-contrast-max", className) }, props)));
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, };

package/dist/components/Dialog/Dialog.stories.js

@@ -1,11 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as yup from "yup";
 import { Dialog, DialogContent, DialogDescription, DialogBody, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./Dialog";
 import Button from "../Button/Button";
 import { Label } from "../Label/Label";
 import { Input } from "../Input/Input";
-import { Field, Form, ValidationHintList } from "../Form";
-import PasswordInput from "../PasswordInput";
 const meta = {
     title: "Components/Dialog",
     component: Dialog,
@@ -95,35 +93,9 @@ const changePasswordSchema = yup.object({
         .required("Please confirm your password")
         .oneOf([yup.ref("newPassword")], "Passwords must match"),
 });
-export const FigmaChangePassword = {
-    render: () => {
-        return (_jsx("div", { className: "flex w-full", children: _jsx(Dialog, { defaultOpen: true, children: _jsx(DialogContent, { className: "min-h-[686px] max-w-[650px]", children: _jsx(Form, { className: "contents", defaultValues: {
-                            newPassword: "",
-                            confirmPassword: "",
-                        }, mode: "onTouched", validationSchema: changePasswordSchema, onSubmit: (values) => {
-                            // eslint-disable-next-line no-console
-                            console.log("Change password submit:", values);
-                        }, children: ({ formState, watch }) => {
-                            const newPassword = watch("newPassword");
-                            const confirmPassword = watch("confirmPassword");
-                            return (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Welcome!" }), _jsx(DialogDescription, { children: "Please create a new password to replace the temporary password." })] }), _jsx(DialogBody, { children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Field, { name: "newPassword", component: PasswordInput, componentProps: {
-                                                        id: "new-password",
-                                                        label: "New password",
-                                                        type: "password",
-                                                        required: true,
-                                                        fullwidth: true,
-                                                        size: "lg",
-                                                    } }), _jsx(Field, { name: "confirmPassword", component: PasswordInput, componentProps: {
-                                                        id: "confirm-password",
-                                                        label: "Confirm password",
-                                                        type: "password",
-                                                        required: true,
-                                                        fullwidth: true,
-                                                        size: "lg",
-                                                    } }), _jsx(ValidationHintList, { values: {
-                                                        newPassword: newPassword || "",
-                                                        confirmPassword: confirmPassword || "",
-                                                    }, rules: passwordHints })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", color: "primary", size: "lg", fullwidth: false, children: "Back" }), _jsx(Button, { type: "submit", size: "lg", fullwidth: false, className: "w-[180px]", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Save changes" })] })] }));
-                        } }) }) }) }));
-    },
+export const FigmaFunctionForm = {
+    render: () => (_jsx("div", { className: "flex w-full", children: _jsx(Dialog, { defaultOpen: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Title" }), _jsx(DialogDescription, { children: "Subtitle description" })] }), _jsx(DialogBody, { children: _jsx("div", { className: "flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm", children: _jsx("p", { className: "typography-body3 text-text-contrast-max", children: "Content - Form Area" }) }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", color: "primary", fullwidth: false, children: "Cancel" }), _jsx(Button, { disabled: true, fullwidth: false, children: "Confirm" })] })] }) }) })),
+};
+export const FigmaFunctionFormWithAction = {
+    render: () => (_jsx("div", { className: "flex w-full", children: _jsx(Dialog, { defaultOpen: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Title" }), _jsx(DialogDescription, { children: "Subtitle description" })] }), _jsx(DialogBody, { children: _jsx("div", { className: "flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm", children: _jsx("p", { className: "typography-body3 text-text-contrast-max", children: "Content - Form Area" }) }) }), _jsxs(DialogFooter, { className: "justify-between", children: [_jsx(Button, { variant: "outline", color: "secondary", fullwidth: false, children: "Medium" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "outline", color: "primary", fullwidth: false, children: "Cancel" }), _jsx(Button, { disabled: true, fullwidth: false, children: "Confirm" })] })] })] }) }) })),
 };

package/dist/esm/bundle.css

@@ -770,9 +770,6 @@ input[type=number] {
 .mt-4{
   margin-top: 1rem;
 }
-.mt-8{
-  margin-top: 2rem;
-}
 .mt-\[6px\]{
   margin-top: 6px;
 }
@@ -797,9 +794,6 @@ input[type=number] {
 .grid{
   display: grid;
 }
-.contents{
-  display: contents;
-}
 .hidden{
   display: none;
 }
@@ -899,6 +893,9 @@ input[type=number] {
 .h-60{
   height: 15rem;
 }
+.h-\[200px\]{
+  height: 200px;
+}
 .h-\[200vh\]{
   height: 200vh;
 }
@@ -969,9 +966,6 @@ input[type=number] {
 .min-h-\[18px\]{
   min-height: 18px;
 }
-.min-h-\[686px\]{
-  min-height: 686px;
-}
 .min-h-screen{
   min-height: 100vh;
 }
@@ -1017,9 +1011,6 @@ input[type=number] {
 .w-\[140px\]{
   width: 140px;
 }
-.w-\[180px\]{
-  width: 180px;
-}
 .w-\[200px\]{
   width: 200px;
 }
@@ -2552,6 +2543,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--transparent-primary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
+.bg-ramps-secondary-150{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--ramps-secondary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
 .bg-red-100{
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
@@ -6410,37 +6405,13 @@ input[type=number] {
 }
 @media (min-width: 640px){
 
-  .sm\:mt-0{
-    margin-top: 0px;
-  }
-
   .sm\:max-w-\[425px\]{
     max-width: 425px;
   }
 
-  .sm\:flex-row{
-    flex-direction: row;
-  }
-
-  .sm\:items-center{
-    align-items: center;
-  }
-
-  .sm\:justify-end{
-    justify-content: flex-end;
-  }
-
   .sm\:justify-stretch{
     justify-content: stretch;
   }
-
-  .sm\:gap-4{
-    gap: 1rem;
-  }
-
-  .sm\:gap-6{
-    gap: 1.5rem;
-  }
 }
 @media (min-width: 768px){