ds-leobecker 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 (70) hide show
  1. package/README.md +84 -14
  2. package/dist/figma-variables.json +761 -0
  3. package/dist/tokens.json +193 -0
  4. package/dist/ui/alert.d.ts +9 -0
  5. package/dist/ui/alert.d.ts.map +1 -0
  6. package/dist/ui/alert.js +22 -0
  7. package/dist/ui/badge.d.ts +10 -0
  8. package/dist/ui/badge.d.ts.map +1 -0
  9. package/dist/ui/badge.js +20 -0
  10. package/dist/ui/button.d.ts +12 -0
  11. package/dist/ui/button.d.ts.map +1 -0
  12. package/dist/ui/button.js +33 -0
  13. package/dist/ui/card.d.ts +9 -0
  14. package/dist/ui/card.d.ts.map +1 -0
  15. package/dist/ui/card.js +16 -0
  16. package/dist/ui/checkbox.d.ts +5 -0
  17. package/dist/ui/checkbox.d.ts.map +1 -0
  18. package/dist/ui/checkbox.js +8 -0
  19. package/dist/ui/dialog.d.ts +20 -0
  20. package/dist/ui/dialog.d.ts.map +1 -0
  21. package/dist/ui/dialog.js +22 -0
  22. package/dist/ui/dropdown-menu.d.ts +28 -0
  23. package/dist/ui/dropdown-menu.d.ts.map +1 -0
  24. package/dist/ui/dropdown-menu.js +36 -0
  25. package/dist/ui/form.d.ts +24 -0
  26. package/dist/ui/form.d.ts.map +1 -0
  27. package/dist/ui/form.js +65 -0
  28. package/dist/ui/input.d.ts +4 -0
  29. package/dist/ui/input.d.ts.map +1 -0
  30. package/dist/ui/input.js +8 -0
  31. package/dist/ui/label.d.ts +6 -0
  32. package/dist/ui/label.d.ts.map +1 -0
  33. package/dist/ui/label.js +9 -0
  34. package/dist/ui/popover.d.ts +7 -0
  35. package/dist/ui/popover.d.ts.map +1 -0
  36. package/dist/ui/popover.js +10 -0
  37. package/dist/ui/select.d.ts +14 -0
  38. package/dist/ui/select.d.ts.map +1 -0
  39. package/dist/ui/select.js +26 -0
  40. package/dist/ui/table.d.ts +11 -0
  41. package/dist/ui/table.d.ts.map +1 -0
  42. package/dist/ui/table.js +20 -0
  43. package/dist/ui/tabs.d.ts +8 -0
  44. package/dist/ui/tabs.d.ts.map +1 -0
  45. package/dist/ui/tabs.js +12 -0
  46. package/dist/ui/tooltip.d.ts +8 -0
  47. package/dist/ui/tooltip.d.ts.map +1 -0
  48. package/dist/ui/tooltip.js +10 -0
  49. package/package.json +81 -20
  50. package/src/components/accent-dot.tsx +11 -0
  51. package/src/components/background-pattern.tsx +36 -0
  52. package/src/components/badge-dot.tsx +34 -0
  53. package/src/components/index.ts +7 -0
  54. package/src/components/pill.tsx +22 -0
  55. package/src/components/stripe-button.tsx +49 -0
  56. package/src/index.ts +1 -0
  57. package/src/lib/utils.ts +6 -0
  58. package/src/theme.css +63 -5
  59. package/src/tokens/tokens.json +193 -0
  60. package/guidelines/components/badge-dot.md +0 -33
  61. package/guidelines/components/button.md +0 -39
  62. package/guidelines/components/overview.md +0 -14
  63. package/guidelines/foundations/color.md +0 -48
  64. package/guidelines/foundations/motion.md +0 -37
  65. package/guidelines/foundations/overview.md +0 -7
  66. package/guidelines/foundations/radius.md +0 -19
  67. package/guidelines/foundations/spacing.md +0 -36
  68. package/guidelines/foundations/typography.md +0 -29
  69. package/guidelines/overview.md +0 -26
  70. package/guidelines/setup.md +0 -26
package/README.md CHANGED
@@ -1,31 +1,101 @@
1
1
  # DS Leo Becker
2
2
 
3
- Design system built with Tailwind CSS 4 + shadcn/ui.
3
+ Design system oficial da LBK Content House. Tailwind 4 + shadcn/ui. Brutalist, monocromático, zero-radius por padrão.
4
4
 
