dwv-ui 0.1.0

package/README.md

@@ -0,0 +1,99 @@
+# @dwv/ui
+
+Design System da DWV - Componentes React com Tailwind CSS.
+
+## Instalação
+
+```bash
+npm install @dwv/ui
+```
+
+## Uso
+
+```tsx
+import { Button } from '@dwv/ui'
+import '@dwv/ui/styles.css'
+
+const App = () => (
+  <Button variant="primary" size="md">
+    Click me
+  </Button>
+)
+```
+
+## Componentes disponíveis
+
+### Actions
+- `Button` - Botão com variantes (primary, secondary, outline, ghost, link)
+
+### Forms (em breve)
+- `Input`
+- `Select`
+- `Checkbox`
+- `Radio`
+
+### Feedback (em breve)
+- `Toast`
+- `Alert`
+- `Skeleton`
+
+### Display (em breve)
+- `Badge`
+- `Avatar`
+- `Table`
+
+### Overlays (em breve)
+- `Modal`
+- `Drawer`
+- `Popover`
+
+## Desenvolvimento
+
+```bash
+# Instalar dependências
+npm install
+
+# Build
+npm run build
+
+# Watch mode
+npm run dev
+
+# Type check
+npm run typecheck
+```
+
+## Publicação
+
+```bash
+# Build e publicar
+npm publish
+```
+
+## Estrutura
+
+```
+src/
+├── components/
+│   ├── actions/      # Button, IconButton, Link
+│   ├── forms/        # Input, Select, Checkbox
+│   ├── feedback/     # Toast, Alert, Skeleton
+│   ├── layout/       # Container, Grid, Stack
+│   ├── display/      # Badge, Avatar, Table
+│   └── overlays/     # Modal, Drawer, Popover
+├── lib/
+│   └── cn.ts         # Função de merge de classes
+├── styles/
+│   └── theme.css     # Estilos base e tema
+└── index.ts          # Barrel export
+```
+
+## Guidelines
+
+A pasta `guidelines/` contém documentação para o Figma Make entender como usar os componentes corretamente.
+
+## Padrões
+
+Este pacote segue os padrões definidos em:
+- `docs/standards/frontend/STANDARDS.md`
+- `docs/standards/frontend/ARCHITECTURE.md`

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "link" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
+    children: ReactNode;
+};
+declare const Button: ({ children, variant, size, className, ...props }: Props) => react_jsx_runtime.JSX.Element;
+
+export { Button, type Props as ButtonProps, buttonVariants };

package/dist/index.js

