@majapisoftwares/ui 5.0.0 → 6.1.0

package/src/templates/auth-layout.tsx

@@ -1,36 +1,30 @@
 import type { ReactNode } from "react";
+
+/** Centered auth page: brand on top, form card below, optional footer. */
 export function AuthLayout({
+  brand,
   children,
-  brand = "workbench",
-  brandMark = "w.",
-  title,
-  description,
-  aside,
   footer,
 }: {
+  brand?: ReactNode;
   children: ReactNode;
-  brand?: string;
-  brandMark?: ReactNode;
-  title: string;
-  description: string;
-  aside?: ReactNode;
   footer?: ReactNode;
 }) {
   return (
-    <main className="wb-auth">
-      <section className="wb-auth-intro">
-        <div className="wb-brand">
-          <span>{brandMark}</span>
-          {brand}
-        </div>
-        <div>
-          <h1>{title}</h1>
-          <p>{description}</p>
-        </div>
-        {aside}
-        <footer>{footer}</footer>
-      </section>
-      <section className="wb-auth-panel">{children}</section>
+    <main className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        {brand ? (
+          <div className="flex items-center gap-2 self-center font-medium">
+            {brand}
+          </div>
+        ) : null}
+        {children}
+        {footer ? (
+          <div className="text-center text-xs text-balance text-muted-foreground">
+            {footer}
+          </div>
+        ) : null}
+      </div>
     </main>
   );
 }

package/src/templates/login-form.tsx

