@archbase/components 4.3.2 → 4.6.0

package/dist/list/ArchbaseReorderList.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+export interface ArchbaseReorderListProps<T> {
+    /** Itens na ordem corrente. Componente controlado. */
+    items: T[];
+    /** Identidade estavel do item. */
+    getItemId: (item: T) => string | number;
+    /** Nova ordem. Sem isto o componente nao teria como refletir o arrasto. */
+    onReorder: (items: T[]) => void;
+    /** Conteudo do item. Ausente, usa `getItemLabel`. */
+    renderItem?: (item: T, estado: {
+        arrastando: boolean;
+        indice: number;
+    }) => ReactNode;
+    /** Rotulo textual, usado no conteudo padrao e nos anuncios de acessibilidade. */
+    getItemLabel?: (item: T) => string;
+    /** Descricao secundaria no conteudo padrao. */
+    getItemDescription?: (item: T) => string | undefined;
+    onRemove?: (item: T) => void;
+    disabled?: boolean;
+    gap?: number;
+    className?: string;
+    labels?: {
+        dragHandle?: string;
+        remove?: string;
+        /** `{item}`, `{de}` e `{para}` sao substituidos. */
+        moved?: string;
+        instructions?: string;
+    };
+}
+/**
+ * Lista reordenavel por arrasto e por teclado.
+ *
+ * Unifica dois componentes do Lightswind UI (MIT, Muhilan / codewithMUHILAN) —
+ * `drag-order-list` e `draggable-reorder-list` — que resolviam o mesmo problema
+ * com implementacoes diferentes. Entregar os dois seria oferecer duas respostas
+ * para uma pergunta.
+ *
+ * Diferencas em relacao aos originais:
+ *
+ * - **Reordenacao por teclado.** Arrastar e, por natureza, inacessivel: quem
+ *   navega por teclado nao tem gesto equivalente. Aqui `Alt+Setas` move o item
+ *   focado, e cada movimento e anunciado por regiao viva. Sem isso, a
+ *   funcionalidade simplesmente nao existe para parte dos usuarios.
+ * - **Controlado.** O original copiava `items` para estado interno e disparava
+ *   `onReorder` num efeito com `[list]` na dependencia — o que notificava ja na
+ *   montagem, sem ninguem ter reordenado nada, e ignorava mudancas vindas de
+ *   fora depois disso.
+ * - **Generico.** O `drag-order-list` fixava a forma do item em `{ title,
+ *   subtitle, date, link }`. Numa biblioteca isso obriga o consumidor a
+ *   traduzir o dominio dele para um formato alheio.
+ */
+export declare function ArchbaseReorderList<T>({ items, getItemId, onReorder, renderItem, getItemLabel, getItemDescription, onRemove, disabled, gap, className, labels, }: ArchbaseReorderListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/list/index.d.ts

@@ -8,3 +8,5 @@ export { ArchbaseListContext };
 export * from './treeview';
 export { ArchbaseTreeList } from './ArchbaseTreeList';
 export type { ArchbaseTreeListProps, ArchbaseTreeListColumn } from './ArchbaseTreeList';
+export { ArchbaseReorderList } from './ArchbaseReorderList';
+export type { ArchbaseReorderListProps } from './ArchbaseReorderList';

package/dist/navigation/ArchbaseMagnifyDock.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+export interface ArchbaseMagnifyDockItem {
+    id: string;
+    /** Icone do item. */
+    icon: ReactNode;
+    /** Nome acessivel e texto da dica. Obrigatorio: item so com icone e mudo. */
+    label: string;
+    onClick?: () => void;
+    /** Contador exibido no canto. Zero ou ausente nao mostra nada. */
+    badge?: number;
+    disabled?: boolean;
+}
+export interface ArchbaseMagnifyDockProps {
+    items: ArchbaseMagnifyDockItem[];
+    /** Tamanho do item em repouso, em pixels. */
+    baseSize?: number;
+    /** Tamanho maximo sob o ponteiro. */
+    magnification?: number;
+    /** Alcance da magnificacao, em pixels. */
+    distance?: number;
+    spring?: {
+        mass: number;
+        stiffness: number;
+        damping: number;
+    };
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * Barra de icones com magnificacao sob o ponteiro, no estilo do dock do macOS.
+ *
+ * Adaptado de Lightswind UI (MIT, Muhilan / codewithMUHILAN).
+ *
+ * Nao confundir com `ArchbaseDockLayout`, que e layout de paineis acoplaveis —
+ * conceitos distintos que a palavra "dock" une por acidente.
+ *
+ * Correcoes em relacao ao original:
+ *
+ * - Os itens eram `div` com `role="button"` e `tabIndex={0}`, mas **sem
+ *   tratador de teclado**: recebiam foco e nao faziam nada com Enter ou Espaco.
+ *   Aqui sao `<button>` de verdade, e o comportamento vem do navegador.
+ * - Item so com icone nao tinha nome acessivel — o leitor anunciava "botao" e
+ *   nada mais. `label` agora e obrigatorio e vira o nome.
+ * - O original marcava `aria-haspopup="true"` em todos, o que promete um menu
+ *   que nao existe.
+ * - A magnificacao e desligada sob `prefers-reduced-motion`; a barra continua
+ *   inteiramente utilizavel, apenas sem o efeito.
+ */
+export declare function ArchbaseMagnifyDock({ items, baseSize, magnification, distance, spring, className, 'aria-label': ariaLabel, }: ArchbaseMagnifyDockProps): import("react/jsx-runtime").JSX.Element;

package/dist/navigation/index.d.ts

@@ -13,3 +13,5 @@ export { ArchbaseSpotlight, useArchbaseSpotlight } from './ArchbaseSpotlight';
 export type { ArchbaseSpotlightProps, SpotlightAction, UseArchbaseSpotlightOptions, } from './ArchbaseSpotlight';
 export { ArchbaseKeyboardShortcutsProvider, ArchbaseKeyboardShortcutsModal, ArchbaseShortcutHint, useArchbaseKeyboardShortcuts, useArchbaseRegisterShortcut, useArchbaseShortcutScope, } from './ArchbaseKeyboardShortcuts';
 export type { KeyboardShortcut, ArchbaseKeyboardShortcutsContextValue, ArchbaseKeyboardShortcutsProviderProps, ArchbaseKeyboardShortcutsModalProps, UseArchbaseRegisterShortcutOptions, UseArchbaseShortcutScopeReturn, ArchbaseShortcutHintProps, } from './ArchbaseKeyboardShortcuts';
+export { ArchbaseMagnifyDock } from './ArchbaseMagnifyDock';
+export type { ArchbaseMagnifyDockProps, ArchbaseMagnifyDockItem } from './ArchbaseMagnifyDock';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/components",
-  "version": "4.3.2",
+  "version": "4.6.0",
   "description": "UI Components for Archbase React v3 - Form editors, data visualization, and business components",
   "author": "Edson Martins <edsonmartins2005@gmail.com>",
   "license": "MIT",
@@ -118,9 +118,9 @@
     "vis-timeline": "^7.7.3",
     "xlsx": "^0.18.5",
     "yet-another-react-lightbox": "^3.21.0",
-    "@archbase/core": "4.3.2",
-    "@archbase/data": "4.3.2",
-    "@archbase/layout": "4.3.2"
+    "@archbase/core": "4.6.0",
+    "@archbase/data": "4.6.0",
+    "@archbase/layout": "4.6.0"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

package/src/buttons/ArchbaseSlideToConfirm.tsx

@@ -0,0 +1,250 @@
+import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from 'react';
+import { Box, Loader, Text, useMantineTheme } from '@mantine/core';
+import { IconArrowRight, IconCheck } from '@tabler/icons-react';
+import { motion, useMotionValue, useTransform, animate } from 'framer-motion';
+
+export type ArchbaseSlideToConfirmStatus = 'idle' | 'loading' | 'success' | 'error';
+
+export interface ArchbaseSlideToConfirmProps {
+  /** Texto exibido antes da confirmacao. */
+  label?: string;
+  /** Texto exibido apos confirmar. */
+  successLabel?: string;
+  /** Executada ao completar o gesto. Rejeitar volta o controle ao inicio. */
+  onConfirm: () => Promise<void> | void;
+  /** Chamada quando `onConfirm` rejeita. */
+  onError?: (erro: unknown) => void;
+  width?: number;
+  height?: number;
+  disabled?: boolean;
+  /** Volta ao estado inicial apos confirmar, em milissegundos. Zero mantem. */
+  resetAfter?: number;
+  /** Fracao do curso necessaria para confirmar, entre 0 e 1. */
+  threshold?: number;
+  className?: string;
+  'aria-label'?: string;
+}
+
+/**
+ * Confirmacao por deslize, para acoes destrutivas ou irreversiveis.
+ *
+ * Adaptado de Lightswind UI (MIT, Muhilan / codewithMUHILAN).
+ *
+ * A diferenca principal nao e visual. O original era um `div` arrastavel: quem
+ * navega por teclado ou usa leitor de tela **nao conseguia confirmar** — num
+ * controle cuja unica funcao e confirmar. Aqui ele e um `slider` de verdade:
+ *
+ * - `role="slider"` com `aria-valuenow`, entao o leitor anuncia o progresso;
+ * - setas movem o polegar, `Home`/`End` vao aos extremos, `End` confirma;
+ * - `Enter` e `Espaco` confirmam direto, para quem so quer executar a acao.
+ *
+ * O gesto continua sendo a defesa contra o clique acidental — o teclado apenas
+ * deixa de ser excluido dela.
+ */
+export function ArchbaseSlideToConfirm({
+  label = 'Deslize para confirmar',
+  successLabel = 'Confirmado',
+  onConfirm,
+  onError,
+  width = 320,
+  height = 56,
+  disabled = false,
+  resetAfter = 0,
+  threshold = 0.9,
+  className,
+  'aria-label': ariaLabel,
+}: ArchbaseSlideToConfirmProps) {
+  const theme = useMantineTheme();
+  const [status, setStatus] = useState<ArchbaseSlideToConfirmStatus>('idle');
+
+  const curso = width - height;
+  const tamanhoPolegar = height - 8;
+
+  const x = useMotionValue(0);
+  const opacidadeTexto = useTransform(x, [0, curso * 0.5], [1, 0]);
+  const larguraPreenchida = useTransform(x, [0, curso], [height, width]);
+  const montado = useRef(true);
+
+  useEffect(() => {
+    montado.current = true;
+    return () => {
+      montado.current = false;
+    };
+  }, []);
+
+  const voltarAoInicio = useCallback(() => {
+    animate(x, 0, { type: 'spring', stiffness: 400, damping: 30 });
+  }, [x]);
+
+  const confirmar = useCallback(async () => {
+    if (status !== 'idle' || disabled) return;
+
+    animate(x, curso, { type: 'spring', stiffness: 400, damping: 30 });
+    setStatus('loading');
+
+    try {
+      await onConfirm();
+      // A acao pode terminar depois que o componente saiu da tela; atualizar
+      // estado ai dispara aviso do React e nao serve a ninguem.
+      if (!montado.current) return;
+      setStatus('success');
+
+      if (resetAfter > 0) {
+        window.setTimeout(() => {
+          if (!montado.current) return;
+          setStatus('idle');
+          voltarAoInicio();
+        }, resetAfter);
+      }
+    } catch (erro) {
+      if (!montado.current) return;
+      setStatus('error');
+      voltarAoInicio();
+      // O original engolia a falha e voltava ao inicio sem sinal. Quem confirmou
+      // ficava sem saber se a acao aconteceu.
+      onError?.(erro);
+      window.setTimeout(() => {
+        if (montado.current) setStatus('idle');
+      }, 1200);
+    }
+  }, [status, disabled, curso, x, onConfirm, onError, resetAfter, voltarAoInicio]);
+
+  const aoSoltar = useCallback(() => {
+    if (status !== 'idle') return;
+    if (x.get() >= curso * threshold) void confirmar();
+    else voltarAoInicio();
+  }, [status, x, curso, threshold, confirmar, voltarAoInicio]);
+
+  const aoTeclar = useCallback(
+    (evento: KeyboardEvent<HTMLDivElement>) => {
+      if (status !== 'idle' || disabled) return;
+      const passo = curso / 10;
+
+      switch (evento.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          evento.preventDefault();
+          animate(x, Math.min(curso, x.get() + passo), { duration: 0.12 });
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          evento.preventDefault();
+          animate(x, Math.max(0, x.get() - passo), { duration: 0.12 });
+          break;
+        case 'Home':
+          evento.preventDefault();
+          voltarAoInicio();
+          break;
+        case 'End':
+        case 'Enter':
+        case ' ':
+          evento.preventDefault();
+          void confirmar();
+          break;
+        default:
+          break;
+      }
+    },
+    [status, disabled, curso, x, confirmar, voltarAoInicio],
+  );
+
+  const corSucesso = theme.colors.green?.[6] ?? '#22c55e';
+  const corPrimaria = theme.colors[theme.primaryColor]?.[6] ?? '#228be6';
+  const concluido = status === 'success';
+
+  return (
+    <Box
+      className={className}
+      role="slider"
+      tabIndex={disabled ? -1 : 0}
+      aria-label={ariaLabel ?? label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={concluido ? 100 : 0}
+      aria-valuetext={concluido ? successLabel : label}
+      aria-disabled={disabled}
+      aria-busy={status === 'loading'}
+      onKeyDown={aoTeclar}
+      style={{
+        position: 'relative',
+        width,
+        height,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        userSelect: 'none',
+        borderRadius: height / 2,
+        border: `1px solid ${concluido ? corSucesso : 'var(--mantine-color-default-border)'}`,
+        background: 'var(--mantine-color-default)',
+        opacity: disabled ? 0.6 : 1,
+        cursor: disabled ? 'not-allowed' : undefined,
+      }}
+    >
+      <motion.div
+        aria-hidden
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          height: '100%',
+          borderRadius: height / 2,
+          width: concluido ? width : larguraPreenchida,
+          backgroundColor: concluido ? corSucesso : corPrimaria,
+          opacity: concluido ? 0.16 : 0.08,
+        }}
+      />
+
+      <motion.span
+        style={{
+          position: 'absolute',
+          opacity: status === 'idle' ? opacidadeTexto : 0,
+          pointerEvents: 'none',
+        }}
+      >
+        <Text size="sm" fw={500} c="dimmed">
+          {label}
+        </Text>
+      </motion.span>
+
+      {concluido && (
+        <Text size="sm" fw={500} style={{ position: 'absolute' }} c={corSucesso}>
+          {successLabel}
+        </Text>
+      )}
+
+      <motion.div
+        drag={status === 'idle' && !disabled ? 'x' : false}
+        dragConstraints={{ left: 0, right: curso }}
+        dragElastic={0.05}
+        dragMomentum={false}
+        onDragEnd={aoSoltar}
+        whileTap={{ scale: status === 'idle' && !disabled ? 0.95 : 1 }}
+        style={{
+          position: 'absolute',
+          left: 4,
+          zIndex: 1,
+          x,
+          width: tamanhoPolegar,
+          height: tamanhoPolegar,
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: concluido ? corSucesso : 'var(--mantine-color-body)',
+          color: concluido ? '#fff' : undefined,
+          boxShadow: 'var(--mantine-shadow-sm)',
+          cursor: disabled ? 'not-allowed' : status === 'idle' ? 'grab' : 'default',
+        }}
+      >
+        {status === 'loading' ? (
+          <Loader size="xs" />
+        ) : concluido ? (
+          <IconCheck size={20} />
+        ) : (
+          <IconArrowRight size={20} opacity={0.7} />
+        )}
+      </motion.div>
+    </Box>
+  );
+}

package/src/buttons/index.ts

@@ -8,3 +8,9 @@ export type {
 
 export { ArchbaseSpeedDial } from './ArchbaseSpeedDial';
 export type { ArchbaseSpeedDialProps, ArchbaseSpeedDialAction } from './ArchbaseSpeedDial';
+
+export { ArchbaseSlideToConfirm } from './ArchbaseSlideToConfirm';
+export type {
+  ArchbaseSlideToConfirmProps,
+  ArchbaseSlideToConfirmStatus,
+} from './ArchbaseSlideToConfirm';

package/src/display/ArchbaseDeviceFrame.tsx

@@ -0,0 +1,172 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { useMantineColorScheme } from '@mantine/core';
+
+export type ArchbaseDeviceVariant = 'phone' | 'tablet' | 'desktop';
+
+export interface ArchbaseDeviceFrameProps {
+  /** Conteudo exibido na tela. Aceita imagem, video ou aplicacao viva. */
+  children?: ReactNode;
+  variant?: ArchbaseDeviceVariant;
+  /** Largura da moldura em pixels. A altura segue a proporcao do aparelho. */
+  width?: number;
+  /** Cor do corpo. Ausente, acompanha o esquema de cor. */
+  frameColor?: string;
+  /** Recorte superior (a "ilha"), so em telefone. */
+  showNotch?: boolean;
+  /** Botoes laterais desenhados no corpo. */
+  showButtons?: boolean;
+  shadow?: boolean;
+  /** Descricao para leitores de tela. A moldura em si e decorativa. */
+  'aria-label'?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+interface Perfil {
+  /** Altura dividida pela largura. */
+  proporcao: number;
+  /** Espessura do corpo em torno da tela, em pixels. */
+  moldura: number;
+  /** Arredondamento externo. */
+  raio: number;
+  notch: boolean;
+}
+
+const PERFIS: Record<ArchbaseDeviceVariant, Perfil> = {
+  phone: { proporcao: 2.16, moldura: 12, raio: 44, notch: true },
+  tablet: { proporcao: 1.4, moldura: 16, raio: 28, notch: false },
+  desktop: { proporcao: 0.62, moldura: 14, raio: 12, notch: false },
+};
+
+/**
+ * Moldura de aparelho para apresentar uma tela.
+ *
+ * Inspirado no `iphone16-pro` de Lightswind UI (MIT, Muhilan /
+ * codewithMUHILAN). Tres diferencas deliberadas:
+ *
+ * - **Nome generico.** Componente de biblioteca batizado de um modelo especifico
+ *   envelhece junto com o modelo; `variant` cobre telefone, tablet e monitor.
+ * - **HTML e CSS, nao SVG.** O original recortava a tela com `clipPath` e so
+ *   aceitava `src` de imagem ou video. Aqui a tela e um elemento comum, entao
+ *   cabe qualquer conteudo — inclusive a aplicacao rodando de verdade, que e o
+ *   uso mais interessante numa demonstracao.
+ * - **Cores por prop, nao por classe montada em runtime.** O original fazia
+ *   `className={`fill-${frameColor}`}`; o compilador do Tailwind nao enxerga
+ *   classe formada em execucao, entao aquelas regras nunca chegavam ao CSS e a
+ *   prop de cor nao surtia efeito em build de producao.
+ *
+ * O `clipPath` do original tambem usava `id="screen"` fixo — duas molduras na
+ * mesma pagina colidiam. Sem SVG, o problema deixa de existir.
+ */
+export function ArchbaseDeviceFrame({
+  children,
+  variant = 'phone',
+  width = 320,
+  frameColor,
+  showNotch,
+  showButtons = true,
+  shadow = true,
+  'aria-label': ariaLabel,
+  className,
+  style,
+}: ArchbaseDeviceFrameProps) {
+  const { colorScheme } = useMantineColorScheme();
+  const perfil = PERFIS[variant];
+
+  const altura = Math.round(width * perfil.proporcao);
+  const corDoCorpo =
+    frameColor ?? (colorScheme === 'dark' ? 'var(--mantine-color-dark-4)' : '#1f2937');
+  const exibirNotch = showNotch ?? perfil.notch;
+
+  return (
+    <div
+      className={className}
+      // A moldura e decoracao; quem carrega significado e o conteudo. Com
+      // rotulo, vira uma figura descritivel.
+      role={ariaLabel ? 'figure' : undefined}
+      aria-label={ariaLabel}
+      style={{
+        position: 'relative',
+        width,
+        height: altura,
+        borderRadius: perfil.raio,
+        background: corDoCorpo,
+        padding: perfil.moldura,
+        boxShadow: shadow ? 'var(--mantine-shadow-xl)' : undefined,
+        boxSizing: 'border-box',
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          borderRadius: Math.max(4, perfil.raio - perfil.moldura),
+          overflow: 'hidden',
+          background: 'var(--mantine-color-body)',
+        }}
+      >
+        {children}
+
+        {exibirNotch && (
+          <div
+            aria-hidden
+            style={{
+              position: 'absolute',
+              top: 8,
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: Math.round(width * 0.3),
+              height: Math.round(width * 0.085),
+              borderRadius: 999,
+              background: corDoCorpo,
+              zIndex: 2,
+            }}
+          />
+        )}
+      </div>
+
+      {showButtons && variant !== 'desktop' && (
+        <>
+          <div aria-hidden style={botaoLateral(corDoCorpo, altura * 0.14, altura * 0.22, 'left')} />
+          <div aria-hidden style={botaoLateral(corDoCorpo, altura * 0.09, altura * 0.38, 'left')} />
+          <div aria-hidden style={botaoLateral(corDoCorpo, altura * 0.13, altura * 0.3, 'right')} />
+        </>
+      )}
+
+      {variant === 'desktop' && (
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            bottom: -14,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: width * 0.28,
+            height: 14,
+            borderRadius: '0 0 6px 6px',
+            background: corDoCorpo,
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function botaoLateral(
+  cor: string,
+  comprimento: number,
+  deslocamento: number,
+  lado: 'left' | 'right',
+): CSSProperties {
+  return {
+    position: 'absolute',
+    [lado]: -3,
+    top: deslocamento,
+    width: 3,
+    height: comprimento,
+    borderRadius: 2,
+    background: cor,
+  };
+}