@majapisoftwares/ui 6.1.3 → 6.2.1

package/docs/STANDARDS.md

@@ -1,5 +1,7 @@
 # Padrão v1 de código e UI/UX
 
+`LoginForm` aceita `mode="providers"` com `alternative` obrigatório para autenticação exclusiva por OAuth/SSO, sem campos de senha nem callback de credenciais. O modo padrão continua `credentials`. Catálogo e starter demonstram em `/login/provider`. A identidade autenticada usa `UserMenu` no slot `footer` do `AppShell`; tema, idioma e saída permanecem no padrão compartilhado.
+
 Base atual: shadcn base-luma com @base-ui/react. Os componentes interativos expõem fronteiras use client para uso no Next.js App Router. A migração da API Radix está documentada em MIGRATION-0.2.md.
 
 ## Arquitetura e código

package/docs/validation/preference-titles.md

@@ -1,22 +1,22 @@
-# Saved-language titles
-
-The initial preference state matched server HTML in English. Child title effects
-ran before browser preferences were loaded, briefly writing the English title.
-The pre-paint visibility mask also expired after two seconds, independently of
-whether hydration had completed.
-
-`Preferences` now exposes internal readiness to `useDocumentTitle`. Titles are
-written only after the stored/browser language is resolved. The pre-paint mask
-is removed only when React has committed that language. The public API remains
-compatible, including `useDocumentTitle` outside Preferences.
-
-The catalog and generated starter consume the shared implementation. Cloud and
-the starter pin the corrected public Git source archive by its full commit SHA;
-no registry authentication or mutable dependency ref is required.
-
-Validation: Portuguese and English hydration tests record every document-title
-write and verify that all writes use the selected language. Library typecheck,
-lint, standards and build pass. Generated-starter lint, typecheck, UI standards
-and build pass. Local Chrome refresh shows `Padrões · Majapi UI` and
-`Repositórios · Majapi Cloud`, with visible Portuguese content and the button
-`Conectar repositórios`. No production deployment was performed.
+# Saved-language titles
+
+The initial preference state matched server HTML in English. Child title effects
+ran before browser preferences were loaded, briefly writing the English title.
+The pre-paint visibility mask also expired after two seconds, independently of
+whether hydration had completed.
+
+`Preferences` now exposes internal readiness to `useDocumentTitle`. Titles are
+written only after the stored/browser language is resolved. The pre-paint mask
+is removed only when React has committed that language. The public API remains
+compatible, including `useDocumentTitle` outside Preferences.
+
+The catalog and generated starter consume the shared implementation. Cloud and
+the starter pin the corrected public Git source archive by its full commit SHA;
+no registry authentication or mutable dependency ref is required.
+
+Validation: Portuguese and English hydration tests record every document-title
+write and verify that all writes use the selected language. Library typecheck,
+lint, standards and build pass. Generated-starter lint, typecheck, UI standards
+and build pass. Local Chrome refresh shows `Padrões · Majapi UI` and
+`Repositórios · Majapi Cloud`, with visible Portuguese content and the button
+`Conectar repositórios`. No production deployment was performed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majapisoftwares/ui",
-  "version": "6.1.3",
+  "version": "6.2.1",
   "description": "Shared Majapi UI and UX standards based on shadcn/ui",
   "publishConfig": {
     "access": "public"

package/src/patterns/copy-input.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState, type ComponentProps } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { cn } from "../lib/utils";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "../components/ui/input-group";
+
+export interface CopyInputProps
+  extends Omit<ComponentProps<typeof InputGroupInput>, "value" | "readOnly"> {
+  value: string;
+  copyLabel?: string;
+  copiedLabel?: string;
+  className?: string;
+}
+
+export function CopyInput({
+  value,
+  copyLabel = "Copy",
+  copiedLabel = "Copied",
+  className,
+  ...props
+}: CopyInputProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // ignore clipboard error
+    }
+  };
+
+  return (
+    <InputGroup className={cn("w-full min-w-0", className)}>
+      <InputGroupInput
+        readOnly
+        value={value}
+        className="font-mono text-xs selection:bg-primary/20"
+        onFocus={(e) => e.currentTarget.select()}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton
+          size="icon-xs"
+          onClick={() => void handleCopy()}
+          aria-label={copied ? copiedLabel : copyLabel}
+          title={copied ? copiedLabel : copyLabel}
+        >
+          {copied ? (
+            <CheckIcon className="size-3.5 text-success-foreground" aria-hidden="true" />
+          ) : (
+            <CopyIcon className="size-3.5" aria-hidden="true" />
+          )}
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}

package/src/patterns/details-sheet.tsx

