@sonic-equipment/ui 133.0.0 → 134.0.0

package/dist/sign-in-form/sign-in-form.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Form } from 'react-aria-components';
+import clsx from 'clsx';
+import { Button } from '../buttons/button/button.js';
+import { Link } from '../buttons/link/link.js';
+import { Switch } from '../forms/switch/switch.js';
+import { TextField } from '../forms/text-field/text-field.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { Heading } from '../typography/heading/heading.js';
+import styles from './sign-in-form.module.css.js';
+
+const GUEST_SIGN_IN_BUTTON_NAME = 'guestSignin';
+function SignInForm({ allowGuestSignIn = false, initialEmail, initialRemember, onSubmit = () => { }, }) {
+    const t = useFormattedMessage();
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const form = event.currentTarget;
+        const formData = new FormData(form);
+        // in case of guest sign-in submit
+        const submitter = event.nativeEvent.submitter;
+        if (submitter?.name === GUEST_SIGN_IN_BUTTON_NAME) {
+            return onSubmit({
+                data: {
+                    guestSignin: true,
+                },
+            });
+        }
+        // regular sign-in
+        const email = formData.get('email')?.toString();
+        const password = formData.get('password')?.toString();
+        const remember = Boolean(formData.get('remember'));
+        if (!email)
+            throw new Error('Email value is required');
+        if (!password)
+            throw new Error('Password value is required');
+        onSubmit({
+            data: {
+                email,
+                guestSignin: false,
+                password,
+                remember,
+            },
+        });
+    };
+    return (jsxs(Form, { "aria-label": t('sign in'), autoComplete: "off", className: clsx(styles['sign-in-form'], styles['form']), onSubmit: handleSubmit, validationBehavior: "native", children: [jsx("header", { className: styles['form-header'], children: jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: t('sign in') }) }), jsxs("fieldset", { className: clsx(styles['form-fieldset'], styles['columns']), children: [jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_userName", defaultValue: initialEmail, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email" }) }), jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_password", isRequired: true, label: t('Password'), name: "password", showLabel: true, type: "password" }) })] }), jsxs("footer", { className: styles['form-footer'], children: [jsx("div", { className: styles['form-segment'], children: jsx(Switch, { className: styles['floating'], defaultSelected: initialRemember, name: "remember", value: "true", children: t('Remember me') }) }), jsx("div", { className: styles['form-segment'], children: jsx(Button, { "data-test-selector": "signIn_submit", type: "submit", withArrow: true, children: t('sign in') }) }), jsxs("div", { className: styles['form-segment'], children: [jsx("p", { children: jsx(Link, { "data-test-selector": "signIn_forgotPassword", hasUnderline: true, href: "#", children: t('Forgot password?') }) }), jsxs("p", { children: [t('New user?'), ' ', jsx(Link, { "data-test-selector": "signInCreateNewAccount_createNewAccount", hasUnderline: true, href: "#", children: t('create account') })] })] }), allowGuestSignIn && (jsx("div", { className: styles['form-segment'], children: jsx(Button, { color: "secondary", isValidating: false, name: GUEST_SIGN_IN_BUTTON_NAME, type: "submit", value: "true", variant: "outline", children: t('Or sign in as guest') }) }))] })] }));
+}
+
+export { SignInForm };

package/dist/sign-in-form/sign-in-form.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"sign-in-form":"sign-in-form-module-4DkkP","form":"sign-in-form-module-bGXUd","form-segment":"sign-in-form-module-TumIz","floating":"sign-in-form-module-bIzyz","form-fieldset":"sign-in-form-module-EoTYu","columns":"sign-in-form-module-9eIx-","form-footer":"sign-in-form-module-aYBAy"};
+
+export { styles as default };

package/dist/styles.css

