hazo_ui 2.2.2 → 2.2.6
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/README.md +35 -0
- package/dist/index.cjs +4762 -45
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +88 -13
- package/dist/index.d.ts +88 -13
- package/dist/index.js +4751 -35
- package/dist/index.js.map +1 -1
- package/dist/styles.css +178 -0
- package/package.json +44 -3
- package/tailwind.preset.js +90 -0
package/dist/styles.css
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* hazo_ui CSS Variables and Base Styles
|
|
3
|
+
*
|
|
4
|
+
* Import this file in your app to get all required CSS variables:
|
|
5
|
+
* import 'hazo_ui/styles.css';
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
--background: 0 0% 100%;
|
|
10
|
+
--foreground: 222.2 84% 4.9%;
|
|
11
|
+
--card: 0 0% 100%;
|
|
12
|
+
--card-foreground: 222.2 84% 4.9%;
|
|
13
|
+
--popover: 0 0% 100%;
|
|
14
|
+
--popover-foreground: 222.2 84% 4.9%;
|
|
15
|
+
--primary: 222.2 47.4% 11.2%;
|
|
16
|
+
--primary-foreground: 210 40% 98%;
|
|
17
|
+
--secondary: 210 40% 96.1%;
|
|
18
|
+
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
19
|
+
--muted: 210 40% 96.1%;
|
|
20
|
+
--muted-foreground: 215.4 16.3% 46.9%;
|
|
21
|
+
--accent: 210 40% 96.1%;
|
|
22
|
+
--accent-foreground: 222.2 47.4% 11.2%;
|
|
23
|
+
--destructive: 0 84.2% 60.2%;
|
|
24
|
+
--destructive-foreground: 210 40% 98%;
|
|
25
|
+
--border: 214.3 31.8% 91.4%;
|
|
26
|
+
--input: 214.3 31.8% 91.4%;
|
|
27
|
+
--ring: 222.2 84% 4.9%;
|
|
28
|
+
--radius: 0.5rem;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.dark {
|
|
32
|
+
--background: 222.2 84% 4.9%;
|
|
33
|
+
--foreground: 210 40% 98%;
|
|
34
|
+
--card: 222.2 84% 4.9%;
|
|
35
|
+
--card-foreground: 210 40% 98%;
|
|
36
|
+
--popover: 222.2 84% 4.9%;
|
|
37
|
+
--popover-foreground: 210 40% 98%;
|
|
38
|
+
--primary: 210 40% 98%;
|
|
39
|
+
--primary-foreground: 222.2 47.4% 11.2%;
|
|
40
|
+
--secondary: 217.2 32.6% 17.5%;
|
|
41
|
+
--secondary-foreground: 210 40% 98%;
|
|
42
|
+
--muted: 217.2 32.6% 17.5%;
|
|
43
|
+
--muted-foreground: 215 20.2% 65.1%;
|
|
44
|
+
--accent: 217.2 32.6% 17.5%;
|
|
45
|
+
--accent-foreground: 210 40% 98%;
|
|
46
|
+
--destructive: 0 62.8% 30.6%;
|
|
47
|
+
--destructive-foreground: 210 40% 98%;
|
|
48
|
+
--border: 217.2 32.6% 17.5%;
|
|
49
|
+
--input: 217.2 32.6% 17.5%;
|
|
50
|
+
--ring: 212.7 26.8% 83.9%;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Rich text editor content styles */
|
|
54
|
+
.cls_editor_content .ProseMirror h1 {
|
|
55
|
+
font-size: 2em;
|
|
56
|
+
font-weight: 700;
|
|
57
|
+
line-height: 1.2;
|
|
58
|
+
margin-top: 0.5em;
|
|
59
|
+
margin-bottom: 0.5em;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.cls_editor_content .ProseMirror h2 {
|
|
63
|
+
font-size: 1.5em;
|
|
64
|
+
font-weight: 600;
|
|
65
|
+
line-height: 1.3;
|
|
66
|
+
margin-top: 0.5em;
|
|
67
|
+
margin-bottom: 0.5em;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.cls_editor_content .ProseMirror h3 {
|
|
71
|
+
font-size: 1.25em;
|
|
72
|
+
font-weight: 600;
|
|
73
|
+
line-height: 1.4;
|
|
74
|
+
margin-top: 0.5em;
|
|
75
|
+
margin-bottom: 0.5em;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Unordered lists (bullet lists) */
|
|
79
|
+
.cls_editor_content .ProseMirror ul {
|
|
80
|
+
list-style-type: disc;
|
|
81
|
+
padding-left: 1.5em;
|
|
82
|
+
margin-top: 0.5em;
|
|
83
|
+
margin-bottom: 0.5em;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.cls_editor_content .ProseMirror ul ul {
|
|
87
|
+
list-style-type: circle;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.cls_editor_content .ProseMirror ul ul ul {
|
|
91
|
+
list-style-type: square;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Ordered lists (numbered lists) */
|
|
95
|
+
.cls_editor_content .ProseMirror ol {
|
|
96
|
+
list-style-type: decimal;
|
|
97
|
+
padding-left: 1.5em;
|
|
98
|
+
margin-top: 0.5em;
|
|
99
|
+
margin-bottom: 0.5em;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.cls_editor_content .ProseMirror ol ol {
|
|
103
|
+
list-style-type: lower-alpha;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.cls_editor_content .ProseMirror ol ol ol {
|
|
107
|
+
list-style-type: lower-roman;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* List items */
|
|
111
|
+
.cls_editor_content .ProseMirror li {
|
|
112
|
+
margin-top: 0.25em;
|
|
113
|
+
margin-bottom: 0.25em;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.cls_editor_content .ProseMirror li p {
|
|
117
|
+
margin: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Blockquote */
|
|
121
|
+
.cls_editor_content .ProseMirror blockquote {
|
|
122
|
+
border-left: 4px solid hsl(var(--border));
|
|
123
|
+
padding-left: 1em;
|
|
124
|
+
margin-left: 0;
|
|
125
|
+
margin-right: 0;
|
|
126
|
+
font-style: italic;
|
|
127
|
+
color: hsl(var(--muted-foreground));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Code blocks */
|
|
131
|
+
.cls_editor_content .ProseMirror pre {
|
|
132
|
+
background-color: hsl(var(--muted));
|
|
133
|
+
border-radius: 0.375rem;
|
|
134
|
+
padding: 0.75em 1em;
|
|
135
|
+
overflow-x: auto;
|
|
136
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
137
|
+
font-size: 0.875em;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.cls_editor_content .ProseMirror code {
|
|
141
|
+
background-color: hsl(var(--muted));
|
|
142
|
+
padding: 0.2em 0.4em;
|
|
143
|
+
border-radius: 0.25rem;
|
|
144
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
145
|
+
font-size: 0.875em;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.cls_editor_content .ProseMirror pre code {
|
|
149
|
+
background: none;
|
|
150
|
+
padding: 0;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* Paragraphs */
|
|
154
|
+
.cls_editor_content .ProseMirror p {
|
|
155
|
+
margin-top: 0.5em;
|
|
156
|
+
margin-bottom: 0.5em;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* First child no top margin */
|
|
160
|
+
.cls_editor_content .ProseMirror > :first-child {
|
|
161
|
+
margin-top: 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* Task lists */
|
|
165
|
+
.cls_editor_content .ProseMirror ul[data-type="taskList"] {
|
|
166
|
+
list-style-type: none;
|
|
167
|
+
padding-left: 0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.cls_editor_content .ProseMirror ul[data-type="taskList"] li {
|
|
171
|
+
display: flex;
|
|
172
|
+
align-items: flex-start;
|
|
173
|
+
gap: 0.5em;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.cls_editor_content .ProseMirror ul[data-type="taskList"] li input[type="checkbox"] {
|
|
177
|
+
margin-top: 0.25em;
|
|
178
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hazo_ui",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.6",
|
|
4
4
|
"description": "Set of UI components for common interaction elements in a SaaS app",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -10,12 +10,19 @@
|
|
|
10
10
|
".": {
|
|
11
11
|
"types": "./dist/index.d.ts",
|
|
12
12
|
"import": "./dist/index.js",
|
|
13
|
-
"require": "./dist/index.
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
14
|
},
|
|
15
|
+
"./styles.css": "./dist/styles.css",
|
|
16
|
+
"./tailwind-preset": "./tailwind.preset.js",
|
|
17
|
+
"./tailwind.preset.js": "./tailwind.preset.js",
|
|
15
18
|
"./package.json": "./package.json"
|
|
16
19
|
},
|
|
20
|
+
"sideEffects": [
|
|
21
|
+
"*.css"
|
|
22
|
+
],
|
|
17
23
|
"files": [
|
|
18
24
|
"dist",
|
|
25
|
+
"tailwind.preset.js",
|
|
19
26
|
"README.md"
|
|
20
27
|
],
|
|
21
28
|
"scripts": {
|
|
@@ -26,13 +33,22 @@
|
|
|
26
33
|
"dev:app": "cd dev-app && npm run dev",
|
|
27
34
|
"test:build": "npm run build && cd dev-app && npm run build",
|
|
28
35
|
"test:dev": "npm run build && npm run dev:app",
|
|
36
|
+
"test:e2e": "playwright test",
|
|
37
|
+
"test:e2e:ui": "playwright test --ui",
|
|
38
|
+
"test:e2e:headed": "playwright test --headed",
|
|
29
39
|
"lint": "eslint src --ext ts,tsx",
|
|
30
40
|
"type-check": "tsc --noEmit",
|
|
31
41
|
"prepublishOnly": "npm run build && npm run type-check"
|
|
32
42
|
},
|
|
33
43
|
"peerDependencies": {
|
|
34
44
|
"react": "^18.0.0 || ^19.0.0",
|
|
35
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
45
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
46
|
+
"tailwindcss": "^3.0.0"
|
|
47
|
+
},
|
|
48
|
+
"peerDependenciesMeta": {
|
|
49
|
+
"tailwindcss": {
|
|
50
|
+
"optional": false
|
|
51
|
+
}
|
|
36
52
|
},
|
|
37
53
|
"dependencies": {
|
|
38
54
|
"@dnd-kit/core": "^6.1.0",
|
|
@@ -41,20 +57,45 @@
|
|
|
41
57
|
"@radix-ui/react-dialog": "^1.1.1",
|
|
42
58
|
"@radix-ui/react-popover": "^1.1.1",
|
|
43
59
|
"@radix-ui/react-radio-group": "^1.3.8",
|
|
60
|
+
"@radix-ui/react-scroll-area": "^1.2.10",
|
|
44
61
|
"@radix-ui/react-select": "^2.1.1",
|
|
45
62
|
"@radix-ui/react-slot": "^1.1.0",
|
|
46
63
|
"@radix-ui/react-switch": "^1.1.0",
|
|
64
|
+
"@radix-ui/react-tabs": "^1.1.13",
|
|
47
65
|
"@radix-ui/react-tooltip": "^1.1.1",
|
|
66
|
+
"@tiptap/extension-color": "^3.13.0",
|
|
67
|
+
"@tiptap/extension-font-family": "^3.13.0",
|
|
68
|
+
"@tiptap/extension-highlight": "^3.13.0",
|
|
69
|
+
"@tiptap/extension-image": "^3.13.0",
|
|
70
|
+
"@tiptap/extension-link": "^3.13.0",
|
|
71
|
+
"@tiptap/extension-placeholder": "^3.13.0",
|
|
72
|
+
"@tiptap/extension-subscript": "^3.13.0",
|
|
73
|
+
"@tiptap/extension-superscript": "^3.13.0",
|
|
74
|
+
"@tiptap/extension-table": "^3.13.0",
|
|
75
|
+
"@tiptap/extension-table-cell": "^3.13.0",
|
|
76
|
+
"@tiptap/extension-table-header": "^3.13.0",
|
|
77
|
+
"@tiptap/extension-table-row": "^3.13.0",
|
|
78
|
+
"@tiptap/extension-task-item": "^3.13.0",
|
|
79
|
+
"@tiptap/extension-task-list": "^3.13.0",
|
|
80
|
+
"@tiptap/extension-text-align": "^3.13.0",
|
|
81
|
+
"@tiptap/extension-text-style": "^3.13.0",
|
|
82
|
+
"@tiptap/extension-underline": "^3.13.0",
|
|
83
|
+
"@tiptap/extension-youtube": "^3.13.0",
|
|
84
|
+
"@tiptap/pm": "^3.13.0",
|
|
85
|
+
"@tiptap/react": "^3.13.0",
|
|
86
|
+
"@tiptap/starter-kit": "^3.13.0",
|
|
48
87
|
"class-variance-authority": "^0.7.0",
|
|
49
88
|
"clsx": "^2.1.0",
|
|
50
89
|
"date-fns": "^3.3.1",
|
|
51
90
|
"lucide-react": "^0.344.0",
|
|
91
|
+
"react-colorful": "^5.6.1",
|
|
52
92
|
"react-day-picker": "^8.10.0",
|
|
53
93
|
"react-icons": "^5.5.0",
|
|
54
94
|
"tailwind-merge": "^2.2.1",
|
|
55
95
|
"tailwindcss-animate": "^1.0.7"
|
|
56
96
|
},
|
|
57
97
|
"devDependencies": {
|
|
98
|
+
"@playwright/test": "^1.57.0",
|
|
58
99
|
"@storybook/addon-docs": "^10.0.5",
|
|
59
100
|
"@storybook/addon-links": "^10.0.5",
|
|
60
101
|
"@storybook/react-vite": "^10.0.5",
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* hazo_ui Tailwind CSS Preset
|
|
3
|
+
*
|
|
4
|
+
* Use this preset in your tailwind.config.js/ts:
|
|
5
|
+
*
|
|
6
|
+
* import hazoUiPreset from 'hazo_ui/tailwind-preset';
|
|
7
|
+
*
|
|
8
|
+
* export default {
|
|
9
|
+
* presets: [hazoUiPreset],
|
|
10
|
+
* content: [
|
|
11
|
+
* './src/**\/*.{js,ts,jsx,tsx}',
|
|
12
|
+
* './node_modules/hazo_ui/dist/**\/*.js',
|
|
13
|
+
* ],
|
|
14
|
+
* };
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
import tailwindcssAnimate from 'tailwindcss-animate';
|
|
18
|
+
|
|
19
|
+
/** @type {import('tailwindcss').Config} */
|
|
20
|
+
const hazoUiPreset = {
|
|
21
|
+
darkMode: ['class'],
|
|
22
|
+
theme: {
|
|
23
|
+
container: {
|
|
24
|
+
center: true,
|
|
25
|
+
padding: '2rem',
|
|
26
|
+
screens: {
|
|
27
|
+
'2xl': '1400px',
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
extend: {
|
|
31
|
+
colors: {
|
|
32
|
+
border: 'hsl(var(--border))',
|
|
33
|
+
input: 'hsl(var(--input))',
|
|
34
|
+
ring: 'hsl(var(--ring))',
|
|
35
|
+
background: 'hsl(var(--background))',
|
|
36
|
+
foreground: 'hsl(var(--foreground))',
|
|
37
|
+
primary: {
|
|
38
|
+
DEFAULT: 'hsl(var(--primary))',
|
|
39
|
+
foreground: 'hsl(var(--primary-foreground))',
|
|
40
|
+
},
|
|
41
|
+
secondary: {
|
|
42
|
+
DEFAULT: 'hsl(var(--secondary))',
|
|
43
|
+
foreground: 'hsl(var(--secondary-foreground))',
|
|
44
|
+
},
|
|
45
|
+
destructive: {
|
|
46
|
+
DEFAULT: 'hsl(var(--destructive))',
|
|
47
|
+
foreground: 'hsl(var(--destructive-foreground))',
|
|
48
|
+
},
|
|
49
|
+
muted: {
|
|
50
|
+
DEFAULT: 'hsl(var(--muted))',
|
|
51
|
+
foreground: 'hsl(var(--muted-foreground))',
|
|
52
|
+
},
|
|
53
|
+
accent: {
|
|
54
|
+
DEFAULT: 'hsl(var(--accent))',
|
|
55
|
+
foreground: 'hsl(var(--accent-foreground))',
|
|
56
|
+
},
|
|
57
|
+
popover: {
|
|
58
|
+
DEFAULT: 'hsl(var(--popover))',
|
|
59
|
+
foreground: 'hsl(var(--popover-foreground))',
|
|
60
|
+
},
|
|
61
|
+
card: {
|
|
62
|
+
DEFAULT: 'hsl(var(--card))',
|
|
63
|
+
foreground: 'hsl(var(--card-foreground))',
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
borderRadius: {
|
|
67
|
+
lg: 'var(--radius)',
|
|
68
|
+
md: 'calc(var(--radius) - 2px)',
|
|
69
|
+
sm: 'calc(var(--radius) - 4px)',
|
|
70
|
+
},
|
|
71
|
+
keyframes: {
|
|
72
|
+
'accordion-down': {
|
|
73
|
+
from: { height: '0' },
|
|
74
|
+
to: { height: 'var(--radix-accordion-content-height)' },
|
|
75
|
+
},
|
|
76
|
+
'accordion-up': {
|
|
77
|
+
from: { height: 'var(--radix-accordion-content-height)' },
|
|
78
|
+
to: { height: '0' },
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
animation: {
|
|
82
|
+
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
83
|
+
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
plugins: [tailwindcssAnimate],
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export default hazoUiPreset;
|