@mlola-ui/registry 1.0.6 → 1.0.8

package/snapshot/items/components/carousel.json

@@ -19,8 +19,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6",
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8",
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/checkbox.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/color-picker.json

@@ -24,7 +24,7 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/combobox.json

@@ -22,7 +22,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/command-menu.json

@@ -22,7 +22,7 @@
     "modal"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/context-menu.json

@@ -19,8 +19,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6",
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8",
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/copy-button.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "../schema/registry-item.schema.json",
+  "schemaVersion": 2,
+  "name": "copy-button",
+  "title": "Copy Button",
+  "description": "Copies a value to the clipboard and confirms it, with the outcome spoken to screen readers and a refusal explained",
+  "category": "actions",
+  "tags": [
+    "clipboard",
+    "copy",
+    "share"
+  ],
+  "type": "registry:ui",
+  "usage": {
+    "importPath": "{{aliases.components}}/copy-button",
+    "exportName": "CopyButton",
+    "isDefault": false
+  },
+  "registryDependencies": [
+    "button"
+  ],
+  "engineDependencies": {
+    "@mlola-ui/icons": "^1.0.8"
+  },
+  "options": [
+    {
+      "component": "CopyButton",
+      "prop": "size",
+      "values": [
+        "sm",
+        "md",
+        "lg",
+        "icon"
+      ]
+    },
+    {
+      "component": "CopyButton",
+      "prop": "variant",
+      "values": [
+        "primary",
+        "secondary",
+        "subtle",
+        "danger",
+        "outline",
+        "link"
+      ],
+      "default": "secondary"
+    }
+  ],
+  "variants": [
+    "primary",
+    "secondary",
+    "subtle",
+    "danger",
+    "outline",
+    "link"
+  ],
+  "sizes": [
+    "sm",
+    "md",
+    "lg",
+    "icon"
+  ],
+  "files": [
+    {
+      "path": "packages/components/_internal/clipboard.ts",
+      "target": "{{aliases.components}}/_internal/clipboard.ts",
+      "type": "registry:ui",
+      "integrity": "sha256-0y5p88CTXWuOrUYlC5J4XP1VCrOwkx9jYWVHmD2LouQ="
+    },
+    {
+      "path": "packages/components/_internal/react.ts",
+      "target": "{{aliases.components}}/_internal/react.ts",
+      "type": "registry:ui",
+      "integrity": "sha256-SH63/haiB4Q93uFjMIMe5xZbaxENu3VI+GcidV8HELM="
+    },
+    {
+      "path": "packages/components/copy-button/copy-button.tsx",
+      "target": "{{aliases.components}}/copy-button.tsx",
+      "type": "registry:ui",
+      "integrity": "sha256-6fvfifoiDOtW+WxKWon4SGEn3THtERuCX2hqGSZDtVM="
+    }
+  ],
+  "themeContract": {
+    "attribute": "data-theme",
+    "modeAttribute": "data-mode",
+    "compatibleThemes": [
+      "graphite",
+      "atelier",
+      "machined",
+      "aerogel",
+      "nordic"
+    ]
+  }
+}

package/snapshot/items/components/date-picker.json

@@ -23,7 +23,7 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/dropdown-menu.json

@@ -18,8 +18,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6",
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8",
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/dropzone.json

@@ -21,7 +21,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/hover-card.json

@@ -19,7 +19,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/modal.json

@@ -18,8 +18,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6",
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8",
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/number-input.json

@@ -22,7 +22,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/pagination.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/password-input.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "../schema/registry-item.schema.json",
+  "schemaVersion": 2,
+  "name": "password-input",
+  "title": "Password Input",
+  "description": "A password field with a show and hide toggle and, when choosing a new password, a meter that says how strong it is and what would make it stronger",
+  "category": "forms",
+  "tags": [
+    "password",
+    "auth",
+    "form"
+  ],
+  "type": "registry:ui",
+  "usage": {
+    "importPath": "{{aliases.components}}/password-input",
+    "exportName": "PasswordInput",
+    "isDefault": false
+  },
+  "registryDependencies": [
+    "input"
+  ],
+  "engineDependencies": {
+    "@mlola-ui/behavior": "^1.0.8",
+    "@mlola-ui/icons": "^1.0.8"
+  },
+  "options": [
+    {
+      "component": "PasswordInput",
+      "prop": "size",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    {
+      "component": "PasswordInput",
+      "prop": "variant",
+      "values": [
+        "default",
+        "filled",
+        "subtle"
+      ]
+    }
+  ],
+  "variants": [
+    "default",
+    "filled",
+    "subtle"
+  ],
+  "sizes": [
+    "sm",
+    "md",
+    "lg"
+  ],
+  "files": [
+    {
+      "path": "packages/components/password-input/password-input.tsx",
+      "target": "{{aliases.components}}/password-input.tsx",
+      "type": "registry:ui",
+      "integrity": "sha256-oY//vTILhUicJyfAWZrSUTl8WWsf4P2S1Bh0x4OxwLs="
+    }
+  ],
+  "themeContract": {
+    "attribute": "data-theme",
+    "modeAttribute": "data-mode",
+    "compatibleThemes": [
+      "graphite",
+      "atelier",
+      "machined",
+      "aerogel",
+      "nordic"
+    ]
+  }
+}

