@mlola-ui/registry 1.0.6 → 1.0.8

package/snapshot/source/packages/components/password-input/password-input.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+import { passwordStrength } from "@mlola-ui/behavior/logic";
+import { IconEye, IconEyeOff } from "@mlola-ui/icons";
+import { Input, type InputProps } from "../input/input";
+
+export type PasswordStrength = ReturnType<typeof passwordStrength>;
+
+export interface PasswordInputProps extends Omit<InputProps, "type" | "trailing"> {
+  /**
+   * Show how strong a new password is while it is typed. For a sign-in
+   * field, leave it off: the person is recalling a password, not choosing one.
+   */
+  strength?: boolean;
+  /** The length below which a password is weak. */
+  minLength?: number;
+  /** The length at which a password is strong. */
+  strongLength?: number;
+  /** What the meter says for each level: guidance first, then a verdict with the next step. */
+  strengthHints?: Partial<Record<PasswordStrength, React.ReactNode>>;
+  /** The toggle's accessible name. Its pressed state says whether the password shows. */
+  toggleLabel?: string;
+}
+
+const HINTS = (min: number): Record<PasswordStrength, React.ReactNode> => ({
+  empty: `Use ${min} or more characters.`,
+  weak: (
+    <>
+      <strong>Too short.</strong> Use {min} or more characters.
+    </>
+  ),
+  medium: (
+    <>
+      <strong>Good.</strong> Longer, or mixed symbols, is stronger.
+    </>
+  ),
+  strong: <strong>Strong password.</strong>,
+});
+
+/**
+ * A password field with a show and hide toggle, and, for a new password, a
+ * meter that says how strong it is and what would make it stronger. The
+ * strength is the same shared decision the framework-free runtime uses.
+ */
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    {
+      strength: showStrength = false,
+      minLength = 8,
+      strongLength = 12,
+      strengthHints,
+      toggleLabel = "Show password",
+      value,
+      defaultValue,
+      onChange,
+      autoComplete,
+      "aria-describedby": describedBy,
+      ...props
+    },
+    ref,
+  ) => {
+    const [visible, setVisible] = React.useState(false);
+    const [typed, setTyped] = React.useState(String(defaultValue ?? ""));
+    const current = value === undefined ? typed : String(value);
+    const level = passwordStrength(current, { min: minLength, strong: strongLength });
+    const meterId = React.useId();
+    const hints = { ...HINTS(minLength), ...strengthHints };
+
+    return (
+      <div className="ml-password-input">
+        <Input
+          ref={ref}
+          {...props}
+          type={visible ? "text" : "password"}
+          value={value}
+          defaultValue={defaultValue}
+          autoComplete={autoComplete ?? (showStrength ? "new-password" : "current-password")}
+          // A password is not a word: no autocorrect, no capital letter at the start.
+          autoCapitalize="none"
+          autoCorrect="off"
+          spellCheck={false}
+          aria-describedby={[describedBy, showStrength ? meterId : null].filter(Boolean).join(" ") || undefined}
+          onChange={(event) => {
+            if (value === undefined) setTyped(event.target.value);
+            onChange?.(event);
+          }}
+          trailing={
+            <button
+              type="button"
+              className="ml-password-input-toggle"
+              aria-label={toggleLabel}
+              aria-pressed={visible}
+              data-hit="expand"
+              disabled={props.disabled}
+              onClick={() => setVisible((shown) => !shown)}
+            >
+              {visible ? <IconEyeOff aria-hidden="true" size="1em" /> : <IconEye aria-hidden="true" size="1em" />}
+            </button>
+          }
+        />
+        {showStrength ? (
+          <div id={meterId} className="ml-password-input-strength" data-strength={level} aria-live="polite">
+            <span className="ml-password-input-meter" aria-hidden="true">
+              <span />
+              <span />
+              <span />
+            </span>
+            <p>{hints[level]}</p>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };

package/snapshot/source/packages/components/spinner/spinner.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+
+export type SpinnerSize = "sm" | "md" | "lg";
+
+export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  size?: SpinnerSize;
+  /**
+   * What is loading, spoken to screen readers ("Loading results"). Leave it
+   * out when visible text beside the spinner already says so, as in a busy
+   * button; the spinner is then decorative.
+   */
+  label?: string;
+}
+
+/**
+ * Work in progress whose end is unknown. It takes the color of the text
+ * around it, so it reads on any surface and inside any control.
+ */
+const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(({ size = "md", label, className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role={label ? "status" : undefined}
+    aria-hidden={label ? undefined : true}
+    data-size={size}
+    className={cx("ml-spinner", className)}
+    {...props}
+  >
+    {label ? <span className="ml-visually-hidden">{label}</span> : null}
+  </span>
+));
+Spinner.displayName = "Spinner";
+
+export { Spinner };

package/snapshot/source/packages/components/toast/toast.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { IconCircleCheck, IconCircleX, IconInfo, IconTriangleAlert, IconX } from "@mlola-ui/icons";
 import { cx } from "../_internal/react";
+import { Spinner } from "../spinner/spinner";
 
 /** The meaning of the message, from the theme's color roles. */
 export type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
@@ -193,7 +194,7 @@ function ToastCard({ item, paused }: { item: ToastItem; paused: boolean }) {
   }, [paused, item.closing, item.duration, item.id, item.revision]);
 
   const urgent = item.tone === "danger" || item.tone === "warning";
-  const icon = item.loading ? <span className="ml-toast-spinner" /> : item.icon === undefined ? TONE_ICONS[item.tone] : item.icon;
+  const icon = item.loading ? <Spinner /> : item.icon === undefined ? TONE_ICONS[item.tone] : item.icon;
 
   return (
     <div className="ml-toast-slot" data-state={item.closing ? "closed" : "open"}>

package/snapshot/source-manifest.json

@@ -1,19 +1,20 @@
 {
   "packages/components/_internal/anchor.ts": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc=",
+  "packages/components/_internal/clipboard.ts": "sha256-0y5p88CTXWuOrUYlC5J4XP1VCrOwkx9jYWVHmD2LouQ=",
   "packages/components/_internal/dialog.ts": "sha256-796y3oNOVWarLvICTdi+d0/2axqSrzLVJiyBeh9X7bU=",
   "packages/components/_internal/floating.ts": "sha256-+WxgC4CtAlSr2qA1EkoDTgto535XLIPsvtOfdOK6CHk=",
   "packages/components/_internal/match.ts": "sha256-nKBpKWeow5ubAHUhOW8yOjlrKs0lqYdjbaYYfE8VoII=",
   "packages/components/_internal/react.ts": "sha256-SH63/haiB4Q93uFjMIMe5xZbaxENu3VI+GcidV8HELM=",
   "packages/components/_internal/scroll.ts": "sha256-/YxhPPJa6Iax4q5eEs8dmpQp634TbvB+421MphEyscQ=",
   "packages/components/accordion/accordion.tsx": "sha256-0ALaLJd1fvj8Vbx86HLBKm3qUItrtwbrGJTykVfNSMg=",
-  "packages/components/activity-heatmap/activity-heatmap.tsx": "sha256-fMGDlXKpOfIOy0hmbpR8hKrbbN3fC386tXK27A21ZwM=",
+  "packages/components/activity-heatmap/activity-heatmap.tsx": "sha256-IAcU8FLAJbgKAS+2X+mt6PMqJBzxr4QVdwsVAl67BH4=",
   "packages/components/activity-heatmap/calendar.ts": "sha256-NB+AjXY5Xc+KzR8MMTRBgZxdzOeoHhkW0KQOW7WJPuQ=",
   "packages/components/alert/alert.tsx": "sha256-j680akXvCIh4MTVnUo79acvVrv51XyQ3UBJ5FBAy8Dw=",
   "packages/components/app-shell/app-shell.tsx": "sha256-XAq82XOTH3ZR+hxTkYFu8P7Ih2aI6ERy/TpXc2VMUwM=",
   "packages/components/avatar/avatar.tsx": "sha256-EjqC8ytKqRtsTVdK6vncaDfhO/i7ICe+jwaYCg5bjIw=",
   "packages/components/badge/badge.tsx": "sha256-flEH8S2jZ/64n3Y/ROhC9+9rvF7wXaN0xLcMMwqNOVQ=",
   "packages/components/breadcrumb/breadcrumb.tsx": "sha256-Mt9mvmwwDgdp5/+mj5byIrh8+hicsp7R6UcvUlK0yog=",
-  "packages/components/button/button.tsx": "sha256-khqYxcV3hlZ+Q+cYNTRXEpAfIijDFSvkuDJXMPtlk7g=",
+  "packages/components/button/button.tsx": "sha256-sXVANbGeFSYPHpiWuPvHHqMoPjG0zl0HSsKEdTgl5ME=",
   "packages/components/calendar/calendar.tsx": "sha256-rWiS4YAueZfVoo6j5Fi3uN7A+yApe5U6HMm1woTVjys=",
   "packages/components/calendar/dates.ts": "sha256-mygYkoC70av2ZQ0vkxf885trwW97Wd10I4dptYQe+4A=",
   "packages/components/card/card.tsx": "sha256-aMKbv5DWYYWq7GZAFR9O1fuYE0H61WCjkvEbRMOd894=",
@@ -24,6 +25,7 @@
   "packages/components/combobox/combobox.tsx": "sha256-CvuYc/hJoS7yw6QM9vv1SIkwflx0Kwd95UjchtC+AOs=",
   "packages/components/command-menu/command-menu.tsx": "sha256-mF1z92yrPY609pjx5Dt1l5EhGHl9EWV8F8Sq0hyJRw4=",
   "packages/components/context-menu/context-menu.tsx": "sha256-YgYsIzvLGFcJG1XX5zFJwrid5Z1Kn0lyWVzmLKmbMVU=",
+  "packages/components/copy-button/copy-button.tsx": "sha256-6fvfifoiDOtW+WxKWon4SGEn3THtERuCX2hqGSZDtVM=",
   "packages/components/date-picker/date-picker.tsx": "sha256-rsmDweD3RVfKTXR2i+/pnTb/MsrDAZXmHAYBvcUGxig=",
   "packages/components/dropdown-menu/dropdown-menu.tsx": "sha256-xgybCu9HBxIieafu5CjAtY4aCOQoaAj/VUCH6D6vLP8=",
   "packages/components/dropzone/dropzone.tsx": "sha256-tHCCpEWE6839UeLOszTo+R2vAL4Sp9UxuRdLkFLfnq4=",
@@ -36,6 +38,7 @@
   "packages/components/number-input/number.ts": "sha256-IrHCQrEhI5ein9ifMFuSViSoxQUBoT3tNmmCu/paGGM=",
   "packages/components/otp-input/otp-input.tsx": "sha256-QURn8g5HqCQXBTdeENPbVxoPlqs3ZtoAPLRlFjQDxmI=",
   "packages/components/pagination/pagination.tsx": "sha256-FBwk8tq4JcsK2D0dlWEYiDSRx3owgBmGzEIlVRaNBoE=",
+  "packages/components/password-input/password-input.tsx": "sha256-oY//vTILhUicJyfAWZrSUTl8WWsf4P2S1Bh0x4OxwLs=",
   "packages/components/popover/popover.tsx": "sha256-/kTiAuFklU4IuP97XaiCUGdEpKtNyMPLPS359mfzPHw=",
   "packages/components/priority-icon/labels.ts": "sha256-zhmJIb7/gS16wU+xCJ7hkReBi9q5RI3SMwdjkJvvvKU=",
   "packages/components/priority-icon/priority-icon.tsx": "sha256-3D6hFRpht3YuWouLhakE2DFdldavmJx0B/povEDwrtQ=",
@@ -48,6 +51,7 @@
   "packages/components/sheet/sheet.tsx": "sha256-EIn3OeRDmXGHbYf/uihRh8aw3LmzarIFiyC9DUsL1jg=",
   "packages/components/skeleton/skeleton.tsx": "sha256-2Fk72NbLr3+CrXH7jGbHNsc3t+vskMqSyySe/UwbGCs=",
   "packages/components/slider/slider.tsx": "sha256-l+VrBqPYHIIcemiVixxwDxNDB0HEMmYRZekx/H5HroQ=",
+  "packages/components/spinner/spinner.tsx": "sha256-FZQmcGkQ8N0485n9bYsLTpTnolbM729YKjkQrXriz9A=",
   "packages/components/status-icon/labels.ts": "sha256-EE8q+geQBbJUs7I3RmaHZnPwn7Vjk2GjCfxvI4ruXKM=",
   "packages/components/status-icon/status-icon.tsx": "sha256-TtrTeoePyfH1VhKuWC0v12FuwfgND1CHnH5x8fyf4AM=",
   "packages/components/stepper/stepper.tsx": "sha256-uI/dRmkbijlixHiGUceWcpaDzpEixrzQ1UTmoPbGZAY=",
@@ -58,7 +62,7 @@
   "packages/components/time-picker/time-picker.tsx": "sha256-og8Cbf+e8oFYewfagUgjRzLHSIIlAZh+1OpAn9yNq70=",
   "packages/components/time-picker/times.ts": "sha256-V/4uqFZPn9gVnyx8cB9vwp/RocmTYaPmLxjfy8DPQOI=",
   "packages/components/timeline/timeline.tsx": "sha256-nVg7lBcAUAzqEb0YrHagJXSaHE2aWWE9bUbQMWQY6PU=",
-  "packages/components/toast/toast.tsx": "sha256-FvZnwN6Lk/QEHmcNxo7sVlEvR3Lx54aT5cH9lwrthhE=",
+  "packages/components/toast/toast.tsx": "sha256-f0DwN0XuV46fSsQf3i9RJcfQbAs2mSz7A8UJoIIICHg=",
   "packages/components/toggle/toggle.tsx": "sha256-8qPHeSliHNdzQS7OLJ47BrvRR75MYyUGJlK4s21XS/U=",
   "packages/components/tooltip/tooltip.tsx": "sha256-NbaOUmlUbBlUIdovchrWwH2QqzuvXB97DjnJnrHf4Gc=",
   "packages/components/tour/tour.tsx": "sha256-mrAE8aVDBVIibGvQah9Gh3mzIiWDFxB6aObzqFo5xXU=",