@@ -3,13 +3,33 @@
 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 {
-  Field,
-  FieldGroup,
-  FieldLabel,
-  FieldDescription,
-} from "../components/ui/field";
-import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+  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;
@@ -22,76 +42,88 @@ export interface LoginFormProps {
   title?: string;
   description?: string;
   submitLabel?: string;
-  footer?: ReactNode;
+  /** 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 = "Entrar na sua conta",
-  description = "Use seu e-mail e senha para continuar.",
-  submitLabel = "Entrar",
-  footer,
+  title,
+  description,
+  submitLabel,
   recovery,
   alternative,
+  footer,
 }: LoginFormProps) {
   const id = useId();
+  const t = useMessages(messages);
   return (
-    <form
-      className="wb-auth-form"
-      onSubmit={(event) => {
-        event.preventDefault();
-        const data = new FormData(event.currentTarget);
-        onSubmit({
-          email: String(data.get("email") ?? ""),
-          password: String(data.get("password") ?? ""),
-        });
-      }}
-      aria-busy={pending}
-    >
-      <header>
-        <h2>{title}</h2>
-        <p>{description}</p>
-      </header>
-      {error ? (
-        <Alert variant="destructive">
-          <AlertTitle>Não foi possível entrar</AlertTitle>
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      ) : null}
-      <FieldGroup>
-        <Field>
-          <FieldLabel htmlFor={`${id}-email`}>E-mail</FieldLabel>
-          <Input
-            id={`${id}-email`}
-            name="email"
-            type="email"
-            autoComplete="username"
-            placeholder="voce@empresa.com"
-            required
-            disabled={pending}
-          />
-        </Field>
-        <Field>
-          <FieldLabel htmlFor={`${id}-password`}>Senha</FieldLabel>
-          <Input
-            id={`${id}-password`}
-            name="password"
-            type="password"
-            autoComplete="current-password"
-            required
-            disabled={pending}
-          />
-          {recovery ? <FieldDescription>{recovery}</FieldDescription> : null}
-        </Field>
-        <Button type="submit" disabled={pending}>
-          {pending ? "Entrando…" : submitLabel}
-        </Button>
-      </FieldGroup>
-      {alternative}
-      {footer ? <footer>{footer}</footer> : null}
-    </form>
+    <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>
   );
 }

package/src/templates/signup-form.tsx

@@ -5,11 +5,44 @@ import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import {
   Field,
+  FieldDescription,
   FieldGroup,
   FieldLabel,
-  FieldDescription,
 } from "../components/ui/field";
-import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+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: "Create an account",
+    name: "Name",
+    email: "Email",
+    password: "Password",
+    confirm: "Confirm password",
+    minLength: (n: number) => `At least ${n} characters.`,
+    mismatch: "Passwords don't match.",
+    submit: "Create account",
+    pending: "Creating account…",
+  },
+  "pt-BR": {
+    title: "Criar conta",
+    name: "Nome",
+    email: "E-mail",
+    password: "Senha",
+    confirm: "Confirmar senha",
+    minLength: (n: number) => `Pelo menos ${n} caracteres.`,
+    mismatch: "As senhas não coincidem.",
+    submit: "Criar conta",
+    pending: "Criando conta…",
+  },
+});
 
 export interface SignupValues {
   name: string;
@@ -24,114 +57,121 @@ export interface SignupFormProps {
   description?: string;
   submitLabel?: string;
   minPasswordLength?: number;
-  footer?: ReactNode;
   terms?: ReactNode;
+  footer?: ReactNode;
 }
 export function SignupForm({
   onSubmit,
   pending = false,
   error,
-  title = "Criar sua conta",
-  description = "Comece a organizar seu trabalho em um só lugar.",
-  submitLabel = "Criar conta",
+  title,
+  description,
+  submitLabel,
   minPasswordLength = 12,
-  footer,
   terms,
+  footer,
 }: SignupFormProps) {
   const id = useId(),
+    t = useMessages(messages),
     [mismatch, setMismatch] = useState(false);
   return (
-    <form
-      className="wb-auth-form"
-      aria-busy={pending}
-      onSubmit={(event) => {
-        event.preventDefault();
-        const data = new FormData(event.currentTarget);
-        const password = String(data.get("password") ?? "");
-        if (password !== String(data.get("confirmPassword") ?? "")) {
-          setMismatch(true);
-          return;
-        }
-        setMismatch(false);
-        onSubmit({
-          name: String(data.get("name") ?? ""),
-          email: String(data.get("email") ?? ""),
-          password,
-        });
-      }}
-    >
-      <header>
-        <h2>{title}</h2>
-        <p>{description}</p>
-      </header>
-      {error ? (
-        <Alert variant="destructive">
-          <AlertTitle>Não foi possível criar a conta</AlertTitle>
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      ) : null}
-      <FieldGroup>
-        <Field>
-          <FieldLabel htmlFor={`${id}-name`}>Nome completo</FieldLabel>
-          <Input
-            id={`${id}-name`}
-            name="name"
-            autoComplete="name"
-            required
-            disabled={pending}
-          />
-        </Field>
-        <Field>
-          <FieldLabel htmlFor={`${id}-email`}>E-mail</FieldLabel>
-          <Input
-            id={`${id}-email`}
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-            disabled={pending}
-          />
-        </Field>
-        <Field>
-          <FieldLabel htmlFor={`${id}-password`}>Senha</FieldLabel>
-          <Input
-            id={`${id}-password`}
-            name="password"
-            type="password"
-            autoComplete="new-password"
-            required
-            minLength={minPasswordLength}
-            disabled={pending}
-          />
-          <FieldDescription>
-            Use pelo menos {minPasswordLength} caracteres.
-          </FieldDescription>
-        </Field>
-        <Field data-invalid={mismatch || undefined}>
-          <FieldLabel htmlFor={`${id}-confirm`}>Confirmar senha</FieldLabel>
-          <Input
-            id={`${id}-confirm`}
-            name="confirmPassword"
-            type="password"
-            autoComplete="new-password"
-            required
-            aria-invalid={mismatch || undefined}
-            aria-describedby={mismatch ? `${id}-mismatch` : undefined}
-            disabled={pending}
-            onChange={() => setMismatch(false)}
-          />
-          {mismatch ? (
-            <FieldDescription id={`${id}-mismatch`} role="alert">
-              As senhas precisam ser iguais.
-            </FieldDescription>
-          ) : null}
-        </Field>
-        {terms ? <FieldDescription>{terms}</FieldDescription> : null}
-        <Button type="submit" disabled={pending}>
-          {pending ? "Criando conta…" : submitLabel}
-        </Button>
-      </FieldGroup>
-      {footer ? <footer>{footer}</footer> : null}
-    </form>
+    <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);
+            const password = String(data.get("password") ?? "");
+            if (password !== String(data.get("confirmPassword") ?? "")) {
+              setMismatch(true);
+              return;
+            }
+            setMismatch(false);
+            onSubmit({
+              name: String(data.get("name") ?? ""),
+              email: String(data.get("email") ?? ""),
+              password,
+            });
+          }}
+        >
+          <FieldGroup>
+            {error ? (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : null}
+            <Field>
+              <FieldLabel htmlFor={`${id}-name`}>{t.name}</FieldLabel>
+              <Input
+                id={`${id}-name`}
+                name="name"
+                autoComplete="name"
+                required
+                disabled={pending}
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor={`${id}-email`}>{t.email}</FieldLabel>
+              <Input
+                id={`${id}-email`}
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                disabled={pending}
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor={`${id}-password`}>{t.password}</FieldLabel>
+              <Input
+                id={`${id}-password`}
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={minPasswordLength}
+                disabled={pending}
+              />
+              <FieldDescription>
+                {t.minLength(minPasswordLength)}
+              </FieldDescription>
+            </Field>
+            <Field data-invalid={mismatch || undefined}>
+              <FieldLabel htmlFor={`${id}-confirm`}>{t.confirm}</FieldLabel>
+              <Input
+                id={`${id}-confirm`}
+                name="confirmPassword"
+                type="password"
+                autoComplete="new-password"
+                required
+                aria-invalid={mismatch || undefined}
+                aria-describedby={mismatch ? `${id}-mismatch` : undefined}
+                disabled={pending}
+                onChange={() => setMismatch(false)}
+              />
+              {mismatch ? (
+                <FieldDescription id={`${id}-mismatch`} role="alert">
+                  {t.mismatch}
+                </FieldDescription>
+              ) : null}
+            </Field>
+            {terms ? <FieldDescription>{terms}</FieldDescription> : null}
+            <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>
   );
 }

package/src/components/ui/native-select.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cn } from "cn";
-import { ChevronDownIcon } from "lucide-react";
-
-type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
-  size?: "sm" | "default";
-};
-
-function NativeSelect({
-  className,
-  size = "default",
-  ...props
-}: NativeSelectProps) {
-  return (
-    <div
-      className={cn(
-        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
-        className,
-      )}
-      data-slot="native-select-wrapper"
-      data-size={size}
-    >
-      <select
-        data-slot="native-select"
-        data-size={size}
-        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
-        {...props}
-      />
-      <ChevronDownIcon
-        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
-        aria-hidden="true"
-        data-slot="native-select-icon"
-      />
-    </div>
-  );
-}
-
-function NativeSelectOption({
-  className,
-  ...props
-}: React.ComponentProps<"option">) {
-  return (
-    <option
-      data-slot="native-select-option"
-      className={cn("bg-[Canvas] text-[CanvasText]", className)}
-      {...props}
-    />
-  );
-}
-
-function NativeSelectOptGroup({
-  className,
-  ...props
-}: React.ComponentProps<"optgroup">) {
-  return (
-    <optgroup
-      data-slot="native-select-optgroup"
-      className={cn("bg-[Canvas] text-[CanvasText]", className)}
-      {...props}
-    />
-  );
-}
-
-export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />