@assembleo/ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentProps, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ComponentPropsWithoutRef, InputHTMLAttributes, TextareaHTMLAttributes, MouseEventHandler } from 'react';
+import { ComponentProps, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes, MouseEventHandler, InputHTMLAttributes } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps, cx } from 'class-variance-authority';
 import { Avatar as Avatar$1, Checkbox as Checkbox$1, Dialog as Dialog$1, Popover as Popover$1, RadioGroup as RadioGroup$1, Select as Select$1, Separator as Separator$1, Switch as Switch$1, Tabs as Tabs$1 } from 'radix-ui';
@@ -110,6 +110,44 @@ interface CheckboxProps extends Omit<ComponentProps<typeof Checkbox$1.Root>, 'cl
 }
 declare function Checkbox({ label, className, id, ...props }: CheckboxProps): react.JSX.Element;
 
+type InputProps = ComponentProps<'input'>;
+/**
+ * Os campos com máscara (CPF, WhatsApp, código) controlam `value` e `onChange` e
+ * fixam `type`, `inputMode` e `autoComplete`; o resto é do `Input`, `ref` incluído.
+ */
+type MaskedInputProps = Omit<InputProps, 'value' | 'onChange' | 'type' | 'inputMode' | 'autoComplete'> & {
+    value: string;
+    /** Recebe a string já mascarada. */
+    onChange: (value: string) => void;
+};
+declare function Input({ className, id, type, ...props }: InputProps): react.JSX.Element;
+
+type CodeInputProps = Omit<MaskedInputProps, 'maxLength'> & {
+    /** Chamado quando o último dígito entra — por digitação ou por colagem. */
+    onComplete?: (code: string) => void;
+    /** Quantidade de dígitos do código. */
+    length?: number;
+};
+/**
+ * Os dígitos do código, submetidos sozinhos.
+ *
+ * Um campo só, e não uma caixinha por dígito: colar é o caminho real. O botão do
+ * template de autenticação da Meta copia o código para a área de transferência, e
+ * quem usa o app instalado como PWA volta do WhatsApp e cola. Caixinhas quebram a
+ * colagem em navegador e atrapalham leitor de tela para não ganhar nada.
+ */
+declare function CodeInput({ value, onChange, onComplete, length, className, ...props }: CodeInputProps): react.JSX.Element;
+
+/** `000.000.000-00` enquanto se digita; para nos onze dígitos. */
+declare function formatCpf(input: string): string;
+/**
+ * Controle de CPF: só máscara. Não valida o dígito verificador, não se marca
+ * inválido e não anuncia nada — um CPF incompleto ainda não é um CPF errado.
+ * Quem usa valida, no envio ou no `onBlur` (repassado ao `<input>`, assim como o
+ * `ref`, para focar o campo), e entrega o erro ao `Field`, que o anuncia.
+ */
+declare function CpfInput({ value, onChange, ...props }: MaskedInputProps): react.JSX.Element;
+
 /**
  * O modal de confirmação: uma pergunta, uma decisão. Radix cuida do portal,
  * do foco preso e do Escape; aqui entram só a pele e a composição.
@@ -215,11 +253,6 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
 }
 declare function IconButton({ label, variant, size, className, type, children, ...props }: IconButtonProps): react.JSX.Element;
 
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
-    className?: string;
-}
-declare function Input({ className, id, type, ...props }: InputProps): react.JSX.Element;
-
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
     className?: string;
 }
@@ -483,13 +516,21 @@ interface TabsContentProps extends Omit<ComponentPropsWithoutRef<typeof Tabs$1.C
 declare function TabsContent({ className, children, ...props }: TabsContentProps): react.JSX.Element;
 
 type ToastVariant = 'default' | 'success' | 'danger';
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
 interface ToastOptions {
     title: string;
     description?: string;
     variant?: ToastVariant;
+    /** Botão do aviso. Presente, o aviso vira acionável. */
+    action?: ToastAction;
+    /** Quanto o aviso fica na tela; `null` o mantém até o usuário fechar. Ausente, 5 s. */
+    durationMs?: number | null;
 }
 interface ToastContextValue {
-    /** Dispara um aviso transitório; some sozinho depois de 5 segundos. */
+    /** Dispara um aviso; some sozinho em 5 segundos, salvo `durationMs`. */
     toast: (options: ToastOptions) => void;
 }
 /**
@@ -533,6 +574,17 @@ interface TooltipProps {
  */
 declare function Tooltip({ content, side, className, children }: TooltipProps): react.JSX.Element;
 
