@fracui/styleguide 0.0.0-stage → 0.1.0

package/dist/components/sheet.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+/**
+ * Painel deslizante.
+ *
+ * DERIVADO: o Figma não tem página nem conjunto para este componente. A
+ * geometria vem do modal (padding 32px, gap 32px, superfície do card) e a
+ * sombra vem do sistema de elevação direcional, que existe justamente
+ * para isto — um painel que entra pela direita projeta sombra para a
+ * esquerda, e vice-versa. Ver `shadowGrey` em `src/tokens/elevation.ts`.
+ *
+ * Substitua pelas medidas reais assim que o design especificar o
+ * componente.
+ */
+/**
+ * Sheet: painel deslizante lateral (variação do Dialog com `side`).
+ * Usado internamente pelo Sidebar no modo mobile, mas também é útil
+ * de forma independente para drawers/painéis laterais.
+ */
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/components/sidebar.d.ts

@@ -0,0 +1,52 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+type SidebarContextValue = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextValue;
+declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import('./button').ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const SidebarInput: React.ForwardRefExoticComponent<Omit<import('./input').InputProps & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-separator').SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/components/sonner.d.ts

@@ -0,0 +1,21 @@
+import { Toaster as Sonner } from 'sonner';
+import * as React from "react";
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+/**
+ * Toaster (notificações "toast"), baseado no pacote `sonner`.
+ * Renderize <Toaster /> uma única vez no shell da aplicação e use a
+ * função `toast(...)` (reexportada abaixo) de qualquer lugar.
+ *
+ * DERIVADO: o Figma não tem componente de toast nem de snackbar — a busca
+ * por "toast", "snackbar" e "notifica" no arquivo só retorna ícones. O
+ * visual aqui vem do conjunto `Alerts` da página "↳ Feedback", que é o
+ * parente mais próximo: um toast é um alerta transitório. Herda o card
+ * com borda neutra, o raio de 12px, o padding de 16px e a cor no ícone em
+ * vez de no fundo.
+ *
+ * Substitua pelas medidas reais assim que o design especificar o
+ * componente.
+ */
+declare const Toaster: ({ ...props }: ToasterProps) => React.JSX.Element;
+export { Toaster };
+export { toast } from 'sonner';

package/dist/components/spinner.d.ts

@@ -0,0 +1,16 @@
+import { SyncIcon } from '../icons';
+import * as React from "react";
+/**
+ * Indicador de carregamento.
+ *
+ * O Figma não especifica um spinner — a página "↳ Progresso" cobre apenas
+ * barras de progresso. Aqui é usado o ícone `sync` do próprio conjunto de
+ * ícones do design system, em rotação contínua, em vez de trazer um
+ * desenho de fora.
+ *
+ * A animação respeita `prefers-reduced-motion`: quem pediu menos
+ * movimento vê o ícone parado, e o `role="status"` continua anunciando o
+ * carregamento.
+ */
+declare function Spinner({ className, ...props }: React.ComponentProps<typeof SyncIcon>): React.JSX.Element;
+export { Spinner };

package/dist/components/switch.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+/**
+ * Interruptor, conforme o conjunto `Switch` do Figma "Design System - 2026"
+ * (página "↳ Checkbox - Radio - Switch").
+ *
+ * Ligado usa o azul interativo (`primary`); desligado usa a superfície
+ * neutra com borda `gray.light`. O foco troca a borda por `blue.1` em 2px,
+ * como no design — não é um anel externo.
+ */
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

