@cupcodev/ui 1.0.2 → 1.0.7

package/README.md

@@ -1,99 +1,150 @@
-## @cupcodev/ui
-
-Design system Cupcode pronto para uso (componentes React + estilos + presets Tailwind).
-
-### Instalação
-
-```bash
-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 \
-@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 \
-@radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group \
-@radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider \
-@radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle \
-@radix-ui/react-toggle-group @radix-ui/react-tooltip tailwindcss-animate @tailwindcss/typography
+## @cupcodev/ui
+
+Design system Cupcode pronto para uso (componentes React + estilos + preset Tailwind).
+
+### Instalação
+
+```bash
+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 \
+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 \
+@radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group \
+@radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider \
+@radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle \
+@radix-ui/react-toggle-group @radix-ui/react-tooltip tailwindcss-animate @tailwindcss/typography
+```
+
+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:
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require("@cupcodev/ui/tailwind-preset.cjs")],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@cupcodev/ui/dist/**/*.{js,jsx}",
+  ],
+};
+```
+
+E importe os estilos completos:
+
+```ts
+import "@cupcodev/ui/styles.css";
 ```
 
-### Tailwind
-
-Use o preset disponibilizado pelo pacote:
-
-```js
-// tailwind.config.js
-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
-  ],
-};
-```
-
-E importe os estilos globais (tokens + reset):
+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";
 ```
 
-### Uso básico
-
-```tsx
-import { Button } from "@cupcodev/ui";
-
-export default function Example() {
-  return <Button variant="default">Oi Cupcode</Button>;
-}
-```
-
-Todos os componentes Cupcode e shadcn/ui base são reexportados de `@cupcodev/ui`. Exemplo:
-
-```ts
-import { NavbarCupcode, ThemeToggle, Card } from "@cupcodev/ui";
-```
-
-Para importações segmentadas, há submódulos como `@cupcodev/ui/charts`, que expõe apenas os componentes de gráficos/carrossel.
-
-### Tema / Dark mode
-
-O `ThemeToggle` depende de [next-themes](https://github.com/pacocoursey/next-themes). Adicione o provider na raiz do app:
-
-```tsx
-import { ThemeProvider } from "next-themes";
-
-export function App() {
-  return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      {/* sua aplicação */}
-    </ThemeProvider>
-  );
-}
-
-No Next.js (app router), coloque o provider em `layout.tsx`; em Vite/CRA, envolva a raiz.
-
-### Peers
-
-| Pacote | Versão mínima | Uso no DS |
-| --- | --- | --- |
-| `react`, `react-dom` | ^18.3.1 | base dos componentes |
-| `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) |
-| `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.
+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
+import { Button } from "@cupcodev/ui";
+
+export default function Example() {
+  return <Button variant="default">Oi Cupcode</Button>;
+}
+```
+
+Todos os componentes Cupcode e shadcn/ui base são reexportados de `@cupcodev/ui`.
+
+### MainNavbar sem router obrigatório
+
+`MainNavbar` não depende de `react-router-dom`. Para integração SPA, passe `pathname` e `onNavigate`:
+
+```tsx
+import { MainNavbar } from "@cupcodev/ui";
+import { useLocation, useNavigate } from "react-router-dom";
+
+export function Header() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <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):
+
+```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`.
+
+### Peers
+
+| Pacote | Versão mínima | Uso no DS |
+| --- | --- | --- |
+| `react`, `react-dom` | ^18.3.1 | base dos componentes |
+| `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 |
+| `@radix-ui/*` | conforme `package.json` | primitives dos componentes shadcn |
+| `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
+
+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