@@ -1,54 +1,54 @@
-"use client";
-
-import type { ReactNode } from "react";
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from "../components/ui/sheet";
-export function DetailsSheet({
-  open,
-  onOpenChange,
-  title,
-  description,
-  children,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  description?: string;
-  children: ReactNode;
-}) {
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="overflow-y-auto">
-        <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-          {description ? (
-            <SheetDescription>{description}</SheetDescription>
-          ) : null}
-        </SheetHeader>
-        {/* Same inset as SheetHeader (p-6). */}
-        <div className="px-6 pb-8">{children}</div>
-      </SheetContent>
-    </Sheet>
-  );
-}
-export function DetailList({
-  items,
-}: {
-  items: { label: string; value: ReactNode }[];
-}) {
-  return (
-    <dl className="grid gap-4 text-sm">
-      {items.map((item) => (
-        <div key={item.label} className="grid gap-1">
-          <dt className="text-muted-foreground">{item.label}</dt>
-          <dd className="font-medium break-words">{item.value}</dd>
-        </div>
-      ))}
-    </dl>
-  );
-}
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "../components/ui/sheet";
+export function DetailsSheet({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="overflow-x-hidden overflow-y-auto data-[side=left]:sm:max-w-xl data-[side=right]:sm:max-w-xl">
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+          {description ? (
+            <SheetDescription>{description}</SheetDescription>
+          ) : null}
+        </SheetHeader>
+        {/* Same inset as SheetHeader (p-6). */}
+        <div className="min-w-0 px-6 pb-8">{children}</div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+export function DetailList({
+  items,
+}: {
+  items: { label: string; value: ReactNode }[];
+}) {
+  return (
+    <dl className="grid min-w-0 gap-4 text-sm">
+      {items.map((item) => (
+        <div key={item.label} className="grid min-w-0 gap-1">
+          <dt className="text-muted-foreground">{item.label}</dt>
+          <dd className="min-w-0 font-medium break-words">{item.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/src/patterns/preferences.tsx

@@ -90,8 +90,29 @@ export function Preferences({
       delete root.dataset.localePending;
   }, [locale, ready]);
   useEffect(() => {
+    if (!ready) return;
     document.documentElement.classList.toggle("dark", theme === "dark");
-  }, [theme]);
+  }, [theme, ready]);
+  useEffect(() => {
+    if (
+      typeof location === "undefined" ||
+      !location.hostname.endsWith(".localhost")
+    )
+      return;
+    const link = document.querySelector<HTMLLinkElement>('link[rel*="icon"]');
+    const href = link?.getAttribute("href");
+    if (!link || !href || href.startsWith("data:")) return;
+    void fetch(href)
+      .then((res) => (res.ok ? res.text() : ""))
+      .then((svg) => {
+        if (!svg) return;
+        const embeddedPng = svg.match(/data:image\/png;base64,[^"']+/);
+        link.href = embeddedPng
+          ? embeddedPng[0]
+          : `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+      })
+      .catch(() => {});
+  }, []);
   return (
     <PreferencesContext.Provider
       value={{

package/src/templates/login-form.tsx

@@ -1,129 +1,140 @@
-"use client";
-
-import { useId, type ReactNode } from "react";
-import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
-import { Field, FieldGroup, FieldLabel } from "../components/ui/field";
-import { Alert, AlertDescription } from "../components/ui/alert";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../components/ui/card";
-import { defineMessages, useMessages } from "../lib/i18n";
-
-const messages = defineMessages({
-  en: {
-    title: "Welcome back",
-    email: "Email",
-    password: "Password",
-    submit: "Log in",
-    pending: "Logging in…",
-  },
-  "pt-BR": {
-    title: "Bem-vindo de volta",
-    email: "E-mail",
-    password: "Senha",
-    submit: "Entrar",
-    pending: "Entrando…",
-  },
-});
-
-export interface LoginValues {
-  email: string;
-  password: string;
-}
-export interface LoginFormProps {
-  onSubmit: (values: LoginValues) => void;
-  pending?: boolean;
-  error?: string;
-  title?: string;
-  description?: string;
-  submitLabel?: string;
-  /** Shown next to the password label, e.g. a "Forgot password?" link. */
-  recovery?: ReactNode;
-  /** Shown above the fields, e.g. OAuth buttons. */
-  alternative?: ReactNode;
-  footer?: ReactNode;
-}
-export function LoginForm({
-  onSubmit,
-  pending = false,
-  error,
-  title,
-  description,
-  submitLabel,
-  recovery,
-  alternative,
-  footer,
-}: LoginFormProps) {
-  const id = useId();
-  const t = useMessages(messages);
-  return (
-    <Card>
-      <CardHeader className="text-center">
-        <CardTitle className="text-xl">{title ?? t.title}</CardTitle>
-        {description ? <CardDescription>{description}</CardDescription> : null}
-      </CardHeader>
-      <CardContent>
-        <form
-          aria-busy={pending}
-          onSubmit={(event) => {
-            event.preventDefault();
-            const data = new FormData(event.currentTarget);
-            onSubmit({
-              email: String(data.get("email") ?? ""),
-              password: String(data.get("password") ?? ""),
-            });
-          }}
-        >
-          <FieldGroup>
-            {alternative}
-            {error ? (
-              <Alert variant="destructive">
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            ) : null}
-            <Field>
-              <FieldLabel htmlFor={`${id}-email`}>{t.email}</FieldLabel>
-              <Input
-                id={`${id}-email`}
-                name="email"
-                type="email"
-                autoComplete="username"
-                required
-                disabled={pending}
-              />
-            </Field>
-            <Field>
-              <div className="flex items-center">
-                <FieldLabel htmlFor={`${id}-password`}>{t.password}</FieldLabel>
-                {recovery ? (
-                  <div className="ml-auto text-sm">{recovery}</div>
-                ) : null}
-              </div>
-              <Input
-                id={`${id}-password`}
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                disabled={pending}
-              />
-            </Field>
-            <Button type="submit" disabled={pending}>
-              {pending ? t.pending : (submitLabel ?? t.submit)}
-            </Button>
-            {footer ? (
-              <div className="text-center text-sm text-muted-foreground">
-                {footer}
-              </div>
-            ) : null}
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  );
-}
+"use client";
+
+import { useId, type ReactNode } from "react";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Field, FieldGroup, FieldLabel } from "../components/ui/field";
+import { Alert, AlertDescription } from "../components/ui/alert";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../components/ui/card";
+import { defineMessages, useMessages } from "../lib/i18n";
+
+const messages = defineMessages({
+  en: {
+    title: "Welcome back",
+    email: "Email",
+    password: "Password",
+    submit: "Log in",
+    pending: "Logging in…",
+  },
+  "pt-BR": {
+    title: "Bem-vindo de volta",
+    email: "E-mail",
+    password: "Senha",
+    submit: "Entrar",
+    pending: "Entrando…",
+  },
+});
+
+export interface LoginValues {
+  email: string;
+  password: string;
+}
+interface LoginFormOptions {
+  pending?: boolean;
+  error?: string;
+  title?: string;
+  description?: string;
+  submitLabel?: string;
+  /** Shown next to the password label, e.g. a "Forgot password?" link. */
+  recovery?: ReactNode;
+  /** Shown above the fields, e.g. OAuth buttons. */
+  alternative?: ReactNode;
+  footer?: ReactNode;
+}
+export type LoginFormProps = LoginFormOptions &
+  (
+    | { mode?: "credentials"; onSubmit: (values: LoginValues) => void }
+    | { mode: "providers"; onSubmit?: never; alternative: ReactNode }
+  );
+export function LoginForm({
+  mode = "credentials",
+  onSubmit,
+  pending = false,
+  error,
+  title,
+  description,
+  submitLabel,
+  recovery,
+  alternative,
+  footer,
+}: LoginFormProps) {
+  const id = useId();
+  const t = useMessages(messages);
+  return (
+    <Card>
+      <CardHeader className="text-center">
+        <CardTitle className="text-xl">{title ?? t.title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>
+        <form
+          aria-busy={pending}
+          onSubmit={(event) => {
+            event.preventDefault();
+            const data = new FormData(event.currentTarget);
+            onSubmit?.({
+              email: String(data.get("email") ?? ""),
+              password: String(data.get("password") ?? ""),
+            });
+          }}
+        >
+          <FieldGroup>
+            {alternative}
+            {error ? (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : null}
+            {mode === "credentials" ? (
+              <>
+                <Field>
+                  <FieldLabel htmlFor={`${id}-email`}>{t.email}</FieldLabel>
+                  <Input
+                    id={`${id}-email`}
+                    name="email"
+                    type="email"
+                    autoComplete="username"
+                    required
+                    disabled={pending}
+                  />
+                </Field>
+                <Field>
+                  <div className="flex items-center">
+                    <FieldLabel htmlFor={`${id}-password`}>
+                      {t.password}
+                    </FieldLabel>
+                    {recovery ? (
+                      <div className="ml-auto text-sm">{recovery}</div>
+                    ) : null}
+                  </div>
+                  <Input
+                    id={`${id}-password`}
+                    name="password"
+                    type="password"
+                    autoComplete="current-password"
+                    required
+                    disabled={pending}
+                  />
+                </Field>
+                <Button type="submit" disabled={pending}>
+                  {pending ? t.pending : (submitLabel ?? t.submit)}
+                </Button>
+              </>
+            ) : null}
+            {footer ? (
+              <div className="text-center text-sm text-muted-foreground">
+                {footer}
+              </div>
+            ) : null}
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}