@officina/ui 0.1.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/DateRangeFilterCalendar-D3ZM42SZ.js +19 -0
- package/dist/FilterGroupEditor-BHVNQUZG.js +1 -0
- package/dist/FilterGroupEditorPanel-KC6INLHT.js +129 -0
- package/dist/chunk-BNEIT5XY.js +23 -0
- package/dist/chunk-GE4PQEOQ.js +27 -0
- package/dist/chunk-LMM3LYFT.js +2008 -0
- package/dist/index.d.ts +3773 -0
- package/dist/index.js +9841 -0
- package/dist/styles.css +72 -0
- package/dist/tokens.css +160 -0
- package/package.json +138 -0
package/dist/styles.css
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
@import './tokens.css';
|
|
2
|
+
@import 'overlayscrollbars/styles/overlayscrollbars.css';
|
|
3
|
+
|
|
4
|
+
.officina-ui {
|
|
5
|
+
color: var(--color-fg-base);
|
|
6
|
+
font-family:
|
|
7
|
+
Geist,
|
|
8
|
+
Inter,
|
|
9
|
+
ui-sans-serif,
|
|
10
|
+
system-ui,
|
|
11
|
+
-apple-system,
|
|
12
|
+
BlinkMacSystemFont,
|
|
13
|
+
'Segoe UI',
|
|
14
|
+
sans-serif;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.officina-ui *,
|
|
18
|
+
.officina-ui *::before,
|
|
19
|
+
.officina-ui *::after {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.officina-ui :focus-visible {
|
|
24
|
+
outline: 2px solid var(--color-accent);
|
|
25
|
+
outline-offset: 2px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* ── Motion utilities (consumed by GradientText / BorderBeam / Ripple) ── */
|
|
29
|
+
@property --officina-beam-angle {
|
|
30
|
+
syntax: '<angle>';
|
|
31
|
+
inherits: false;
|
|
32
|
+
initial-value: 0deg;
|
|
33
|
+
}
|
|
34
|
+
@keyframes officina-border-beam {
|
|
35
|
+
to {
|
|
36
|
+
--officina-beam-angle: 360deg;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
.officina-border-beam {
|
|
40
|
+
animation: officina-border-beam var(--officina-beam-duration, 6s) linear infinite;
|
|
41
|
+
}
|
|
42
|
+
@keyframes officina-gradient-x {
|
|
43
|
+
0%,
|
|
44
|
+
100% {
|
|
45
|
+
background-position: 0% 50%;
|
|
46
|
+
}
|
|
47
|
+
50% {
|
|
48
|
+
background-position: 100% 50%;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
.officina-gradient-x {
|
|
52
|
+
background-size: 200% auto;
|
|
53
|
+
animation: officina-gradient-x 4s ease infinite;
|
|
54
|
+
}
|
|
55
|
+
@keyframes officina-ripple {
|
|
56
|
+
to {
|
|
57
|
+
transform: scale(2.4);
|
|
58
|
+
opacity: 0;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
.officina-ripple-dot {
|
|
62
|
+
animation: officina-ripple 280ms ease forwards;
|
|
63
|
+
}
|
|
64
|
+
@media (prefers-reduced-motion: reduce) {
|
|
65
|
+
.officina-border-beam,
|
|
66
|
+
.officina-gradient-x {
|
|
67
|
+
animation: none;
|
|
68
|
+
}
|
|
69
|
+
.officina-ripple-dot {
|
|
70
|
+
display: none;
|
|
71
|
+
}
|
|
72
|
+
}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* ── Neutrals (Zinc) ── */
|
|
3
|
+
--color-bg-base: #ffffff;
|
|
4
|
+
--color-bg-subtle: #fafafa;
|
|
5
|
+
--color-bg-muted: #f4f4f5;
|
|
6
|
+
--color-fg-base: #09090b;
|
|
7
|
+
--color-fg-muted: #52525b;
|
|
8
|
+
--color-fg-subtle: #626a76;
|
|
9
|
+
--color-border: #e4e4e7;
|
|
10
|
+
--color-border-strong: #d4d4d8;
|
|
11
|
+
--color-border-subtle: #ececf1;
|
|
12
|
+
--color-tooltip-bg: #111827;
|
|
13
|
+
--color-tooltip-fg: #f9fafb;
|
|
14
|
+
--color-accent-contrast: #ffffff;
|
|
15
|
+
--color-success-contrast: #ffffff;
|
|
16
|
+
--color-warning-contrast: #0a0a0a;
|
|
17
|
+
--color-danger-contrast: #ffffff;
|
|
18
|
+
--color-info-contrast: #ffffff;
|
|
19
|
+
--color-success-bg: #f0fdf4;
|
|
20
|
+
--color-success-border: #bbf7d0;
|
|
21
|
+
--color-warning-bg: #fffbeb;
|
|
22
|
+
--color-warning-border: #fde68a;
|
|
23
|
+
--color-danger-bg: #fef2f2;
|
|
24
|
+
--color-danger-border: #fecaca;
|
|
25
|
+
|
|
26
|
+
/* ── Brand (Indigo) ── */
|
|
27
|
+
--color-accent: #4f46e5;
|
|
28
|
+
--color-accent-hover: #4338ca;
|
|
29
|
+
--color-accent-subtle: #eef2ff;
|
|
30
|
+
--color-accent-muted: #e0e7ff;
|
|
31
|
+
--color-accent-fg: #3730a3;
|
|
32
|
+
|
|
33
|
+
/* ── Semantic: Success (Emerald) ── */
|
|
34
|
+
--color-success: #08785a;
|
|
35
|
+
--color-success-hover: #065f46;
|
|
36
|
+
--color-success-subtle: #f0fdf4;
|
|
37
|
+
--color-success-muted: #bbf7d0;
|
|
38
|
+
--color-success-fg: #166534;
|
|
39
|
+
|
|
40
|
+
/* ── Semantic: Warning (Amber) ── */
|
|
41
|
+
--color-warning: #f59e0b;
|
|
42
|
+
--color-warning-hover: #d97706;
|
|
43
|
+
--color-warning-subtle: #fffbeb;
|
|
44
|
+
--color-warning-muted: #fde68a;
|
|
45
|
+
--color-warning-fg: #92400e;
|
|
46
|
+
|
|
47
|
+
/* ── Semantic: Danger (Red) ── */
|
|
48
|
+
--color-danger: #b02f35;
|
|
49
|
+
--color-danger-hover: #8b1d28;
|
|
50
|
+
--color-danger-subtle: #fef2f2;
|
|
51
|
+
--color-danger-muted: #fecaca;
|
|
52
|
+
--color-danger-fg: #991b1b;
|
|
53
|
+
|
|
54
|
+
/* ── Semantic: Info (Blue) ── */
|
|
55
|
+
--color-info: #3b82f6;
|
|
56
|
+
--color-info-hover: #2563eb;
|
|
57
|
+
--color-info-subtle: #eff6ff;
|
|
58
|
+
--color-info-muted: #bfdbfe;
|
|
59
|
+
--color-info-fg: #1e40af;
|
|
60
|
+
|
|
61
|
+
/* ── Radius ── */
|
|
62
|
+
--radius-xs: 0.125rem;
|
|
63
|
+
--radius-sm: 0.25rem;
|
|
64
|
+
--radius-md: 0.5rem;
|
|
65
|
+
--radius-lg: 0.75rem;
|
|
66
|
+
--radius-xl: 1rem;
|
|
67
|
+
--radius-2xl: 1.25rem;
|
|
68
|
+
--radius-full: 9999px;
|
|
69
|
+
|
|
70
|
+
/* ── Shadows ── */
|
|
71
|
+
--shadow-xs: 0 1px 0 rgb(0 0 0 / 0.04);
|
|
72
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
73
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
|
|
74
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
|
|
75
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);
|
|
76
|
+
|
|
77
|
+
/* ── Motion ── */
|
|
78
|
+
--duration-fast: 120ms;
|
|
79
|
+
--duration-base: 200ms;
|
|
80
|
+
--duration-slow: 320ms;
|
|
81
|
+
--motion-fast: 140ms;
|
|
82
|
+
--motion-base: 200ms;
|
|
83
|
+
--motion-slow: 280ms;
|
|
84
|
+
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
85
|
+
--ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
86
|
+
--marquee-speed: 20s;
|
|
87
|
+
|
|
88
|
+
/* ── Layout ── */
|
|
89
|
+
--sidebar-width: 260px;
|
|
90
|
+
--sidebar-mini-width: 64px;
|
|
91
|
+
--topbar-height: 56px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.dark {
|
|
95
|
+
/* ── Neutrals ── */
|
|
96
|
+
--color-bg-base: #18181b;
|
|
97
|
+
--color-bg-subtle: #09090b;
|
|
98
|
+
--color-bg-muted: #27272a;
|
|
99
|
+
--color-fg-base: #fafafa;
|
|
100
|
+
--color-fg-muted: #a1a1aa;
|
|
101
|
+
--color-fg-subtle: #71717a;
|
|
102
|
+
--color-border: #27272a;
|
|
103
|
+
--color-border-strong: #3f3f46;
|
|
104
|
+
--color-border-subtle: #303038;
|
|
105
|
+
--color-tooltip-bg: #09090b;
|
|
106
|
+
--color-tooltip-fg: #f4f4f5;
|
|
107
|
+
--color-accent-contrast: #0a0a0a;
|
|
108
|
+
--color-success-contrast: #0a0a0a;
|
|
109
|
+
--color-warning-contrast: #0a0a0a;
|
|
110
|
+
--color-danger-contrast: #0a0a0a;
|
|
111
|
+
--color-info-contrast: #0a0a0a;
|
|
112
|
+
--color-success-bg: rgb(16 185 129 / 0.1);
|
|
113
|
+
--color-success-border: rgb(16 185 129 / 0.28);
|
|
114
|
+
--color-warning-bg: rgb(245 158 11 / 0.1);
|
|
115
|
+
--color-warning-border: rgb(245 158 11 / 0.28);
|
|
116
|
+
--color-danger-bg: rgb(239 68 68 / 0.1);
|
|
117
|
+
--color-danger-border: rgb(239 68 68 / 0.28);
|
|
118
|
+
|
|
119
|
+
/* ── Brand ── */
|
|
120
|
+
--color-accent: #6366f1;
|
|
121
|
+
--color-accent-hover: #818cf8;
|
|
122
|
+
--color-accent-subtle: rgb(99 102 241 / 0.1);
|
|
123
|
+
--color-accent-muted: rgb(99 102 241 / 0.2);
|
|
124
|
+
--color-accent-fg: #c7d2fe;
|
|
125
|
+
|
|
126
|
+
/* ── Semantic: Success ── */
|
|
127
|
+
--color-success: #10b981;
|
|
128
|
+
--color-success-hover: #34d399;
|
|
129
|
+
--color-success-subtle: rgb(16 185 129 / 0.1);
|
|
130
|
+
--color-success-muted: rgb(16 185 129 / 0.2);
|
|
131
|
+
--color-success-fg: #34d399;
|
|
132
|
+
|
|
133
|
+
/* ── Semantic: Warning ── */
|
|
134
|
+
--color-warning: #f59e0b;
|
|
135
|
+
--color-warning-hover: #fbbf24;
|
|
136
|
+
--color-warning-subtle: rgb(245 158 11 / 0.1);
|
|
137
|
+
--color-warning-muted: rgb(245 158 11 / 0.2);
|
|
138
|
+
--color-warning-fg: #fbbf24;
|
|
139
|
+
|
|
140
|
+
/* ── Semantic: Danger ── */
|
|
141
|
+
--color-danger: #ef4444;
|
|
142
|
+
--color-danger-hover: #f87171;
|
|
143
|
+
--color-danger-subtle: rgb(239 68 68 / 0.1);
|
|
144
|
+
--color-danger-muted: rgb(239 68 68 / 0.2);
|
|
145
|
+
--color-danger-fg: #f87171;
|
|
146
|
+
|
|
147
|
+
/* ── Semantic: Info ── */
|
|
148
|
+
--color-info: #3b82f6;
|
|
149
|
+
--color-info-hover: #60a5fa;
|
|
150
|
+
--color-info-subtle: rgb(59 130 246 / 0.1);
|
|
151
|
+
--color-info-muted: rgb(59 130 246 / 0.2);
|
|
152
|
+
--color-info-fg: #93c5fd;
|
|
153
|
+
|
|
154
|
+
/* ── Shadows ── */
|
|
155
|
+
--shadow-xs: 0 1px 0 rgb(0 0 0 / 0.2);
|
|
156
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
|
157
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
|
|
158
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
|
|
159
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6);
|
|
160
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@officina/ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Officina UI — the most complete open-source React component library. 250+ primitives, token CSS, and reusable components.",
|
|
5
|
+
"license": "Apache-2.0",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"sideEffects": [
|
|
8
|
+
"./dist/styles.css",
|
|
9
|
+
"./dist/tokens.css"
|
|
10
|
+
],
|
|
11
|
+
"files": [
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
14
|
+
"main": "./dist/index.js",
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"import": "./dist/index.js"
|
|
20
|
+
},
|
|
21
|
+
"./styles.css": "./dist/styles.css",
|
|
22
|
+
"./tokens.css": "./dist/tokens.css"
|
|
23
|
+
},
|
|
24
|
+
"scripts": {
|
|
25
|
+
"build": "tsup && cp src/styles.css dist/styles.css && cp src/tokens.css dist/tokens.css",
|
|
26
|
+
"typecheck": "tsc -p tsconfig.build.json --noEmit",
|
|
27
|
+
"test": "vitest run --coverage",
|
|
28
|
+
"test:watch": "vitest"
|
|
29
|
+
},
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public"
|
|
32
|
+
},
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "https://github.com/lucio-chiummo/officina-ui.git",
|
|
36
|
+
"directory": "packages/ui"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"@tanstack/react-query": "^5.62.0",
|
|
40
|
+
"@tanstack/react-router": "^1.95.0",
|
|
41
|
+
"@tanstack/react-table": "^8.21.0",
|
|
42
|
+
"react": "^19.0.0",
|
|
43
|
+
"react-dom": "^19.0.0"
|
|
44
|
+
},
|
|
45
|
+
"peerDependenciesMeta": {
|
|
46
|
+
"@tanstack/react-query": {
|
|
47
|
+
"optional": true
|
|
48
|
+
},
|
|
49
|
+
"@tanstack/react-router": {
|
|
50
|
+
"optional": true
|
|
51
|
+
},
|
|
52
|
+
"@tanstack/react-table": {
|
|
53
|
+
"optional": true
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"dependencies": {
|
|
57
|
+
"@codemirror/lang-css": "^6.3.1",
|
|
58
|
+
"@codemirror/lang-html": "^6.4.11",
|
|
59
|
+
"@codemirror/lang-javascript": "^6.2.5",
|
|
60
|
+
"@codemirror/lang-json": "^6.0.2",
|
|
61
|
+
"@codemirror/lang-markdown": "^6.5.0",
|
|
62
|
+
"@codemirror/lang-python": "^6.2.1",
|
|
63
|
+
"@codemirror/theme-one-dark": "^6.1.3",
|
|
64
|
+
"@dnd-kit/core": "^6.3.1",
|
|
65
|
+
"@dnd-kit/sortable": "^10.0.0",
|
|
66
|
+
"@dnd-kit/utilities": "^3.2.2",
|
|
67
|
+
"@floating-ui/react": "^0.27.19",
|
|
68
|
+
"@headlessui/react": "^2.2.0",
|
|
69
|
+
"@hookform/resolvers": "^3.9.0",
|
|
70
|
+
"@radix-ui/react-aspect-ratio": "^1.1.8",
|
|
71
|
+
"@radix-ui/react-navigation-menu": "^1.2.14",
|
|
72
|
+
"@radix-ui/react-slider": "^1.3.6",
|
|
73
|
+
"@tanstack/react-virtual": "^3.13.24",
|
|
74
|
+
"@tiptap/react": "^3.22.5",
|
|
75
|
+
"@tiptap/starter-kit": "^3.22.5",
|
|
76
|
+
"@uiw/react-codemirror": "^4.25.9",
|
|
77
|
+
"class-variance-authority": "^0.7.0",
|
|
78
|
+
"clsx": "^2.1.1",
|
|
79
|
+
"cmdk": "^1.0.4",
|
|
80
|
+
"date-fns": "^4.1.0",
|
|
81
|
+
"driver.js": "^1.4.0",
|
|
82
|
+
"echarts": "^6.0.0",
|
|
83
|
+
"echarts-for-react": "^3.0.6",
|
|
84
|
+
"embla-carousel-react": "^8.6.0",
|
|
85
|
+
"framer-motion": "^11.15.0",
|
|
86
|
+
"input-otp": "^1.4.2",
|
|
87
|
+
"jspdf": "^4.2.1",
|
|
88
|
+
"jspdf-autotable": "^5.0.7",
|
|
89
|
+
"lucide-react": "^0.460.0",
|
|
90
|
+
"match-sorter": "^8.3.0",
|
|
91
|
+
"nanoid": "^5.0.0",
|
|
92
|
+
"overlayscrollbars": "^2.16.0",
|
|
93
|
+
"overlayscrollbars-react": "^0.5.6",
|
|
94
|
+
"prism-react-renderer": "^2.4.1",
|
|
95
|
+
"qrcode.react": "^4.2.0",
|
|
96
|
+
"react-big-calendar": "^1.19.4",
|
|
97
|
+
"react-day-picker": "^9.14.0",
|
|
98
|
+
"react-dropzone": "^15.0.0",
|
|
99
|
+
"react-hook-form": "^7.54.0",
|
|
100
|
+
"react-i18next": "^15.1.0",
|
|
101
|
+
"react-image-crop": "^11.0.10",
|
|
102
|
+
"react-international-phone": "^4.8.0",
|
|
103
|
+
"react-markdown": "^10.1.0",
|
|
104
|
+
"react-player": "^3.4.0",
|
|
105
|
+
"react-resizable-panels": "^4.11.0",
|
|
106
|
+
"rehype-sanitize": "^6.0.0",
|
|
107
|
+
"remark-gfm": "^4.0.1",
|
|
108
|
+
"sonner": "^1.7.0",
|
|
109
|
+
"tailwind-merge": "^2.5.0",
|
|
110
|
+
"use-debounce": "^10.1.1",
|
|
111
|
+
"xlsx": "^0.18.5",
|
|
112
|
+
"yet-another-react-lightbox": "^3.31.0",
|
|
113
|
+
"zustand": "^5.0.0"
|
|
114
|
+
},
|
|
115
|
+
"devDependencies": {
|
|
116
|
+
"tsup": "^8.3.0",
|
|
117
|
+
"@types/react": "^19.0.0",
|
|
118
|
+
"@types/react-dom": "^19.0.0",
|
|
119
|
+
"@types/react-big-calendar": "^1.16.3",
|
|
120
|
+
"@types/node": "^22.10.0",
|
|
121
|
+
"@testing-library/jest-dom": "^6.6.0",
|
|
122
|
+
"@testing-library/react": "^16.1.0",
|
|
123
|
+
"@testing-library/user-event": "^14.5.0",
|
|
124
|
+
"@types/jest-axe": "^3.5.9",
|
|
125
|
+
"@vitejs/plugin-react": "^4.3.0",
|
|
126
|
+
"@vitest/coverage-v8": "^2.1.0",
|
|
127
|
+
"axe-core": "^4.10.0",
|
|
128
|
+
"i18next": "^24.0.0",
|
|
129
|
+
"jest-axe": "^9.0.0",
|
|
130
|
+
"jsdom": "^25.0.0",
|
|
131
|
+
"vite": "^6.0.0",
|
|
132
|
+
"vitest": "^2.1.0",
|
|
133
|
+
"zod": "^3.24.0"
|
|
134
|
+
},
|
|
135
|
+
"engines": {
|
|
136
|
+
"node": ">=22.0.0"
|
|
137
|
+
}
|
|
138
|
+
}
|