package/snapshot/items/components/popover.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/segmented-control.json

@@ -19,7 +19,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/select.json

@@ -18,8 +18,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6",
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8",
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/sheet.json

@@ -18,8 +18,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6",
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8",
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/slider.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/spinner.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "../schema/registry-item.schema.json",
+  "schemaVersion": 2,
+  "name": "spinner",
+  "title": "Spinner",
+  "description": "Work in progress whose end is unknown, drawn in the color of the text around it and named for screen readers when it stands alone",
+  "category": "feedback",
+  "tags": [
+    "loading",
+    "busy",
+    "status"
+  ],
+  "type": "registry:ui",
+  "usage": {
+    "importPath": "{{aliases.components}}/spinner",
+    "exportName": "Spinner",
+    "isDefault": false
+  },
+  "registryDependencies": [],
+  "engineDependencies": {},
+  "options": [
+    {
+      "component": "Spinner",
+      "prop": "size",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    }
+  ],
+  "variants": [],
+  "sizes": [
+    "sm",
+    "md",
+    "lg"
+  ],
+  "files": [
+    {
+      "path": "packages/components/_internal/react.ts",
+      "target": "{{aliases.components}}/_internal/react.ts",
+      "type": "registry:ui",
+      "integrity": "sha256-SH63/haiB4Q93uFjMIMe5xZbaxENu3VI+GcidV8HELM="
+    },
+    {
+      "path": "packages/components/spinner/spinner.tsx",
+      "target": "{{aliases.components}}/spinner.tsx",
+      "type": "registry:ui",
+      "integrity": "sha256-FZQmcGkQ8N0485n9bYsLTpTnolbM729YKjkQrXriz9A="
+    }
+  ],
+  "themeContract": {
+    "attribute": "data-theme",
+    "modeAttribute": "data-mode",
+    "compatibleThemes": [
+      "graphite",
+      "atelier",
+      "machined",
+      "aerogel",
+      "nordic"
+    ]
+  }
+}

package/snapshot/items/components/stepper.json

@@ -20,7 +20,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/tabs.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/tag-input.json

@@ -23,7 +23,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/time-picker.json

@@ -22,7 +22,7 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/timeline.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {

package/snapshot/items/components/toast.json

@@ -16,9 +16,11 @@
     "exportName": "Toaster",
     "isDefault": false
   },
-  "registryDependencies": [],
+  "registryDependencies": [
+    "spinner"
+  ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [
     {
@@ -46,7 +48,7 @@
       "path": "packages/components/toast/toast.tsx",
       "target": "{{aliases.components}}/toast.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-FvZnwN6Lk/QEHmcNxo7sVlEvR3Lx54aT5cH9lwrthhE="
+      "integrity": "sha256-f0DwN0XuV46fSsQf3i9RJcfQbAs2mSz7A8UJoIIICHg="
     }
   ],
   "themeContract": {

package/snapshot/items/components/tour.json

@@ -20,8 +20,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.6",
-    "@mlola-ui/icons": "^1.0.6"
+    "@mlola-ui/behavior": "^1.0.8",
+    "@mlola-ui/icons": "^1.0.8"
   },
   "options": [],
   "variants": [],

package/snapshot/source/packages/components/_internal/clipboard.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+
+/** The shared request words: at rest, then the outcome of the last copy. */
+export type CopyState = "idle" | "success" | "error";
+
+/**
+ * Copy text to the clipboard and hold the outcome for a moment, so a control
+ * can confirm it. A refusal (no permission, an insecure page) is an outcome
+ * too: it is reported, never swallowed, so the person can copy by hand.
+ */
+export function useCopy(hold = 1600) {
+  const [state, setState] = React.useState<CopyState>("idle");
+  React.useEffect(() => {
+    if (state === "idle") return;
+    const timer = window.setTimeout(() => setState("idle"), hold);
+    return () => window.clearTimeout(timer);
+  }, [state, hold]);
+  const copy = React.useCallback(async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setState("success");
+      return true;
+    } catch {
+      setState("error");
+      return false;
+    }
+  }, []);
+  return { state, copy };
+}

