@journal-ds/react 1.0.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.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Journal DS
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,108 @@
1
+ # Journal Design System
2
+
3
+ A warm, editorial journal-style component library for Tailwind CSS. Built on Radix UI primitives with Playfair Display + Lora typography. Open source. Copy and paste into your apps.
4
+
5
+ ## Installation
6
+
7
+ ### 1. Install the package
8
+
9
+ ```bash
10
+ npm install @journal-ds/react
11
+ # or
12
+ pnpm add @journal-ds/react
13
+ # or
14
+ yarn add @journal-ds/react
15
+ # or
16
+ bun add @journal-ds/react
17
+ ```
18
+
19
+ ### 2. Import the styles
20
+
21
+ Add the Journal theme to your global CSS file:
22
+
23
+ ```css
24
+ @import "@journal-ds/react/styles";
25
+ ```
26
+
27
+ Or copy the [theme variables](https://journal-ds.dev/docs/theming) into your own CSS file.
28
+
29
+ ### 3. Load the fonts
30
+
31
+ Journal uses three Google Fonts — Lora (body), Playfair Display (headings), and JetBrains Mono (code):
32
+
33
+ ```tsx
34
+ import { Lora, Playfair_Display, JetBrains_Mono } from "next/font/google"
35
+
36
+ const lora = Lora({ variable: "--font-lora", subsets: ["latin"] })
37
+ const playfair = Playfair_Display({ variable: "--font-playfair", subsets: ["latin"] })
38
+ const mono = JetBrains_Mono({ variable: "--font-geist-mono", subsets: ["latin"] })
39
+ ```
40
+
41
+ ### 4. Configure `tailwind.config`
42
+
43
+ ```ts
44
+ import type { Config } from "tailwindcss"
45
+
46
+ const config: Config = {
47
+ darkMode: "class",
48
+ content: [
49
+ "./src/**/*.{ts,tsx}",
50
+ "./node_modules/@journal-ds/react/dist/**/*.{js,ts}",
51
+ ],
52
+ theme: { extend: {} },
53
+ plugins: [require("tailwindcss-animate")],
54
+ }
55
+
56
+ export default config
57
+ ```
58
+
59
+ ## Usage
60
+
61
+ ```tsx
62
+ import { Button } from "@journal-ds/react"
63
+
64
+ export default function Entry() {
65
+ return <Button>New Entry</Button>
66
+ }
67
+ ```
68
+
69
+ ## CLI
70
+
71
+ Use the Journal CLI to add components to your project:
72
+
73
+ ```bash
74
+ npx @journal-ds/cli add button
75
+ ```
76
+
77
+ This will copy the component source code directly into your `components/ui` folder, giving you full ownership of the code.
78
+
79
+ ## Features
80
+
81
+ - **Editorial Typography** — Playfair Display for headings, Lora for body text. Drop caps and pull quotes baked in.
82
+ - **Warm Palette** — Cream paper, deep ink, burgundy accents, sepia tones, gold highlights.
83
+ - **Paper Textures** — Built-in CSS utilities for lined paper, margin rules, vignettes, spiral-bound notebooks.
84
+ - **Accessible** — Built on Radix UI. Every component follows WAI-ARIA patterns.
85
+ - **Themeable** — CSS variables for all colors, radii, and typography.
86
+ - **Open Source** — MIT licensed. Use it however you like.
87
+
88
+ ## Peer Dependencies
89
+
90
+ - `react` ≥ 18
91
+ - `react-dom` ≥ 18
92
+ - `react-hook-form` ≥ 7 — **optional**, only required if you use the `Form` component
93
+
94
+ ```bash
95
+ # If you use the Form component:
96
+ npm install react-hook-form
97
+
98
+ # If you use Form with schema validation (shown in docs examples):
99
+ npm install react-hook-form @hookform/resolvers zod
100
+ ```
101
+
102
+ ## Documentation
103
+
104
+ Visit [https://journal-ds.dev](https://journal-ds.dev) to view the full documentation.
105
+
106
+ ## License
107
+
108
+ MIT © [Journal Design System](https://journal-ds.dev)