@@ -998,13 +998,9 @@
 .checkbox-module-YNVdd {
   --selected-color: var(--color-brand-red);
   --selected-color-pressed: var(--color-brand-dark-red);
-  --disabled-color: color-mix(in srgb, var(--selected-color) 20%, transparent);
+  --disabled-color: var(--color-brand-dark-gray);
   --checkmark-color: var(--color-white);
-  --disabled-checkmark-color: color-mix(
-    in srgb,
-    var(--checkmark-color) 40%,
-    transparent
-  );
+  --disabled-checkmark-color: var(--color-white);
 
   all: unset;
   display: flex;
@@ -1031,15 +1027,17 @@
   }
 
   .checkbox-module-YNVdd .checkbox-module-pHIwh {
-    width: 1rem;
-    height: 1rem;
+    aspect-ratio: 11/8;
     fill: none;
+    inline-size: 10px;
+    margin-block-start: 1px;
     stroke: currentcolor;
     stroke-dasharray: 22px;
     stroke-dashoffset: 66;
     stroke-linecap: round;
-    stroke-width: 2px;
-    transition: all 200ms;
+    stroke-linejoin: round;
+    stroke-width: 1.45;
+    transition: all 200ms, stroke-dashoffset 600ms;
   }
 
   .checkbox-module-YNVdd[data-disabled] {
@@ -1047,12 +1045,6 @@
     opacity: 0.4;
   }
 
-  .checkbox-module-YNVdd[data-disabled] .checkbox-module-UKoyf {
-      border-color: var(--color-transparent);
-      background-color: var(--disabled-color);
-      color: var(--disabled-checkmark-color);
-    }
-
   .checkbox-module-YNVdd[data-pressed] .checkbox-module-UKoyf {
     border-color: var(--color-brand-dark-gray);
   }
@@ -1077,6 +1069,11 @@
       stroke-dashoffset: 44;
     }
 
+  .checkbox-module-YNVdd[data-selected][data-disabled] .checkbox-module-UKoyf, .checkbox-module-YNVdd[data-indeterminate][data-disabled] .checkbox-module-UKoyf {
+        border-color: transparent;
+        background: var(--disabled-color);
+      }
+
   .checkbox-module-YNVdd[data-indeterminate] .checkbox-module-pHIwh {
       fill: var(--checkmark-color);
       stroke: none;
@@ -1087,7 +1084,6 @@
   .checkbox-module-YNVdd.checkbox-module-nEhvW .checkbox-module-UKoyf {
       border: none;
       background: var(--selected-color);
-      background-size: 16px 16px;
       transition: none;
     }
 
@@ -1099,9 +1095,7 @@
             var(--selected-color)
           ),
           linear-gradient(var(--selected-color), var(--selected-color));
-        background-position:
-          2px 2px,
-          14px 14px;
+        background-position: 2px 2px, 14px 14px;
         background-repeat: no-repeat;
         background-size: 10px 10px;
       }
@@ -1204,6 +1198,7 @@
   }
 .input-module-2woJR .input-module-zjVxG {
   display: inline-grid;
+  width: 100%;
   align-items: center;
   grid-template-columns: 1fr 0;
 }
@@ -1217,23 +1212,28 @@
     color: var(--color-brand-dark-gray);
   }
 /* Don't show value-reveal button on empty password fields  */
