@vectramindnpm/unified-design-system 0.2.4 → 0.2.5
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 +258 -258
- package/dist/components.css +387 -387
- package/dist/fonts.css +12 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/shadcn-base.css +36 -36
- package/dist/styles.css +11 -11
- package/dist/theme.css +92 -92
- package/package.json +92 -92
- package/tailwind-preset.js +84 -84
package/dist/shadcn-base.css
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
/* shadcn-style base tokens some components (button, dialog, card, badge, ...) rely on
|
|
2
|
-
for classes like bg-popover / text-foreground / border-border-default / bg-destructive.
|
|
3
|
-
Lifted verbatim from the source app's tailwind.css :root block — plain CSS custom
|
|
4
|
-
properties, no app logic. */
|
|
5
|
-
:root {
|
|
6
|
-
--background: 0 0% 100%;
|
|
7
|
-
--foreground: 222.2 47.4% 11.2%;
|
|
8
|
-
|
|
9
|
-
--muted: 210 40% 96.1%;
|
|
10
|
-
--muted-foreground: 215.4 16.3% 46.9%;
|
|
11
|
-
|
|
12
|
-
--popover: 0 0% 100%;
|
|
13
|
-
--popover-foreground: 222.2 47.4% 11.2%;
|
|
14
|
-
|
|
15
|
-
--border: 214.3 31.8% 91.4%;
|
|
16
|
-
--input: 214.3 31.8% 91.4%;
|
|
17
|
-
|
|
18
|
-
--card: transparent;
|
|
19
|
-
--card-foreground: 222.2 47.4% 11.2%;
|
|
20
|
-
|
|
21
|
-
--primary: 222.2 47.4% 11.2%;
|
|
22
|
-
--primary-foreground: 210 40% 98%;
|
|
23
|
-
|
|
24
|
-
--secondary: 210 40% 96.1%;
|
|
25
|
-
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
26
|
-
|
|
27
|
-
--accent: 210 40% 96.1%;
|
|
28
|
-
--accent-foreground: 222.2 47.4% 11.2%;
|
|
29
|
-
|
|
30
|
-
--destructive: 0 100% 50%;
|
|
31
|
-
--destructive-foreground: 210 40% 98%;
|
|
32
|
-
|
|
33
|
-
--ring: 215 20.2% 65.1%;
|
|
34
|
-
|
|
35
|
-
--radius: 0.5rem;
|
|
36
|
-
}
|
|
1
|
+
/* shadcn-style base tokens some components (button, dialog, card, badge, ...) rely on
|
|
2
|
+
for classes like bg-popover / text-foreground / border-border-default / bg-destructive.
|
|
3
|
+
Lifted verbatim from the source app's tailwind.css :root block — plain CSS custom
|
|
4
|
+
properties, no app logic. */
|
|
5
|
+
:root {
|
|
6
|
+
--background: 0 0% 100%;
|
|
7
|
+
--foreground: 222.2 47.4% 11.2%;
|
|
8
|
+
|
|
9
|
+
--muted: 210 40% 96.1%;
|
|
10
|
+
--muted-foreground: 215.4 16.3% 46.9%;
|
|
11
|
+
|
|
12
|
+
--popover: 0 0% 100%;
|
|
13
|
+
--popover-foreground: 222.2 47.4% 11.2%;
|
|
14
|
+
|
|
15
|
+
--border: 214.3 31.8% 91.4%;
|
|
16
|
+
--input: 214.3 31.8% 91.4%;
|
|
17
|
+
|
|
18
|
+
--card: transparent;
|
|
19
|
+
--card-foreground: 222.2 47.4% 11.2%;
|
|
20
|
+
|
|
21
|
+
--primary: 222.2 47.4% 11.2%;
|
|
22
|
+
--primary-foreground: 210 40% 98%;
|
|
23
|
+
|
|
24
|
+
--secondary: 210 40% 96.1%;
|
|
25
|
+
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
26
|
+
|
|
27
|
+
--accent: 210 40% 96.1%;
|
|
28
|
+
--accent-foreground: 222.2 47.4% 11.2%;
|
|
29
|
+
|
|
30
|
+
--destructive: 0 100% 50%;
|
|
31
|
+
--destructive-foreground: 210 40% 98%;
|
|
32
|
+
|
|
33
|
+
--ring: 215 20.2% 65.1%;
|
|
34
|
+
|
|
35
|
+
--radius: 0.5rem;
|
|
36
|
+
}
|
package/dist/styles.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
/* unified-design-system — Tailwind v4 entry point.
|
|
2
|
-
Consumers on Tailwind v4: `@import "unified-design-system/styles.css";` in their own
|
|
3
|
-
global CSS (alongside their own `@import "tailwindcss";`), or import this file directly
|
|
4
|
-
in Storybook preview / an app entry point. See ../../../README.md for the Tailwind v3
|
|
5
|
-
preset instead. */
|
|
6
|
-
@import "./fonts.css";
|
|
7
|
-
@import "./icon-font.css";
|
|
8
|
-
@import "./tokens.css";
|
|
9
|
-
@import "./shadcn-base.css";
|
|
10
|
-
@import "./theme.css";
|
|
11
|
-
@import "./components.css";
|
|
1
|
+
/* unified-design-system — Tailwind v4 entry point.
|
|
2
|
+
Consumers on Tailwind v4: `@import "unified-design-system/styles.css";` in their own
|
|
3
|
+
global CSS (alongside their own `@import "tailwindcss";`), or import this file directly
|
|
4
|
+
in Storybook preview / an app entry point. See ../../../README.md for the Tailwind v3
|
|
5
|
+
preset instead. */
|
|
6
|
+
@import "./fonts.css";
|
|
7
|
+
@import "./icon-font.css";
|
|
8
|
+
@import "./tokens.css";
|
|
9
|
+
@import "./shadcn-base.css";
|
|
10
|
+
@import "./theme.css";
|
|
11
|
+
@import "./components.css";
|
package/dist/theme.css
CHANGED
|
@@ -1,92 +1,92 @@
|
|
|
1
|
-
/* Auto-generated bridge: maps this package's design-token CSS custom
|
|
2
|
-
properties (tokens.css) into Tailwind v4's @theme namespace so utility
|
|
3
|
-
classes like bg-interactive-brand / text-status-danger are generated.
|
|
4
|
-
Regenerate from tailwind-tokens.cjs if that file changes. */
|
|
5
|
-
@theme inline {
|
|
6
|
-
--color-background-card: var(--color-background-card);
|
|
7
|
-
--color-background-surface: var(--color-background-surface);
|
|
8
|
-
--color-border-card: var(--color-border-card);
|
|
9
|
-
--color-border-default: var(--color-border-default);
|
|
10
|
-
--color-brand-purple: var(--color-brand-purple);
|
|
11
|
-
--color-brand-purple-600: var(--color-brand-purple-600);
|
|
12
|
-
--color-brand-purple-700: var(--color-brand-purple-700);
|
|
13
|
-
--color-gradient-brand: var(--color-gradient-brand);
|
|
14
|
-
--color-interactive-brand: var(--color-interactive-brand);
|
|
15
|
-
--color-interactive-brand-active: var(--color-interactive-brand-active);
|
|
16
|
-
--color-interactive-brand-hover: var(--color-interactive-brand-hover);
|
|
17
|
-
--color-neutral-100: var(--color-neutral-100);
|
|
18
|
-
--color-neutral-200: var(--color-neutral-200);
|
|
19
|
-
--color-neutral-300: var(--color-neutral-300);
|
|
20
|
-
--color-neutral-350: var(--color-neutral-350);
|
|
21
|
-
--color-neutral-400: var(--color-neutral-400);
|
|
22
|
-
--color-neutral-450: var(--color-neutral-450);
|
|
23
|
-
--color-neutral-500: var(--color-neutral-500);
|
|
24
|
-
--color-neutral-600: var(--color-neutral-600);
|
|
25
|
-
--color-neutral-700: var(--color-neutral-700);
|
|
26
|
-
--color-neutral-800: var(--color-neutral-800);
|
|
27
|
-
--color-neutral-900: var(--color-neutral-900);
|
|
28
|
-
--color-neutral-gray: var(--color-neutral-gray);
|
|
29
|
-
--color-neutral-muted: var(--color-neutral-muted);
|
|
30
|
-
--color-neutral-white: var(--color-neutral-white);
|
|
31
|
-
--color-status-danger: var(--color-status-danger);
|
|
32
|
-
--color-status-success: var(--color-status-success);
|
|
33
|
-
--color-status-warning: var(--color-status-warning);
|
|
34
|
-
--color-text-muted: var(--color-text-muted);
|
|
35
|
-
--color-text-primary: var(--color-text-primary);
|
|
36
|
-
--radius-2xl: var(--radius-2xl);
|
|
37
|
-
--radius-card: var(--radius-card);
|
|
38
|
-
--radius-control: var(--radius-control);
|
|
39
|
-
--radius-lg: var(--radius-lg);
|
|
40
|
-
--radius-md: var(--radius-md);
|
|
41
|
-
--radius-modal: var(--radius-modal);
|
|
42
|
-
--radius-pill: var(--radius-pill);
|
|
43
|
-
--radius-sm: var(--radius-sm);
|
|
44
|
-
--radius-xl: var(--radius-xl);
|
|
45
|
-
--radius-xs: var(--radius-xs);
|
|
46
|
-
--shadow-elevation-1: var(--shadow-elevation-1);
|
|
47
|
-
--shadow-elevation-2: var(--shadow-elevation-2);
|
|
48
|
-
--shadow-lg: var(--shadow-lg);
|
|
49
|
-
--shadow-md: var(--shadow-md);
|
|
50
|
-
--shadow-sm: var(--shadow-sm);
|
|
51
|
-
--spacing-button-x: var(--spacing-button-x);
|
|
52
|
-
--spacing-component-gap: var(--spacing-component-gap);
|
|
53
|
-
--spacing-form-control: var(--spacing-form-control);
|
|
54
|
-
--spacing-lg: var(--spacing-lg);
|
|
55
|
-
--spacing-md: var(--spacing-md);
|
|
56
|
-
--spacing-sm: var(--spacing-sm);
|
|
57
|
-
--spacing-xl: var(--spacing-xl);
|
|
58
|
-
--spacing-xs: var(--spacing-xs);
|
|
59
|
-
--spacing-xxl: var(--spacing-xxl);
|
|
60
|
-
--font-size-base: var(--font-size-base);
|
|
61
|
-
--font-size-lg: var(--font-size-lg);
|
|
62
|
-
--font-size-sm: var(--font-size-sm);
|
|
63
|
-
--font-size-xl: var(--font-size-xl);
|
|
64
|
-
--font-size-xs: var(--font-size-xs);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
/* shadcn-style bridge (see shadcn-base.css for the underlying HSL vars) */
|
|
68
|
-
@theme inline {
|
|
69
|
-
--color-border: hsl(var(--border));
|
|
70
|
-
--color-input: hsl(var(--input));
|
|
71
|
-
--color-ring: hsl(var(--ring));
|
|
72
|
-
--color-background: hsl(var(--background));
|
|
73
|
-
--color-foreground: hsl(var(--foreground));
|
|
74
|
-
--color-primary: hsl(var(--primary));
|
|
75
|
-
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
76
|
-
--color-secondary: hsl(var(--secondary));
|
|
77
|
-
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
78
|
-
--color-destructive: hsl(var(--destructive));
|
|
79
|
-
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
80
|
-
--color-muted: hsl(var(--muted));
|
|
81
|
-
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
82
|
-
--color-accent: hsl(var(--accent));
|
|
83
|
-
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
84
|
-
--color-popover: hsl(var(--popover));
|
|
85
|
-
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
86
|
-
--color-card: hsl(var(--card));
|
|
87
|
-
--color-card-foreground: hsl(var(--card-foreground));
|
|
88
|
-
|
|
89
|
-
--radius-lg: var(--radius);
|
|
90
|
-
--radius-md: calc(var(--radius) - 2px);
|
|
91
|
-
--radius-sm: calc(var(--radius) - 4px);
|
|
92
|
-
}
|
|
1
|
+
/* Auto-generated bridge: maps this package's design-token CSS custom
|
|
2
|
+
properties (tokens.css) into Tailwind v4's @theme namespace so utility
|
|
3
|
+
classes like bg-interactive-brand / text-status-danger are generated.
|
|
4
|
+
Regenerate from tailwind-tokens.cjs if that file changes. */
|
|
5
|
+
@theme inline {
|
|
6
|
+
--color-background-card: var(--color-background-card);
|
|
7
|
+
--color-background-surface: var(--color-background-surface);
|
|
8
|
+
--color-border-card: var(--color-border-card);
|
|
9
|
+
--color-border-default: var(--color-border-default);
|
|
10
|
+
--color-brand-purple: var(--color-brand-purple);
|
|
11
|
+
--color-brand-purple-600: var(--color-brand-purple-600);
|
|
12
|
+
--color-brand-purple-700: var(--color-brand-purple-700);
|
|
13
|
+
--color-gradient-brand: var(--color-gradient-brand);
|
|
14
|
+
--color-interactive-brand: var(--color-interactive-brand);
|
|
15
|
+
--color-interactive-brand-active: var(--color-interactive-brand-active);
|
|
16
|
+
--color-interactive-brand-hover: var(--color-interactive-brand-hover);
|
|
17
|
+
--color-neutral-100: var(--color-neutral-100);
|
|
18
|
+
--color-neutral-200: var(--color-neutral-200);
|
|
19
|
+
--color-neutral-300: var(--color-neutral-300);
|
|
20
|
+
--color-neutral-350: var(--color-neutral-350);
|
|
21
|
+
--color-neutral-400: var(--color-neutral-400);
|
|
22
|
+
--color-neutral-450: var(--color-neutral-450);
|
|
23
|
+
--color-neutral-500: var(--color-neutral-500);
|
|
24
|
+
--color-neutral-600: var(--color-neutral-600);
|
|
25
|
+
--color-neutral-700: var(--color-neutral-700);
|
|
26
|
+
--color-neutral-800: var(--color-neutral-800);
|
|
27
|
+
--color-neutral-900: var(--color-neutral-900);
|
|
28
|
+
--color-neutral-gray: var(--color-neutral-gray);
|
|
29
|
+
--color-neutral-muted: var(--color-neutral-muted);
|
|
30
|
+
--color-neutral-white: var(--color-neutral-white);
|
|
31
|
+
--color-status-danger: var(--color-status-danger);
|
|
32
|
+
--color-status-success: var(--color-status-success);
|
|
33
|
+
--color-status-warning: var(--color-status-warning);
|
|
34
|
+
--color-text-muted: var(--color-text-muted);
|
|
35
|
+
--color-text-primary: var(--color-text-primary);
|
|
36
|
+
--radius-2xl: var(--radius-2xl);
|
|
37
|
+
--radius-card: var(--radius-card);
|
|
38
|
+
--radius-control: var(--radius-control);
|
|
39
|
+
--radius-lg: var(--radius-lg);
|
|
40
|
+
--radius-md: var(--radius-md);
|
|
41
|
+
--radius-modal: var(--radius-modal);
|
|
42
|
+
--radius-pill: var(--radius-pill);
|
|
43
|
+
--radius-sm: var(--radius-sm);
|
|
44
|
+
--radius-xl: var(--radius-xl);
|
|
45
|
+
--radius-xs: var(--radius-xs);
|
|
46
|
+
--shadow-elevation-1: var(--shadow-elevation-1);
|
|
47
|
+
--shadow-elevation-2: var(--shadow-elevation-2);
|
|
48
|
+
--shadow-lg: var(--shadow-lg);
|
|
49
|
+
--shadow-md: var(--shadow-md);
|
|
50
|
+
--shadow-sm: var(--shadow-sm);
|
|
51
|
+
--spacing-button-x: var(--spacing-button-x);
|
|
52
|
+
--spacing-component-gap: var(--spacing-component-gap);
|
|
53
|
+
--spacing-form-control: var(--spacing-form-control);
|
|
54
|
+
--spacing-lg: var(--spacing-lg);
|
|
55
|
+
--spacing-md: var(--spacing-md);
|
|
56
|
+
--spacing-sm: var(--spacing-sm);
|
|
57
|
+
--spacing-xl: var(--spacing-xl);
|
|
58
|
+
--spacing-xs: var(--spacing-xs);
|
|
59
|
+
--spacing-xxl: var(--spacing-xxl);
|
|
60
|
+
--font-size-base: var(--font-size-base);
|
|
61
|
+
--font-size-lg: var(--font-size-lg);
|
|
62
|
+
--font-size-sm: var(--font-size-sm);
|
|
63
|
+
--font-size-xl: var(--font-size-xl);
|
|
64
|
+
--font-size-xs: var(--font-size-xs);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* shadcn-style bridge (see shadcn-base.css for the underlying HSL vars) */
|
|
68
|
+
@theme inline {
|
|
69
|
+
--color-border: hsl(var(--border));
|
|
70
|
+
--color-input: hsl(var(--input));
|
|
71
|
+
--color-ring: hsl(var(--ring));
|
|
72
|
+
--color-background: hsl(var(--background));
|
|
73
|
+
--color-foreground: hsl(var(--foreground));
|
|
74
|
+
--color-primary: hsl(var(--primary));
|
|
75
|
+
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
76
|
+
--color-secondary: hsl(var(--secondary));
|
|
77
|
+
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
78
|
+
--color-destructive: hsl(var(--destructive));
|
|
79
|
+
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
80
|
+
--color-muted: hsl(var(--muted));
|
|
81
|
+
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
82
|
+
--color-accent: hsl(var(--accent));
|
|
83
|
+
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
84
|
+
--color-popover: hsl(var(--popover));
|
|
85
|
+
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
86
|
+
--color-card: hsl(var(--card));
|
|
87
|
+
--color-card-foreground: hsl(var(--card-foreground));
|
|
88
|
+
|
|
89
|
+
--radius-lg: var(--radius);
|
|
90
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
91
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
92
|
+
}
|
package/package.json
CHANGED
|
@@ -1,92 +1,92 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@vectramindnpm/unified-design-system",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"description": "Standalone, publishable UI component library + design tokens extracted from Firstpass-Neo (src/designSystem + src/components/ui), decoupled from app-specific i18n/Redux/session wiring.",
|
|
5
|
-
"private": false,
|
|
6
|
-
"publishConfig": {
|
|
7
|
-
"access": "public"
|
|
8
|
-
},
|
|
9
|
-
"type": "module",
|
|
10
|
-
"sideEffects": [
|
|
11
|
-
"**/*.css"
|
|
12
|
-
],
|
|
13
|
-
"main": "./dist/index.cjs",
|
|
14
|
-
"module": "./dist/index.js",
|
|
15
|
-
"types": "./dist/index.d.ts",
|
|
16
|
-
"exports": {
|
|
17
|
-
".": {
|
|
18
|
-
"types": "./dist/index.d.ts",
|
|
19
|
-
"import": "./dist/index.js",
|
|
20
|
-
"require": "./dist/index.cjs"
|
|
21
|
-
},
|
|
22
|
-
"./index.css": "./dist/index.css",
|
|
23
|
-
"./styles.css": "./dist/styles.css",
|
|
24
|
-
"./tokens.css": "./dist/tokens.css",
|
|
25
|
-
"./shadcn-base.css": "./dist/shadcn-base.css",
|
|
26
|
-
"./theme.css": "./dist/theme.css",
|
|
27
|
-
"./components.css": "./dist/components.css",
|
|
28
|
-
"./fonts.css": "./dist/fonts.css",
|
|
29
|
-
"./icon-font.css": "./dist/icon-font.css",
|
|
30
|
-
"./tailwind-preset": "./tailwind-preset.js",
|
|
31
|
-
"./tailwind-tokens.cjs": "./tailwind-tokens.cjs",
|
|
32
|
-
"./package.json": "./package.json"
|
|
33
|
-
},
|
|
34
|
-
"files": [
|
|
35
|
-
"dist",
|
|
36
|
-
"tailwind-preset.js",
|
|
37
|
-
"tailwind-tokens.cjs"
|
|
38
|
-
],
|
|
39
|
-
"scripts": {
|
|
40
|
-
"dev": "rsbuild",
|
|
41
|
-
"build": "rsbuild build",
|
|
42
|
-
"preview": "rsbuild preview",
|
|
43
|
-
"lint": "rslint",
|
|
44
|
-
"storybook": "storybook dev -p 6006",
|
|
45
|
-
"build-storybook": "storybook build",
|
|
46
|
-
"build:lib": "tsup && npm run build:lib:css",
|
|
47
|
-
"build:lib:css": "node scripts/copy-styles.mjs",
|
|
48
|
-
"dev:lib": "tsup --watch",
|
|
49
|
-
"prepublishOnly": "npm run build:lib"
|
|
50
|
-
},
|
|
51
|
-
"peerDependencies": {
|
|
52
|
-
"react": ">=18.0.0",
|
|
53
|
-
"react-dom": ">=18.0.0",
|
|
54
|
-
"formik": ">=2.4.0"
|
|
55
|
-
},
|
|
56
|
-
"dependencies": {
|
|
57
|
-
"class-variance-authority": "^0.7.0",
|
|
58
|
-
"clsx": "2.1.1",
|
|
59
|
-
"dayjs": "^1.11.19",
|
|
60
|
-
"i18next": "^25.7.2",
|
|
61
|
-
"lucide-react": "^0.453.0",
|
|
62
|
-
"react-i18next": "^16.4.0",
|
|
63
|
-
"react-infinite-scroll-component": "^6.1.1",
|
|
64
|
-
"tailwind-merge": "2.5.4"
|
|
65
|
-
},
|
|
66
|
-
"devDependencies": {
|
|
67
|
-
"@eslint/js": "^10.0.1",
|
|
68
|
-
"@rsbuild/core": "^2.2.3",
|
|
69
|
-
"@rsbuild/plugin-react": "^2.1.0",
|
|
70
|
-
"@rsbuild/plugin-tailwindcss": "^2.0.3",
|
|
71
|
-
"@rslint/core": "^0.8.0",
|
|
72
|
-
"@storybook/addon-docs": "^10.6.0",
|
|
73
|
-
"@types/node": "^24.13.3",
|
|
74
|
-
"@types/react": "^19.2.18",
|
|
75
|
-
"@types/react-dom": "^19.2.5",
|
|
76
|
-
"eslint": "^10.8.1",
|
|
77
|
-
"eslint-plugin-react-hooks": "^7.1.1",
|
|
78
|
-
"eslint-plugin-react-refresh": "^0.5.4",
|
|
79
|
-
"eslint-plugin-storybook": "^10.6.0",
|
|
80
|
-
"formik": "^2.4.9",
|
|
81
|
-
"globals": "^17.11.0",
|
|
82
|
-
"react": "^19.2.8",
|
|
83
|
-
"react-dom": "^19.2.8",
|
|
84
|
-
"storybook": "^10.6.0",
|
|
85
|
-
"storybook-react-rsbuild": "latest",
|
|
86
|
-
"tailwindcss": "^4.3.3",
|
|
87
|
-
"tsup": "^8.3.5",
|
|
88
|
-
"typescript": "^6.0.3",
|
|
89
|
-
"typescript-eslint": "^8.67.0",
|
|
90
|
-
"@storybook/addon-a11y": "^10.6.0"
|
|
91
|
-
}
|
|
92
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@vectramindnpm/unified-design-system",
|
|
3
|
+
"version": "0.2.5",
|
|
4
|
+
"description": "Standalone, publishable UI component library + design tokens extracted from Firstpass-Neo (src/designSystem + src/components/ui), decoupled from app-specific i18n/Redux/session wiring.",
|
|
5
|
+
"private": false,
|
|
6
|
+
"publishConfig": {
|
|
7
|
+
"access": "public"
|
|
8
|
+
},
|
|
9
|
+
"type": "module",
|
|
10
|
+
"sideEffects": [
|
|
11
|
+
"**/*.css"
|
|
12
|
+
],
|
|
13
|
+
"main": "./dist/index.cjs",
|
|
14
|
+
"module": "./dist/index.js",
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"import": "./dist/index.js",
|
|
20
|
+
"require": "./dist/index.cjs"
|
|
21
|
+
},
|
|
22
|
+
"./index.css": "./dist/index.css",
|
|
23
|
+
"./styles.css": "./dist/styles.css",
|
|
24
|
+
"./tokens.css": "./dist/tokens.css",
|
|
25
|
+
"./shadcn-base.css": "./dist/shadcn-base.css",
|
|
26
|
+
"./theme.css": "./dist/theme.css",
|
|
27
|
+
"./components.css": "./dist/components.css",
|
|
28
|
+
"./fonts.css": "./dist/fonts.css",
|
|
29
|
+
"./icon-font.css": "./dist/icon-font.css",
|
|
30
|
+
"./tailwind-preset": "./tailwind-preset.js",
|
|
31
|
+
"./tailwind-tokens.cjs": "./tailwind-tokens.cjs",
|
|
32
|
+
"./package.json": "./package.json"
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"dist",
|
|
36
|
+
"tailwind-preset.js",
|
|
37
|
+
"tailwind-tokens.cjs"
|
|
38
|
+
],
|
|
39
|
+
"scripts": {
|
|
40
|
+
"dev": "rsbuild",
|
|
41
|
+
"build": "rsbuild build",
|
|
42
|
+
"preview": "rsbuild preview",
|
|
43
|
+
"lint": "rslint",
|
|
44
|
+
"storybook": "storybook dev -p 6006",
|
|
45
|
+
"build-storybook": "storybook build",
|
|
46
|
+
"build:lib": "tsup && npm run build:lib:css",
|
|
47
|
+
"build:lib:css": "node scripts/copy-styles.mjs",
|
|
48
|
+
"dev:lib": "tsup --watch",
|
|
49
|
+
"prepublishOnly": "npm run build:lib"
|
|
50
|
+
},
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"react": ">=18.0.0",
|
|
53
|
+
"react-dom": ">=18.0.0",
|
|
54
|
+
"formik": ">=2.4.0"
|
|
55
|
+
},
|
|
56
|
+
"dependencies": {
|
|
57
|
+
"class-variance-authority": "^0.7.0",
|
|
58
|
+
"clsx": "2.1.1",
|
|
59
|
+
"dayjs": "^1.11.19",
|
|
60
|
+
"i18next": "^25.7.2",
|
|
61
|
+
"lucide-react": "^0.453.0",
|
|
62
|
+
"react-i18next": "^16.4.0",
|
|
63
|
+
"react-infinite-scroll-component": "^6.1.1",
|
|
64
|
+
"tailwind-merge": "2.5.4"
|
|
65
|
+
},
|
|
66
|
+
"devDependencies": {
|
|
67
|
+
"@eslint/js": "^10.0.1",
|
|
68
|
+
"@rsbuild/core": "^2.2.3",
|
|
69
|
+
"@rsbuild/plugin-react": "^2.1.0",
|
|
70
|
+
"@rsbuild/plugin-tailwindcss": "^2.0.3",
|
|
71
|
+
"@rslint/core": "^0.8.0",
|
|
72
|
+
"@storybook/addon-docs": "^10.6.0",
|
|
73
|
+
"@types/node": "^24.13.3",
|
|
74
|
+
"@types/react": "^19.2.18",
|
|
75
|
+
"@types/react-dom": "^19.2.5",
|
|
76
|
+
"eslint": "^10.8.1",
|
|
77
|
+
"eslint-plugin-react-hooks": "^7.1.1",
|
|
78
|
+
"eslint-plugin-react-refresh": "^0.5.4",
|
|
79
|
+
"eslint-plugin-storybook": "^10.6.0",
|
|
80
|
+
"formik": "^2.4.9",
|
|
81
|
+
"globals": "^17.11.0",
|
|
82
|
+
"react": "^19.2.8",
|
|
83
|
+
"react-dom": "^19.2.8",
|
|
84
|
+
"storybook": "^10.6.0",
|
|
85
|
+
"storybook-react-rsbuild": "latest",
|
|
86
|
+
"tailwindcss": "^4.3.3",
|
|
87
|
+
"tsup": "^8.3.5",
|
|
88
|
+
"typescript": "^6.0.3",
|
|
89
|
+
"typescript-eslint": "^8.67.0",
|
|
90
|
+
"@storybook/addon-a11y": "^10.6.0"
|
|
91
|
+
}
|
|
92
|
+
}
|
package/tailwind-preset.js
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
// Tailwind v3 preset for consumers of @vmcare/ui that are still on Tailwind v3
|
|
2
|
-
// (e.g. the app this library was extracted from). Usage in the consumer's tailwind.config.js:
|
|
3
|
-
//
|
|
4
|
-
// module.exports = {
|
|
5
|
-
// presets: [require("@vmcare/ui/tailwind-preset")],
|
|
6
|
-
// content: [..., "./node_modules/@vmcare/ui/dist/**/*.js"],
|
|
7
|
-
// };
|
|
8
|
-
//
|
|
9
|
-
// Also import the CSS custom properties these utilities resolve against:
|
|
10
|
-
// @import "@vmcare/ui/tokens.css";
|
|
11
|
-
// @import "@vmcare/ui/shadcn-base.css";
|
|
12
|
-
//
|
|
13
|
-
// (Tailwind v4 consumers: use `styles.css` instead — see README.)
|
|
14
|
-
// eslint-disable-next-line @typescript-eslint/no-require-imports -- CJS require is required here: Tailwind v3 configs load presets via require(), not ESM import.
|
|
15
|
-
const generated = require("./tailwind-tokens.cjs");
|
|
16
|
-
|
|
17
|
-
module.exports = {
|
|
18
|
-
theme: {
|
|
19
|
-
extend: {
|
|
20
|
-
...generated,
|
|
21
|
-
colors: {
|
|
22
|
-
...generated.colors,
|
|
23
|
-
border: {
|
|
24
|
-
DEFAULT: "hsl(var(--border))",
|
|
25
|
-
...generated.colors.border,
|
|
26
|
-
},
|
|
27
|
-
input: "hsl(var(--input))",
|
|
28
|
-
ring: "hsl(var(--ring))",
|
|
29
|
-
background: {
|
|
30
|
-
DEFAULT: "hsl(var(--background))",
|
|
31
|
-
...generated.colors.background,
|
|
32
|
-
},
|
|
33
|
-
foreground: "hsl(var(--foreground))",
|
|
34
|
-
primary: {
|
|
35
|
-
DEFAULT: "hsl(var(--primary))",
|
|
36
|
-
foreground: "hsl(var(--primary-foreground))",
|
|
37
|
-
},
|
|
38
|
-
secondary: {
|
|
39
|
-
DEFAULT: "hsl(var(--secondary))",
|
|
40
|
-
foreground: "hsl(var(--secondary-foreground))",
|
|
41
|
-
},
|
|
42
|
-
destructive: {
|
|
43
|
-
DEFAULT: "hsl(var(--destructive))",
|
|
44
|
-
foreground: "hsl(var(--destructive-foreground))",
|
|
45
|
-
},
|
|
46
|
-
muted: {
|
|
47
|
-
DEFAULT: "hsl(var(--muted))",
|
|
48
|
-
foreground: "hsl(var(--muted-foreground))",
|
|
49
|
-
},
|
|
50
|
-
accent: {
|
|
51
|
-
DEFAULT: "hsl(var(--accent))",
|
|
52
|
-
foreground: "hsl(var(--accent-foreground))",
|
|
53
|
-
},
|
|
54
|
-
popover: {
|
|
55
|
-
DEFAULT: "hsl(var(--popover))",
|
|
56
|
-
foreground: "hsl(var(--popover-foreground))",
|
|
57
|
-
},
|
|
58
|
-
card: {
|
|
59
|
-
DEFAULT: "hsl(var(--card))",
|
|
60
|
-
foreground: "hsl(var(--card-foreground))",
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
borderRadius: {
|
|
64
|
-
lg: "var(--radius)",
|
|
65
|
-
md: "calc(var(--radius) - 2px)",
|
|
66
|
-
sm: "calc(var(--radius) - 4px)",
|
|
67
|
-
card: "var(--radius-card)",
|
|
68
|
-
control: "var(--radius-control)",
|
|
69
|
-
modal: "var(--radius-modal)",
|
|
70
|
-
pill: "var(--radius-pill)",
|
|
71
|
-
},
|
|
72
|
-
fontSize: {
|
|
73
|
-
heading: ["clamp(0.9375rem, 0.875rem + 0.3vw, 1.125rem)", { lineHeight: "1.3" }],
|
|
74
|
-
body: ["clamp(0.875rem, 0.8125rem + 0.25vw, 1rem)", { lineHeight: "1.6" }],
|
|
75
|
-
label: ["clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem)", { lineHeight: "1.5" }],
|
|
76
|
-
"page-title": ["clamp(1.375rem, 1.25rem + 0.625vw, 1.75rem)", { lineHeight: "1.3" }],
|
|
77
|
-
},
|
|
78
|
-
spacing: {
|
|
79
|
-
...generated.spacing,
|
|
80
|
-
},
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
darkMode: ["class"],
|
|
84
|
-
};
|
|
1
|
+
// Tailwind v3 preset for consumers of @vmcare/ui that are still on Tailwind v3
|
|
2
|
+
// (e.g. the app this library was extracted from). Usage in the consumer's tailwind.config.js:
|
|
3
|
+
//
|
|
4
|
+
// module.exports = {
|
|
5
|
+
// presets: [require("@vmcare/ui/tailwind-preset")],
|
|
6
|
+
// content: [..., "./node_modules/@vmcare/ui/dist/**/*.js"],
|
|
7
|
+
// };
|
|
8
|
+
//
|
|
9
|
+
// Also import the CSS custom properties these utilities resolve against:
|
|
10
|
+
// @import "@vmcare/ui/tokens.css";
|
|
11
|
+
// @import "@vmcare/ui/shadcn-base.css";
|
|
12
|
+
//
|
|
13
|
+
// (Tailwind v4 consumers: use `styles.css` instead — see README.)
|
|
14
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports -- CJS require is required here: Tailwind v3 configs load presets via require(), not ESM import.
|
|
15
|
+
const generated = require("./tailwind-tokens.cjs");
|
|
16
|
+
|
|
17
|
+
module.exports = {
|
|
18
|
+
theme: {
|
|
19
|
+
extend: {
|
|
20
|
+
...generated,
|
|
21
|
+
colors: {
|
|
22
|
+
...generated.colors,
|
|
23
|
+
border: {
|
|
24
|
+
DEFAULT: "hsl(var(--border))",
|
|
25
|
+
...generated.colors.border,
|
|
26
|
+
},
|
|
27
|
+
input: "hsl(var(--input))",
|
|
28
|
+
ring: "hsl(var(--ring))",
|
|
29
|
+
background: {
|
|
30
|
+
DEFAULT: "hsl(var(--background))",
|
|
31
|
+
...generated.colors.background,
|
|
32
|
+
},
|
|
33
|
+
foreground: "hsl(var(--foreground))",
|
|
34
|
+
primary: {
|
|
35
|
+
DEFAULT: "hsl(var(--primary))",
|
|
36
|
+
foreground: "hsl(var(--primary-foreground))",
|
|
37
|
+
},
|
|
38
|
+
secondary: {
|
|
39
|
+
DEFAULT: "hsl(var(--secondary))",
|
|
40
|
+
foreground: "hsl(var(--secondary-foreground))",
|
|
41
|
+
},
|
|
42
|
+
destructive: {
|
|
43
|
+
DEFAULT: "hsl(var(--destructive))",
|
|
44
|
+
foreground: "hsl(var(--destructive-foreground))",
|
|
45
|
+
},
|
|
46
|
+
muted: {
|
|
47
|
+
DEFAULT: "hsl(var(--muted))",
|
|
48
|
+
foreground: "hsl(var(--muted-foreground))",
|
|
49
|
+
},
|
|
50
|
+
accent: {
|
|
51
|
+
DEFAULT: "hsl(var(--accent))",
|
|
52
|
+
foreground: "hsl(var(--accent-foreground))",
|
|
53
|
+
},
|
|
54
|
+
popover: {
|
|
55
|
+
DEFAULT: "hsl(var(--popover))",
|
|
56
|
+
foreground: "hsl(var(--popover-foreground))",
|
|
57
|
+
},
|
|
58
|
+
card: {
|
|
59
|
+
DEFAULT: "hsl(var(--card))",
|
|
60
|
+
foreground: "hsl(var(--card-foreground))",
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
borderRadius: {
|
|
64
|
+
lg: "var(--radius)",
|
|
65
|
+
md: "calc(var(--radius) - 2px)",
|
|
66
|
+
sm: "calc(var(--radius) - 4px)",
|
|
67
|
+
card: "var(--radius-card)",
|
|
68
|
+
control: "var(--radius-control)",
|
|
69
|
+
modal: "var(--radius-modal)",
|
|
70
|
+
pill: "var(--radius-pill)",
|
|
71
|
+
},
|
|
72
|
+
fontSize: {
|
|
73
|
+
heading: ["clamp(0.9375rem, 0.875rem + 0.3vw, 1.125rem)", { lineHeight: "1.3" }],
|
|
74
|
+
body: ["clamp(0.875rem, 0.8125rem + 0.25vw, 1rem)", { lineHeight: "1.6" }],
|
|
75
|
+
label: ["clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem)", { lineHeight: "1.5" }],
|
|
76
|
+
"page-title": ["clamp(1.375rem, 1.25rem + 0.625vw, 1.75rem)", { lineHeight: "1.3" }],
|
|
77
|
+
},
|
|
78
|
+
spacing: {
|
|
79
|
+
...generated.spacing,
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
darkMode: ["class"],
|
|
84
|
+
};
|