@sableui/react 0.6.2 → 0.7.1

package/dist/motion/TextReveal.js

@@ -0,0 +1,61 @@
+"use client";
+
+// src/motion/TextReveal.tsx
+import { cn } from "../lib/cn.js";
+import { useMotion } from "./MotionProvider.js";
+import { useInView } from "./useInView.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextReveal({
+  text,
+  as,
+  split = "word",
+  stagger = 40,
+  when = true,
+  once,
+  amount,
+  rootMargin,
+  className,
+  ...props
+}) {
+  const Comp = as ?? "span";
+  const { enabled } = useMotion();
+  const { ref, inView } = useInView({ once, amount, rootMargin });
+  const shown = inView && when || !enabled;
+  const units = split === "char" ? typeof Intl.Segmenter === "function" ? Array.from(new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(text), ({ segment }) => segment) : Array.from(text) : text.split(/(\s+)/).filter(Boolean);
+  let animatedIndex = 0;
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      ref,
+      className: cn("inline-block", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: text }),
+        units.map((unit, i) => {
+          if (/^\s+$/.test(unit)) {
+            return (
+              // biome-ignore lint/suspicious/noArrayIndexKey: positional text units
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: unit }, i)
+            );
+          }
+          const delay = animatedIndex++ * stagger;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-reveal": shown ? "in" : "out",
+              className: "motion-reveal inline-block",
+              style: { transitionDelay: enabled ? `calc(${delay}ms * var(--motion-scale, 1))` : "0ms" },
+              children: unit
+            },
+            i
+          );
+        })
+      ]
+    }
+  );
+}
+TextReveal.displayName = "TextReveal";
+export {
+  TextReveal
+};

package/dist/motion/index.js

@@ -0,0 +1,24 @@
+// src/motion/index.ts
+import { MotionProvider, useMotion } from "./MotionProvider.js";
+import { useReducedMotion } from "./useReducedMotion.js";
+import { useInView } from "./useInView.js";
+import { Reveal } from "./Reveal.js";
+import { TextReveal } from "./TextReveal.js";
+import { Presence } from "./Presence.js";
+import {
+  startViewTransition,
+  supportsViewTransitions,
+  ViewTransitionName
+} from "./viewTransition.js";
+export {
+  MotionProvider,
+  Presence,
+  Reveal,
+  TextReveal,
+  ViewTransitionName,
+  startViewTransition,
+  supportsViewTransitions,
+  useInView,
+  useMotion,
+  useReducedMotion
+};

package/dist/motion/useInView.js

@@ -0,0 +1,36 @@
+"use client";
+
+// src/motion/useInView.ts
+import { useEffect, useRef, useState } from "react";
+function useInView(options = {}) {
+  const { once = true, amount = 0.15, rootMargin } = options;
+  const ref = useRef(null);
+  const [inView, setInView] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setInView(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        if (entry.isIntersecting && entry.intersectionRatio >= amount) {
+          setInView(true);
+          if (once) observer.disconnect();
+        } else if (!once) {
+          setInView(false);
+        }
+      },
+      { threshold: amount, rootMargin }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [once, amount, rootMargin]);
+  return { ref, inView };
+}
+export {
+  useInView
+};

package/dist/motion/useReducedMotion.js

@@ -0,0 +1,25 @@
+"use client";
+
+// src/motion/useReducedMotion.ts
+import { useSyncExternalStore } from "react";
+var QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(callback) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {
+  };
+  const mql = window.matchMedia(QUERY);
+  mql.addEventListener("change", callback);
+  return () => mql.removeEventListener("change", callback);
+}
+function getSnapshot() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia(QUERY).matches;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useReducedMotion() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+export {
+  useReducedMotion
+};

package/dist/motion/viewTransition.js

