npm - @fluencypassdevs/cycle - Versions diffs - 0.7.0 → 0.7.2 - Mend

@fluencypassdevs/cycle 0.7.0 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -5,7 +5,22 @@ Design System da [Fluencypass](https://fluencypass.com), construido sobre shadcn
 ## Instalacao
 ```bash
-npm install @fluencypassdevs/cycle
+npm install @fluencypassdevs/cycle geist
+```
+No `src/app/layout.tsx`, configurar a fonte Geist:
+```tsx
+import { GeistSans } from "geist/font/sans"
+import { GeistMono } from "geist/font/mono"
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="pt-BR" className={`${GeistSans.variable} ${GeistMono.variable}`}>
+      <body>{children}</body>
+    </html>
+  )
+}
 ```
 No `globals.css`:

package/bin/mcp.mjs CHANGED Viewed

@@ -742,10 +742,29 @@ import { Home } from "lucide-react"  // PROIBIDO
 ## 1. Instalar o pacote:
 \`\`\`bash
-npm install @fluencypassdevs/cycle
+npm install @fluencypassdevs/cycle geist
 \`\`\`
-## 2. Configurar CSS (globals.css):
+## 2. Configurar a fonte Geist (OBRIGATORIO):
+No \`src/app/layout.tsx\`:
+\`\`\`tsx
+import { GeistSans } from "geist/font/sans"
+import { GeistMono } from "geist/font/mono"
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="pt-BR" className={\`\${GeistSans.variable} \${GeistMono.variable}\`}>
+      <body>{children}</body>
+    </html>
+  )
+}
+\`\`\`
+> Sem isso, todos os textos usam a fonte do sistema em vez da Geist.
+## 3. Configurar CSS (globals.css):
 \`\`\`css
 @import "tailwindcss";
@@ -754,26 +773,24 @@ npm install @fluencypassdevs/cycle
 So isso! O \`@source\` do Tailwind v4 ja esta embutido dentro do CSS do pacote — nao precisa adicionar manualmente.
-> Se o projeto tinha \`@source "../../node_modules/@fluencypassdevs/cycle/dist"\` no globals.css, pode remover (a partir da v0.7.0 e automatico).
-## 3. Importar componentes:
+## 4. Importar componentes:
 \`\`\`tsx
 import { Button, Input, Badge } from "@fluencypassdevs/cycle"
 \`\`\`
-## 4. Importar icones (OBRIGATORIO via Cycle):
+## 5. Importar icones (OBRIGATORIO via Cycle):
 \`\`\`tsx
 import { CycleIcon } from "@fluencypassdevs/cycle"
 import { Home } from "@fluencypassdevs/cycle/icons/lucide"
 // NUNCA: import { Home } from "lucide-react" ❌
 \`\`\`
-## 5. Utilidades:
+## 6. Utilidades:
 \`\`\`tsx
 import { cn } from "@fluencypassdevs/cycle/lib/utils"
 \`\`\`
-## 6. Configurar regras para IA (opcional):
+## 7. Configurar regras para IA (opcional):
 \`\`\`bash
 npx cycle init
 \`\`\`

package/cli/CLAUDE-section.md CHANGED Viewed

@@ -17,6 +17,31 @@ import { CycleIcon } from "@fluencypassdevs/cycle/icons"
 import { cn } from "@fluencypassdevs/cycle/lib/utils"
 ```
+## Fonte Geist (OBRIGATORIO)
+O Cycle usa a fonte **Geist**. Instalar junto com o pacote:
+```bash
+npm install @fluencypassdevs/cycle geist
+```
+No `src/app/layout.tsx`:
+```tsx
+import { GeistSans } from "geist/font/sans"
+import { GeistMono } from "geist/font/mono"
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="pt-BR" className={`${GeistSans.variable} ${GeistMono.variable}`}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+> Sem isso, todos os textos usam a fonte do sistema em vez da Geist.
 ## CSS (globals.css)
 O `globals.css` DEVE conter:
@@ -31,9 +56,10 @@ O `globals.css` DEVE conter:
 ### Troubleshooting: Componentes sem estilo
 Se componentes Cycle aparecem sem estilo, verifique:
-1. O `@import "@fluencypassdevs/cycle/styles.css";` esta presente no globals.css?
-2. O pacote esta instalado? `npm list @fluencypassdevs/cycle`
-3. Versao >= 0.7.0? O @source automatico so existe a partir desta versao.
+1. A fonte Geist esta configurada no layout.tsx?
+2. O `@import "@fluencypassdevs/cycle/styles.css";` esta presente no globals.css?
+3. O pacote esta instalado? `npm list @fluencypassdevs/cycle`
+4. Versao >= 0.7.2? Fixes criticos de CSS nesta versao.
 ## Regras para IA (IMPORTANTE)

package/dist/styles/tokens.css CHANGED Viewed

@@ -544,13 +544,15 @@
 }
 /* === Base layer === */
-*, *::before, *::after {
-  border-color: var(--border);
-}
+@layer base {
+  *, *::before, *::after {
+    border-color: var(--border);
+  }
-body {
-  background-color: var(--background);
-  color: var(--foreground);
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
 }
 /* === Animations === */
@@ -683,3 +685,96 @@ body {
   line-height: 3.75rem;     /* 60px */
   letter-spacing: -0.05em;
 }
+/* --- Display --- */
+@utility display-md {
+  font-family: var(--font-sans);
+  font-size: 4rem;         /* 64px */
+  font-weight: 700;
+  line-height: 5.125rem;    /* 82px */
+  letter-spacing: -0.05em;
+}
+@utility display-md-light {
+  font-family: var(--font-sans);
+  font-size: 4rem;         /* 64px */
+  font-weight: 300;
+  line-height: 5.125rem;    /* 82px */
+  letter-spacing: -0.05em;
+}
+@utility display-lg {
+  font-family: var(--font-sans);
+  font-size: 4.5rem;       /* 72px */
+  font-weight: 700;
+  line-height: 5.625rem;    /* 90px */
+  letter-spacing: -0.05em;
+}
+@utility display-lg-light {
+  font-family: var(--font-sans);
+  font-size: 4.5rem;       /* 72px */
+  font-weight: 300;
+  line-height: 5.625rem;    /* 90px */
+  letter-spacing: -0.05em;
+}
+/* --- Button --- */
+@utility button-sm {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;      /* 12px */
+  font-weight: 500;
+  line-height: 0.75rem;     /* 12px — 1:1 ratio */
+  letter-spacing: 0em;
+}
+@utility button-md {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;     /* 14px */
+  font-weight: 500;
+  line-height: 0.875rem;    /* 14px — 1:1 ratio */
+  letter-spacing: 0em;
+}
+@utility button-lg {
+  font-family: var(--font-sans);
+  font-size: 1rem;         /* 16px */
+  font-weight: 500;
+  line-height: 1rem;         /* 16px — 1:1 ratio */
+  letter-spacing: 0em;
+}
+/* --- UI --- */
+@utility ui-label {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;     /* 14px */
+  font-weight: 500;
+  line-height: 0.875rem;    /* 14px */
+  letter-spacing: 0em;
+}
+@utility ui-caption {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;      /* 12px */
+  font-weight: 400;
+  line-height: 1rem;         /* 16px */
+  letter-spacing: 0em;
+}
+@utility ui-overline {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;      /* 12px */
+  font-weight: 500;
+  line-height: 1rem;         /* 16px */
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+/* --- Animations --- */
+@utility animate-like-pop {
+  animation: like-pop 350ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+@utility animate-like-burst {
+  animation: like-burst 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluencypassdevs/cycle",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Cycle Design System — UI component library by Fluencypass",
   "license": "MIT",
   "repository": {