@@ -0,0 +1,37 @@
+"use client";
+import { cva, cx } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/cn.ts
+var cn = (...classes) => twMerge(cx(classes));
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800",
+        secondary: "bg-neutral-100 text-neutral-900 hover:bg-neutral-200 active:bg-neutral-300",
+        outline: "border border-neutral-300 bg-transparent text-neutral-900 hover:bg-neutral-50 active:bg-neutral-100",
+        ghost: "bg-transparent text-neutral-900 hover:bg-neutral-100 active:bg-neutral-200",
+        link: "bg-transparent text-brand-600 underline-offset-4 hover:underline",
+        destructive: "bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = ({ children, variant, size, className, ...props }) => /* @__PURE__ */ jsx("button", { className: cn(buttonVariants({ variant, size }), className), ...props, children });
+
+export { Button, buttonVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/ui/actions/Button/styles/variants.ts","../src/ui/actions/Button/index.tsx"],"names":[],"mappings":";;;;;AAKO,IAAM,KAAK,CAAA,GAAI,OAAA,KAA0B,OAAA,CAAQ,EAAA,CAAG,OAAO,CAAC,CAAA;ACH5D,IAAM,cAAA,GAAiB,GAAA;AAAA,EAC5B,kNAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,gEAAA;AAAA,QACT,SAAA,EAAW,4EAAA;AAAA,QACX,OAAA,EAAS,qGAAA;AAAA,QACT,KAAA,EAAO,4EAAA;AAAA,QACP,IAAA,EAAM,kEAAA;AAAA,QACN,WAAA,EAAa;AAAA,OACf;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AChBA,IAAM,MAAA,GAAS,CAAC,EAAE,QAAA,EAAU,OAAA,EAAS,MAAM,SAAA,EAAW,GAAG,KAAA,EAAM,qBAC7D,GAAA,CAAC,QAAA,EAAA,EAAO,WAAW,EAAA,CAAG,cAAA,CAAe,EAAE,OAAA,EAAS,IAAA,EAAM,GAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACtE,QAAA,EACH","file":"index.js","sourcesContent":["import { cx } from 'class-variance-authority'\nimport { twMerge } from 'tailwind-merge'\n\ntype ClassValue = string | number | boolean | undefined | null | ClassValue[]\n\nexport const cn = (...classes: ClassValue[]) => twMerge(cx(classes))\n","import { cva } from 'class-variance-authority'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        primary: 'bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800',\n        secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-200 active:bg-neutral-300',\n        outline: 'border border-neutral-300 bg-transparent text-neutral-900 hover:bg-neutral-50 active:bg-neutral-100',\n        ghost: 'bg-transparent text-neutral-900 hover:bg-neutral-100 active:bg-neutral-200',\n        link: 'bg-transparent text-brand-600 underline-offset-4 hover:underline',\n        destructive: 'bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800'\n      },\n      size: {\n        sm: 'h-8 px-3 text-sm',\n        md: 'h-10 px-4 text-sm',\n        lg: 'h-12 px-6 text-base',\n        icon: 'h-10 w-10'\n      }\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md'\n    }\n  }\n)\n","import { type VariantProps } from 'class-variance-authority'\nimport { type ButtonHTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../../../lib/cn'\nimport { buttonVariants } from './styles/variants'\n\ntype Props = ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof buttonVariants> & {\n    children: ReactNode\n  }\n\nconst Button = ({ children, variant, size, className, ...props }: Props) => (\n  <button className={cn(buttonVariants({ variant, size }), className)} {...props}>\n    {children}\n  </button>\n)\n\nexport { Button, buttonVariants }\nexport type { Props as ButtonProps }\n"]}

package/dist/lib.d.ts

@@ -0,0 +1,4 @@
+type ClassValue = string | number | boolean | undefined | null | ClassValue[];
+declare const cn: (...classes: ClassValue[]) => string;
+
+export { cn };

package/dist/lib.js

@@ -0,0 +1,9 @@
+import { cx } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+
+// src/lib/cn.ts
+var cn = (...classes) => twMerge(cx(classes));
+
+export { cn };
+//# sourceMappingURL=lib.js.map
+//# sourceMappingURL=lib.js.map

package/dist/lib.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts"],"names":[],"mappings":";;;;AAKO,IAAM,KAAK,CAAA,GAAI,OAAA,KAA0B,OAAA,CAAQ,EAAA,CAAG,OAAO,CAAC","file":"lib.js","sourcesContent":["import { cx } from 'class-variance-authority'\nimport { twMerge } from 'tailwind-merge'\n\ntype ClassValue = string | number | boolean | undefined | null | ClassValue[]\n\nexport const cn = (...classes: ClassValue[]) => twMerge(cx(classes))\n"]}

package/dist/theme.d.ts

@@ -0,0 +1,152 @@
+import { Config } from 'tailwindcss';
+
+declare const colors: {
+    readonly brand: {
+        readonly 100: "#ffdddd";
+        readonly 200: "#ffc0c0";
+        readonly 300: "#ff9494";
+        readonly 400: "#ff5757";
+        readonly 500: "#ff2323";
+        readonly 600: "#d70000";
+        readonly 700: "#b10303";
+        readonly 800: "#920A0A";
+        readonly 900: "#500000";
+    };
+    readonly neutral: {
+        readonly 0: "#ffffff";
+        readonly 50: "#F9F9FA";
+        readonly 100: "#F5F5F6";
+        readonly 200: "#E6E6E7";
+        readonly 300: "#CFCFD2";
+        readonly 400: "#AEADB3";
+        readonly 500: "#85848C";
+        readonly 600: "#6A6971";
+        readonly 700: "#5B5A60";
+        readonly 800: "#4D4C51";
+        readonly 900: "#444347";
+        readonly 1000: "#363538";
+    };
+    readonly dark: {
+        readonly 100: "#2C2C2E";
+        readonly 200: "#202021";
+        readonly 300: "#161618";
+    };
+    readonly green: {
+        readonly 100: "#DFF9E2";
+        readonly 200: "#C1F1C7";
+        readonly 300: "#91E49B";
+        readonly 400: "#5ACE69";
+        readonly 500: "#33B444";
+        readonly 600: "#28A138";
+        readonly 700: "#20752C";
+        readonly 800: "#1B4C22";
+        readonly 900: "#092A0F";
+    };
+    readonly yellow: {
+        readonly 100: "#FFFDC5";
+        readonly 200: "#FFFA87";
+        readonly 300: "#FFF148";
+        readonly 400: "#FFE31E";
+        readonly 500: "#FCC404";
+        readonly 600: "#E69D00";
+        readonly 700: "#b96d04";
+    };
+    readonly orange: {
+        readonly 100: "#FFEDD3";
+        readonly 200: "#FFD8A5";
+        readonly 300: "#FFBB6D";
+        readonly 400: "#FF9232";
+        readonly 500: "#FF720A";
+        readonly 600: "#F05906";
+        readonly 700: "#C74207";
+    };
+    readonly blue: {
+        readonly 100: "#E0EFFE";
+        readonly 200: "#BADFFD";
+        readonly 300: "#7CC6FD";
+        readonly 400: "#37AAF9";
+        readonly 500: "#0D8FEA";
+        readonly 600: "#0172CB";
+        readonly 700: "#0259A2";
+        readonly 800: "#0B406F";
+        readonly 900: "#082849";
+    };
+    readonly pink: {
+        readonly 100: "#FDE4F8";
+        readonly 500: "#F479D8";
+        readonly 700: "#D025B7";
+    };
+    readonly overlay: {
+        readonly 100: "#0A0A0CD9";
+    };
+};
+declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "0.3125rem";
+    readonly md: "0.625rem";
+    readonly lg: "0.9375rem";
+    readonly all: "50%";
+    readonly full: "50%";
+};
+declare const lineHeight: {
+    readonly none: "1";
+    readonly tight: "1.2";
+    readonly normal: "1.5";
+};
+declare const screens: {
+    readonly sm: "30em";
+    readonly md: "48em";
+    readonly lg: "62em";
+    readonly xl: "80em";
+    readonly '2xl': "96em";
+    readonly '3xl': "120em";
+};
+declare const keyframes: {
+    readonly 'fade-in': {
+        readonly from: {
+            readonly opacity: "0";
+        };
+        readonly to: {
+            readonly opacity: "1";
+        };
+    };
+    readonly 'fade-out': {
+        readonly from: {
+            readonly opacity: "1";
+        };
+        readonly to: {
+            readonly opacity: "0";
+        };
+    };
+    readonly 'scale-in': {
+        readonly from: {
+            readonly opacity: "0";
+            readonly transform: "scale(0.95)";
+        };
+        readonly to: {
+            readonly opacity: "1";
+            readonly transform: "scale(1)";
+        };
+    };
+    readonly 'scale-out': {
+        readonly from: {
+            readonly opacity: "1";
+            readonly transform: "scale(1)";
+        };
+        readonly to: {
+            readonly opacity: "0";
+            readonly transform: "scale(0.95)";
+        };
+    };
+};
+declare const animations: {
+    readonly 'fade-in': "fade-in 150ms ease-out";
+    readonly 'fade-out': "fade-out 150ms ease-in";
+    readonly 'scale-in': "scale-in 150ms ease-out";
+    readonly 'scale-out': "scale-out 150ms ease-in";
+};
+declare const spacing: Record<number, string>;
+
+declare const dwvPreset: Partial<Config>;
+
+export { animations, borderRadius, colors, dwvPreset, keyframes, lineHeight, screens, spacing };

