@apollion-dsi/core 3.0.0

package/lib/containers/Flex/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Barrel público do container `Flex`.
+ *
+ * Reexporta o styled-component (renomeando `DefaultFlexStyle` → `Flex`),
+ * a sua versão animada (`AnimatedFlex`) e as interfaces de props
+ * (`FlexPropsInterface`, `DefaultFlexInterface`).
+ *
+ * Qualquer outro arquivo do projeto deve importar do barrel, nunca de
+ * paths internos como `./Flex.style` ou `./Flex.interface`.
+ */
+export * from './Flex.interface';
+export { DefaultFlexStyle as Flex, AnimatedFlex } from './Flex.style';

package/lib/containers/Flex/index.esm.js

@@ -0,0 +1 @@
+import{a,b}from"../../chunks/chunk-VTRVGJA6.esm.js";import"../../chunks/chunk-WTWPQ4EL.esm.js";import"../../chunks/chunk-5OKRFXLL.esm.js";import"../../chunks/chunk-ELYUJKST.esm.js";import"../../chunks/chunk-TGTH3E4X.esm.js";import"../../chunks/chunk-752Z7BQF.esm.js";import"../../chunks/chunk-BNB3KNKE.esm.js";import"../../chunks/chunk-W663AGNE.esm.js";import"../../chunks/chunk-A6Z2M2XU.esm.js";import"../../chunks/chunk-U27SLYIV.esm.js";import"../../chunks/chunk-JB7G6UGV.esm.js";import"../../chunks/chunk-GP7NECT4.esm.js";import"../../chunks/chunk-WAHR5LIT.esm.js";import"../../chunks/chunk-QUHHEZMP.esm.js";import"../../chunks/chunk-44EW3LMK.esm.js";import"../../chunks/chunk-OEH5ARPF.esm.js";import"../../chunks/chunk-V5AWVNU6.esm.js";import"../../chunks/chunk-GZONWSRB.esm.js";export{b as AnimatedFlex,a as Flex};

package/lib/containers/Grid/Grid.interface.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { BreakpointTypes } from '../../themes/Breakpoints';
+import { SpacingInterface } from '../../themes/Spacing';
+import { Theme } from '../../themes/ThemeProvider';
+import { BaseContainerProps } from '../Base';
+/**
+ * Breakpoints aceitos pela prop `medias` do `Grid`.
+ *
+ * Reflete os breakpoints declarados no tema (`xs`, `sm`, `md`, `lg`, `xl`).
+ * Cada chave é uma media query — a configuração em `xs` é tratada como
+ * estilo padrão (mobile-first), as demais são empilhadas via `min-width`.
+ */
+export type GridMediasTypes = BreakpointTypes;
+/**
+ * Aliase do conjunto de espaçamentos do tema, usado em `gap`, `columnGap`
+ * e `rowGap` do Grid.
+ */
+export type GridSpacingTypes = SpacingInterface;
+/**
+ * Conjunto de propriedades de grid aceitas por cada breakpoint.
+ *
+ * - `columns`/`rows`: equivalente a `grid-template-columns`/`-rows`.
+ * - `areas`: equivalente a `grid-template-areas`.
+ * - `gap`, `columnGap`, `rowGap`: gap do grid em tokens do tema.
+ */
+export type GridMediaInterface = {
+    breakpoint?: string;
+    columns?: string;
+    rows?: string;
+    areas?: string;
+    columnGap?: GridSpacingTypes;
+    rowGap?: GridSpacingTypes;
+    gap?: GridSpacingTypes;
+};
+/**
+ * Mapeamento de breakpoint → configuração de grid.
+ *
+ * Permite tanto passar uma config "flat" (sem chave `xs`, aplicada como
+ * padrão) quanto um objeto com chaves por breakpoint.
+ */
+export type GridBreakpoints = Partial<Record<GridMediasTypes, GridMediaInterface>> & GridMediaInterface;
+/**
+ * Props do `Grid` antes das props nativas de `<div>`.
+ *
+ * Estende {@link BaseContainerProps} para herdar todas as factory props
+ * (espaçamento, cor, bordas, etc.) e adiciona `medias` para configurar
+ * o grid por breakpoint.
+ */
+export interface GridPropsInterface extends BaseContainerProps {
+    /**
+     * Configuração responsiva do grid. Aceita tanto uma config "flat"
+     * (aplicada como padrão) quanto um objeto com chaves por breakpoint
+     * (`xs`, `sm`, `md`, ...). Considere `xs` como mobile-first.
+     *
+     * @example
+     * ```tsx
+     * <Grid medias={{ xs: { columns: '1fr', areas: '"a"' }, md: { columns: '1fr 2fr', areas: '"a b"' } }} />
+     * ```
+     */
+    medias?: GridBreakpoints;
+    children?: ReactNode;
+}
+/**
+ * Props completas aceitas pelo `<Grid>` em runtime. Une as props da
+ * factory ({@link GridPropsInterface}) com as props nativas de `<div>`
+ * (menos `children`, que vem da factory).
+ */
+export interface DefaultGridInterface extends GridPropsInterface, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+}
+/**
+ * Props que chegam às funções de styled-components do Grid. Equivale a
+ * {@link DefaultGridInterface} com o `theme` injetado pelo `ThemeProvider`.
+ *
+ * Usada apenas em `Grid.style.ts`.
+ */
+export interface GridStyleProps extends DefaultGridInterface {
+    theme: Theme;
+}

