@archbase/components 4.4.0 → 4.6.0

package/dist/buttons/ArchbaseSlideToConfirm.d.ts

@@ -0,0 +1,37 @@
+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 declare function ArchbaseSlideToConfirm({ label, successLabel, onConfirm, onError, width, height, disabled, resetAfter, threshold, className, 'aria-label': ariaLabel, }: ArchbaseSlideToConfirmProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/index.d.ts

@@ -2,3 +2,5 @@ export { ArchbaseActionButtons } from './ArchbaseActionButtons';
 export type { ArchbaseActionButtonsProps, ArchbaseActionButtonsOptions, ArchbaseAction, ActionButtonsCustomComponentsDefinition, } from './ArchbaseActionButtons';
 export { ArchbaseSpeedDial } from './ArchbaseSpeedDial';
 export type { ArchbaseSpeedDialProps, ArchbaseSpeedDialAction } from './ArchbaseSpeedDial';
+export { ArchbaseSlideToConfirm } from './ArchbaseSlideToConfirm';
+export type { ArchbaseSlideToConfirmProps, ArchbaseSlideToConfirmStatus, } from './ArchbaseSlideToConfirm';

package/dist/display/ArchbaseDeviceFrame.d.ts

@@ -0,0 +1,41 @@
+import { CSSProperties, ReactNode } from 'react';
+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;
+}
+/**
+ * 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 declare function ArchbaseDeviceFrame({ children, variant, width, frameColor, showNotch, showButtons, shadow, 'aria-label': ariaLabel, className, style, }: ArchbaseDeviceFrameProps): import("react/jsx-runtime").JSX.Element;

package/dist/display/ArchbaseGlowingCards.d.ts

@@ -0,0 +1,46 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface ArchbaseGlowingCardsProps {
+    children: ReactNode;
+    /** Raio do brilho que acompanha o ponteiro, em pixels. */
+    glowRadius?: number;
+    /** Opacidade do brilho, entre 0 e 1. */
+    glowOpacity?: number;
+    gap?: number | string;
+    /** Colunas fixas. Ausente, ajusta ao espaco disponivel. */
+    columns?: number;
+    /** Largura minima do cartao quando as colunas sao automaticas. */
+    minCardWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface ArchbaseGlowingCardProps {
+    children: ReactNode;
+    /** Cor do brilho deste cartao. */
+    glowColor?: string;
+    /** Eleva o cartao ao passar o ponteiro. */
+    hoverEffect?: boolean;
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Grade de cartoes com um unico brilho que atravessa todos, acompanhando o
+ * ponteiro.
+ *
+ * Adaptado de Lightswind UI (MIT, Muhilan / codewithMUHILAN).
+ *
+ * A posicao do ponteiro e publicada em custom properties no container, e cada
+ * cartao publica o proprio deslocamento dentro dele. O gradiente subtrai um do
+ * outro, o que faz o foco atravessar a grade como uma luz unica em vez de
+ * acender dentro de cada cartao isoladamente.
+ *
+ * Nada disso passa por estado do React: mover o ponteiro sobre uma grade grande
+ * nao dispara render. O original recalculava estado por evento, o que
+ * transforma um enfeite em travamento quando os cartoes se multiplicam.
+ */
+export declare function ArchbaseGlowingCards({ children, glowRadius, glowOpacity, gap, columns, minCardWidth, className, style, }: ArchbaseGlowingCardsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Cartao do grupo. Fora de `ArchbaseGlowingCards` continua valido — apenas sem
+ * o brilho, porque as custom properties nao existem.
+ */
+export declare function ArchbaseGlowingCard({ children, glowColor, hoverEffect, onClick, className, style, }: ArchbaseGlowingCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/display/index.d.ts

@@ -26,3 +26,7 @@ export { ArchbaseLightbox, ArchbaseLightboxProvider, useArchbaseLightbox, useArc
 export type { ArchbaseLightboxProps, ArchbaseLightboxSlide, ArchbaseLightboxProviderProps, UseArchbaseLightboxReturn, } from './ArchbaseLightbox';
 export { ArchbasePhotoAlbum } from './ArchbasePhotoAlbum';
 export type { ArchbasePhotoAlbumProps, ArchbasePhotoAlbumPhoto, ArchbasePhotoAlbumLayout, } from './ArchbasePhotoAlbum';
+export { ArchbaseGlowingCards, ArchbaseGlowingCard } from './ArchbaseGlowingCards';
+export type { ArchbaseGlowingCardsProps, ArchbaseGlowingCardProps, } from './ArchbaseGlowingCards';
+export { ArchbaseDeviceFrame } from './ArchbaseDeviceFrame';
+export type { ArchbaseDeviceFrameProps, ArchbaseDeviceVariant } from './ArchbaseDeviceFrame';

package/dist/feedback/ArchbaseStickyTopBar.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { MantineColor } from '@mantine/core';
+export interface ArchbaseStickyTopBarProps {
+    children: ReactNode;
+    /**
+     * Visibilidade controlada. Ignorada quando `showOnScroll` esta ligado.
+     */
+    visible?: boolean;
+    /** Aparece depois de rolar; util para barra de acao que so importa adiante. */
+    showOnScroll?: boolean;
+    /** Rolagem, em pixels, a partir da qual a barra aparece. */
+    scrollThreshold?: number;
+    /** Botao de fechar. */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /**
+     * Chave de persistencia da dispensa. Definida, a barra nao volta a aparecer
+     * para quem ja a fechou — mensagem de sistema que reaparece a cada
+     * navegacao vira ruido e ensina o usuario a ignorar o lugar todo.
+     */
+    dismissStorageKey?: string;
+    color?: MantineColor;
+    /** Fixa no topo da janela. Desligado, acompanha o fluxo da pagina. */
+    sticky?: boolean;
+    /** Altura reservada, em pixels. */
+    height?: number;
+    zIndex?: number;
+    /**
+     * Papel semantico. `status` para informacao passageira; `region` para
+     * conteudo que o usuario pode querer reencontrar.
+     */
+    role?: 'status' | 'region' | 'alert';
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * Barra fixa no topo, para aviso de sistema ou acao contextual.
+ *
+ * Adaptado de Lightswind UI (MIT, Muhilan / codewithMUHILAN), com o que faltava
+ * para uso em produto:
+ *
+ * - **Dispensavel, com memoria opcional.** O original nao fechava. Aviso que
+ *   nao se fecha e o usuario cobre com a mao.
+ * - **Semantica.** Era um `div` mudo; agora recebe papel e rotulo, e um leitor
+ *   de tela anuncia a mensagem quando ela chega.
+ * - **`useSyncExternalStore` nao entra aqui, mas o listener de rolagem e
+ *   passivo** — sem isso o navegador nao pode adiantar a rolagem enquanto o
+ *   manipulador roda.
+ * - **Movimento reduzido** troca o deslize por aparecer e sumir.
+ */
+export declare function ArchbaseStickyTopBar({ children, visible, showOnScroll, scrollThreshold, dismissible, onDismiss, dismissStorageKey, color, sticky, height, zIndex, role, 'aria-label': ariaLabel, className, }: ArchbaseStickyTopBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/feedback/index.d.ts

@@ -8,3 +8,5 @@ export { ArchbaseDataGridSkeleton, ArchbaseFormSkeleton, ArchbaseCardSkeleton, A
 export type { ArchbaseDataGridSkeletonProps, ArchbaseFormSkeletonProps, ArchbaseCardSkeletonProps, ArchbaseKanbanSkeletonProps, ArchbaseListSkeletonProps, } from './ArchbaseSkeleton';
 export { ArchbaseRipple, useArchbaseRipple } from './ArchbaseRipple';
 export type { ArchbaseRippleProps, UseArchbaseRippleOptions, UseArchbaseRippleReturn } from './ArchbaseRipple';
+export { ArchbaseStickyTopBar } from './ArchbaseStickyTopBar';
+export type { ArchbaseStickyTopBarProps } from './ArchbaseStickyTopBar';