-.input-module-2woJR .input-module-zjVxG input[type="password"] + .input-module-oeAz2 {
+.input-module-2woJR .input-module-zjVxG input[type='password'] + .input-module-oeAz2 {
       transition: all 0.2s ease;
     }
-.input-module-2woJR .input-module-zjVxG input[type="password"][value=""] + .input-module-oeAz2 {
+.input-module-2woJR .input-module-zjVxG input[type='password'][value=''] + .input-module-oeAz2 {
       opacity: 0;
       visibility: hidden;
     }
-.input-module-2woJR .input-module-zjVxG input[type="password"]:not([value=""]) + .input-module-oeAz2 {
+.input-module-2woJR .input-module-zjVxG input[type='password']:not([value='']) + .input-module-oeAz2 {
       opacity: 1;
       visibility: visible;
     }
+
 .label-module-LGfJt {
   all: unset;
   cursor: pointer;
   font-weight: var(--font-weight-bold);
 }
 
+  .label-module-LGfJt:has(+ div [data-disabled]) {
+    cursor: default;
+  }
+
   .label-module-LGfJt :where(.label-module-oTWaS) {
     color: var(--color-brand-red);
     margin-inline-start: var(--space-4);
@@ -2437,13 +2437,13 @@
   --tooltip-bg-color: var(--color-gray-800);
 
   display: inline-block;
-  max-width: 250px;
-  padding: 10px;
-  border: 1px solid var(--tooltip-bg-color);
-  border-radius: 6px;
+  padding: var(--space-12) var(--space-16);
+  border-radius: var(--border-radius-8);
   background: var(--tooltip-bg-color);
   color: var(--color-white);
-  outline: none;
+  font-size: var(--font-size-14);
+  line-height: 1.14;
+  max-inline-size: 250px;
   overflow-wrap: break-word;
 }
 
@@ -2455,11 +2455,11 @@
   }
 
   .tooltip-module-T-DtX[data-placement='top']:has(.tooltip-module-CBW5f) {
-      margin-bottom: 6px;
+      margin-block-end: 6px;
     }
 
   .tooltip-module-T-DtX[data-placement='bottom']:has(.tooltip-module-CBW5f) {
-      margin-top: 6px;
+      margin-block-start: 6px;
     }
 
   .tooltip-module-T-DtX[data-placement='bottom'] .tooltip-module-CBW5f svg {
@@ -2467,7 +2467,7 @@
     }
 
   .tooltip-module-T-DtX[data-placement='right']:has(.tooltip-module-CBW5f) {
-      margin-left: 6px;
+      margin-inline-start: 6px;
     }
 
   .tooltip-module-T-DtX[data-placement='right'] .tooltip-module-CBW5f svg {
@@ -2475,7 +2475,7 @@
     }
 
   .tooltip-module-T-DtX[data-placement='left']:has(.tooltip-module-CBW5f) {
-      margin-right: 6px;
+      margin-inline-end: 6px;
     }
 
   .tooltip-module-T-DtX[data-placement='left'] .tooltip-module-CBW5f svg {
@@ -2495,9 +2495,9 @@
 }
 
 .tooltip-module-DRHoc .tooltip-module-3q6nr {
-    min-width: unset;
-    min-height: unset;
     color: currentcolor;
+    min-block-size: unset;
+    min-inline-size: unset;
   }
 
 .tooltip-module-DRHoc .tooltip-module-3q6nr:hover {
@@ -4109,7 +4109,8 @@ button.swiper-pagination-bullet {
     box-sizing: border-box;
     border-radius: 12px;
     background: var(--box-color);
-    transition: all 200ms;
+    transition-duration: 200ms;
+    transition-property: background;
   }
 
   .switch-module-ywpXc .switch-module-2e1rG::before {
@@ -4174,6 +4175,39 @@ button.swiper-pagination-bullet {
   .password-reveal-toggle-module-uUQbW span {
     height: var(--space-24);
   }
+.info-icon-tooltip-module-oR4nD {
+  --color-trigger: var(--color-brand-medium-gray);
+  --color-trigger-hover: var(--color-brand-dark-gray);
+  --color-trigger-active: var(--color-brand-dark-gray);
+
+  display: inline-flex;
+}
+
+  .info-icon-tooltip-module-oR4nD.info-icon-tooltip-module-5zfDr {
+    --color-trigger: currentcolor;
+    --color-trigger-hover: color-mix(in srgb, currentcolor, #000 20%);
+    --color-trigger-active: color-mix(in srgb, currentcolor, #000 20%);
+  }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K {
+    border-radius: 50%;
+    color: var(--color-trigger);
+    min-block-size: unset;
+    min-inline-size: unset;
+  }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K:hover {
+      color: var(--color-trigger-hover);
+    }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K:focus-visible {
+      box-shadow: var(--shadow-focus-outline);
+    }
+
+  .info-icon-tooltip-module-oR4nD[data-active] .info-icon-tooltip-module-0lY-K {
+    color: var(--color-trigger-active);
+  }
+
 .textarea-module-C6Xr1 {
   position: relative;
   display: inline-block;
@@ -4184,8 +4218,7 @@ button.swiper-pagination-bullet {
 }
 
   .textarea-module-C6Xr1:has([data-disabled]) {
-    background-color: var(--color-brand-light-gray);
-    color: var(--color-brand-medium-gray);
+    opacity: 0.4;
   }
 
   .textarea-module-C6Xr1:has([data-focused]) {
@@ -4233,19 +4266,37 @@ button.swiper-pagination-bullet {
 
 .text-field-module-JeaK0 {
   all: unset;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: normal;
-  gap: var(--space-4);
+  display: grid;
+  grid-template-areas:
+    'label .'
+    'field info'
+    'error .';
+  grid-template-columns: 1fr auto;
 }
 
   .text-field-module-JeaK0 span:empty {
     display: none;
   }
 
-  .text-field-module-JeaK0 input[type="password"] {
-    letter-spacing: 4px;
-  }
+.text-field-module-hFl0f {
+  grid-area: label;
+  margin-block-end: var(--space-4);
+}
+
+.text-field-module-nHYDe {
+  grid-area: field;
+}
+
+.text-field-module-kHn5y {
+  align-self: center;
+  grid-area: info;
+  margin-inline-start: var(--space-4);
+}
+
+.text-field-module-8XbgH {
+  grid-area: error;
+  margin-block-start: var(--space-4);
+}
 
 .categories-grid-module-C751R {
   --amount-of-columns: 2;
@@ -5901,6 +5952,103 @@ button.swiper-pagination-bullet {
     --transition-duration: 0.3s;
   }
 
+.sign-in-form-module-4DkkP {
+  min-inline-size: 300px;
+}
+
+/* generic utility styles that we could reuse */
+
+.sign-in-form-module-bGXUd {
+  --tooltip-size: 24px;
+  --info-icon-offset: calc((var(--tooltip-size) + var(--space-4)) * -1);
+
+  display: grid;
+  container-type: inline-size;
+  gap: var(--space-16);
+}
+
+.sign-in-form-module-bGXUd p {
+    margin: 0 0 var(--space-4);
+  }
+
+.sign-in-form-module-TumIz {
+  display: grid;
+}
+
+.sign-in-form-module-TumIz .sign-in-form-module-bIzyz {
+    justify-self: flex-start;
+  }
+
+.sign-in-form-module-EoTYu {
+  display: grid;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  gap: var(--space-16);
+}
+
+.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+
+/* above 1314, where - with a minimum width of 250px and 16px gap - 5 columns would appear, we restrict it to max 4 columns */
+
+@container (min-inline-size: 1314px) {
+
+.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
+      --minimum-width: calc((100% - 3 * var(--space-16)) / 4);
+
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(var(--minimum-width), 1fr)
+      )
+  }
+    }
+
+/* info icon rules: when (visually) the last segment on a row with an icon, needs to have a negative margin */
+
+.sign-in-form-module-EoTYu .sign-in-form-module-TumIz:has([data-info]) {
+    margin-inline-end: var(--info-icon-offset);
+  }
+
+/* 2 * 250px + 16px = 516px; space for 2 columns */
+
+@container (min-inline-size: 516px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):not(:only-child) {
+        margin-inline-end: 0;
+      }
+    }
+
+@container (min-inline-size: 516px) and (max-inline-size: 781px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2n) {
+        margin-inline-end: var(--info-icon-offset);
+      }
+    }
+
+/* 3 * 250px + 2 * 16px = 782px; space for 3 columns */
+
+@container (min-inline-size: 782px) and (max-inline-size: 1047px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3n),
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
+        margin-inline-end: var(--info-icon-offset);
+      }
+    }
+
+/* 4 * 250px + 3 * 16px = 1048px; space for 4 columns */
+
+@container (min-inline-size: 1048px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(4n),
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3):last-child,
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
+        margin-inline-end: var(--info-icon-offset);
+      }
+    }
+
+.sign-in-form-module-aYBAy {
+  display: grid;
+  gap: var(--space-16);
+}
+
 :root {
   --toastify-color-light: #fff;
   --toastify-color-dark: #121212;

package/dist/tooltip/tooltip.d.ts

@@ -1,9 +1,10 @@
 import { ReactElement, ReactNode } from 'react';
 import { Placement } from 'react-aria';
 export interface TooltipProps {
+    children: ReactNode;
+    className?: string;
     offset?: number;
     placement?: Placement;
-    text: string | ReactNode;
     trigger?: ReactElement;
 }
-export declare function Tooltip({ offset, placement, text, trigger, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, className, offset, placement, trigger, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/tooltip/tooltip.js

@@ -3,6 +3,7 @@ import { useRef, useMemo, cloneElement } from 'react';
 import { usePress } from 'react-aria';
 import { DialogTrigger, Popover, OverlayArrow, Dialog } from 'react-aria-components';
 import { IconButton } from '../buttons/icon-button/icon-button.js';
+import clsx from 'clsx';
 import { StrokeInformationIcon } from '../icons/stroke/stroke-information-icon.js';
 import { useDisclosure } from '../shared/hooks/use-disclosure.js';
 import styles from './tooltip.module.css.js';
@@ -10,17 +11,17 @@ import styles from './tooltip.module.css.js';
 function InfoIcon(props) {
     return (jsx(IconButton, { ...props, className: styles.trigger, children: jsx(StrokeInformationIcon, {}) }));
 }
-function TriggerButton({ buttonRef, trigger, }) {
+function TriggerButton({ buttonRef, className, trigger, }) {
     const { pressProps } = usePress({ ref: buttonRef });
     const triggerWithHandler = useMemo(() => cloneElement(trigger, {
         ...pressProps,
     }), [trigger, pressProps]);
-    return (jsx("div", { ref: buttonRef, className: styles['trigger-wrapper'], children: triggerWithHandler }));
+    return (jsx("div", { ref: buttonRef, className: clsx(className, styles['trigger-wrapper']), children: triggerWithHandler }));
 }
-function Tooltip({ offset, placement = 'bottom', text, trigger = jsx(InfoIcon, {}), }) {
+function Tooltip({ children, className, offset, placement = 'bottom', trigger = jsx(InfoIcon, {}), }) {
     const { isOpen, setIsOpen } = useDisclosure();
     const triggerRef = useRef(null);
-    return (jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [jsx(TriggerButton, { buttonRef: triggerRef, trigger: trigger }), jsxs(Popover, { className: styles.popover, offset: offset, placement: placement, triggerRef: triggerRef, children: [jsx(OverlayArrow, { className: styles.arrow, children: jsx("svg", { height: 12, viewBox: "0 0 12 12", width: 12, children: jsx("path", { d: "M0 0 L6 6 L12 0" }) }) }), jsx(Dialog, { className: styles.dialog, children: text })] })] }));
+    return (jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [jsx(TriggerButton, { buttonRef: triggerRef, className: className, trigger: trigger }), jsxs(Popover, { className: styles.popover, offset: offset, placement: placement, triggerRef: triggerRef, children: [jsx(OverlayArrow, { className: styles.arrow, children: jsx("svg", { height: 12, viewBox: "0 0 12 12", width: 12, children: jsx("path", { d: "M0 0 L6 6 L12 0" }) }) }), jsx(Dialog, { className: styles.dialog, children: children })] })] }));
 }
 
 export { Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "133.0.0",
+  "version": "134.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/shared/utils/wait.d.ts

@@ -1 +0,0 @@
-export declare function wait(ms: number): Promise<unknown>;

package/dist/shared/utils/wait.js

@@ -1,5 +0,0 @@
-function wait(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export { wait };