@@ -0,0 +1,47 @@
+"use client";
+
+// src/motion/viewTransition.tsx
+import { flushSync } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+function supportsViewTransitions() {
+  return typeof document !== "undefined" && typeof document.startViewTransition === "function";
+}
+function motionDisabled() {
+  if (typeof window === "undefined" || typeof document === "undefined")
+    return true;
+  const attr = document.documentElement.getAttribute("data-motion");
+  if (attr === "off" || attr === "reduced") return true;
+  if (attr === "full") return false;
+  return !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function startViewTransition(update) {
+  if (!supportsViewTransitions() || motionDisabled()) {
+    update();
+    return;
+  }
+  ;
+  document.startViewTransition(() => {
+    flushSync(update);
+  });
+}
+function ViewTransitionName({
+  name,
+  as,
+  style,
+  ...props
+}) {
+  const Comp = as ?? "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      style: { ...style, viewTransitionName: name },
+      ...props
+    }
+  );
+}
+ViewTransitionName.displayName = "ViewTransitionName";
+export {
+  ViewTransitionName,
+  startViewTransition,
+  supportsViewTransitions
+};

package/dist/patterns/auth-page.js

@@ -0,0 +1,90 @@
+// src/patterns/auth-page.tsx
+import { useState } from "react";
+import { Avatar } from "../components/avatar/index.js";
+import { Badge } from "../components/badge/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent } from "../components/card/index.js";
+import { Entity } from "../components/entity/index.js";
+import { Field, Form } from "../components/form/index.js";
+import { GradientArt } from "../components/gradient-art/index.js";
+import { Input } from "../components/input/index.js";
+import { Separator } from "../components/separator/index.js";
+import { Region, Stack } from "../layout/index.js";
+import { Icon } from "../icon/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AuthPage() {
+  const [pending, setPending] = useState(false);
+  const [errors, setErrors] = useState({});
+  return /* @__PURE__ */ jsxs("main", { className: "grid min-h-dvh bg-background lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]", children: [
+    /* @__PURE__ */ jsx(Region, { max: "form", safeArea: ["top", "bottom"], className: "flex flex-col", children: /* @__PURE__ */ jsxs(Stack, { gap: 0, className: "flex-1 py-8 sm:py-10", children: [
+      /* @__PURE__ */ jsxs("a", { href: "/", className: "flex items-center gap-2.5 self-start rounded-sm motion-interactive motion-press", children: [
+        /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid", className: "text-2xl" }),
+        /* @__PURE__ */ jsx("span", { className: "text-title-lg", children: "Atelier" })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { gap: 4, justify: "center", className: "flex-1 py-12", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-heading-1", children: "Welcome back" }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-lg text-muted-foreground", children: "Sign in to collect new releases and manage your editions." })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Form,
+          {
+            className: "gap-5",
+            errors,
+            onFormSubmit: () => {
+              setPending(true);
+              setTimeout(() => {
+                setPending(false);
+                setErrors({ password: "That email and password don\u2019t match. Try again or reset your password." });
+              }, 900);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Field, { label: "Email", name: "email", validate: (value) => value ? null : "Enter your email address.", children: /* @__PURE__ */ jsx(Input, { type: "email", autoComplete: "email webauthn", placeholder: "you@example.com" }) }),
+              /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+                /* @__PURE__ */ jsx(Field, { label: "Password", name: "password", validate: (value) => value ? null : "Enter your password.", children: /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "current-password" }) }),
+                /* @__PURE__ */ jsx("a", { href: "/forgot-password", className: "hit-target self-end text-body-sm text-muted-foreground link-underline motion-interactive", children: "Forgot password?" })
+              ] }),
+              /* @__PURE__ */ jsx(Button, { type: "submit", size: "cta", loading: pending, loadingLabel: "Signing in", className: "w-full", children: "Sign in" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, { label: "or" }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", iconStart: /* @__PURE__ */ jsx(Icon, { name: "key" }), children: "Sign in with a passkey" }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", iconStart: /* @__PURE__ */ jsx(Icon, { name: "wallet" }), children: "Connect a wallet" })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-body-md text-muted-foreground", children: [
+          "No account?",
+          " ",
+          /* @__PURE__ */ jsx("a", { href: "/signup", className: "hit-target link-underline motion-interactive text-foreground", children: "Create one" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-body-xs text-muted-foreground", children: [
+        "By signing in you agree to the",
+        " ",
+        /* @__PURE__ */ jsx("a", { href: "/terms", className: "link-underline motion-interactive", children: "Terms" }),
+        " ",
+        "and",
+        " ",
+        /* @__PURE__ */ jsx("a", { href: "/privacy", className: "link-underline motion-interactive", children: "Privacy Policy" }),
+        "."
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("aside", { "aria-label": "Featured release", className: "hidden p-3 lg:flex", children: /* @__PURE__ */ jsx(GradientArt, { seed: "Untitled (gold rush)", className: "flex flex-1 flex-col justify-end rounded-xl p-8", children: /* @__PURE__ */ jsx(Card, { className: "max-w-md", children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      /* @__PURE__ */ jsx(Badge, { tone: "edition", className: "self-start", children: "Edition of 50" }),
+      /* @__PURE__ */ jsx("p", { className: "text-title-lg", children: "\u201CEvery edition is a conversation with whoever holds it next.\u201D" }),
+      /* @__PURE__ */ jsx(
+        Entity,
+        {
+          className: "p-0",
+          leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: "MO" }),
+          title: "Mara Okafor",
+          subtitle: "Untitled (gold rush), 2026"
+        }
+      )
+    ] }) }) }) }) })
+  ] });
+}
+export {
+  AuthPage
+};