package/lib/containers/Grid/Grid.style.d.ts

@@ -0,0 +1,26 @@
+import { CSSObject } from 'styled-components';
+import { DefaultGridInterface, GridStyleProps } from './Grid.interface';
+/**
+ * Monta o CSS responsivo a partir de `medias`.
+ *
+ * - Quando `medias` não tem a chave `xs`, trata o objeto inteiro como
+ *   uma config "flat" e aplica-a sem media query.
+ * - Quando há chaves de breakpoint, gera um `@media (min-width:…)` para
+ *   cada uma usando `theme.breakpoints.up(media)`. O breakpoint `xs` é
+ *   considerado mobile-first.
+ */
+export declare const setGridBreakpoints: ({ medias, theme }: GridStyleProps) => CSSObject;
+/**
+ * Container `grid` do design system. Estende {@link BaseContainer},
+ * herdando todas as factory props, e aplica `display: grid` e o CSS
+ * responsivo gerado por {@link setGridBreakpoints}.
+ *
+ * Exposto como `Grid` no barrel.
+ */
+export declare const DefaultGridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("../..").ApollionProps & {
+    as?: import("styled-components").WebTarget;
+    forwardedAs?: import("styled-components").WebTarget;
+}, keyof DefaultGridInterface> & DefaultGridInterface, never> & Partial<Pick<import("styled-components").FastOmit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("../..").ApollionProps & {
+    as?: import("styled-components").WebTarget;
+    forwardedAs?: import("styled-components").WebTarget;
+}, keyof DefaultGridInterface> & DefaultGridInterface, never>>> & string;

package/lib/containers/Grid/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Barrel público do container `Grid`.
+ *
+ * Reexporta o styled-component (renomeando `DefaultGridStyle` → `Grid`),
+ * as interfaces de props (`GridPropsInterface`, `DefaultGridInterface`,
+ * `GridBreakpoints`, ...) e o helper `setGridBreakpoints` — usado pelos
+ * testes e por componentes que precisam compor breakpoints.
+ *
+ * Qualquer outro arquivo do projeto deve importar do barrel, nunca de
+ * paths internos como `./Grid.style` ou `./Grid.interface`.
+ */
+export * from './Grid.interface';
+export * from './Grid.style';
+export { DefaultGridStyle as Grid } from './Grid.style';

package/lib/containers/Grid/index.esm.js

@@ -0,0 +1 @@
+import{a,b}from"../../chunks/chunk-DEAAQK5J.esm.js";import"../../chunks/chunk-WTWPQ4EL.esm.js";import"../../chunks/chunk-5OKRFXLL.esm.js";import"../../chunks/chunk-ELYUJKST.esm.js";import"../../chunks/chunk-TGTH3E4X.esm.js";import"../../chunks/chunk-752Z7BQF.esm.js";import"../../chunks/chunk-BNB3KNKE.esm.js";import"../../chunks/chunk-W663AGNE.esm.js";import"../../chunks/chunk-A6Z2M2XU.esm.js";import"../../chunks/chunk-U27SLYIV.esm.js";import"../../chunks/chunk-JB7G6UGV.esm.js";import"../../chunks/chunk-GP7NECT4.esm.js";import"../../chunks/chunk-WAHR5LIT.esm.js";import"../../chunks/chunk-QUHHEZMP.esm.js";import"../../chunks/chunk-44EW3LMK.esm.js";import"../../chunks/chunk-OEH5ARPF.esm.js";import"../../chunks/chunk-V5AWVNU6.esm.js";import"../../chunks/chunk-GZONWSRB.esm.js";export{b as DefaultGridStyle,b as Grid,a as setGridBreakpoints};