+/**
+ * O número como o brasileiro escreve, enquanto ele digita.
+ *
+ * A máscara é do campo e a validação é de quem o usa: o momento de dizer "número
+ * inválido" é uma decisão da tela — no envio, e não a cada tecla, porque um número
+ * incompleto ainda não é um número errado.
+ */
+declare function formatWhatsapp(input: string): string;
+/** Controle de WhatsApp: vive dentro de um `Field`, que dá rótulo, dica e erro. */
+declare function WhatsappInput({ value, onChange, ...props }: MaskedInputProps): react.JSX.Element;
+
 /**
  * O crachá — como um associado aparece na listagem.
  *
@@ -673,4 +725,4 @@ interface ThemeToggleProps {
  */
 declare function ThemeToggle({ width, className }: ThemeToggleProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, Badge, Banner, Button, Card, Checkbox, Cracha, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, EmptyState, Field, IconButton, Input, List, ListItem, Livreto, Popover, PopoverContent, PopoverTrigger, Predio, Progress, RadioGroup, RadioGroupItem, SearchField, SegmentedControl, type SegmentedControlOption, Select, SelectItem, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type Theme, ThemeProvider, ThemeToggle, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, VisuallyHidden, cn, initTheme, useFieldContext, useTheme, useToast };
+export { Avatar, AvatarGroup, Badge, Banner, Button, Card, Checkbox, CodeInput, CpfInput, Cracha, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, EmptyState, Field, IconButton, Input, List, ListItem, Livreto, Popover, PopoverContent, PopoverTrigger, Predio, Progress, RadioGroup, RadioGroupItem, SearchField, SegmentedControl, type SegmentedControlOption, Select, SelectItem, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type Theme, ThemeProvider, ThemeToggle, type ToastAction, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, VisuallyHidden, WhatsappInput, cn, formatCpf, formatWhatsapp, initTheme, useFieldContext, useTheme, useToast };

package/dist/index.js

@@ -483,6 +483,90 @@ function Checkbox({ label, className, id, ...props }) {
     /* @__PURE__ */ jsx("span", { className: "text-body text-text", children: label })
   ] });
 }
+
+// src/lib/digitos.ts
+function digitos(input, max) {
+  const apenasDigitos = input.replace(/\D/g, "");
+  return max === void 0 ? apenasDigitos : apenasDigitos.slice(0, max);
+}
+var fieldControlClasses = [
+  "w-full rounded-control squircle",
+  "bg-surface-sunken text-text text-body",
+  "placeholder:text-text-muted",
+  "border border-transparent",
+  "transition-[border-color,box-shadow] duration-(--motion-quick) ease-(--ease-out-soft)",
+  "outline-none focus-visible:outline-none",
+  "focus:border-accent focus:ring-4 focus:ring-accent/15",
+  "aria-invalid:border-danger aria-invalid:ring-4 aria-invalid:ring-danger/15",
+  "disabled:pointer-events-none disabled:opacity-50"
+].join(" ");
+function Input({ className, id, type, ...props }) {
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: id ?? field?.controlId,
+      type: type ?? "text",
+      "aria-invalid": field?.invalid || void 0,
+      "aria-describedby": field ? [field.errorId, field.hintId].filter(Boolean).join(" ") || void 0 : void 0,
+      className: cn(fieldControlClasses, "min-h-touch px-4", className),
+      ...props
+    }
+  );
+}
+function CodeInput({
+  value,
+  onChange,
+  onComplete,
+  length = 6,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      type: "text",
+      inputMode: "numeric",
+      autoComplete: "one-time-code",
+      value,
+      className: cn("text-center font-mono text-title-2 tracking-codigo", className),
+      onChange: (event) => {
+        const codigo = digitos(event.target.value, length);
+        onChange(codigo);
+        if (codigo.length === length && codigo !== value) {
+          onComplete?.(codigo);
+        }
+      }
+    }
+  );
+}
+function formatCpf(input) {
+  const numeros = digitos(input, 11);
+  if (numeros.length <= 3) {
+    return numeros;
+  }
+  if (numeros.length <= 6) {
+    return `${numeros.slice(0, 3)}.${numeros.slice(3)}`;
+  }
+  if (numeros.length <= 9) {
+    return `${numeros.slice(0, 3)}.${numeros.slice(3, 6)}.${numeros.slice(6)}`;
+  }
+  return `${numeros.slice(0, 3)}.${numeros.slice(3, 6)}.${numeros.slice(6, 9)}-${numeros.slice(9)}`;
+}
+function CpfInput({ value, onChange, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      type: "text",
+      inputMode: "numeric",
+      autoComplete: "off",
+      value,
+      onChange: (event) => onChange(formatCpf(event.target.value))
+    }
+  );
+}
 var Dialog = Dialog$1.Root;
 function DialogTrigger({ asChild = true, ...props }) {
   return /* @__PURE__ */ jsx(Dialog$1.Trigger, { asChild, ...props });
@@ -638,31 +722,6 @@ function IconButton({
     )
   );
 }
