@cupcodev/ui 1.0.2 → 1.2.1

package/README.md

@@ -1,6 +1,6 @@
 ## @cupcodev/ui
 
-Design system Cupcode pronto para uso (componentes React + estilos + presets Tailwind).
+Design system Cupcode pronto para uso (componentes React + estilos + preset Tailwind).
 
 ### Instalação
 
@@ -11,8 +11,8 @@ npm install @cupcodev/ui
 Além do pacote, instale as peer dependencies listadas em `peerDependencies` (React 18, Tailwind 3, Radix UI, etc.). Um comando típico:
 
 ```bash
-npm install react react-dom tailwindcss class-variance-authority tailwind-merge lucide-react next-themes react-router-dom \
-cmdk embla-carousel-react input-otp react-day-picker react-resizable-panels recharts sonner vaul \
+npm install react react-dom tailwindcss class-variance-authority tailwind-merge lucide-react \
+cmdk date-fns embla-carousel-react input-otp react-day-picker react-resizable-panels recharts sonner vaul \
 @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-aspect-ratio @radix-ui/react-avatar \
 @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog \
 @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar \
@@ -22,7 +22,11 @@ cmdk embla-carousel-react input-otp react-day-picker react-resizable-panels rech
 @radix-ui/react-toggle-group @radix-ui/react-tooltip tailwindcss-animate @tailwindcss/typography
 ```
 
-### Tailwind
+Compatibilidade de runtime: Node.js `>=18.18.0`.
+Compatibilidade de estilo: Tailwind CSS v3 (`tailwindcss@^3.4.x`).
+Gerenciador oficial: `npm` (lockfile único: `package-lock.json`).
+
+### Tailwind (obrigatorio para `styles.css`)
 
 Use o preset disponibilizado pelo pacote:
 
@@ -31,18 +35,29 @@ Use o preset disponibilizado pelo pacote:
 module.exports = {
   presets: [require("@cupcodev/ui/tailwind-preset.cjs")],
   content: [
-    "./src/**/*.{ts,tsx}", // ajuste para o seu projeto
-    "./node_modules/@cupcodev/ui/dist/**/*.{js,jsx}", // necessário para as classes dos componentes
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@cupcodev/ui/dist/**/*.{js,jsx}",
   ],
 };
 ```
 
-E importe os estilos globais (tokens + reset):
+E importe os estilos completos:
+
+```ts
+import "@cupcodev/ui/styles.css";
+```
+
+Se voce quiser apenas variaveis + base minima (sem classes utilitarias/glass/dock), use:
 
 ```ts
-import "@cupcodev/ui/styles/global.css";
+import "@cupcodev/ui/styles/base.css";
 ```
 
+Importante:
+- `styles.css` pressupoe Tailwind + preset configurados no app consumidor.
+- `styles/global.css` nao deve ser usado isoladamente, porque nao inclui os tokens.
+- `styles/base.css` e o entrypoint seguro para tema/tokens quando voce nao quer carregar o pacote visual completo.
+
 ### Uso básico
 
 ```tsx
@@ -53,30 +68,85 @@ export default function Example() {
 }
 ```
 
-Todos os componentes Cupcode e shadcn/ui base são reexportados de `@cupcodev/ui`. Exemplo:
-
-```ts
-import { NavbarCupcode, ThemeToggle, Card } from "@cupcodev/ui";
-```
+Todos os componentes Cupcode e shadcn/ui base são reexportados de `@cupcodev/ui`.
 
-Para importações segmentadas, há submódulos como `@cupcodev/ui/charts`, que expõe apenas os componentes de gráficos/carrossel.
+### MainNavbar sem router obrigatório
 
-### Tema / Dark mode
-
-O `ThemeToggle` depende de [next-themes](https://github.com/pacocoursey/next-themes). Adicione o provider na raiz do app:
+`MainNavbar` não depende de `react-router-dom`. Para integração SPA, passe `pathname` e `onNavigate`:
 
 ```tsx
-import { ThemeProvider } from "next-themes";
+import { MainNavbar } from "@cupcodev/ui";
+import { useLocation, useNavigate } from "react-router-dom";
+
+export function Header() {
+  const location = useLocation();
+  const navigate = useNavigate();
 
-export function App() {
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      {/* sua aplicação */}
-    </ThemeProvider>
+    <MainNavbar
+      pathname={location.pathname}
+      onNavigate={(href) => navigate(href)}
+    />
   );
 }