package/lib/containers/Notification/Notification.context.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { NotificationInterface, NotificationType } from './Notification.interface';
+/**
+ * Forma do contexto exposto por {@link NotificationsProvider}.
+ *
+ * Não exporta `notifications` diretamente para consumo em UI — esse
+ * estado é renderizado pelo {@link NotificationGroup} interno. Para
+ * disparar/fechar toasts, use as funções `showNotification` e
+ * `removeNotification` obtidas via {@link useNotification}.
+ */
+type NotesContextType = {
+    notifications: NotificationType[];
+    removeNotification: (id: string) => void;
+    showNotification: (note: NotificationInterface) => void;
+};
+/**
+ * Provider de toasts empilhados.
+ *
+ * Deve envolver a aplicação (tipicamente dentro do `ThemeProvider`).
+ * Expõe `useNotification()` para que componentes possam disparar
+ * notificações de qualquer profundidade da árvore. Renderiza também o
+ * {@link NotificationGroup} — o container fixo no canto inferior direito
+ * onde os toasts são empilhados.
+ *
+ * Limita a fila ativa em até 3 toasts: ao adicionar o quarto, o mais
+ * antigo é removido automaticamente.
+ */
+export declare const NotificationsProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+/**
+ * Hook que expõe `showNotification` e `removeNotification` do
+ * {@link NotificationsProvider}. Use em componentes filhos para disparar
+ * toasts.
+ *
+ * @example
+ * ```tsx
+ * const { showNotification } = useNotification();
+ * showNotification({ title: 'Salvo!', variant: 'success' });
+ * ```
+ *
+ * @throws Quando chamado fora de um {@link NotificationsProvider}.
+ */
+export declare function useNotification(): NotesContextType;
+/**
+ * Renderiza o container fixo onde os toasts empilhados são exibidos.
+ *
+ * Renderizado automaticamente pelo {@link NotificationsProvider}. Usa
+ * portal no `document.body` para escapar de qualquer overflow/transform
+ * na árvore e só monta depois da primeira renderização para evitar
+ * mismatches de SSR.
+ */
+export declare const NotificationGroup: React.FC;
+export {};

package/lib/containers/Notification/Notification.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { NotificationInterface } from './Notification.interface';
+/**
+ * Renderiza a notificação "bloco" — versão estática, sem portal.
+ *
+ * É a primitiva visual usada pelas demais variações (`PageNotification`,
+ * toasts via {@link NotificationsProvider}). Cuida de:
+ *
+ * - Variante de cor (`primary`, `success`, `warning`, `danger`) via CSS
+ *   vars expostas pelo {@link WrapperNotificationStyle}.
+ * - Renderização condicional de `icon`, `title`, `action` e `link`.
+ * - Barra de progresso quando `autoClose` é informado (em segundos).
+ * - Botão de fechar quando `closable` é `true`.
+ *
+ * `action` e `message` aceitam tanto `ReactNode` quanto `(p: { close })` —
+ * útil para fechar a notificação a partir do conteúdo.
+ */
+export declare const BaseNotification: ({ type, variant, visible, closable, autoClose, message, action, icon, link, onDismiss, ...props }: NotificationInterface) => React.JSX.Element;
+/**
+ * Variação `type="page"` — renderiza a notificação em um portal no
+ * `document.body`, fixada no topo ou no rodapé da página (controlado por
+ * `pagePosition`). Animada via `framer-motion`.
+ *
+ * O portal só é montado depois do primeiro `useEffect` para evitar
+ * mismatches de hidratação em SSR.
+ */
+export declare const PageNotification: (props: NotificationInterface) => React.ReactPortal;
+/**
+ * Componente público `Notification`. Despacha entre as variações
+ * conforme `type`:
+ *
+ * - `'block'` (padrão): {@link BaseNotification} — inline na árvore.
+ * - `'page'`: {@link PageNotification} — fixa no topo/rodapé via portal.
+ *
+ * Para toasts empilhados, use o hook `useNotification()` exportado por
+ * {@link NotificationsProvider}.
+ *
+ * @example
+ * ```tsx
+ * <Notification
+ *   type="block"
+ *   variant="success"
+ *   title="Tudo certo"
+ *   message="Operação concluída"
+ *   closable
+ *   autoClose={5}
+ *   onDismiss={() => setVisible(false)}
+ * />
+ * ```
+ *
+ * @see {@link NotificationInterface} para o detalhamento das props.
+ */
+export declare const NotificationComponent: {
+    (props: NotificationInterface): React.JSX.Element;
+    displayName: string;
+};

