@nivaro/react 0.1.4
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/full.css +125 -0
- package/dist/index.d.ts +1608 -0
- package/dist/index.js +38391 -0
- package/package.json +104 -0
- package/styles.css +124 -0
- package/tailwind-preset.cjs +97 -0
package/package.json
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nivaro/react",
|
|
3
|
+
"version": "0.1.4",
|
|
4
|
+
"description": "React hooks and components for Nivaro CMS forms",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.js",
|
|
12
|
+
"types": "./dist/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./tailwind-preset": "./tailwind-preset.cjs",
|
|
15
|
+
"./styles.css": "./styles.css",
|
|
16
|
+
"./full.css": "./dist/full.css"
|
|
17
|
+
},
|
|
18
|
+
"sideEffects": false,
|
|
19
|
+
"files": [
|
|
20
|
+
"dist",
|
|
21
|
+
"tailwind-preset.cjs",
|
|
22
|
+
"styles.css",
|
|
23
|
+
"README.md"
|
|
24
|
+
],
|
|
25
|
+
"keywords": [
|
|
26
|
+
"cms",
|
|
27
|
+
"headless-cms",
|
|
28
|
+
"nivaro",
|
|
29
|
+
"react",
|
|
30
|
+
"forms",
|
|
31
|
+
"hooks",
|
|
32
|
+
"typescript"
|
|
33
|
+
],
|
|
34
|
+
"license": "MIT",
|
|
35
|
+
"publishConfig": {
|
|
36
|
+
"access": "public"
|
|
37
|
+
},
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "vite build && pnpm build:css",
|
|
40
|
+
"build:css": "tailwindcss -c tailwind-build.config.cjs -i full.src.css -o dist/_tw.css --minify && cat styles.css dist/_tw.css > dist/full.css && rm dist/_tw.css",
|
|
41
|
+
"dev": "tsc --watch"
|
|
42
|
+
},
|
|
43
|
+
"peerDependencies": {
|
|
44
|
+
"@nivaro/sdk": ">=0.1.0",
|
|
45
|
+
"@tanstack/react-query": "^5",
|
|
46
|
+
"react": ">=18.0.0",
|
|
47
|
+
"react-dom": ">=18.0.0",
|
|
48
|
+
"sonner": "^1",
|
|
49
|
+
"rrweb": "^2.0.0-alpha.4"
|
|
50
|
+
},
|
|
51
|
+
"dependencies": {
|
|
52
|
+
"@dnd-kit/core": "^6.3.1",
|
|
53
|
+
"@dnd-kit/sortable": "^10.0.0",
|
|
54
|
+
"@dnd-kit/utilities": "^3.2.2",
|
|
55
|
+
"@radix-ui/react-avatar": "^1.1.10",
|
|
56
|
+
"@radix-ui/react-checkbox": "^1.3.4",
|
|
57
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
58
|
+
"@radix-ui/react-dropdown-menu": "^2.1.14",
|
|
59
|
+
"@radix-ui/react-label": "^2.1.7",
|
|
60
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
61
|
+
"@radix-ui/react-scroll-area": "^1.2.9",
|
|
62
|
+
"@radix-ui/react-select": "^2.2.5",
|
|
63
|
+
"@radix-ui/react-separator": "^1.1.7",
|
|
64
|
+
"@radix-ui/react-slot": "^1.2.3",
|
|
65
|
+
"@radix-ui/react-switch": "^1.2.6",
|
|
66
|
+
"@radix-ui/react-tabs": "^1.1.14",
|
|
67
|
+
"@radix-ui/react-tooltip": "^1.2.7",
|
|
68
|
+
"@tiptap/extension-link": "^3.26.0",
|
|
69
|
+
"@tiptap/extension-placeholder": "^3.26.0",
|
|
70
|
+
"@tiptap/extension-underline": "^3.26.0",
|
|
71
|
+
"@tiptap/react": "^3.26.0",
|
|
72
|
+
"@tiptap/starter-kit": "^3.26.0",
|
|
73
|
+
"class-variance-authority": "^0.7.0",
|
|
74
|
+
"clsx": "^2.0.0",
|
|
75
|
+
"cmdk": "^1.0.0",
|
|
76
|
+
"lucide-react": "^0.460.0",
|
|
77
|
+
"tailwind-merge": "^2.0.0",
|
|
78
|
+
"tailwindcss-animate": "^1.0.7",
|
|
79
|
+
"recharts": "^3.8.1"
|
|
80
|
+
},
|
|
81
|
+
"devDependencies": {
|
|
82
|
+
"@microsoft/api-extractor": "^7.58.9",
|
|
83
|
+
"tailwindcss": "^3.4.17",
|
|
84
|
+
"@nivaro/sdk": "workspace:*",
|
|
85
|
+
"@nivaro/shared": "workspace:*",
|
|
86
|
+
"@types/react": "^19.0.0",
|
|
87
|
+
"@types/react-dom": "^19.0.0",
|
|
88
|
+
"@vitejs/plugin-react": "^4.0.0",
|
|
89
|
+
"typescript": "^5.0.0",
|
|
90
|
+
"vite": "^6.0.0",
|
|
91
|
+
"vite-plugin-dts": "^5.0.2",
|
|
92
|
+
"rrweb": "^2.0.0-alpha.18"
|
|
93
|
+
},
|
|
94
|
+
"peerDependenciesMeta": {
|
|
95
|
+
"rrweb": {
|
|
96
|
+
"optional": true
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
"repository": {
|
|
100
|
+
"type": "git",
|
|
101
|
+
"url": "git+https://github.com/nodeworks/nivaro.git",
|
|
102
|
+
"directory": "packages/react"
|
|
103
|
+
}
|
|
104
|
+
}
|
package/styles.css
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @nivaro/react base styles — CSS variables + dark-mode overrides the
|
|
3
|
+
* components resolve against. Import once, alongside the Tailwind preset:
|
|
4
|
+
*
|
|
5
|
+
* import '@nivaro/react/styles.css'
|
|
6
|
+
*
|
|
7
|
+
* Dark mode is class-based: add `dark` to <html> (matches the preset's
|
|
8
|
+
* darkMode: ['class']).
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
/* Skeleton/shimmer surfaces. Light keeps the slate tints; dark is
|
|
13
|
+
NEUTRAL on purpose — --muted carries the palette's blue shift, and a
|
|
14
|
+
loading row rendered in slate-800 reads as a blue block. */
|
|
15
|
+
--nvr-skeleton: 210 16% 93%;
|
|
16
|
+
--nvr-skeleton-hi: 210 20% 97%;
|
|
17
|
+
--nvr-cyan: #00ceff;
|
|
18
|
+
--nvr-cyan-dark: #00b8e6;
|
|
19
|
+
/* Channel triplets so Tailwind can compose alpha (bg-nvr-cyan/10).
|
|
20
|
+
A token defined as an opaque var() generates NO utility for the
|
|
21
|
+
/N modifier at all. Keep these in step with the hex above — the
|
|
22
|
+
admin overrides both at runtime for white-labelling. */
|
|
23
|
+
--nvr-cyan-rgb: 0 206 255;
|
|
24
|
+
--nvr-cyan-dark-rgb: 0 184 230;
|
|
25
|
+
--background: 0 0% 100%;
|
|
26
|
+
--foreground: 220 45% 11%;
|
|
27
|
+
--card: 0 0% 100%;
|
|
28
|
+
--card-foreground: 220 45% 11%;
|
|
29
|
+
--popover: 0 0% 100%;
|
|
30
|
+
--popover-foreground: 220 45% 11%;
|
|
31
|
+
--primary: 200 75% 47%;
|
|
32
|
+
--primary-foreground: 0 0% 100%;
|
|
33
|
+
--secondary: 210 14% 96%;
|
|
34
|
+
--secondary-foreground: 220 28% 16%;
|
|
35
|
+
--muted: 210 14% 96%;
|
|
36
|
+
--muted-foreground: 215 15% 44%;
|
|
37
|
+
--accent: 200 60% 93%;
|
|
38
|
+
--accent-foreground: 200 75% 22%;
|
|
39
|
+
--destructive: 0 84% 60%;
|
|
40
|
+
--destructive-foreground: 0 0% 100%;
|
|
41
|
+
--border: 210 18% 90%;
|
|
42
|
+
--input: 210 18% 90%;
|
|
43
|
+
--ring: 200 75% 47%;
|
|
44
|
+
--radius: 0.375rem;
|
|
45
|
+
|
|
46
|
+
/* Easing used by component transitions */
|
|
47
|
+
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
|
|
48
|
+
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
|
|
49
|
+
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.dark {
|
|
53
|
+
--nvr-skeleton: 0 0% 17%;
|
|
54
|
+
--nvr-skeleton-hi: 0 0% 23%;
|
|
55
|
+
--background: 224 15% 8%;
|
|
56
|
+
--foreground: 210 15% 94%;
|
|
57
|
+
--card: 220 12% 17%;
|
|
58
|
+
--card-foreground: 210 15% 94%;
|
|
59
|
+
--popover: 220 12% 17%;
|
|
60
|
+
--popover-foreground: 210 15% 94%;
|
|
61
|
+
--primary: 200 75% 57%;
|
|
62
|
+
--primary-foreground: 220 45% 11%;
|
|
63
|
+
--secondary: 224 15% 8%;
|
|
64
|
+
--secondary-foreground: 210 10% 85%;
|
|
65
|
+
--muted: 220 10% 22%;
|
|
66
|
+
--muted-foreground: 214 10% 62%;
|
|
67
|
+
--accent: 200 22% 20%;
|
|
68
|
+
--accent-foreground: 200 65% 78%;
|
|
69
|
+
--destructive: 0 60% 48%;
|
|
70
|
+
--destructive-foreground: 0 0% 98%;
|
|
71
|
+
--border: 222 9% 26%;
|
|
72
|
+
--input: 222 9% 26%;
|
|
73
|
+
--ring: 200 75% 57%;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Tabular figures in data tables — numbers align in columns */
|
|
77
|
+
table {
|
|
78
|
+
font-variant-numeric: tabular-nums;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Skeleton shimmer used by loading states */
|
|
82
|
+
@keyframes nvr-shimmer {
|
|
83
|
+
from { background-position: -200% 0; }
|
|
84
|
+
to { background-position: 200% 0; }
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.skeleton {
|
|
88
|
+
background: linear-gradient(
|
|
89
|
+
90deg,
|
|
90
|
+
hsl(var(--nvr-skeleton)) 25%,
|
|
91
|
+
hsl(var(--nvr-skeleton-hi)) 50%,
|
|
92
|
+
hsl(var(--nvr-skeleton)) 75%
|
|
93
|
+
);
|
|
94
|
+
background-size: 200% 100%;
|
|
95
|
+
animation: nvr-shimmer 1.4s ease infinite;
|
|
96
|
+
border-radius: 4px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* ─── Dark-mode cascade overrides ────────────────────────────────────────────
|
|
100
|
+
Components use hardcoded light-neutral utilities (bg-white, text-slate-*)
|
|
101
|
+
with these class-based remaps in dark mode. Semantic colors (emerald,
|
|
102
|
+
amber, red, violet) are intentionally untouched. */
|
|
103
|
+
|
|
104
|
+
.dark .bg-white { background-color: hsl(var(--card)) !important; }
|
|
105
|
+
.dark .bg-slate-50 { background-color: hsl(220 12% 17%) !important; }
|
|
106
|
+
.dark .bg-slate-100 { background-color: hsl(220 10% 22%) !important; }
|
|
107
|
+
.dark .hover\:bg-slate-50:hover { background-color: hsl(220 12% 17%) !important; }
|
|
108
|
+
.dark .hover\:bg-slate-50\/70:hover { background-color: hsl(220 12% 17% / 0.7) !important; }
|
|
109
|
+
.dark .hover\:bg-slate-100:hover { background-color: hsl(220 10% 22%) !important; }
|
|
110
|
+
.dark .border-slate-100 { border-color: hsl(222 9% 24%) !important; }
|
|
111
|
+
.dark .border-slate-200 { border-color: hsl(var(--border)) !important; }
|
|
112
|
+
.dark .divide-slate-100 > * + * { border-color: hsl(222 9% 24%) !important; }
|
|
113
|
+
.dark .text-slate-900 { color: hsl(var(--foreground)) !important; }
|
|
114
|
+
.dark .text-slate-800 { color: hsl(210 10% 88%) !important; }
|
|
115
|
+
.dark .text-slate-700 { color: hsl(210 8% 76%) !important; }
|
|
116
|
+
.dark .text-slate-600 { color: hsl(214 8% 64%) !important; }
|
|
117
|
+
.dark .text-slate-500 { color: hsl(var(--muted-foreground)) !important; }
|
|
118
|
+
.dark .text-muted-foreground { color: hsl(var(--muted-foreground)) !important; }
|
|
119
|
+
.dark .bg-slate-900 { background-color: hsl(210 12% 91%) !important; }
|
|
120
|
+
.dark .text-white { color: hsl(0 0% 95%) !important; }
|
|
121
|
+
.dark .skeleton {
|
|
122
|
+
background: linear-gradient(90deg, hsl(220 10% 16%) 25%, hsl(220 8% 21%) 50%, hsl(220 10% 16%) 75%);
|
|
123
|
+
background-size: 200% 100%;
|
|
124
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tailwind preset for @nivaro/react consumers.
|
|
3
|
+
*
|
|
4
|
+
* Usage (tailwind.config.js):
|
|
5
|
+
* module.exports = {
|
|
6
|
+
* presets: [require('@nivaro/react/tailwind-preset')],
|
|
7
|
+
* content: [
|
|
8
|
+
* './src/**\/*.{ts,tsx}',
|
|
9
|
+
* './node_modules/@nivaro/react/dist/**\/*.js'
|
|
10
|
+
* ]
|
|
11
|
+
* }
|
|
12
|
+
*
|
|
13
|
+
* Pair with: import '@nivaro/react/styles.css'
|
|
14
|
+
* (CSS variables the colors below resolve against, plus dark-mode overrides.)
|
|
15
|
+
*/
|
|
16
|
+
module.exports = {
|
|
17
|
+
darkMode: ['class'],
|
|
18
|
+
theme: {
|
|
19
|
+
container: {
|
|
20
|
+
center: true,
|
|
21
|
+
padding: '2rem'
|
|
22
|
+
},
|
|
23
|
+
extend: {
|
|
24
|
+
colors: {
|
|
25
|
+
border: 'hsl(var(--border))',
|
|
26
|
+
input: 'hsl(var(--input))',
|
|
27
|
+
ring: 'hsl(var(--ring))',
|
|
28
|
+
background: 'hsl(var(--background))',
|
|
29
|
+
foreground: 'hsl(var(--foreground))',
|
|
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
|
+
sidebar: {
|
|
59
|
+
DEFAULT: '#172940',
|
|
60
|
+
foreground: '#e2e8f0',
|
|
61
|
+
accent: '#1e3a52',
|
|
62
|
+
border: '#1e3a52',
|
|
63
|
+
active: '#1e96d2'
|
|
64
|
+
},
|
|
65
|
+
nvr: {
|
|
66
|
+
// rgb(var(...) / <alpha-value>) rather than a bare var(): an opaque
|
|
67
|
+
// var() cannot carry an alpha channel, so `bg-nvr-cyan/10` silently
|
|
68
|
+
// produced no CSS at all.
|
|
69
|
+
cyan: 'rgb(var(--nvr-cyan-rgb) / <alpha-value>)',
|
|
70
|
+
'cyan-dark': 'rgb(var(--nvr-cyan-dark-rgb) / <alpha-value>)',
|
|
71
|
+
navy: '#172940'
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
borderRadius: {
|
|
75
|
+
lg: 'var(--radius)',
|
|
76
|
+
md: 'calc(var(--radius) - 2px)',
|
|
77
|
+
sm: 'calc(var(--radius) - 4px)'
|
|
78
|
+
},
|
|
79
|
+
fontFamily: {
|
|
80
|
+
sans: ['"DM Sans"', '"DM Sans Fallback"', 'system-ui', 'sans-serif'],
|
|
81
|
+
mono: ['"JetBrains Mono"', 'Menlo', 'monospace']
|
|
82
|
+
},
|
|
83
|
+
fontSize: {
|
|
84
|
+
'2xs': ['0.625rem', { lineHeight: '1rem', letterSpacing: '0.01em' }],
|
|
85
|
+
xs: ['0.6875rem', { lineHeight: '1rem', letterSpacing: '0.005em' }],
|
|
86
|
+
sm: ['0.75rem', { lineHeight: '1.125rem' }],
|
|
87
|
+
base: ['0.8125rem', { lineHeight: '1.375rem' }],
|
|
88
|
+
md: ['0.875rem', { lineHeight: '1.375rem' }],
|
|
89
|
+
lg: ['0.9375rem', { lineHeight: '1.5rem' }],
|
|
90
|
+
xl: ['1rem', { lineHeight: '1.625rem' }],
|
|
91
|
+
'2xl': ['1.125rem', { lineHeight: '1.75rem' }],
|
|
92
|
+
'3xl': ['1.25rem', { lineHeight: '1.875rem' }]
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
plugins: [require('tailwindcss-animate')]
|
|
97
|
+
}
|