5
- ## Install
5
+ **Storybook:** https://leobeckerdesign.github.io/ds-leobecker/
6
+ **npm:** https://www.npmjs.com/package/ds-leobecker
7
+
8
+ ## Instalação
6
9
 
7
10
  ```bash
8
- npm install ds-leobecker
11
+ pnpm add ds-leobecker
9
12
  ```
10
13
 
11
- ## Usage
14
+ ## Uso
12
15
 
13
16
  ```css
14
- /* globals.css */
17
+ /* app.css */
15
18
  @import "tailwindcss";
16
- @import "tw-animate-css";
17
19
  @import "ds-leobecker/theme";
20
+ ```
21
+
22
+ ```tsx
23
+ import { StripeButton, BadgeDot, Pill, AccentDot, BackgroundPattern } from "ds-leobecker";
24
+
25
+ <StripeButton variant="accent">Deploy now</StripeButton>
26
+ <BadgeDot label="LIVE" variant="success" />
27
+ ```
28
+
29
+ Aplique o modo desejado no `<html>`:
30
+
31
+ ```html
32
+ <html class="dark"> <!-- padrão -->
33
+ <html class="light"> <!-- modo claro -->
34
+ ```
35
+
36
+ ## O que vem no pacote
37
+
38
+ - **Tema Tailwind 4** — `@theme inline` com paleta OKLch, 2 modos (dark + light)
39
+ - **5 componentes custom:** `StripeButton`, `BadgeDot`, `AccentDot`, `BackgroundPattern`, `Pill`
40
+ - **figma-variables.json** — importável no Figma via UI ou REST API
41
+ - **tokens.json (DTCG-like)** — fonte única pra outras ferramentas
42
+
43
+ Os componentes shadcn/ui são instalados via CLI no projeto consumidor. O tema herda automaticamente.
44
+
45
+ ## Desenvolvimento
46
+
47
+ ```bash
48
+ pnpm install
49
+ pnpm run build:tokens # tokens.json → theme.css + figma-variables.json
50
+ pnpm run storybook # dev server local (http://localhost:6006)
51
+ pnpm run build # build completo (tokens + tsc)
52
+ pnpm run build-storybook # build estático do Storybook
53
+ ```
18
54
 
19
- @layer base {
20
- * { @apply border-border outline-ring/50; }
21
- body { @apply bg-background text-foreground; }
22
- }
55
+ ### Adicionar novo componente shadcn
56
+
57
+ ```bash
58
+ pnpm dlx shadcn@latest add <component>
23
59
  ```
24
60
 
25
- ## Development
61
+ Componentes vão em `src/ui/`. Crie uma story em `stories/components/primitives/<Name>.stories.tsx`.
62
+
63
+ ## Release
64
+
65
+ Usamos [Changesets](https://github.com/changesets/changesets) pra versionamento.
26
66
 
27
67
  ```bash
28
- npm run generate # tokens.json → theme.css
29
- npm run showcase # open showcase app
30
- npm run build # build for npm
68
+ pnpm run changeset # descreve a mudança (escolhe patch/minor/major)
69
+ git commit + push # abre PR
31
70
  ```
71
+
72
+ Após merge em `main`, o GitHub Action abre uma "Version Packages" PR automática. Merge dessa PR publica no npm + builda Storybook + deploy GH Pages.
73
+
74
+ ## Estrutura
75
+
76
+ ```
77
+ ds-leobecker/
78
+ ├── .storybook/ # config Storybook
79
+ ├── src/
80
+ │ ├── tokens/ # tokens.json (fonte única)
81
+ │ ├── theme.css # gerado (Tailwind 4 @theme)
82
+ │ ├── components/ # 5 custom
83
+ │ ├── ui/ # shadcn primitives (copiados via CLI)
84
+ │ ├── lib/
85
+ │ └── index.ts
86
+ ├── stories/
87
+ │ ├── Introduction.mdx
88
+ │ ├── foundations/ # MDX: Colors, Typography, Radius, Shadow, Motion, Principles
89
+ │ ├── components/
90
+ │ │ ├── custom/
91
+ │ │ └── primitives/
92
+ │ └── patterns/
93
+ ├── scripts/
94
+ │ └── build-tokens.ts
95
+ ├── reference/ # HTMLs/CSS legados arquivados
96
+ └── .github/workflows/
97
+ ```
98
+
99
+ ## Licença
100
+
101
+ MIT