package/lib/containers/Notification/Notification.interface.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import { MotionProps } from 'framer-motion';
+import { LinkInterface } from '../../elements/Link';
+import { DefaultFlexInterface } from '../Flex';
+/**
+ * Tipos visuais aceitos por `Notification`.
+ *
+ * - `'block'` (padrão): inline na árvore React.
+ * - `'page'`: fixa no topo/rodapé via portal (controlada por
+ *   `pagePosition`).
+ *
+ * Para toasts empilhados, use o hook `useNotification()`.
+ */
+export type NotificationTypes = 'block' | 'page';
+/**
+ * Variantes de cor — cada uma mapeia para uma paleta completa do tema
+ * (`base`/`light`/`dark`/`action`/`active`) usada em background, borda,
+ * ícone e botões filhos.
+ */
+export type NotificationVariants = 'primary' | 'success' | 'warning' | 'danger';
+/** Posição da notificação `type="page"` na viewport. */
+export type NotificationPagePositionTypes = 'top' | 'bottom';
+/**
+ * Props do componente `Notification`.
+ *
+ * Aceita também todas as props de animação do `framer-motion`
+ * ({@link MotionProps}) e as factory props do `Flex`
+ * ({@link DefaultFlexInterface}) — `Notification` é renderizado sobre
+ * um wrapper animado.
+ *
+ * @example
+ * ```tsx
+ * <Notification
+ *   type="block"
+ *   variant="warning"
+ *   title="Atenção"
+ *   message="Sua sessão vai expirar em 1 minuto"
+ *   action={({ close }) => <Button text="Renovar" onClick={() => { renew(); close(); }} />}
+ * />
+ * ```
+ */
+export type NotificationInterface = {
+    /** Título exibido em destaque. */
+    title?: string;
+    /**
+     * Mensagem principal. Aceita `ReactNode` ou uma função
+     * `(p: { close }) => ReactNode` — útil para incluir um botão "fechar"
+     * inline.
+     */
+    message?: React.ReactNode | ((p: {
+        close: () => void;
+    }) => React.ReactNode);
+    /**
+     * Tipo de renderização.
+     *
+     * @default 'block'
+     */
+    type?: NotificationTypes;
+    /** Ícone exibido à esquerda do conteúdo. */
+    icon?: React.ReactNode;
+    /**
+     * Variante de cor.
+     *
+     * @default 'primary'
+     */
+    variant?: NotificationVariants;
+    /** Controla se a notificação está visível. */
+    visible?: boolean;
+    /**
+     * Posição na página quando `type="page"`.
+     *
+     * @default 'bottom'
+     */
+    pagePosition?: NotificationPagePositionTypes;
+    /** Callback chamado quando a notificação é fechada. */
+    onDismiss?: () => void;
+    /**
+     * Tempo em segundos para fechamento automático. Quando informado,
+     * exibe uma barra de progresso que pausa ao hover.
+     */
+    autoClose?: number;
+    /**
+     * Mostra um botão de fechar no canto superior direito.
+     *
+     * @default true
+     */
+    closable?: boolean;
+    /** Link opcional exibido abaixo da mensagem. Abre em nova aba. */
+    link?: {
+        text: LinkInterface['text'];
+        href?: LinkInterface['href'];
+        to?: LinkInterface['to'];
+    };
+    /**
+     * Botão/ação à direita do conteúdo. Aceita um `ReactNode` ou uma
+     * função `(p: { close }) => ReactNode`. A cor da ação é forçada para
+     * a `variant` da notificação.
+     */
+    action?: React.ReactNode | ((p: {
+        close: () => void;
+    }) => React.ReactNode);
+} & MotionProps & DefaultFlexInterface;
+/**
+ * Forma interna usada na fila de toasts. Adiciona o `id` gerado por
+ * `nanoid()` para permitir remoção pontual.
+ */
+export type NotificationType = {
+    id: string;
+} & NotificationInterface;
+/**
+ * Action do reducer interno do {@link NotificationsProvider}. Não é
+ * consumida fora do contexto.
+ */
+export type Action = {
+    payload: NotificationType;
+    type: 'ADD' | 'REMOVE';
+};