package/dist/theme.js

@@ -0,0 +1,152 @@
+// src/theme/tokens.ts
+var colors = {
+  brand: {
+    100: "#ffdddd",
+    200: "#ffc0c0",
+    300: "#ff9494",
+    400: "#ff5757",
+    500: "#ff2323",
+    600: "#d70000",
+    700: "#b10303",
+    800: "#920A0A",
+    900: "#500000"
+  },
+  neutral: {
+    0: "#ffffff",
+    50: "#F9F9FA",
+    100: "#F5F5F6",
+    200: "#E6E6E7",
+    300: "#CFCFD2",
+    400: "#AEADB3",
+    500: "#85848C",
+    600: "#6A6971",
+    700: "#5B5A60",
+    800: "#4D4C51",
+    900: "#444347",
+    1e3: "#363538"
+  },
+  dark: {
+    100: "#2C2C2E",
+    200: "#202021",
+    300: "#161618"
+  },
+  green: {
+    100: "#DFF9E2",
+    200: "#C1F1C7",
+    300: "#91E49B",
+    400: "#5ACE69",
+    500: "#33B444",
+    600: "#28A138",
+    700: "#20752C",
+    800: "#1B4C22",
+    900: "#092A0F"
+  },
+  yellow: {
+    100: "#FFFDC5",
+    200: "#FFFA87",
+    300: "#FFF148",
+    400: "#FFE31E",
+    500: "#FCC404",
+    600: "#E69D00",
+    700: "#b96d04"
+  },
+  orange: {
+    100: "#FFEDD3",
+    200: "#FFD8A5",
+    300: "#FFBB6D",
+    400: "#FF9232",
+    500: "#FF720A",
+    600: "#F05906",
+    700: "#C74207"
+  },
+  blue: {
+    100: "#E0EFFE",
+    200: "#BADFFD",
+    300: "#7CC6FD",
+    400: "#37AAF9",
+    500: "#0D8FEA",
+    600: "#0172CB",
+    700: "#0259A2",
+    800: "#0B406F",
+    900: "#082849"
+  },
+  pink: {
+    100: "#FDE4F8",
+    500: "#F479D8",
+    700: "#D025B7"
+  },
+  overlay: {
+    100: "#0A0A0CD9"
+  }
+};
+var borderRadius = {
+  none: "0",
+  sm: "0.3125rem",
+  md: "0.625rem",
+  lg: "0.9375rem",
+  all: "50%",
+  full: "50%"
+};
+var lineHeight = {
+  none: "1",
+  tight: "1.2",
+  normal: "1.5"
+};
+var screens = {
+  sm: "30em",
+  md: "48em",
+  lg: "62em",
+  xl: "80em",
+  "2xl": "96em",
+  "3xl": "120em"
+};
+var keyframes = {
+  "fade-in": {
+    from: { opacity: "0" },
+    to: { opacity: "1" }
+  },
+  "fade-out": {
+    from: { opacity: "1" },
+    to: { opacity: "0" }
+  },
+  "scale-in": {
+    from: { opacity: "0", transform: "scale(0.95)" },
+    to: { opacity: "1", transform: "scale(1)" }
+  },
+  "scale-out": {
+    from: { opacity: "1", transform: "scale(1)" },
+    to: { opacity: "0", transform: "scale(0.95)" }
+  }
+};
+var animations = {
+  "fade-in": "fade-in 150ms ease-out",
+  "fade-out": "fade-out 150ms ease-in",
+  "scale-in": "scale-in 150ms ease-out",
+  "scale-out": "scale-out 150ms ease-in"
+};
+var spacing = Array.from({ length: 100 }, (_, index) => index * 4).reduce((acc, value) => {
+  acc[value] = `${value / 4}rem`;
+  return acc;
+}, {});
+
+// src/theme/preset.ts
+var dwvPreset = {
+  theme: {
+    extend: {
+      colors,
+      borderRadius,
+      fontFamily: {
+        roboto: ["Roboto", "sans-serif"]
+      },
+      lineHeight,
+      screens,
+      keyframes,
+      animations,
+      spacing
+    }
+  }
+};
+
+export { animations, borderRadius, colors, dwvPreset, keyframes, lineHeight, screens, spacing };
+//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/tokens.ts","../src/theme/preset.ts"],"names":[],"mappings":"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","file":"theme.js","sourcesContent":["const colors = {\n  brand: {\n    100: '#ffdddd',\n    200: '#ffc0c0',\n    300: '#ff9494',\n    400: '#ff5757',\n    500: '#ff2323',\n    600: '#d70000',\n    700: '#b10303',\n    800: '#920A0A',\n    900: '#500000'\n  },\n  neutral: {\n    0: '#ffffff',\n    50: '#F9F9FA',\n    100: '#F5F5F6',\n    200: '#E6E6E7',\n    300: '#CFCFD2',\n    400: '#AEADB3',\n    500: '#85848C',\n    600: '#6A6971',\n    700: '#5B5A60',\n    800: '#4D4C51',\n    900: '#444347',\n    1000: '#363538'\n  },\n  dark: {\n    100: '#2C2C2E',\n    200: '#202021',\n    300: '#161618'\n  },\n  green: {\n    100: '#DFF9E2',\n    200: '#C1F1C7',\n    300: '#91E49B',\n    400: '#5ACE69',\n    500: '#33B444',\n    600: '#28A138',\n    700: '#20752C',\n    800: '#1B4C22',\n    900: '#092A0F'\n  },\n  yellow: {\n    100: '#FFFDC5',\n    200: '#FFFA87',\n    300: '#FFF148',\n    400: '#FFE31E',\n    500: '#FCC404',\n    600: '#E69D00',\n    700: '#b96d04'\n  },\n  orange: {\n    100: '#FFEDD3',\n    200: '#FFD8A5',\n    300: '#FFBB6D',\n    400: '#FF9232',\n    500: '#FF720A',\n    600: '#F05906',\n    700: '#C74207'\n  },\n  blue: {\n    100: '#E0EFFE',\n    200: '#BADFFD',\n    300: '#7CC6FD',\n    400: '#37AAF9',\n    500: '#0D8FEA',\n    600: '#0172CB',\n    700: '#0259A2',\n    800: '#0B406F',\n    900: '#082849'\n  },\n  pink: {\n    100: '#FDE4F8',\n    500: '#F479D8',\n    700: '#D025B7'\n  },\n  overlay: {\n    100: '#0A0A0CD9'\n  }\n} as const\n\nconst borderRadius = {\n    none: '0',\n    sm: '0.3125rem',\n    md: '0.625rem',\n    lg: '0.9375rem',\n    all: '50%',\n    full: '50%'\n  } as const\n\nconst lineHeight = {\n  none: '1',\n  tight: '1.2',\n  normal: '1.5'\n} as const\n\nconst screens = {\n  sm: '30em',\n  md: '48em',\n  lg: '62em',\n  xl: '80em',\n  '2xl': '96em',\n  '3xl': '120em'\n} as const\n\nconst keyframes = {\n  'fade-in': {\n    from: { opacity: '0' },\n    to: { opacity: '1' }\n  },\n  'fade-out': {\n    from: { opacity: '1' },\n    to: { opacity: '0' }\n  },\n  'scale-in': {\n    from: { opacity: '0', transform: 'scale(0.95)' },\n    to: { opacity: '1', transform: 'scale(1)' }\n  },\n  'scale-out': {\n    from: { opacity: '1', transform: 'scale(1)' },\n    to: { opacity: '0', transform: 'scale(0.95)' }\n  }\n} as const\n\nconst animations = {\n  'fade-in': 'fade-in 150ms ease-out',\n  'fade-out': 'fade-out 150ms ease-in',\n  'scale-in': 'scale-in 150ms ease-out',\n  'scale-out': 'scale-out 150ms ease-in'\n} as const\n\nconst spacing = Array.from({ length: 100 }, (_, index) => index * 4).reduce<Record<number, string>>((acc, value) => {\n  acc[value] = `${value / 4}rem`\n  return acc\n}, {})\n\nexport { animations, borderRadius, colors, keyframes, lineHeight, screens, spacing }\n","import type { Config } from 'tailwindcss'\nimport {\n  animations,\n  borderRadius,\n  colors,\n  keyframes,\n  lineHeight,\n  screens,\n  spacing\n} from './tokens'\n\nexport const dwvPreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors,\n      borderRadius,\n      fontFamily: {\n        roboto: ['Roboto', 'sans-serif']\n      },\n      lineHeight,\n      screens,\n      keyframes,\n      animations,\n      spacing\n    }\n  }\n}\n"]}

