@mlola-ui/registry 1.0.0

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

@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+
+/** The meaning of the fill, from the theme's colour roles. */
+export type ProgressTone = "primary" | "info" | "success" | "warning" | "danger";
+type ProgressSize = "sm" | "md" | "lg";
+export interface ProgressProps {
+  value?: number;
+  max?: number;
+  tone?: ProgressTone;
+  size?: ProgressSize;
+  showLabel?: boolean;
+  /** Text shown beside the value when showLabel is on. */
+  label?: string;
+  indeterminate?: boolean;
+  /** Work is happening right now: a light sweeps along the bar. Leave it off for static amounts such as quotas. */
+  active?: boolean;
+  className?: string;
+}
+const metrics = (value: number, max: number) => {
+  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+  const safeValue = Number.isFinite(value) ? Math.min(safeMax, Math.max(0, value)) : 0;
+  return { safeMax, safeValue, percent: Math.round((safeValue / safeMax) * 100) };
+};
+
+/** The shown percentage eases towards the real one, so the number moves with the bar. */
+function useCountUp(target: number) {
+  const [shown, setShown] = React.useState(0);
+  const current = React.useRef(0);
+  React.useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      current.current = target;
+      setShown(target);
+      return;
+    }
+    const from = current.current;
+    const started = performance.now();
+    let frame = 0;
+    const step = (now: number) => {
+      const t = Math.min(1, (now - started) / 600);
+      const eased = 1 - Math.pow(1 - t, 3);
+      current.current = from + (target - from) * eased;
+      setShown(Math.round(current.current));
+      if (t < 1) frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [target]);
+  return shown;
+}
+
+/**
+ * A bar that fills as work completes. It grows in when it appears, eases
+ * between values with the percentage counting alongside, sweeps a light
+ * along the fill while `active`, and pulses once when it reaches the end.
+ */
+export function Progress({ value = 0, max = 100, tone = "primary", size = "md", showLabel = false, label = "Progress", indeterminate = false, active = false, className }: ProgressProps) {
+  const { safeMax, safeValue, percent } = metrics(value, max);
+  const shown = useCountUp(percent);
+  const complete = !indeterminate && percent >= 100;
+  return (
+    <div className={cx("ml-progress-root", className)} data-tone={tone} data-size={size} data-state={indeterminate ? "indeterminate" : complete ? "complete" : "determinate"} data-active={(active && !complete && !indeterminate) || undefined}>
+      {showLabel ? (
+        <div className="ml-progress-label">
+          <span>{label}</span>
+          <span aria-hidden="true" className="ml-progress-value">
+            {indeterminate ? "Loading…" : `${shown}%`}
+          </span>
+        </div>
+      ) : null}
+      <div role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={safeMax} aria-valuenow={indeterminate ? undefined : safeValue} aria-valuetext={indeterminate ? "Loading" : `${percent}%`} className="ml-progress-track">
+        <div aria-hidden="true" className="ml-progress-fill" style={indeterminate ? undefined : { width: `${percent}%` }} />
+      </div>
+    </div>
+  );
+}
+
+export interface CircularProgressProps extends ProgressProps {}
+const CIRCUMFERENCE = 2 * Math.PI * 44;
+export function CircularProgress({ value = 0, max = 100, tone = "primary", size = "md", showLabel = false, label = "Progress", indeterminate = false, className }: CircularProgressProps) {
+  const { safeMax, safeValue, percent } = metrics(value, max);
+  const shown = useCountUp(percent);
+  const filled = indeterminate ? CIRCUMFERENCE * 0.28 : (CIRCUMFERENCE * percent) / 100;
+  return (
+    <div
+      role="progressbar"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={safeMax}
+      aria-valuenow={indeterminate ? undefined : safeValue}
+      aria-valuetext={indeterminate ? "Loading" : `${percent}%`}
+      data-tone={tone}
+      data-size={size}
+      data-state={indeterminate ? "indeterminate" : percent >= 100 ? "complete" : "determinate"}
+      className={cx("ml-circular-progress", className)}
+    >
+      <svg viewBox="0 0 100 100" aria-hidden="true" className="ml-circular-progress-svg">
+        <circle cx="50" cy="50" r="44" fill="none" strokeWidth="9" className="ml-circular-progress-track" />
+        <circle cx="50" cy="50" r="44" fill="none" strokeWidth="9" strokeLinecap="round" style={{ strokeDasharray: `${filled} ${CIRCUMFERENCE}` }} transform="rotate(-90 50 50)" className="ml-circular-progress-fill" />
+      </svg>
+      {showLabel && !indeterminate ? (
+        <span aria-hidden="true" className="ml-circular-progress-label">
+          {shown}%
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/snapshot/source/packages/components/radio-group/radio-group.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import * as React from "react";
+import { cx, useControllableState } from "../_internal/react";
+
+interface RadioContextValue {
+  selected: string;
+  name: string;
+  disabled: boolean;
+  select: (value: string) => void;
+}
+const RadioContext = React.createContext<RadioContextValue | null>(null);
+const useRadio = () => {
+  const context = React.useContext(RadioContext);
+  if (!context) throw new Error("RadioGroupItem must be used inside RadioGroup");
+  return context;
+};
+
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  name?: string;
+  orientation?: "horizontal" | "vertical";
+  disabled?: boolean;
+  label?: React.ReactNode;
+  description?: string;
+  error?: string;
+}
+const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ value, defaultValue = "", onValueChange, name, orientation = "vertical", disabled = false, label, description, error, id, className, children, "aria-describedby": describedBy, ...props }, ref) => {
+    const generated = React.useId();
+    const groupName = name ?? generated;
+    const [selected, select] = useControllableState({ value, defaultValue, onChange: onValueChange });
+    const labelId = `${groupName}-label`;
+    const descriptionId = `${groupName}-description`;
+    const errorId = `${groupName}-error`;
+    return (
+      <RadioContext.Provider value={{ selected, name: groupName, disabled, select }}>
+        <div
+          ref={ref}
+          id={id}
+          role="radiogroup"
+          aria-labelledby={label ? labelId : undefined}
+          aria-label={label ? undefined : "Options"}
+          aria-orientation={orientation}
+          aria-describedby={[describedBy, description && descriptionId, error && errorId].filter(Boolean).join(" ") || undefined}
+          aria-invalid={error ? true : undefined}
+          data-orientation={orientation}
+          data-disabled={disabled ? "" : undefined}
+          data-invalid={error ? "" : undefined}
+          className={cx("ml-radio-group", className)}
+          {...props}
+        >
+          {label ? <div id={labelId} className="ml-radio-group-label">{label}</div> : null}
+          {description ? <p id={descriptionId} className="ml-radio-group-description">{description}</p> : null}
+          <div className="ml-radio-group-items">{children}</div>
+          {error ? <p id={errorId} role="alert" className="ml-radio-group-error">{error}</p> : null}
+        </div>
+      </RadioContext.Provider>
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+interface RadioGroupItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "onChange"> {
+  value: string;
+  label: React.ReactNode;
+  description?: string;
+}
+const RadioGroupItem = React.forwardRef<HTMLInputElement, RadioGroupItemProps>(
+  ({ value, label, description, disabled = false, id, className, "aria-describedby": describedBy, ...props }, ref) => {
+    const group = useRadio();
+    const generated = React.useId();
+    const inputId = id ?? `${group.name}-${generated}`;
+    const descriptionId = `${inputId}-description`;
+    const checked = group.selected === value;
+    const isDisabled = disabled || group.disabled;
+    return (
+      <label htmlFor={inputId} className={cx("ml-radio-item", className)} data-state={checked ? "checked" : "unchecked"} data-disabled={isDisabled ? "" : undefined}>
+        <span className="ml-radio-control">
+          <input
+            ref={ref}
+            id={inputId}
+            type="radio"
+            name={group.name}
+            value={value}
+            checked={checked}
+            disabled={isDisabled}
+            aria-describedby={[describedBy, description && descriptionId].filter(Boolean).join(" ") || undefined}
+            className="ml-radio-input"
+            onChange={() => group.select(value)}
+            {...props}
+          />
+          <span aria-hidden="true" className="ml-radio-indicator" />
+        </span>
+        <span className="ml-radio-copy">
+          <span className="ml-radio-label">{label}</span>
+          {description ? <span id={descriptionId} className="ml-radio-description">{description}</span> : null}
+        </span>
+      </label>
+    );
+  }
+);
+RadioGroupItem.displayName = "RadioGroupItem";
+export { RadioGroup, RadioGroupItem };

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

@@ -0,0 +1,94 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+
+/**
+ * A star rating that tells the truth about fractions.
+ *
+ * Rounding 4.4 up to five stars is a small lie that shows up everywhere a
+ * product is compared. So the filled stars are a clipped overlay whose width
+ * is the exact percentage, which renders 4.5 as half a star without needing a
+ * second glyph, an image, or a font that happens to have one.
+ *
+ * The visible stars are decorative; the accessible name carries the number.
+ */
+
+export interface RatingProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  value: number;
+  max?: number;
+  /** Review count shown beside the stars. */
+  count?: number;
+  /** Show the numeric value, which is clearer than stars alone at a glance. */
+  showValue?: boolean;
+  label?: string;
+}
+
+export function Rating({
+  value,
+  max = 5,
+  count,
+  showValue = false,
+  label,
+  className,
+  ...props
+}: RatingProps) {
+  const total = Number.isFinite(max) && max > 0 ? Math.round(max) : 5;
+  const safe = Number.isFinite(value) ? Math.min(total, Math.max(0, value)) : 0;
+  const percent = (safe / total) * 100;
+  const rounded = Math.round(safe * 10) / 10;
+  const stars = "★".repeat(total);
+
+  return (
+    <span
+      {...props}
+      role="img"
+      aria-label={label ?? `Rated ${rounded} out of ${total}${count === undefined ? "" : ` from ${count} reviews`}`}
+      className={cx("ml-rating", className)}
+    >
+      <span aria-hidden="true" className="ml-rating-track">
+        <span className="ml-rating-fill" style={{ ["--ml-rating" as string]: `${percent}%` }}>
+          {stars}
+        </span>
+        {stars}
+      </span>
+      {showValue ? <span className="ml-rating-value">{rounded.toFixed(1)}</span> : null}
+      {count === undefined ? null : <span className="ml-rating-count">({count})</span>}
+    </span>
+  );
+}
+
+export default function Showcase() {
+  return (
+    <div className="ml-rating-showcase">
+      <section className="ml-showcase-group">
+        <h3 className="ml-showcase-group-label">Fractions</h3>
+        <p className="ml-showcase-note">
+          The fill is clipped to the exact percentage, so a half star is really half.
+        </p>
+        <div className="ml-showcase-stack">
+          {[5, 4.5, 4, 3.7, 3, 2.5, 1, 0].map((value) => (
+            <Rating key={value} value={value} showValue />
+          ))}
+        </div>
+      </section>
+
+      <section className="ml-showcase-group">
+        <h3 className="ml-showcase-group-label">With review count</h3>
+        <div className="ml-showcase-stack">
+          <Rating value={4.8} count={214} />
+          <Rating value={4.2} count={89} />
+          <Rating value={3.5} count={12} />
+        </div>
+      </section>
+
+      <section className="ml-showcase-group">
+        <h3 className="ml-showcase-group-label">Other scales</h3>
+        <div className="ml-showcase-stack">
+          <Rating value={7.5} max={10} showValue />
+          <Rating value={2.5} max={3} showValue />
+        </div>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,171 @@
+"use client";
+
+import * as React from "react";
+import { cx, useControllableState } from "../_internal/react";
+
+export interface ResizableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  first: React.ReactNode;
+  second: React.ReactNode;
+  /** "horizontal" puts the panes side by side. */
+  direction?: "horizontal" | "vertical";
+  /** Which pane holds the size; the other takes the rest. A right-hand inspector anchors "second". */
+  anchor?: "first" | "second";
+  /** "percent" of the whole, or "pixels" for panes that should keep their width as the window grows. */
+  units?: "percent" | "pixels";
+  /** Size of the anchored pane. */
+  size?: number;
+  defaultSize?: number;
+  onSizeChange?: (size: number) => void;
+  min?: number;
+  max?: number;
+  /** Let the anchored pane collapse: drag it past its minimum, press Enter on the handle, or set `collapsed`. */
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Remember the size and collapsed state in this browser under this key. */
+  storageKey?: string;
+  /** The separator's accessible name. */
+  label?: string;
+}
+
+const clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));
+
+function readStored(key: string | undefined): { size?: number; collapsed?: boolean } {
+  if (!key) return {};
+  try {
+    return JSON.parse(window.localStorage.getItem(key) ?? "{}") as { size?: number; collapsed?: boolean };
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Two panes and a handle between them. Drag it, or focus it and use the
+ * arrow keys (Home and End jump to the limits); double-click restores the
+ * default split. Sizes can be percentages or pixels, anchored to either pane,
+ * and a collapsible pane folds away past its minimum or on Enter.
+ */
+export function Resizable({
+  first,
+  second,
+  direction = "horizontal",
+  anchor = "first",
+  units = "percent",
+  size,
+  defaultSize = units === "pixels" ? 280 : 50,
+  onSizeChange,
+  min = units === "pixels" ? 160 : 15,
+  max = units === "pixels" ? 720 : 85,
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  storageKey,
+  label = "Resize panes",
+  className,
+  style,
+  ...props
+}: ResizableProps) {
+  const [current, setCurrent] = useControllableState({ value: size, defaultValue: defaultSize, onChange: onSizeChange });
+  const [folded, setFolded] = useControllableState({ value: collapsed, defaultValue: defaultCollapsed, onChange: onCollapsedChange });
+  const root = React.useRef<HTMLDivElement>(null);
+  const dragging = React.useRef(false);
+  const horizontal = direction === "horizontal";
+  const set = (value: number) => setCurrent(Math.round(clamp(value, min, max) * 10) / 10);
+  const isFolded = collapsible && folded;
+
+  // Restore a remembered layout after mount, so the server and the first client render agree.
+  React.useEffect(() => {
+    const stored = readStored(storageKey);
+    if (typeof stored.size === "number") setCurrent(clamp(stored.size, min, max));
+    if (collapsible && typeof stored.collapsed === "boolean") setFolded(stored.collapsed);
+    // Only on mount and when the key changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storageKey]);
+
+  React.useEffect(() => {
+    if (!storageKey) return;
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify({ size: current, collapsed: isFolded }));
+    } catch {
+      // The layout still works when storage is unavailable.
+    }
+  }, [storageKey, current, isFolded]);
+
+  const fromPointer = (event: React.PointerEvent) => {
+    const rect = root.current?.getBoundingClientRect();
+    if (!rect) return;
+    const total = horizontal ? rect.width : rect.height;
+    const offset = horizontal ? event.clientX - rect.left : event.clientY - rect.top;
+    const along = anchor === "first" ? offset : total - offset;
+    const value = units === "pixels" ? along : (along / total) * 100;
+    // Dragging well past the minimum folds a collapsible pane; dragging back unfolds it.
+    if (collapsible && value < min * 0.6) {
+      setFolded(true);
+      return;
+    }
+    if (isFolded) setFolded(false);
+    set(value);
+  };
+
+  const shown = isFolded ? 0 : current;
+  const track = units === "pixels" ? `${shown}px` : `${shown}%`;
+  const grow = anchor === "first" ? 1 : -1;
+
+  return (
+    <div
+      ref={root}
+      className={cx("ml-resizable", className)}
+      data-direction={direction}
+      data-anchor={anchor}
+      data-collapsed={isFolded || undefined}
+      style={{ ...style, ["--ml-resizable-size" as string]: track }}
+      {...props}
+    >
+      <div className="ml-resizable-pane" data-folded={(isFolded && anchor === "first") || undefined}>
+        {first}
+      </div>
+      <div
+        role="separator"
+        tabIndex={0}
+        aria-label={label}
+        aria-orientation={horizontal ? "vertical" : "horizontal"}
+        aria-valuemin={collapsible ? 0 : min}
+        aria-valuemax={max}
+        aria-valuenow={Math.round(shown)}
+        aria-expanded={collapsible ? !isFolded : undefined}
+        className="ml-resizable-handle"
+        onPointerDown={(event) => {
+          dragging.current = true;
+          event.currentTarget.setPointerCapture(event.pointerId);
+        }}
+        onPointerMove={(event) => {
+          if (dragging.current) fromPointer(event);
+        }}
+        onPointerUp={() => {
+          dragging.current = false;
+        }}
+        onDoubleClick={() => {
+          setFolded(false);
+          set(defaultSize);
+        }}
+        onKeyDown={(event) => {
+          const step = (event.shiftKey ? 5 : 1) * (units === "pixels" ? 16 : 2);
+          const back = horizontal ? "ArrowLeft" : "ArrowUp";
+          const forward = horizontal ? "ArrowRight" : "ArrowDown";
+          if (event.key === back) set(current - step * grow);
+          else if (event.key === forward) set(current + step * grow);
+          else if (event.key === "Home") set(anchor === "first" ? min : max);
+          else if (event.key === "End") set(anchor === "first" ? max : min);
+          else if (event.key === "Enter" && collapsible) setFolded(!isFolded);
+          else return;
+          event.preventDefault();
+        }}
+      />
+      <div className="ml-resizable-pane" data-folded={(isFolded && anchor === "second") || undefined}>
+        {second}
+      </div>
+    </div>
+  );
+}

package/snapshot/source/packages/components/segmented-control/segmented-control.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import * as React from "react";
+import { rovingIndex } from "@mlola-ui/behavior/logic";
+import { cx, useControllableState } from "../_internal/react";
+
+export interface SegmentedOption {
+  value: string;
+  label: React.ReactNode;
+}
+
+export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+  options: SegmentedOption[];
+  label: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export function SegmentedControl({
+  options,
+  label,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  ...props
+}: SegmentedControlProps) {
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? options[0]?.value ?? "",
+    onChange: onValueChange,
+  });
+  const index = Math.max(
+    0,
+    options.findIndex((option) => option.value === current),
+  );
+  const items = React.useRef<Array<HTMLButtonElement | null>>([]);
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const target = rovingIndex(options.length, index, event.key, { horizontal: true, wrap: true });
+    if (target < 0) return;
+    event.preventDefault();
+    setCurrent(options[target].value);
+    items.current[target]?.focus();
+  };
+
+  return (
+    <div
+      {...props}
+      className={cx("ml-segmented-control", className)}
+      role="radiogroup"
+      aria-label={label}
+      onKeyDown={onKeyDown}
+    >
+      {options.map((option, position) => {
+        const active = option.value === current;
+        return (
+          <button
+            key={option.value}
+            ref={(node) => {
+              items.current[position] = node;
+            }}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            className="ml-segmented-control-item"
+            data-state={active ? "active" : "inactive"}
+            tabIndex={active ? 0 : -1}
+            onClick={() => setCurrent(option.value)}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}