@alfadocs/ui-kit 0.6.0 → 0.7.0

package/dist/_chunks/use-locale-BBDCG265.js

@@ -0,0 +1,73 @@
+import { useState as w, useEffect as d, useRef as h, useCallback as p } from "react";
+import "../i18n/config.js";
+import i from "i18next";
+function E(e) {
+  const [o, r] = w(() => typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(e).matches);
+  return d(() => {
+    if (typeof window > "u" || typeof window.matchMedia != "function")
+      return;
+    const t = window.matchMedia(e);
+    r(t.matches);
+    const n = (a) => r(a.matches);
+    return typeof t.addEventListener == "function" ? (t.addEventListener("change", n), () => t.removeEventListener("change", n)) : (t.addListener(n), () => t.removeListener(n));
+  }, [e]), o;
+}
+function S(e) {
+  return e != null && e.current ? e.current : typeof document > "u" ? null : document;
+}
+function y(e, o) {
+  const r = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : (
+    // SSR / jsdom fallback — drop every character that's
+    // significant in a CSS attribute selector. Conservative but
+    // robust enough for the test environment.
+    e.replace(/["'\\\[\]]/g, "")
+  ), t = `[data-error-anchor="${r}"], [name="${r}"], [name$="[${r}]"]`, n = Array.from(
+    o.querySelectorAll(t)
+  );
+  return n.length === 0 ? null : n.find((s) => s.offsetParent !== null) ?? n[0];
+}
+function M(e, o, r = {}) {
+  const {
+    scope: t,
+    scrollOptions: n = { behavior: "smooth", block: "center" },
+    focus: a = !0,
+    skipInitialMount: s = !0
+  } = r, m = h(!0), c = h(null), u = o.find((l) => !!e[l]) ?? null;
+  d(() => {
+    if (m.current && (m.current = !1, s)) {
+      c.current = u;
+      return;
+    }
+    if (!u) {
+      c.current = null;
+      return;
+    }
+    if (u === c.current || typeof window > "u") return;
+    const l = window.requestAnimationFrame(() => {
+      const g = S(t);
+      if (!g) return;
+      const f = y(u, g);
+      f && (f.scrollIntoView(n), a && f.focus({ preventScroll: !0 }), c.current = u);
+    });
+    return () => window.cancelAnimationFrame(l);
+  }, [u]);
+}
+function b() {
+  const [e, o] = w(() => i.language);
+  d(() => {
+    const n = (a) => o(a);
+    return i.on("languageChanged", n), i.language !== e && o(i.language), () => {
+      i.off("languageChanged", n);
+    };
+  }, [e]);
+  const r = p(async (n) => {
+    await i.changeLanguage(n);
+  }, []), t = i.dir(e) === "rtl" ? "rtl" : "ltr";
+  return { locale: e, dir: t, setLocale: r };
+}
+export {
+  E as a,
+  M as b,
+  b as u
+};
+//# sourceMappingURL=use-locale-BBDCG265.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.6.0",
+  "packageVersion": "0.7.0",
   "components": [
     {
       "kind": "component",

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
-export { usePrefersReducedMotion, useMediaQuery, useLocale, useTheme, resolveTheme, themeClassList, THEME_CLASS, THEME_STORAGE_KEY, ACCESSIBILITY_STORAGE_KEY, } from '../hooks';
-export type { LocaleDir, UseLocaleReturn, ThemePreference, AccessibilityPreference, ResolvedTheme, UseThemeReturn, } from '../hooks';
+export { usePrefersReducedMotion, useMediaQuery, useScrollToFirstError, useLocale, useTheme, resolveTheme, themeClassList, THEME_CLASS, THEME_STORAGE_KEY, ACCESSIBILITY_STORAGE_KEY, } from '../hooks';
+export type { LocaleDir, UseLocaleReturn, UseScrollToFirstErrorOptions, ThemePreference, AccessibilityPreference, ResolvedTheme, UseThemeReturn, } from '../hooks';
 export * from './button';
 export * from './button-group';
 export * from './floating-action-button';

package/dist/components/matrix-rain/matrix-rain.d.ts

@@ -9,7 +9,7 @@ type GlyphPreset = keyof typeof GLYPH_PRESETS;
 declare const wrapperVariants: (props?: ({
     background?: "solid" | "transparent" | null | undefined;
     vibe?: "ghost" | "terminal" | "clean" | "hologram" | "synthwave" | "oscilloscope" | null | undefined;
-    mask?: "none" | "center" | null | undefined;
+    mask?: "center" | "none" | null | undefined;
     maskRadius?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Tone = 'primary' | 'accent' | 'success' | 'error' | 'info';

package/dist/components/sheet/sheet.d.ts

@@ -2,7 +2,7 @@ import { type ComponentPropsWithoutRef, type HTMLAttributes, type ReactNode } fr
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { type VariantProps } from 'class-variance-authority';
 declare const contentVariants: (props?: ({
-    side?: "top" | "end" | "bottom" | "start" | null | undefined;
+    side?: "end" | "start" | "top" | "bottom" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SheetHandle {
     getIsOpen: () => boolean;

package/dist/components/stat/stat.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 declare const statVariants: (props?: ({
     variant?: "default" | "compact" | "outlined" | "elevated" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
-    align?: "end" | "start" | "center" | null | undefined;
+    align?: "center" | "end" | "start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface StatProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof statVariants> {
     /** Metric label rendered above the value. */

package/dist/components/theme-toggle/theme-toggle.d.ts

@@ -2,7 +2,7 @@ import { type HTMLAttributes } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { type AccessibilityPreference, type ThemePreference } from '../../hooks';
 declare const wrapperVariants: (props?: ({
-    variant?: "split" | "menu" | "compact" | null | undefined;
+    variant?: "menu" | "split" | "compact" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ThemeToggleVariant = 'menu' | 'compact' | 'split';
 interface ThemeToggleBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, VariantProps<typeof wrapperVariants> {

package/dist/hooks/index.d.ts

@@ -1,5 +1,7 @@
 export { usePrefersReducedMotion } from './use-prefers-reduced-motion';
 export { useMediaQuery } from './use-media-query';
+export { useScrollToFirstError } from './use-scroll-to-first-error';
+export type { UseScrollToFirstErrorOptions } from './use-scroll-to-first-error';
 export { useLocale } from './use-locale';
 export type { LocaleDir, UseLocaleReturn } from './use-locale';
 export { useTheme, resolveTheme, themeClassList, THEME_STORAGE_KEY, ACCESSIBILITY_STORAGE_KEY, THEME_CLASS, } from './use-theme';

package/dist/hooks/index.js

@@ -1,15 +1,16 @@
-import { u as a } from "../_chunks/use-prefers-reduced-motion-BMwIQRjB.js";
-import { u as o, a as u } from "../_chunks/use-locale-BuXR_Zl9.js";
-import { A as T, T as t, a as m, r as S, t as A, u as _ } from "../_chunks/use-theme-B1cwAXJR.js";
+import { u as r } from "../_chunks/use-prefers-reduced-motion-BMwIQRjB.js";
+import { u as o, a as u, b as E } from "../_chunks/use-locale-BBDCG265.js";
+import { A as t, T as S, a as m, r as l, t as A, u as _ } from "../_chunks/use-theme-B1cwAXJR.js";
 export {
-  T as ACCESSIBILITY_STORAGE_KEY,
-  t as THEME_CLASS,
+  t as ACCESSIBILITY_STORAGE_KEY,
+  S as THEME_CLASS,
   m as THEME_STORAGE_KEY,
-  S as resolveTheme,
+  l as resolveTheme,
   A as themeClassList,
   o as useLocale,
   u as useMediaQuery,
-  a as usePrefersReducedMotion,
+  r as usePrefersReducedMotion,
+  E as useScrollToFirstError,
   _ as useTheme
 };
 //# sourceMappingURL=index.js.map

package/dist/hooks/use-scroll-to-first-error.d.ts

@@ -0,0 +1,64 @@
+import { type RefObject } from 'react';
+export interface UseScrollToFirstErrorOptions {
+    /**
+     * Limits the DOM query to this element. Useful when the page renders
+     * more than one form, or when an unrelated component happens to share
+     * a field name. Defaults to `document`.
+     */
+    scope?: RefObject<HTMLElement | null>;
+    /**
+     * Forwarded to `scrollIntoView`. Defaults to
+     * `{ behavior: 'smooth', block: 'center' }`. Pass
+     * `{ behavior: 'auto' }` (or omit `behavior`) on consumers that
+     * respect `prefers-reduced-motion` upstream — the kit doesn't shadow
+     * the user's motion preference inside the hook, since some consumers
+     * deliberately keep a near-instant snap for power-user form flows.
+     */
+    scrollOptions?: ScrollIntoViewOptions;
+    /**
+     * Move keyboard focus to the errored field after scrolling. Default
+     * `true`. The focus call uses `preventScroll: true` so the smooth
+     * scroll the hook just did isn't replaced by a snap.
+     *
+     * Setting this `false` defeats the keyboard-user side of WCAG 3.3.1
+     * — the viewport will scroll but the active element stays on the
+     * submit button, forcing a Shift+Tab back into the form. Only flip
+     * this off when an upstream concern (e.g. a custom error summary
+     * panel that owns its own focus) is taking responsibility.
+     */
+    focus?: boolean;
+    /**
+     * On the very first render, do nothing even if `errors` already has
+     * entries. Default `true`. Without this the hook would yank the
+     * viewport whenever a form is hydrated with server-rendered errors
+     * from a no-JS fallback path — bad UX, since the user landed on the
+     * page and hasn't asked for any movement yet. Set `false` only when
+     * the consumer explicitly wants the initial-mount scroll (rare).
+     */
+    skipInitialMount?: boolean;
+}
+/**
+ * Scrolls the first errored field into view and (by default) focuses
+ * it, after `errors` changes. Backs the standard AlfaDocs rebrand
+ * validation-error UX: after a 422 with `{ errors: { field: message } }`
+ * is rendered inline, the user shouldn't be left staring at red labels
+ * they can't see. Implements WCAG 3.3.1 / 3.3.3.
+ *
+ * The hook is stateless and never mutates the DOM beyond the
+ * `scrollIntoView` + `focus` calls.
+ *
+ * @example
+ *   const fieldOrder = ['firstName', 'email', 'fiscalCode'] as const;
+ *   const [errors, setErrors] = useState<Record<string, string>>({});
+ *   useScrollToFirstError(errors, fieldOrder);
+ *
+ * @example Radix-based field
+ *   <Checkbox data-error-anchor="consent" name="consent" />
+ *   // hook scrolls to the visible <button>, not Radix's hidden input.
+ *
+ * @example Scoped to one form
+ *   const formRef = useRef<HTMLFormElement>(null);
+ *   useScrollToFirstError(errors, fieldOrder, { scope: formRef });
+ */
+export declare function useScrollToFirstError(errors: Readonly<Record<string, string | undefined>>, fieldOrder: ReadonlyArray<string>, options?: UseScrollToFirstErrorOptions): void;
+//# sourceMappingURL=use-scroll-to-first-error.d.ts.map