@fluityy/designsystem 0.1.0

package/README.md

@@ -0,0 +1,66 @@
+# Flui Design System
+
+Design system multiplataforma. Os **tokens** (em JSON) são a fonte única da
+verdade; o Style Dictionary gera a saída para cada plataforma. Hoje: **React +
+Vite**. Amanhã: **Flutter** (sem duplicar tokens).
+
+## Arquitetura
+
+```
+tokens/*.json            ← FONTE DA VERDADE (platform-agnostic)
+   │  style-dictionary.config.mjs
+   ▼
+src/styles/tokens.css    ← CSS vars (--flui-*)   [web, gerado]
+src/lib/tokens/tokens.ts ← manifesto p/ o editor [web, gerado]
+build/flutter/*.dart     ← constantes Dart        [futuro, gerado]
+
+src/lib/                 ← biblioteca de componentes (React + CVA)
+src/showcase/            ← plataforma de showcase + editor de tokens ao vivo
+```
+
+Camadas de token:
+1. **Primitivos** (`color.brand.500`) — paleta crua, não usar em componentes.
+2. **Semânticos** (`semantic.primary.default`) — intenção; é o que os
+   componentes consomem. Referenciam primitivos via `var()`, então editar um
+   primitivo cascateia para os semânticos automaticamente.
+
+Os componentes nunca usam valores hard-coded — só utilitários do Tailwind
+mapeados para as CSS vars em [src/styles/global.css](src/styles/global.css)
+(`bg-primary`, `text-fg`, `rounded-md`, etc.).
+
+## Scripts
+
+| Comando              | O que faz                                            |
+| -------------------- | ---------------------------------------------------- |
+| `npm run dev`        | Gera tokens + sobe o showcase (Vite)                 |
+| `npm run build`      | Gera tokens + typecheck + build de produção          |
+| `npm run tokens`     | Regenera CSS/TS a partir de `tokens/*.json`          |
+| `npm run tokens:watch` | Regenera os tokens em watch enquanto edita o JSON  |
+
+## Showcase + editor ao vivo
+
+`npm run dev` → o painel esquerdo lista todos os tokens. Editar um valor
+sobrescreve a CSS var correspondente em runtime (`setProperty`), os componentes
+reagem na hora, e a alteração é salva no `localStorage`.
+
+- **Exportar JSON** baixa só os tokens alterados (keyed por path, ex.
+  `"color.brand.500"`), pronto para revisar e aplicar nos `tokens/*.json`.
+- **Resetar** (por token ou tudo) remove o override e volta ao valor original.
+
+> O editor é uma camada de _experimentação_. Para tornar uma mudança permanente,
+> aplique o valor no JSON de origem e rode `npm run tokens`.
+
+## Como estender
+
+**Novo token:** edite/crie um arquivo em `tokens/` e rode `npm run tokens`. Para
+expô-lo como utilitário do Tailwind, adicione o mapeamento no bloco `@theme` de
+[src/styles/global.css](src/styles/global.css).
+
+**Novo componente:** crie `src/lib/components/<Nome>/<Nome>.tsx` usando `cva`
+para variantes e apenas utilitários baseados em token; exporte em
+[src/lib/components/index.ts](src/lib/components/index.ts); adicione uma seção em
+[src/showcase/Gallery.tsx](src/showcase/Gallery.tsx).
+
+**Suporte a Flutter:** descomente o bloco `flutter` em
+[style-dictionary.config.mjs](style-dictionary.config.mjs). Os mesmos
+`tokens/*.json` passam a gerar `build/flutter/flui_tokens.dart`.

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,11 @@
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    type?: "single" | "multiple";
+    defaultValue?: string | string[];
+}
+export declare function Accordion({ type, defaultValue, className, children, ...props }: AccordionProps): import("react").JSX.Element;
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+export declare function AccordionItem({ value, children, ...props }: AccordionItemProps): import("react").JSX.Element;
+export declare function AccordionTrigger({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export declare function AccordionContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element | null;

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+declare const alertVariants: (props?: ({
+    variant?: "danger" | "success" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alertVariants> {
+    title?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+declare const sizeVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof sizeVariants> {
+    src?: string;
+    alt?: string;
+    name?: string;
+    status?: "online" | "busy" | "away" | "offline";
+}
+export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & import('react').RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const badgeVariants: (props?: ({
+    variant?: "primary" | "outline" | "accent" | "danger" | "neutral" | "accent-bold" | "success" | "warning" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,7 @@
+export declare const Breadcrumb: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLElement> & import('react').RefAttributes<HTMLElement>>;
+export interface BreadcrumbItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    href?: string;
+    current?: boolean;
+}
+export declare function BreadcrumbItem({ href, current, className, children, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
+export declare function BreadcrumbSeparator(): import("react").JSX.Element;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "accent" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,5 @@
+export declare const Card: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CardTitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLHeadingElement> & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const CardDescription: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+export declare const CardContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,5 @@
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    label?: React.ReactNode;
+    indeterminate?: boolean;
+}
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,6 @@
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+    /** rótulo central (apenas horizontal) */
+    label?: React.ReactNode;
+}
+export declare const Divider: import('react').ForwardRefExoticComponent<DividerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,14 @@
+type Side = "left" | "right" | "top" | "bottom";
+export interface DrawerProps {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: Side;
+    children: React.ReactNode;
+}
+export declare function Drawer({ open, onOpenChange, side, children }: DrawerProps): import("react").JSX.Element | null;
+export declare function DrawerContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function DrawerTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function DrawerBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export {};

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+export declare function Dropdown({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function DropdownTrigger({ children }: {
+    children: ReactElement<any>;
+}): ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+export declare function DropdownContent({ children, align, className, }: {
+    children: React.ReactNode;
+    align?: "start" | "end";
+    className?: string;
+}): import("react").JSX.Element | null;
+export interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    onSelect?: () => void;
+    destructive?: boolean;
+}
+export declare function DropdownItem({ children, onSelect, destructive, className, ...props }: DropdownItemProps): import("react").JSX.Element;
+export declare function DropdownSeparator(): import("react").JSX.Element;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    label?: string;
+}
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,12 @@
+export interface ModalProps {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+export declare function Modal({ open, onOpenChange, children }: ModalProps): import("react").JSX.Element | null;
+export declare function ModalContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function ModalHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function ModalTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function ModalDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function ModalBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function ModalFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+export declare function Popover({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function PopoverTrigger({ children }: {
+    children: ReactElement<any>;
+}): ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+export declare function PopoverContent({ children, align, className, }: {
+    children: React.ReactNode;
+    align?: "start" | "end";
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,7 @@
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 0–100. Omita (ou use indeterminate) para estado indeterminado. */
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+}
+export declare const Progress: import('react').ForwardRefExoticComponent<ProgressProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,12 @@
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+}
+export declare function RadioGroup({ value, defaultValue, onValueChange, name, className, children, ...props }: RadioGroupProps): import("react").JSX.Element;
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
+    value: string;
+    label?: React.ReactNode;
+}
+export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+declare const selectVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size">, VariantProps<typeof selectVariants> {
+}
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLSelectElement>>;
+export {};

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement>, VariantProps<typeof spinnerVariants> {
+    label?: string;
+}
+export declare const Spinner: import('react').ForwardRefExoticComponent<SpinnerProps & import('react').RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/StatCard/StatCard.d.ts

@@ -0,0 +1,13 @@
+export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: React.ReactNode;
+    value?: React.ReactNode;
+    /** Valor numérico para animação tipo cassino. Usa `formatCount` para exibir. */
+    countUp?: number;
+    /** Formata o número animado. Default: toLocaleString('pt-BR'). */
+    formatCount?: (n: number) => string;
+    /** variação percentual; positivo = alta (success), negativo = baixa (danger) */
+    delta?: number;
+    helpText?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export declare const StatCard: import('react').ForwardRefExoticComponent<StatCardProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+declare const trackVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof trackVariants> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,15 @@
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export declare function Tabs({ value, defaultValue, onValueChange, className, children, ...props }: TabsProps): import("react").JSX.Element;
+export declare function TabsList({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+}
+export declare function TabsTrigger({ value, className, ...props }: TabsTriggerProps): import("react").JSX.Element;
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+export declare function TabsContent({ value, className, ...props }: TabsContentProps): import("react").JSX.Element | null;

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const textareaVariants: (props?: ({
+    invalid?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
+}
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,16 @@
+type ToastVariant = "info" | "success" | "warning" | "danger";
+interface ToastOptions {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: ToastVariant;
+    duration?: number;
+}
+interface ToastContextValue {
+    toast: (options: ToastOptions) => number;
+    dismiss: (id: number) => void;
+}
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+export {};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+export interface TooltipProps {
+    content: React.ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Tooltip leve baseado em hover/focus. O posicionamento é relativo ao gatilho
+ * (sem detecção de colisão com a borda da tela — para isso, usar Floating UI).
+ */
+export declare function Tooltip({ content, side, children, className }: TooltipProps): import("react").JSX.Element;

package/dist/components/index.d.ts

@@ -0,0 +1,25 @@
+export * from './Button/Button';
+export * from './Input/Input';
+export * from './Card/Card';
+export * from './Switch/Switch';
+export * from './Checkbox/Checkbox';
+export * from './Radio/Radio';
+export * from './Select/Select';
+export * from './Dropdown/Dropdown';
+export * from './Badge/Badge';
+export * from './Avatar/Avatar';
+export * from './Spinner/Spinner';
+export * from './Progress/Progress';
+export * from './Divider/Divider';
+export * from './Breadcrumb/Breadcrumb';
+export * from './StatCard/StatCard';
+export * from './Alert/Alert';
+export * from './Tabs/Tabs';
+export * from './Accordion/Accordion';
+export * from './Tooltip/Tooltip';
+export * from './Popover/Popover';
+export * from './Modal/Modal';
+export * from './Drawer/Drawer';
+export * from './Toast/Toast';
+export * from './Textarea/Textarea';
+export * from '../theme/ThemeProvider';

package/dist/hooks/useControllableState.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Suporta componentes controlados e não-controlados com a mesma API.
+ * Se `value` for fornecido, o componente é controlado; senão usa estado interno.
+ */
+export declare function useControllableState<T>({ value, defaultValue, onChange, }: {
+    value?: T;
+    defaultValue: T;
+    onChange?: (value: T) => void;
+}): readonly [T, (next: T) => void];

package/dist/hooks/useDismissable.d.ts

@@ -0,0 +1,2 @@
+/** Trava o scroll do body e fecha no Escape enquanto `open` for true. */
+export declare function useDismissable(open: boolean, onClose: () => void): void;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export { cn } from './utils/cn';
+export { tokens, type TokenMeta } from './tokens/tokens';