+```
+
+### ThemeToggle sem next-themes obrigatório
+
+`ThemeToggle` alterna a classe `dark` no `document.documentElement` quando usado de forma não-controlada:
+
+```tsx
+import { ThemeToggle } from "@cupcodev/ui";
+
+export function HeaderActions() {
+  return <ThemeToggle />;
+}
+```
+
+Modo controlado (opcional):
 
-No Next.js (app router), coloque o provider em `layout.tsx`; em Vite/CRA, envolva a raiz.
+```tsx
+<ThemeToggle theme={theme} onThemeChange={setTheme} />
+```
+
+### Qualidade e CI
+
+Validações automatizadas disponíveis no projeto:
+
+```bash
+npm run lint
+npm run typecheck
+npm run build:lib
+npm run build:site
+npm run test:consumer
+```
+
+- `lint` roda com `--max-warnings=0` (qualquer warning quebra o gate).
+- `typecheck`: valida tipos com `tsc -b` usando as configs estritas do projeto.
+- `build:lib`: gera o pacote publicável (`dist`) via `tsup` sem sourcemaps.
+- `build:site`: gera somente o site/docs via Vite.
+- `test:consumer`: cria um projeto externo temporário, instala o tarball de `@cupcodev/ui` e valida `typecheck + build`.
+- `prepublishOnly` executa `check:release` (`lint + typecheck + build:lib`) antes de qualquer publicação.
+- Pipeline CI em `.github/workflows/ci.yml` roda `check:release`, `build:site` e `test:consumer` em todo push/PR.
+
+App de consumo real versionado: `examples/vite-consumer`.
+
+### Setup do chat (Supabase + Realtime)
+
+Para configurar o chat com dados reais e notificacoes em tempo real:
+
+1. Use `.env.chat.example` como referencia para preencher seu `.env.local`.
+2. Rode no SQL Editor do Supabase:
+   - `scripts/supabase/chat/00_bootstrap_chat_public.sql`
+   - `scripts/supabase/chat/01_confirm_tables.sql`
+   - `scripts/supabase/chat/02_confirm_columns.sql`
+   - `scripts/supabase/chat/03_enable_realtime.sql`
+   - `scripts/supabase/chat/04_verify_realtime.sql`
+   - `scripts/supabase/chat/06_fix_rls_and_avatars_for_external_auth.sql` (se usar auth externa)
+3. Reinicie o app: `npm run dev`.
+4. Valide o fluxo com `scripts/supabase/chat/05_acceptance_checks.sql`.
+
+Guia completo: `docs/chat-supabase-setup.md`.
 
 ### Peers
 
@@ -86,14 +156,12 @@ No Next.js (app router), coloque o provider em `layout.tsx`; em Vite/CRA, envolv
 | `tailwindcss` | ^3.4.17 | util classes + preset |
 | `class-variance-authority`, `tailwind-merge` | ^0.7.1 / ^2.6.0 | variantes e merge de classes |
 | `lucide-react` | ^0.462.0 | ícones |
-| `next-themes` | ^0.3.0 | controle de tema (ThemeToggle) |
 | `@radix-ui/*` | conforme `package.json` | primitives dos componentes shadcn |
-| `cmdk`, `embla-carousel-react`, `react-day-picker`, `input-otp`, `react-resizable-panels`, `recharts`, `sonner`, `vaul` | conforme `package.json` | componentes específicos (command palette, carousel, calendário, OTP, panels, charts, toasts, drawers) |
+| `cmdk`, `date-fns`, `embla-carousel-react`, `react-day-picker`, `input-otp`, `react-resizable-panels`, `recharts`, `sonner`, `vaul` | conforme `package.json` | componentes específicos |
 | `tailwindcss-animate`, `@tailwindcss/typography` | ^1.0.7 / ^0.5.16 | plugins usados pelo preset |
 
 Consulte `peerDependencies` para a lista completa ao instalar.
-```
 
 ### Tipos e superfícies
 
-Os componentes são exportados via `export { Component }` (ex.: `export { default as DockWrapper }`). Importe sempre de `@cupcodev/ui` para garantir que os tipos e estilos correspondentes estejam alinhados.
+Importe de `@cupcodev/ui` para manter tipos e estilos alinhados. Para gráficos, use também o submódulo `@cupcodev/ui/charts`.

package/dist/{charts-KwYmX5He.d.cts → charts-DqY2Q-7w.d.cts}

@@ -9,10 +9,10 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
 
-declare const buttonVariants: (props?: {
-    variant?: "link" | "default" | "secondary" | "outline" | "destructive" | "ghost";
-    size?: "default" | "sm" | "lg" | "icon";
-} & class_variance_authority_types.ClassProp) => string;
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "secondary" | "outline" | "default" | "destructive" | "ghost" | null | undefined;
+    size?: "sm" | "lg" | "default" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }
@@ -57,7 +57,7 @@ declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAt
 declare const ChartStyle: ({ id, config }: {
     id: string;
     config: ChartConfig;
-}) => react_jsx_runtime.JSX.Element;
+}) => react_jsx_runtime.JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> & {
     accessibilityLayer?: boolean;
@@ -66,14 +66,14 @@ declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<Recharts
     allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
     animationDuration?: recharts_types_util_types.AnimationDuration;
     animationEasing?: recharts_types_util_types.AnimationTiming;
-    content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>;
+    content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> | undefined;
     coordinate?: Partial<recharts_types_util_types.Coordinate>;
     cursor?: boolean | React.ReactElement | React.SVGProps<SVGElement>;
     filterNull?: boolean;
     defaultIndex?: number;
     isAnimationActive?: boolean;
     offset?: number;
-    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>>;
+    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>> | undefined;
     position?: Partial<recharts_types_util_types.Coordinate>;
     reverseDirection?: recharts_types_util_types.AllowInDimension;
     shared?: boolean;
@@ -89,7 +89,7 @@ declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<Recharts
     labelKey?: string;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ChartLegend: typeof RechartsPrimitive.Legend;
-declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "verticalAlign" | "payload"> & {
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
     hideIcon?: boolean;
     nameKey?: string;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/{charts-KwYmX5He.d.ts → charts-DqY2Q-7w.d.ts}

@@ -9,10 +9,10 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
 
-declare const buttonVariants: (props?: {
-    variant?: "link" | "default" | "secondary" | "outline" | "destructive" | "ghost";
-    size?: "default" | "sm" | "lg" | "icon";
-} & class_variance_authority_types.ClassProp) => string;
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "secondary" | "outline" | "default" | "destructive" | "ghost" | null | undefined;
+    size?: "sm" | "lg" | "default" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }
@@ -57,7 +57,7 @@ declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAt
 declare const ChartStyle: ({ id, config }: {
     id: string;
     config: ChartConfig;
-}) => react_jsx_runtime.JSX.Element;
+}) => react_jsx_runtime.JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> & {
     accessibilityLayer?: boolean;
@@ -66,14 +66,14 @@ declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<Recharts
     allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
     animationDuration?: recharts_types_util_types.AnimationDuration;
     animationEasing?: recharts_types_util_types.AnimationTiming;
-    content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>;
+    content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> | undefined;
     coordinate?: Partial<recharts_types_util_types.Coordinate>;
     cursor?: boolean | React.ReactElement | React.SVGProps<SVGElement>;
     filterNull?: boolean;
     defaultIndex?: number;
     isAnimationActive?: boolean;
     offset?: number;
-    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>>;
+    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>> | undefined;
     position?: Partial<recharts_types_util_types.Coordinate>;
     reverseDirection?: recharts_types_util_types.AllowInDimension;
     shared?: boolean;
@@ -89,7 +89,7 @@ declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<Recharts
     labelKey?: string;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ChartLegend: typeof RechartsPrimitive.Legend;
-declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "verticalAlign" | "payload"> & {
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
     hideIcon?: boolean;
     nameKey?: string;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/charts.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -497,4 +498,3 @@ CarouselNext.displayName = "CarouselNext";
   ChartTooltip,
   ChartTooltipContent
 });
-//# sourceMappingURL=charts.cjs.map

package/dist/charts.d.cts

@@ -1,4 +1,4 @@
-export { c as Carousel, C as CarouselApi, d as CarouselContent, e as CarouselItem, g as CarouselNext, f as CarouselPrevious, n as ChartConfig, h as ChartContainer, k as ChartLegend, l as ChartLegendContent, m as ChartStyle, i as ChartTooltip, j as ChartTooltipContent } from './charts-KwYmX5He.cjs';
+export { c as Carousel, C as CarouselApi, d as CarouselContent, e as CarouselItem, g as CarouselNext, f as CarouselPrevious, n as ChartConfig, h as ChartContainer, k as ChartLegend, l as ChartLegendContent, m as ChartStyle, i as ChartTooltip, j as ChartTooltipContent } from './charts-DqY2Q-7w.cjs';
 import 'recharts/types/util/payload/getUniqPayload';
 import 'recharts/types/component/Tooltip';
 import 'recharts/types/util/types';

package/dist/charts.d.ts

@@ -1,4 +1,4 @@
-export { c as Carousel, C as CarouselApi, d as CarouselContent, e as CarouselItem, g as CarouselNext, f as CarouselPrevious, n as ChartConfig, h as ChartContainer, k as ChartLegend, l as ChartLegendContent, m as ChartStyle, i as ChartTooltip, j as ChartTooltipContent } from './charts-KwYmX5He.js';
+export { c as Carousel, C as CarouselApi, d as CarouselContent, e as CarouselItem, g as CarouselNext, f as CarouselPrevious, n as ChartConfig, h as ChartContainer, k as ChartLegend, l as ChartLegendContent, m as ChartStyle, i as ChartTooltip, j as ChartTooltipContent } from './charts-DqY2Q-7w.js';
 import 'recharts/types/util/payload/getUniqPayload';
 import 'recharts/types/component/Tooltip';
 import 'recharts/types/util/types';

package/dist/charts.js

@@ -451,4 +451,3 @@ export {
   ChartTooltip,
   ChartTooltipContent
 };
-//# sourceMappingURL=charts.js.map