@petrarca/sonnet-ui 0.1.6 → 0.3.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/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +11 -6
- package/styles.css +190 -0
- package/tailwind-preset.js +117 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@petrarca/sonnet-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "UI primitives, data components, and table schema system for the Petrarca Sonnet component library",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"publishConfig": {
|
|
@@ -17,10 +17,14 @@
|
|
|
17
17
|
"./json-editor": {
|
|
18
18
|
"import": "./dist/json-editor/index.js",
|
|
19
19
|
"types": "./dist/json-editor/index.d.ts"
|
|
20
|
-
}
|
|
20
|
+
},
|
|
21
|
+
"./styles.css": "./styles.css",
|
|
22
|
+
"./tailwind-preset": "./tailwind-preset.js"
|
|
21
23
|
},
|
|
22
24
|
"files": [
|
|
23
|
-
"dist"
|
|
25
|
+
"dist",
|
|
26
|
+
"styles.css",
|
|
27
|
+
"tailwind-preset.js"
|
|
24
28
|
],
|
|
25
29
|
"dependencies": {
|
|
26
30
|
"@radix-ui/react-avatar": "^1.1.11",
|
|
@@ -42,16 +46,18 @@
|
|
|
42
46
|
"radix-ui": "^1.4.3",
|
|
43
47
|
"react-json-tree": "0.20.0",
|
|
44
48
|
"zustand": "5.0.8",
|
|
45
|
-
"@petrarca/sonnet-core": "0.
|
|
49
|
+
"@petrarca/sonnet-core": "0.3.0"
|
|
46
50
|
},
|
|
47
51
|
"peerDependencies": {
|
|
48
52
|
"@codemirror/lang-json": ">=6",
|
|
49
53
|
"@codemirror/state": ">=6",
|
|
50
54
|
"@codemirror/view": ">=6",
|
|
55
|
+
"@tailwindcss/typography": ">=0.5",
|
|
51
56
|
"@uiw/react-codemirror": ">=4",
|
|
52
57
|
"react": ">=19",
|
|
53
58
|
"react-dom": ">=19",
|
|
54
|
-
"tailwindcss": ">=3"
|
|
59
|
+
"tailwindcss": ">=3",
|
|
60
|
+
"tailwindcss-animate": ">=1"
|
|
55
61
|
},
|
|
56
62
|
"devDependencies": {
|
|
57
63
|
"@types/react": "^19.0.0",
|
|
@@ -63,7 +69,6 @@
|
|
|
63
69
|
"build": "tsup",
|
|
64
70
|
"dev": "tsup --watch",
|
|
65
71
|
"typecheck": "tsc --noEmit",
|
|
66
|
-
"lint": "tsc --noEmit",
|
|
67
72
|
"test": "vitest run",
|
|
68
73
|
"clean": "rm -rf dist *.tsbuildinfo"
|
|
69
74
|
}
|
package/styles.css
ADDED
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @petrarca/sonnet-ui — Base styles & design tokens
|
|
3
|
+
*
|
|
4
|
+
* Import this in your app's global CSS:
|
|
5
|
+
* @import "@petrarca/sonnet-ui/styles.css";
|
|
6
|
+
*
|
|
7
|
+
* Then add app-specific overrides below the import.
|
|
8
|
+
* All tokens can be redefined by the consumer for white-labeling.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/* ── Tailwind directives ───────────────────────────────────────────── */
|
|
12
|
+
|
|
13
|
+
@tailwind base;
|
|
14
|
+
@tailwind components;
|
|
15
|
+
@tailwind utilities;
|
|
16
|
+
|
|
17
|
+
/* ── Design tokens: light theme ────────────────────────────────────── */
|
|
18
|
+
|
|
19
|
+
@layer base {
|
|
20
|
+
:root {
|
|
21
|
+
/* Core surfaces */
|
|
22
|
+
--background: 0 0% 100%;
|
|
23
|
+
--foreground: 222.2 84% 4.9%;
|
|
24
|
+
--card: 0 0% 100%;
|
|
25
|
+
--card-foreground: 222.2 84% 4.9%;
|
|
26
|
+
--popover: 0 0% 100%;
|
|
27
|
+
--popover-foreground: 222.2 84% 4.9%;
|
|
28
|
+
|
|
29
|
+
/* Brand / action */
|
|
30
|
+
--primary: 220 35% 46%;
|
|
31
|
+
--primary-foreground: 210 40% 98%;
|
|
32
|
+
--secondary: 210 40% 96.1%;
|
|
33
|
+
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
34
|
+
--destructive: 0 30% 48%;
|
|
35
|
+
--destructive-foreground: 210 40% 98%;
|
|
36
|
+
|
|
37
|
+
/* Neutral surfaces */
|
|
38
|
+
--muted: 210 40% 96.1%;
|
|
39
|
+
--muted-foreground: 215.4 16.3% 46.9%;
|
|
40
|
+
--accent: 210 40% 96.1%;
|
|
41
|
+
--accent-foreground: 222.2 47.4% 11.2%;
|
|
42
|
+
|
|
43
|
+
/* Text hierarchy (5 tiers: foreground > muted-foreground > tertiary-foreground > faint-foreground > ghost) */
|
|
44
|
+
--faint-foreground: 215 16% 62%;
|
|
45
|
+
--tertiary-foreground: 215 14% 55%;
|
|
46
|
+
|
|
47
|
+
/* Borders (3 tiers) */
|
|
48
|
+
--border: 214.3 31.8% 91.4%;
|
|
49
|
+
--border-subtle: 214 20% 94%;
|
|
50
|
+
--border-strong: 214 20% 82%;
|
|
51
|
+
--input: 214.3 31.8% 91.4%;
|
|
52
|
+
|
|
53
|
+
/* Interaction states */
|
|
54
|
+
--state-hover: 210 40% 96.1%;
|
|
55
|
+
--state-selected: 213 94% 95%;
|
|
56
|
+
|
|
57
|
+
/* Focus */
|
|
58
|
+
--ring: 220 35% 46%;
|
|
59
|
+
|
|
60
|
+
/* Layout */
|
|
61
|
+
--radius: 0.5rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ── Design tokens: dark theme ───────────────────────────────────── */
|
|
65
|
+
|
|
66
|
+
.dark {
|
|
67
|
+
/* Core surfaces */
|
|
68
|
+
--background: 222.2 84% 4.9%;
|
|
69
|
+
--foreground: 210 40% 98%;
|
|
70
|
+
--card: 222.2 84% 4.9%;
|
|
71
|
+
--card-foreground: 210 40% 98%;
|
|
72
|
+
--popover: 222.2 84% 4.9%;
|
|
73
|
+
--popover-foreground: 210 40% 98%;
|
|
74
|
+
|
|
75
|
+
/* Brand / action */
|
|
76
|
+
--primary: 218 35% 51%;
|
|
77
|
+
--primary-foreground: 222.2 47.4% 11.2%;
|
|
78
|
+
--secondary: 217.2 32.6% 17.5%;
|
|
79
|
+
--secondary-foreground: 210 40% 98%;
|
|
80
|
+
--destructive: 0 22% 41%;
|
|
81
|
+
--destructive-foreground: 210 40% 98%;
|
|
82
|
+
|
|
83
|
+
/* Neutral surfaces */
|
|
84
|
+
--muted: 217.2 32.6% 17.5%;
|
|
85
|
+
--muted-foreground: 215 20.2% 65.1%;
|
|
86
|
+
--accent: 217.2 32.6% 17.5%;
|
|
87
|
+
--accent-foreground: 210 40% 98%;
|
|
88
|
+
|
|
89
|
+
/* Text hierarchy */
|
|
90
|
+
--faint-foreground: 215 20% 45%;
|
|
91
|
+
--tertiary-foreground: 215 18% 55%;
|
|
92
|
+
|
|
93
|
+
/* Borders (3 tiers) */
|
|
94
|
+
--border: 217.2 32.6% 17.5%;
|
|
95
|
+
--border-subtle: 217 25% 14%;
|
|
96
|
+
--border-strong: 217 20% 28%;
|
|
97
|
+
--input: 217.2 32.6% 17.5%;
|
|
98
|
+
|
|
99
|
+
/* Interaction states */
|
|
100
|
+
--state-hover: 217.2 32.6% 17.5%;
|
|
101
|
+
--state-selected: 215 50% 18%;
|
|
102
|
+
|
|
103
|
+
/* Focus */
|
|
104
|
+
--ring: 218 35% 51%;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* ── Base resets ────────────────────────────────────────────────────── */
|
|
109
|
+
|
|
110
|
+
@layer base {
|
|
111
|
+
* {
|
|
112
|
+
@apply border-border;
|
|
113
|
+
}
|
|
114
|
+
body {
|
|
115
|
+
@apply bg-background text-foreground;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Heading defaults */
|
|
119
|
+
h1 {
|
|
120
|
+
@apply heading-page;
|
|
121
|
+
}
|
|
122
|
+
h2 {
|
|
123
|
+
@apply heading-section;
|
|
124
|
+
}
|
|
125
|
+
h3 {
|
|
126
|
+
@apply heading-sub;
|
|
127
|
+
}
|
|
128
|
+
h4,
|
|
129
|
+
h5 {
|
|
130
|
+
@apply heading-component;
|
|
131
|
+
}
|
|
132
|
+
h6 {
|
|
133
|
+
@apply heading-compact;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* ── Typography utility classes ────────────────────────────────────── */
|
|
138
|
+
|
|
139
|
+
@layer components {
|
|
140
|
+
/* Page title — the main heading of a page/view */
|
|
141
|
+
.heading-page {
|
|
142
|
+
@apply text-xl font-semibold tracking-tight;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Section heading — major sections within a page */
|
|
146
|
+
.heading-section {
|
|
147
|
+
@apply text-base font-semibold;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* Subsection heading — groups within a section */
|
|
151
|
+
.heading-sub {
|
|
152
|
+
@apply text-base font-medium;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* Component heading — card titles, dialog titles, widget headers */
|
|
156
|
+
.heading-component {
|
|
157
|
+
@apply text-sm font-medium;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Compact heading — smallest heading level, sidebar groups, meta labels */
|
|
161
|
+
.heading-compact {
|
|
162
|
+
@apply text-xs font-medium;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* Meta heading — uppercase labels for categorisation */
|
|
166
|
+
.heading-meta {
|
|
167
|
+
@apply text-xs font-medium font-mono uppercase tracking-wider text-muted-foreground;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* Compact button utility class */
|
|
171
|
+
.btn-compact {
|
|
172
|
+
@apply h-8 w-8 p-0;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.btn-compact > svg,
|
|
176
|
+
.btn-compact > span {
|
|
177
|
+
@apply h-4 w-4;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* ── Global overrides ──────────────────────────────────────────────── */
|
|
182
|
+
|
|
183
|
+
* {
|
|
184
|
+
font-feature-settings: normal;
|
|
185
|
+
font-variant-ligatures: none;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
body {
|
|
189
|
+
margin: 0;
|
|
190
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
// @petrarca/sonnet-ui — Tailwind CSS preset
|
|
2
|
+
//
|
|
3
|
+
// Use in your tailwind.config.js:
|
|
4
|
+
// module.exports = {
|
|
5
|
+
// presets: [require("@petrarca/sonnet-ui/tailwind-preset")],
|
|
6
|
+
// content: [
|
|
7
|
+
// "./src/**/*.{ts,tsx}",
|
|
8
|
+
// "./node_modules/@petrarca/sonnet-*/dist/**/*.js",
|
|
9
|
+
// ],
|
|
10
|
+
// }
|
|
11
|
+
|
|
12
|
+
/** @type {import('tailwindcss').Config} */
|
|
13
|
+
module.exports = {
|
|
14
|
+
darkMode: ["class"],
|
|
15
|
+
theme: {
|
|
16
|
+
container: {
|
|
17
|
+
center: true,
|
|
18
|
+
padding: "2rem",
|
|
19
|
+
screens: { "2xl": "1400px" },
|
|
20
|
+
},
|
|
21
|
+
extend: {
|
|
22
|
+
colors: {
|
|
23
|
+
/* ── Core semantic tokens ─────────────────────────────────── */
|
|
24
|
+
border: "hsl(var(--border))",
|
|
25
|
+
input: "hsl(var(--input))",
|
|
26
|
+
ring: "hsl(var(--ring))",
|
|
27
|
+
background: "hsl(var(--background))",
|
|
28
|
+
foreground: "hsl(var(--foreground))",
|
|
29
|
+
|
|
30
|
+
primary: {
|
|
31
|
+
DEFAULT: "hsl(var(--primary))",
|
|
32
|
+
foreground: "hsl(var(--primary-foreground))",
|
|
33
|
+
},
|
|
34
|
+
secondary: {
|
|
35
|
+
DEFAULT: "hsl(var(--secondary))",
|
|
36
|
+
foreground: "hsl(var(--secondary-foreground))",
|
|
37
|
+
},
|
|
38
|
+
destructive: {
|
|
39
|
+
DEFAULT: "hsl(var(--destructive))",
|
|
40
|
+
foreground: "hsl(var(--destructive-foreground))",
|
|
41
|
+
},
|
|
42
|
+
muted: {
|
|
43
|
+
DEFAULT: "hsl(var(--muted))",
|
|
44
|
+
foreground: "hsl(var(--muted-foreground))",
|
|
45
|
+
},
|
|
46
|
+
accent: {
|
|
47
|
+
DEFAULT: "hsl(var(--accent))",
|
|
48
|
+
foreground: "hsl(var(--accent-foreground))",
|
|
49
|
+
},
|
|
50
|
+
popover: {
|
|
51
|
+
DEFAULT: "hsl(var(--popover))",
|
|
52
|
+
foreground: "hsl(var(--popover-foreground))",
|
|
53
|
+
},
|
|
54
|
+
card: {
|
|
55
|
+
DEFAULT: "hsl(var(--card))",
|
|
56
|
+
foreground: "hsl(var(--card-foreground))",
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
/* ── Extended text hierarchy ──────────────────────────────── */
|
|
60
|
+
faint: {
|
|
61
|
+
foreground: "hsl(var(--faint-foreground))",
|
|
62
|
+
},
|
|
63
|
+
tertiary: {
|
|
64
|
+
foreground: "hsl(var(--tertiary-foreground))",
|
|
65
|
+
},
|
|
66
|
+
|
|
67
|
+
/* ── Extended border tiers ────────────────────────────────── */
|
|
68
|
+
"border-subtle": "hsl(var(--border-subtle))",
|
|
69
|
+
"border-strong": "hsl(var(--border-strong))",
|
|
70
|
+
|
|
71
|
+
/* ── Interaction states ───────────────────────────────────── */
|
|
72
|
+
"state-hover": "hsl(var(--state-hover))",
|
|
73
|
+
"state-selected": "hsl(var(--state-selected))",
|
|
74
|
+
},
|
|
75
|
+
|
|
76
|
+
borderRadius: {
|
|
77
|
+
lg: "var(--radius)",
|
|
78
|
+
md: "calc(var(--radius) - 2px)",
|
|
79
|
+
sm: "calc(var(--radius) - 4px)",
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
fontFamily: {
|
|
83
|
+
sans: [
|
|
84
|
+
"Inter",
|
|
85
|
+
"ui-sans-serif",
|
|
86
|
+
"system-ui",
|
|
87
|
+
"-apple-system",
|
|
88
|
+
"sans-serif",
|
|
89
|
+
],
|
|
90
|
+
mono: [
|
|
91
|
+
"JetBrains Mono",
|
|
92
|
+
"ui-monospace",
|
|
93
|
+
"SFMono-Regular",
|
|
94
|
+
"Menlo",
|
|
95
|
+
"monospace",
|
|
96
|
+
],
|
|
97
|
+
},
|
|
98
|
+
|
|
99
|
+
keyframes: {
|
|
100
|
+
"accordion-down": {
|
|
101
|
+
from: { height: "0" },
|
|
102
|
+
to: { height: "var(--radix-accordion-content-height)" },
|
|
103
|
+
},
|
|
104
|
+
"accordion-up": {
|
|
105
|
+
from: { height: "var(--radix-accordion-content-height)" },
|
|
106
|
+
to: { height: "0" },
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
animation: {
|
|
110
|
+
"accordion-down": "accordion-down 0.2s ease-out",
|
|
111
|
+
"accordion-up": "accordion-up 0.2s ease-out",
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
// Plugins are consumer-side — add to your tailwind.config.js:
|
|
116
|
+
// plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")]
|
|
117
|
+
};
|