@fluencypassdevs/cycle 0.1.0 → 0.2.0

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 (4) hide show
  1. package/README.md +31 -22
  2. package/dist/styles/tokens.css +89 -13
  3. package/package.json +3 -3
  4. package/dist/styles/tailwind-theme.css +0 -87
package/README.md CHANGED
@@ -1,36 +1,45 @@
1
- This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
1
+ # Cycle Design System
2
2
 
3
- ## Getting Started
3
+ Design System da [Fluencypass](https://fluencypass.com), construido sobre shadcn/ui + Next.js 16 + Tailwind CSS 4.
4
4
 
5
- First, run the development server:
5
+ ## Instalacao via npm
6
6
 
7
7
  ```bash
8
- npm run dev
9
- # or
10
- yarn dev
11
- # or
12
- pnpm dev
13
- # or
14
- bun dev
8
+ npm install @fluencypassdevs/cycle
15
9
  ```
16
10
 
17
- Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18
-
19
- You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
11
+ ```tsx
12
+ import { Button, Badge, CycleIcon } from "@fluencypassdevs/cycle"
13
+ import "@fluencypassdevs/cycle/styles.css"
14
+ ```
20
15
 
21
- This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
16
+ ## Instalacao via shadcn Registry
22
17
 
23
- ## Learn More
18
+ ```bash
19
+ npx shadcn@latest add button -r https://cycle-design.fluencypass.com/r
20
+ ```
24
21
 
25
- To learn more about Next.js, take a look at the following resources:
22
+ ## Documentacao
26
23
 
27
- - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28
- - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
24
+ - **Setup Guide**: https://cycle-design.fluencypass.com/docs
25
+ - **Componentes**: https://cycle-design.fluencypass.com/docs/components
26
+ - **Tokens**: https://cycle-design.fluencypass.com/docs/tokens
29
27
 
30
- You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
28
+ ## Desenvolvimento
31
29
 
32
- ## Deploy on Vercel
30
+ ```bash
31
+ npm run dev # servidor de desenvolvimento
32
+ npm run build # build de producao (Next.js)
33
+ npm run build:lib # build do pacote npm
34
+ npm run lint # ESLint
35
+ ```
33
36
 
34
- The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37
+ ## Stack
35
38
 
36
- Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
39
+ - Next.js 16 (App Router)
40
+ - React 19
41
+ - TypeScript 5
42
+ - Tailwind CSS 4
43
+ - shadcn/ui (new-york style)
44
+ - Radix UI primitives
45
+ - Lucide React icons
package/dist/styles/tokens.css CHANGED
@@ -1,15 +1,91 @@
1
1
  /**
2
- * @fluencypassdevs/cycle — Design Tokens
2
+ * @fluencypassdevs/cycle — Complete Styles
3
3
  *
4
- * Import this file in your app to get Cycle's design tokens:
5
- * import "@fluencypassdevs/cycle/styles.css"
4
+ * One-line setup in your globals.css:
6
5
  *
7
- * These are pure CSS custom properties. They work with or without Tailwind.
8
- * If using Tailwind CSS 4, also copy the theme block from tailwind-theme.css
9
- * into your globals.css.
6
+ * @import "tailwindcss";
7
+ * @import "@fluencypassdevs/cycle/styles.css";
8
+ *
9
+ * That's it. Tokens, theme mapping, dark mode — all included.
10
+ * You can override any CSS variable after this import.
10
11
  */
11
12
 
12
- /* --- Color Primitives (Cycle scale) --- */
13
+ /* === Dark mode variant === */
14
+ @custom-variant dark (&:is(.dark *));
15
+
16
+ /* === Tailwind Theme Mapping === */
17
+ @theme inline {
18
+ --color-background: var(--background);
19
+ --color-foreground: var(--foreground);
20
+ --color-card: var(--card);
21
+ --color-card-foreground: var(--card-foreground);
22
+ --color-popover: var(--popover);
23
+ --color-popover-foreground: var(--popover-foreground);
24
+ --color-primary: var(--primary);
25
+ --color-primary-foreground: var(--primary-foreground);
26
+ --color-secondary: var(--secondary);
27
+ --color-secondary-foreground: var(--secondary-foreground);
28
+ --color-muted: var(--muted);
29
+ --color-muted-foreground: var(--muted-foreground);
30
+ --color-accent: var(--accent);
31
+ --color-accent-foreground: var(--accent-foreground);
32
+ --color-destructive: var(--destructive);
33
+ --color-destructive-foreground: var(--destructive-foreground);
34
+ --color-border: var(--border);
35
+ --color-input: var(--input);
36
+ --color-ring: var(--ring);
37
+ --color-chart-1: var(--chart-1);
38
+ --color-chart-2: var(--chart-2);
39
+ --color-chart-3: var(--chart-3);
40
+ --color-chart-4: var(--chart-4);
41
+ --color-chart-5: var(--chart-5);
42
+ --color-sidebar: var(--sidebar);
43
+ --color-sidebar-foreground: var(--sidebar-foreground);
44
+ --color-sidebar-primary: var(--sidebar-primary);
45
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
46
+ --color-sidebar-accent: var(--sidebar-accent);
47
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
48
+ --color-sidebar-border: var(--sidebar-border);
49
+ --color-sidebar-ring: var(--sidebar-ring);
50
+ --color-alpha-backdrop: var(--alpha-backdrop);
51
+ --color-alpha-overlay: var(--alpha-overlay);
52
+ --color-neutral-foreground: var(--neutral-foreground);
53
+ --color-neutral-muted-foreground: var(--neutral-muted-foreground);
54
+ --color-neutral-border: var(--neutral-border);
55
+ --color-neutral-input: var(--neutral-input);
56
+ --color-neutral-bg: var(--neutral-bg);
57
+ --color-neutral-accent: var(--neutral-accent);
58
+ --radius-sm: calc(var(--radius) - 4px);
59
+ --radius-md: calc(var(--radius) - 2px);
60
+ --radius-lg: var(--radius);
61
+ --radius-xl: calc(var(--radius) + 4px);
62
+
63
+ --shadow-xs: var(--cycle-shadow-xs);
64
+ --shadow-sm: var(--cycle-shadow-sm);
65
+ --shadow-md: var(--cycle-shadow-md);
66
+ --shadow-lg: var(--cycle-shadow-lg);
67
+ --shadow-xl: var(--cycle-shadow-xl);
68
+
69
+ --text-2xs: 0.625rem;
70
+ --text-4xl: 2.5rem;
71
+ --text-6xl: 4rem;
72
+
73
+ --leading-3_5: 0.875rem;
74
+ --leading-4_5: 1.125rem;
75
+ --leading-7_5: 1.875rem;
76
+ --leading-15: 3.75rem;
77
+ --leading-20_5: 5.125rem;
78
+ --leading-22_5: 5.625rem;
79
+
80
+ --tracking-tighter: -0.05em;
81
+ --tracking-tight: -0.025em;
82
+ --tracking-normal: 0em;
83
+ --tracking-wide: 0.025em;
84
+ --tracking-wider: 0.05em;
85
+ --tracking-widest: 0.1em;
86
+ }
87
+
88
+ /* === Color Primitives (Cycle scale) === */
13
89
  :root {
14
90
  --base-white: #FFFFFF;
15
91
  --base-black: #000000;
@@ -26,7 +102,7 @@
26
102
  --gray-950: #0D0D12;
27
103
  }
28
104
 
29
- /* --- Light Mode: Neutral (global theme) --- */
105
+ /* === Light Mode: Neutral (global theme) === */
30
106
  :root {
31
107
  --background: var(--base-white);
32
108
  --foreground: var(--gray-950);
@@ -79,7 +155,7 @@
79
155
  --sidebar-ring: var(--gray-500);
80
156
  }
81
157
 
82
- /* --- Dark Mode: Neutral --- */
158
+ /* === Dark Mode: Neutral === */
83
159
  .dark {
84
160
  --background: var(--base-black);
85
161
  --foreground: var(--gray-50);
@@ -131,7 +207,7 @@
131
207
  --sidebar-ring: var(--gray-400);
132
208
  }
133
209
 
134
- /* --- Theme Variations: Light Mode --- */
210
+ /* === Theme Variations: Light Mode === */
135
211
 
136
212
  .theme-brand {
137
213
  --background: #FFE8E8;
@@ -293,7 +369,7 @@
293
369
  --ring: #8F1717;
294
370
  }
295
371
 
296
- /* --- Theme Variations: Dark Mode --- */
372
+ /* === Theme Variations: Dark Mode === */
297
373
 
298
374
  .dark .theme-brand,
299
375
  .theme-brand:is(.dark *) {
@@ -463,7 +539,7 @@
463
539
  --ring: #ED5555;
464
540
  }
465
541
 
466
- /* --- Base layer --- */
542
+ /* === Base layer === */
467
543
  *, *::before, *::after {
468
544
  border-color: var(--border);
469
545
  }
@@ -473,7 +549,7 @@ body {
473
549
  color: var(--foreground);
474
550
  }
475
551
 
476
- /* --- Animations --- */
552
+ /* === Animations === */
477
553
  @keyframes like-pop {
478
554
  0% { transform: scale(1); }
479
555
  40% { transform: scale(1.25); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluencypassdevs/cycle",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Cycle Design System — UI component library by Fluencypass",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -32,7 +32,7 @@
32
32
  "types": "./dist/lib/utils.d.ts"
33
33
  },
34
34
  "./styles.css": "./dist/styles/tokens.css",
35
- "./tailwind-theme.css": "./dist/styles/tailwind-theme.css"
35
+ "./tailwind-theme.css": "./dist/styles/tokens.css"
36
36
  },
37
37
  "files": [
38
38
  "dist",
@@ -42,7 +42,7 @@
42
42
  "scripts": {
43
43
  "dev": "next dev",
44
44
  "build": "next build",
45
- "build:lib": "tsup && mkdir -p dist/styles && cp src/styles/tokens.css dist/styles/tokens.css && cp src/styles/tailwind-theme.css dist/styles/tailwind-theme.css",
45
+ "build:lib": "tsup && mkdir -p dist/styles && cp src/styles/tokens.css dist/styles/tokens.css",
46
46
  "start": "next start",
47
47
  "lint": "eslint",
48
48
  "registry:build": "tsx scripts/build-registry.ts",
package/dist/styles/tailwind-theme.css DELETED
@@ -1,87 +0,0 @@
1
- /**
2
- * @fluencypassdevs/cycle — Tailwind CSS 4 Theme
3
- *
4
- * Copy this @theme block into your project's globals.css
5
- * (after your @import "tailwindcss" line) to map Cycle's
6
- * CSS variables to Tailwind utility classes.
7
- *
8
- * Usage in your globals.css:
9
- * @import "tailwindcss";
10
- * @import "tw-animate-css";
11
- * @custom-variant dark (&:is(.dark *));
12
- *
13
- * @theme inline {
14
- * ... paste the contents below ...
15
- * }
16
- */
17
-
18
- @theme inline {
19
- --color-background: var(--background);
20
- --color-foreground: var(--foreground);
21
- --color-card: var(--card);
22
- --color-card-foreground: var(--card-foreground);
23
- --color-popover: var(--popover);
24
- --color-popover-foreground: var(--popover-foreground);
25
- --color-primary: var(--primary);
26
- --color-primary-foreground: var(--primary-foreground);
27
- --color-secondary: var(--secondary);
28
- --color-secondary-foreground: var(--secondary-foreground);
29
- --color-muted: var(--muted);
30
- --color-muted-foreground: var(--muted-foreground);
31
- --color-accent: var(--accent);
32
- --color-accent-foreground: var(--accent-foreground);
33
- --color-destructive: var(--destructive);
34
- --color-destructive-foreground: var(--destructive-foreground);
35
- --color-border: var(--border);
36
- --color-input: var(--input);
37
- --color-ring: var(--ring);
38
- --color-chart-1: var(--chart-1);
39
- --color-chart-2: var(--chart-2);
40
- --color-chart-3: var(--chart-3);
41
- --color-chart-4: var(--chart-4);
42
- --color-chart-5: var(--chart-5);
43
- --color-sidebar: var(--sidebar);
44
- --color-sidebar-foreground: var(--sidebar-foreground);
45
- --color-sidebar-primary: var(--sidebar-primary);
46
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
47
- --color-sidebar-accent: var(--sidebar-accent);
48
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
49
- --color-sidebar-border: var(--sidebar-border);
50
- --color-sidebar-ring: var(--sidebar-ring);
51
- --color-alpha-backdrop: var(--alpha-backdrop);
52
- --color-alpha-overlay: var(--alpha-overlay);
53
- --color-neutral-foreground: var(--neutral-foreground);
54
- --color-neutral-muted-foreground: var(--neutral-muted-foreground);
55
- --color-neutral-border: var(--neutral-border);
56
- --color-neutral-input: var(--neutral-input);
57
- --color-neutral-bg: var(--neutral-bg);
58
- --color-neutral-accent: var(--neutral-accent);
59
- --radius-sm: calc(var(--radius) - 4px);
60
- --radius-md: calc(var(--radius) - 2px);
61
- --radius-lg: var(--radius);
62
- --radius-xl: calc(var(--radius) + 4px);
63
-
64
- --shadow-xs: var(--cycle-shadow-xs);
65
- --shadow-sm: var(--cycle-shadow-sm);
66
- --shadow-md: var(--cycle-shadow-md);
67
- --shadow-lg: var(--cycle-shadow-lg);
68
- --shadow-xl: var(--cycle-shadow-xl);
69
-
70
- --text-2xs: 0.625rem;
71
- --text-4xl: 2.5rem;
72
- --text-6xl: 4rem;
73
-
74
- --leading-3_5: 0.875rem;
75
- --leading-4_5: 1.125rem;
76
- --leading-7_5: 1.875rem;
77
- --leading-15: 3.75rem;
78
- --leading-20_5: 5.125rem;
79
- --leading-22_5: 5.625rem;
80
-
81
- --tracking-tighter: -0.05em;
82
- --tracking-tight: -0.025em;
83
- --tracking-normal: 0em;
84
- --tracking-wide: 0.025em;
85
- --tracking-wider: 0.05em;
86
- --tracking-widest: 0.1em;
87
- }