package/dist/components/table.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+/**
+ * Tabela, conforme os frames da página "↳ Listas" do Figma
+ * "Design System - 2026".
+ *
+ * A página não tem componentes, mas a estrutura se repete de forma
+ * consistente, e ela é bem diferente da tabela padrão do shadcn: **não há
+ * grade**. As linhas são blocos arredondados de 58px separados por 8px de
+ * gap, sem bordas divisórias. O cabeçalho é uma faixa `gray.iceMedium`
+ * com o mesmo raio.
+ *
+ * | Elemento          | Figma                                   |
+ * | ----------------- | --------------------------------------- |
+ * | container         | fundo do card, raio 12px, padding 12px   |
+ * | cabeçalho         | `gray.iceMedium`, raio 12px, altura 58px |
+ * | linha             | transparente, raio 12px, altura 58px     |
+ * | linha selecionada | `blue.1`                                 |
+ * | célula            | `roboto/regular/body 1`, 24px de gap     |
+ *
+ * DERIVADO: o Figma mostra linhas selecionadas com borda `blue.4` e
+ * `blue.3`, mas não rotula qual é hover e qual é foco. Seguindo a
+ * gramática dos campos (onde `blue.3` é o foco), `blue.4` virou hover.
+ *
+ * O gap entre linhas é feito com `border-spacing`, e não com `gap`:
+ * elementos de tabela ignoram flex/grid gap.
+ */
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/components/tabs.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+/**
+ * Abas, conforme o conjunto `Tabs` do Figma "Design System - 2026"
+ * (página "↳ Tabs").
+ *
+ * O design usa abas sublinhadas sobre uma régua contínua, e não o formato
+ * de pílula sobre superfície que vinha do shadcn. Cada aba tem 48px de
+ * altura e muda de peso ao ficar ativa — de `regular` para `medium` —
+ * além de mudar de cor:
+ *
+ * | Estado    | Cor           |
+ * | --------- | ------------- |
+ * | default   | `gray.medium` |
+ * | hover     | `blue.medium` |
+ * | activated | `blue.light`  |
+ * | disabled  | `gray.lightMedium` |
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/components/tag.d.ts

@@ -0,0 +1,51 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Etiqueta, conforme o conjunto `Tags` do Figma "Design System - 2026"
+ * (página "↳ Tags"), com suas 44 variantes.
+ *
+ * Não é um `Badge` com mais cores: o eixo `Category` do design é de
+ * domínio, não de estilo. Além de `blue` e `black`, que são genéricas,
+ * existem `el-nino` e `la-nina` — os fenômenos climáticos — e essas duas
+ * ganham um segundo eixo, `degree`, que gradua a intensidade de fraco a
+ * muito forte.
+ *
+ * A intensidade é comunicada pela cor da borda:
+ *
+ * | Grau          | La Niña   | El Niño  |
+ * | ------------- | --------- | -------- |
+ * | `fraco`       | `blue.1`  | `red.1`  |
+ * | `moderado`    | `blue.2`  | `red.2`  |
+ * | `forte`       | `blue.3`  | `red.3`  |
+ * | `muito-forte` | `blue.4`  | `red.4`  |
+ *
+ * No hover a cor da intensidade migra da borda para o fundo, o que dá o
+ * realce sem mudar o tamanho do elemento.
+ *
+ * `Badge` continua existindo para etiquetas de estado genéricas; `Tag` é
+ * para quando a categoria significa algo no domínio.
+ */
+declare const tagVariants: (props?: ({
+    category?: "black" | "blue" | "el-nino" | "la-nina" | null | undefined;
+    type?: "outline" | "filled" | null | undefined;
+    degree?: "fraco" | "moderado" | "forte" | "muito-forte" | null | undefined;
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof tagVariants> {
+    children: React.ReactNode;
+    /** Ícone à esquerda — o eixo `Avatar` do conjunto. */
+    icon?: React.ReactNode;
+    /** Quando presente, mostra o botão de remover (eixo `Remove`). */
+    onRemove?: () => void;
+    /**
+     * Rótulo do botão de remover.
+     *
+     * Sem ele, o rótulo é montado a partir do texto da etiqueta — mas isso
+     * só funciona quando `children` é string. Com conteúdo composto, passe
+     * `removeLabel`, senão o leitor de tela ouve apenas "Remover".
+     */
+    removeLabel?: string;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+export { Tag, tagVariants };

package/dist/components/textarea.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+/**
+ * Campo de texto multilinha.
+ *
+ * Compartilha o visual e os estados do `Input` — no Figma os dois saem do
+ * mesmo conjunto `Form text`, mudando só a altura. Ver `fieldClassName`
+ * em `input.tsx` para o mapa de estados.
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+/**
+ * Dica, conforme o conjunto `Tooltip` do Figma "Design System - 2026"
+ * (página "↳ Tooltips").
+ *
+ * Fundo `blue.dark` com texto branco em `roboto/medium/caption`, raio de
+ * 8px e 12px de padding. As 8 variantes do Figma são posições — o Radix
+ * já resolve posicionamento via `side`/`align`, então não viraram
+ * variantes aqui.
+ */
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/fonts.css

@@ -0,0 +1,33 @@
+/**
+ * Fontes da FracUI, auto-hospedadas.
+ *
+ * Import opcional e separado de `styles.css`: nem todo app consumidor quer
+ * que a biblioteca carregue fontes (alguns já servem Roboto pelo próprio
+ * shell do single-spa). Quem quiser as fontes junto importa uma vez na raiz:
+ *
+ * ```ts
+ * import "@fracui/styleguide/fonts.css";
+ * import "@fracui/styleguide/styles.css";
+ * ```
+ *
+ * Auto-hospedado em vez de CDN do Google porque o SIGA roda em redes
+ * restritas e a biblioteca não pode depender de acesso externo em runtime.
+ *
+ * Subset `latin` apenas — cobre português e é o que o design usa. Se algum
+ * produto precisar de cirílico ou grego, troque para os arquivos sem
+ * prefixo (`@fontsource/roboto/400.css`), que trazem todos os subsets.
+ */
+
+/* Roboto — família padrão de todo o design system. */
+@import "@fontsource/roboto/latin-400.css";
+@import "@fontsource/roboto/latin-500.css";
+
+/*
+ * Rubik — usado apenas em h1 e h2 no peso medium.
+ *
+ * ATENÇÃO: no Figma esses dois estilos se chamam `roboto/medium/h1` e
+ * `roboto/medium/h2` mas estão em Rubik. Enquanto o time de design não
+ * confirmar se é intencional, a família fica disponível como
+ * `font-display` no preset, e o custo é de um peso só.
+ */
+@import "@fontsource/rubik/latin-500.css";

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,2 @@
+/** Retorna `true` quando a viewport está abaixo do breakpoint mobile. */
+export declare function useIsMobile(): boolean;

package/dist/icons/create-icon.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Largura e altura em pixels. Os ícones são desenhados em uma grade de
+     * 24px no Figma; múltiplos de 4 mantêm os traços alinhados ao pixel.
+     */
+    size?: number | string;
+    /**
+     * Rótulo para leitores de tela. Sem ele o ícone é tratado como
+     * decorativo (`aria-hidden`), que é o correto quando há texto ao lado.
+     */
+    title?: string;
+}
+/**
+ * Fábrica dos componentes de ícone gerados em `icons.tsx`.
+ *
+ * Os SVGs saem do Figma com as cores chapadas; o gerador troca por
+ * `currentColor`, então o ícone herda a cor do texto e responde a
+ * `text-error-icon`, `text-brand`, etc.
+ */
+export declare function createIcon(displayName: string, viewBox: string, paths: React.ReactNode): React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;