-var fieldControlClasses = [
-  "w-full rounded-control squircle",
-  "bg-surface-sunken text-text text-body",
-  "placeholder:text-text-muted",
-  "border border-transparent",
-  "transition-[border-color,box-shadow] duration-(--motion-quick) ease-(--ease-out-soft)",
-  "outline-none focus-visible:outline-none",
-  "focus:border-accent focus:ring-4 focus:ring-accent/15",
-  "aria-invalid:border-danger aria-invalid:ring-4 aria-invalid:ring-danger/15",
-  "disabled:pointer-events-none disabled:opacity-50"
-].join(" ");
-function Input({ className, id, type, ...props }) {
-  const field = useFieldContext();
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      id: id ?? field?.controlId,
-      type: type ?? "text",
-      "aria-invalid": field?.invalid || void 0,
-      "aria-describedby": field ? [field.errorId, field.hintId].filter(Boolean).join(" ") || void 0 : void 0,
-      className: cn(fieldControlClasses, "min-h-touch px-4", className),
-      ...props
-    }
-  );
-}
 function Textarea({ className, id, rows, ...props }) {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(
@@ -1215,6 +1274,7 @@ function ToastCard({ toast, onClose }) {
   return /* @__PURE__ */ jsxs(
     Toast.Root,
     {
+      duration: toast.durationMs === null ? Number.POSITIVE_INFINITY : toast.durationMs,
       onOpenChange: (open) => {
         if (!open) onClose();
       },
@@ -1227,10 +1287,27 @@ function ToastCard({ toast, onClose }) {
       ),
       children: [
         visual ? /* @__PURE__ */ jsx(visual.icon, { "aria-hidden": "true", className: cn("mt-0.5 size-5 shrink-0", visual.tint) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [
           /* @__PURE__ */ jsx(Toast.Title, { className: "text-subhead font-semibold", children: toast.title }),
           toast.description ? /* @__PURE__ */ jsx(Toast.Description, { className: "text-footnote text-text-secondary", children: toast.description }) : null
         ] }),
+        toast.action ? (
+          // `altText` é o que o leitor de tela anuncia como alternativa ao aviso, e o
+          // que o Radix exige para aceitar um aviso persistente com botão.
+          /* @__PURE__ */ jsx(
+            Toast.Action,
+            {
+              altText: toast.action.label,
+              onClick: toast.action.onClick,
+              className: cn(
+                "inline-flex min-h-touch shrink-0 items-center self-center rounded-control-sm px-3",
+                "text-subhead font-semibold text-accent",
+                "transition-colors duration-(--motion-quick) ease-(--ease-out-soft) hover:bg-accent/10"
+              ),
+              children: toast.action.label
+            }
+          )
+        ) : null,
         /* @__PURE__ */ jsx(
           Toast.Close,
           {
@@ -1301,6 +1378,32 @@ function Tooltip({ content, side, className, children }) {
     ] }) })
   );
 }
+function formatWhatsapp(input) {
+  const numeros = digitos(input, 11);
+  if (numeros.length <= 2) {
+    return numeros;
+  }
+  if (numeros.length <= 6) {
+    return `(${numeros.slice(0, 2)}) ${numeros.slice(2)}`;
+  }
+  if (numeros.length <= 10) {
+    return `(${numeros.slice(0, 2)}) ${numeros.slice(2, 6)}-${numeros.slice(6)}`;
+  }
+  return `(${numeros.slice(0, 2)}) ${numeros.slice(2, 7)}-${numeros.slice(7)}`;
+}
+function WhatsappInput({ value, onChange, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      type: "tel",
+      inputMode: "numeric",
+      autoComplete: "tel",
+      value,
+      onChange: (event) => onChange(formatWhatsapp(event.target.value))
+    }
+  );
+}
 var band = {
   terracota: "bg-terracota-soft",
   jardim: "bg-jardim-soft",
@@ -1591,4 +1694,4 @@ function ThemeToggle({ width, className }) {
   );
 }
 
-export { Avatar, AvatarGroup, Badge, Banner, Button, Card, Checkbox, Cracha, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, EmptyState, Field, IconButton, Input, List, ListItem, Livreto, Popover, PopoverContent, PopoverTrigger, Predio, Progress, RadioGroup, RadioGroupItem, SearchField, SegmentedControl, Select, SelectItem, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, ToastProvider, Tooltip, VisuallyHidden, cn, initTheme, useFieldContext, useTheme, useToast };
+export { Avatar, AvatarGroup, Badge, Banner, Button, Card, Checkbox, CodeInput, CpfInput, Cracha, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, EmptyState, Field, IconButton, Input, List, ListItem, Livreto, Popover, PopoverContent, PopoverTrigger, Predio, Progress, RadioGroup, RadioGroupItem, SearchField, SegmentedControl, Select, SelectItem, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, ToastProvider, Tooltip, VisuallyHidden, WhatsappInput, cn, formatCpf, formatWhatsapp, initTheme, useFieldContext, useTheme, useToast };

package/dist/theme.css

@@ -325,6 +325,12 @@
   --text-caption: 0.75rem;
   --text-caption--line-height: 1.34;
 
+  /*
+   * Seis dígitos num campo só precisam respirar para serem conferidos de relance
+   * contra o que chegou no WhatsApp. Espaçamento, não cor: sem par no escuro.
+   */
+  --tracking-codigo: 0.5em;
+
   /*
    * Raios generosos — a assinatura de forma do Assembleo. `control` para o que
    * se aperta, `surface` para o que contém, `expressive` para a camada lúdica.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assembleo/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Design system do Assembleo: tokens, componentes e a camada expressiva que dão cara ao produto.",
   "license": "UNLICENSED",
   "private": false,