package/guidelines/Guidelines.md

@@ -0,0 +1,180 @@
+# DWV Frontend Guidelines
+
+Este arquivo serve como entry point para o Figma Make gerar código alinhado com os padrões do projeto DWV.
+
+## Arquivos de Referência
+
+Sempre consultar os seguintes arquivos para contexto específico:
+
+- `overview-components.md` - Estrutura e padrões de criação de componentes
+- `overview-styling.md` - Sistema de estilização com CVA e Tailwind
+- `overview-theme.md` - Tema do projeto (cores, espaçamentos, tipografia)
+
+---
+
+## Regras Gerais
+
+### Linguagem e Ferramentas
+
+- **Linguagem:** TypeScript (strict mode)
+- **Framework:** React 18+
+- **Estilização:** Tailwind CSS + CVA (class-variance-authority)
+- **Merge de classes:** Usar função `cn()` sempre
+- **Primitivos** Usar componentes baseados no `shadcn`
+
+### Código Limpo
+
+- Preferir layouts responsivos com flexbox e grid
+- Evitar position absolute/fixed exceto quando estritamente necessário
+- Manter arquivos pequenos e focados
+- Separar helpers e componentes auxiliares em arquivos próprios
+
+### TypeScript
+
+- `any` é proibido, usar `unknown` quando tipo é desconhecido
+- Usar `type` para props, unions, estados
+- Usar `interface` apenas para entidades de backend (com prefixo `I`)
+
+```typescript
+// Props de componente - usa type
+type ButtonProps = {
+  children: ReactNode;
+  variant?: "primary" | "outline";
+};
+
+// Entidade do backend - usa interface com I
+interface IUser {
+  id: string;
+  name: string;
+}
+```
+
+### Imports
+
+Ordem de imports:
+
+```typescript
+// 1. Externos (react, libs)
+import { useState } from "react";
+import { cva } from "class-variance-authority";
+
+// 2. Internos/Projeto (usar aliases)
+import { cn } from "@shared/lib";
+import { Button } from "@shared/ui";
+
+// 3. Relativos (mesmo módulo)
+import { buttonVariants } from "./styles/variants";
+```
+
+---
+
+## Padrões de Componente (Resumo)
+
+Ver detalhes completos em `overview-components.md`.
+
+### Estrutura Básica
+
+```typescript
+// 1. Imports
+import { cn } from "@shared/lib";
+import { buttonVariants } from "./styles/variants";
+
+// 2. Types
+type Props = {
+  children: ReactNode;
+  variant?: "primary" | "outline";
+  className?: string;
+};
+
+// 3. Componente (arrow function)
+const Button = ({ children, variant, className }: Props) => (
+  <button className={cn(buttonVariants({ variant }), className)}>
+    {children}
+  </button>
+);
+
+// 4. Export nomeado
+export { Button };
+```
+
+### Regras
+
+- Arrow functions sempre: `const Component = () => ...`
+- Nunca usar `React.FC`
+- Nunca usar `function Component() {}`
+- Props tipadas inline no arquivo ou em `types.ts`
+- Export nomeado, nunca default
+
+---
+
+## Estilização (Resumo)
+
+Ver detalhes completos em `overview-styling.md`.
+
+### CVA para Variantes
+
+```typescript
+import { cva, type VariantProps } from "class-variance-authority";
+
+const buttonVariants = cva(
+  "flex items-center justify-center rounded-sm font-medium", // base
+  {
+    variants: {
+      variant: {
+        primary: "bg-brand-600 text-white hover:bg-brand-700",
+        outline: "border border-neutral-400 bg-transparent",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4",
+        lg: "h-12 px-6 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+);
+```
+
+### cn() para Merge
+
+Sempre usar `cn()` para combinar classes:
+
+```typescript
+<button className={cn(buttonVariants({ variant, size }), className)} />
+```
+
+---
+
+## Tema (Resumo)
+
+Ver detalhes completos em `overview-theme.md`.
+
+### Cores Principais
+
+| Token       | Uso                     |
+| ----------- | ----------------------- |
+| `brand-*`   | Cor primária (vermelho) |
+| `neutral-*` | Tons de cinza           |
+| `green-*`   | Sucesso                 |
+| `yellow-*`  | Aviso                   |
+| `blue-*`    | Informação              |
+
+### Espaçamentos
+
+Base de 4px. Usar escala: `1` (4px), `2` (8px), `3` (12px), `4` (16px), etc.
+
+### Border Radius
+
+- `rounded-sm` = 5px
+- `rounded-md` = 10px
+- `rounded-lg` = 15px
+- `rounded-full` = 50%
+
+---
+
+## Observações
+
+Este guideline é otimizado para geração de código pelo Figma Make. O código gerado será posteriormente transferido e adaptado para o projeto real através de um processo de revisão.