package/snapshot/source/packages/components/activity-heatmap/activity-heatmap.tsx

@@ -133,11 +133,11 @@ export function ActivityHeatmap({
         </div>
         {Array.from({ length: 7 }, (_, day) => {
           const name = dayName.format(new Date(`${calendar.weeks[0][day].date}T00:00:00Z`));
-          const labelled = [1, 3, 5].includes(new Date(`${calendar.weeks[0][day].date}T00:00:00Z`).getUTCDay());
+          const labeled = [1, 3, 5].includes(new Date(`${calendar.weeks[0][day].date}T00:00:00Z`).getUTCDay());
           return (
             <div key={day} role="row" className="ml-heatmap-row">
               <span role="rowheader" className="ml-heatmap-weekday" style={{ gridRow: day + 2 }}>
-                <span aria-hidden={!labelled || undefined} data-hidden={!labelled || undefined}>
+                <span aria-hidden={!labeled || undefined} data-hidden={!labeled || undefined}>
                   {name}
                 </span>
               </span>

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

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Magnetic } from "@mlola-ui/motion";
 import { cx } from "../_internal/react";
+import { Spinner } from "../spinner/spinner";
 
 export type ButtonVariant = "primary" | "secondary" | "subtle" | "danger" | "outline" | "link";
 type ButtonSize = "sm" | "md" | "lg" | "icon";
@@ -30,7 +31,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={cx("ml-button", className)}
         {...props}
       >
-        {loading ? <span aria-hidden="true" className="ml-button-spinner" /> : null}
+        {loading ? <Spinner size="sm" /> : null}
         <span className="ml-button-label">{children}</span>
       </button>
     );

package/snapshot/source/packages/components/copy-button/copy-button.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import * as React from "react";
+import { IconCheck, IconCopy } from "@mlola-ui/icons";
+import { Button, type ButtonProps } from "../button/button";
+import { useCopy } from "../_internal/clipboard";
+import { cx } from "../_internal/react";
+
+export interface CopyButtonProps extends Omit<ButtonProps, "value" | "onClick" | "loading"> {
+  /** The text to copy, or a function that returns it at the moment of copying. */
+  value: string | (() => string);
+  /** The action, spoken on an icon-only button and shown as its tooltip: "Copy link". */
+  label?: string;
+  /** Announced, and shown on a text button, once the copy succeeds. */
+  copiedLabel?: string;
+  /** Announced when the browser refuses (no permission, an insecure page). */
+  errorLabel?: string;
+  /** After each attempt: true when the text reached the clipboard. */
+  onCopied?: (copied: boolean) => void;
+}
+
+/**
+ * Copies a value and confirms it: the icon turns to a check for a moment and
+ * a screen reader hears "Copied". Without children it is an icon button;
+ * with children it keeps its text and shows the confirmation in place.
+ */
+const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
+  ({ value, label = "Copy", copiedLabel = "Copied", errorLabel = "Could not copy; select the text and copy it by hand", onCopied, variant = "secondary", size, className, children, ...props }, ref) => {
+    const { state, copy } = useCopy();
+    const iconOnly = children === undefined || children === null;
+    const icon = state === "success" ? <IconCheck aria-hidden="true" size="1em" animate /> : <IconCopy aria-hidden="true" size="1em" />;
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size ?? (iconOnly ? "icon" : "md")}
+        aria-label={iconOnly ? label : undefined}
+        title={iconOnly ? label : undefined}
+        className={cx("ml-copy-button", className)}
+        data-status={state === "idle" ? undefined : state}
+        onClick={async () => {
+          const copied = await copy(typeof value === "function" ? value() : value);
+          onCopied?.(copied);
+        }}
+        {...props}
+      >
+        {icon}
+        {iconOnly ? null : state === "success" ? copiedLabel : children}
+        {/* The outcome is spoken where a changing label would not be. */}
+        <span className="ml-visually-hidden" role="status">
+          {state === "success" ? copiedLabel : state === "error" ? errorLabel : ""}
+        </span>
+      </Button>
+    );
+  }
+);
+CopyButton.displayName = "CopyButton";
+
+export { CopyButton };