package/dist/patterns/auth-page.meta.js

@@ -0,0 +1,27 @@
+// src/patterns/auth-page.meta.ts
+var authPageMeta = {
+  name: "AuthPage",
+  summary: "Split sign-in page: a form column (brand mark, heading, email + password, primary sign-in, passkey and wallet alternatives, sign-up switch, terms) beside a brand panel painted from the theme's tones with a featured release card. Below lg the panel drops away and the form is the whole screen.",
+  intent: "Reach for this for sign-in, sign-up, forgot-password, and any single-purpose one-column form route (invite accept, unsubscribe). Not for multi-section forms (use SettingsPage).",
+  notes: [
+    "The form column is a `form`-capped Region (480px), so the controls keep the same measure whether the panel is present or not.",
+    "No card around the form: the page itself is the surface, and the brand panel carries the identity. A card on a blank page reads as a template.",
+    "The heading is `text-heading-1` in an h1 \u2014 it is the page outline, so it takes a heading tier, not a card title.",
+    "Brand mark, form and terms are a three-part column: mark pinned to the top, form vertically centred in the remaining space, terms pinned to the bottom.",
+    "Forgot password sits under the password field, right-aligned, before the submit button \u2014 so it comes right after the field in tab order. Field has no label-row action slot yet.",
+    "One primary action. Passkey and wallet are outline buttons under an `or` Separator; switching to sign-up is a quiet `link-underline` link.",
+    "Validation uses Field `validate` for product copy instead of the browser's generic required message. A rejected sign-in comes back through Form `errors` on the password field; the submit Button shows `loading` while the request is in flight.",
+    "The brand panel artwork is a mesh of the theme's decorative tones over `--primary`, so it re-paints for every theme and mode. The relative-colour `oklch(from var(--tone-*) \u2026)` lift needs an `inline-color` disable with a reason.",
+    "The panel is `hidden lg:flex`: on a phone the form is the whole screen, with no decorative scroll above it."
+  ],
+  a11y: [
+    'The route renders inside <main> with one h1; the brand panel is an <aside> labelled "Featured release".',
+    "Field auto-wires labels, describedby, and invalid state onto the inputs; on submit, the first invalid field is focused.",
+    "Autocomplete attributes (`email webauthn`, `current-password`) keep password managers and passkey autofill working.",
+    "The Forgot password and Create one links use `hit-target` to meet the 44px touch floor without changing layout.",
+    "The artwork swatches are aria-hidden decoration; the brand link's accessible name is the wordmark."
+  ]
+};
+export {
+  authPageMeta
+};