@vectramindnpm/unified-design-system 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/README.md +255 -0
- package/dist/components.css +387 -0
- package/dist/fonts/Inter-VariableFont_opsz,wght.woff2 +0 -0
- package/dist/fonts/fp-neo.eot +0 -0
- package/dist/fonts/fp-neo.svg +249 -0
- package/dist/fonts/fp-neo.ttf +0 -0
- package/dist/fonts/fp-neo.woff +0 -0
- package/dist/fonts.css +12 -0
- package/dist/icon-font.css +703 -0
- package/dist/index.cjs +3102 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +95 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +775 -0
- package/dist/index.d.ts +775 -0
- package/dist/index.js +2983 -0
- package/dist/index.js.map +1 -0
- package/dist/shadcn-base.css +36 -0
- package/dist/styles.css +11 -0
- package/dist/theme.css +92 -0
- package/dist/tokens.css +685 -0
- package/package.json +89 -0
- package/tailwind-preset.js +84 -0
- package/tailwind-tokens.cjs +87 -0
package/package.json
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@vectramindnpm/unified-design-system",
|
|
3
|
+
"version": "0.1.0",
|
|
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.mjs",
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"import": "./dist/index.mjs",
|
|
20
|
+
"require": "./dist/index.cjs"
|
|
21
|
+
},
|
|
22
|
+
"./styles.css": "./dist/styles.css",
|
|
23
|
+
"./tokens.css": "./dist/tokens.css",
|
|
24
|
+
"./shadcn-base.css": "./dist/shadcn-base.css",
|
|
25
|
+
"./theme.css": "./dist/theme.css",
|
|
26
|
+
"./components.css": "./dist/components.css",
|
|
27
|
+
"./fonts.css": "./dist/fonts.css",
|
|
28
|
+
"./icon-font.css": "./dist/icon-font.css",
|
|
29
|
+
"./tailwind-preset": "./tailwind-preset.js",
|
|
30
|
+
"./tailwind-tokens.cjs": "./tailwind-tokens.cjs",
|
|
31
|
+
"./package.json": "./package.json"
|
|
32
|
+
},
|
|
33
|
+
"files": [
|
|
34
|
+
"dist",
|
|
35
|
+
"tailwind-preset.js",
|
|
36
|
+
"tailwind-tokens.cjs"
|
|
37
|
+
],
|
|
38
|
+
"scripts": {
|
|
39
|
+
"dev": "rsbuild",
|
|
40
|
+
"build": "rsbuild build",
|
|
41
|
+
"preview": "rsbuild preview",
|
|
42
|
+
"lint": "rslint",
|
|
43
|
+
"storybook": "storybook dev -p 6006",
|
|
44
|
+
"build-storybook": "storybook build",
|
|
45
|
+
"build:lib": "tsup && npm run build:lib:css",
|
|
46
|
+
"build:lib:css": "node scripts/copy-styles.mjs",
|
|
47
|
+
"dev:lib": "tsup --watch",
|
|
48
|
+
"prepublishOnly": "npm run build:lib"
|
|
49
|
+
},
|
|
50
|
+
"peerDependencies": {
|
|
51
|
+
"react": ">=18.0.0",
|
|
52
|
+
"react-dom": ">=18.0.0",
|
|
53
|
+
"formik": ">=2.4.0"
|
|
54
|
+
},
|
|
55
|
+
"dependencies": {
|
|
56
|
+
"class-variance-authority": "^0.7.0",
|
|
57
|
+
"clsx": "2.1.1",
|
|
58
|
+
"dayjs": "^1.11.19",
|
|
59
|
+
"lucide-react": "^0.453.0",
|
|
60
|
+
"react-infinite-scroll-component": "^6.1.1",
|
|
61
|
+
"tailwind-merge": "2.5.4"
|
|
62
|
+
},
|
|
63
|
+
"devDependencies": {
|
|
64
|
+
"@eslint/js": "^10.0.1",
|
|
65
|
+
"@rsbuild/core": "^2.2.3",
|
|
66
|
+
"@rsbuild/plugin-react": "^2.1.0",
|
|
67
|
+
"@rsbuild/plugin-tailwindcss": "^2.0.3",
|
|
68
|
+
"@rslint/core": "^0.8.0",
|
|
69
|
+
"@storybook/addon-docs": "^10.6.0",
|
|
70
|
+
"@types/node": "^24.13.3",
|
|
71
|
+
"@types/react": "^19.2.18",
|
|
72
|
+
"@types/react-dom": "^19.2.5",
|
|
73
|
+
"eslint": "^10.8.1",
|
|
74
|
+
"eslint-plugin-react-hooks": "^7.1.1",
|
|
75
|
+
"eslint-plugin-react-refresh": "^0.5.4",
|
|
76
|
+
"eslint-plugin-storybook": "^10.6.0",
|
|
77
|
+
"formik": "^2.4.9",
|
|
78
|
+
"globals": "^17.11.0",
|
|
79
|
+
"react": "^19.2.8",
|
|
80
|
+
"react-dom": "^19.2.8",
|
|
81
|
+
"storybook": "^10.6.0",
|
|
82
|
+
"storybook-react-rsbuild": "latest",
|
|
83
|
+
"tailwindcss": "^4.3.3",
|
|
84
|
+
"tsup": "^8.3.5",
|
|
85
|
+
"typescript": "^6.0.3",
|
|
86
|
+
"typescript-eslint": "^8.67.0",
|
|
87
|
+
"@storybook/addon-a11y": "^10.6.0"
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -0,0 +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
|
+
};
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
"borderRadius": {
|
|
3
|
+
"2xl": "var(--radius-2xl)",
|
|
4
|
+
"card": "var(--radius-card)",
|
|
5
|
+
"control": "var(--radius-control)",
|
|
6
|
+
"lg": "var(--radius-lg)",
|
|
7
|
+
"md": "var(--radius-md)",
|
|
8
|
+
"modal": "var(--radius-modal)",
|
|
9
|
+
"pill": "var(--radius-pill)",
|
|
10
|
+
"sm": "var(--radius-sm)",
|
|
11
|
+
"xl": "var(--radius-xl)",
|
|
12
|
+
"xs": "var(--radius-xs)"
|
|
13
|
+
},
|
|
14
|
+
"boxShadow": {
|
|
15
|
+
"elevation-1": "var(--shadow-elevation-1)",
|
|
16
|
+
"elevation-2": "var(--shadow-elevation-2)",
|
|
17
|
+
"lg": "var(--shadow-lg)",
|
|
18
|
+
"md": "var(--shadow-md)",
|
|
19
|
+
"sm": "var(--shadow-sm)"
|
|
20
|
+
},
|
|
21
|
+
"colors": {
|
|
22
|
+
"background": {
|
|
23
|
+
"card": "var(--color-background-card)",
|
|
24
|
+
"surface": "var(--color-background-surface)"
|
|
25
|
+
},
|
|
26
|
+
"border": {
|
|
27
|
+
"card": "var(--color-border-card)",
|
|
28
|
+
"default": "var(--color-border-default)"
|
|
29
|
+
},
|
|
30
|
+
"brand": {
|
|
31
|
+
"purple": "var(--color-brand-purple)",
|
|
32
|
+
"purple-600": "var(--color-brand-purple-600)",
|
|
33
|
+
"purple-700": "var(--color-brand-purple-700)"
|
|
34
|
+
},
|
|
35
|
+
"gradient": {
|
|
36
|
+
"brand": "var(--color-gradient-brand)"
|
|
37
|
+
},
|
|
38
|
+
"interactive": {
|
|
39
|
+
"brand": "var(--color-interactive-brand)",
|
|
40
|
+
"brand-active": "var(--color-interactive-brand-active)",
|
|
41
|
+
"brand-hover": "var(--color-interactive-brand-hover)"
|
|
42
|
+
},
|
|
43
|
+
"neutral": {
|
|
44
|
+
"100": "var(--color-neutral-100)",
|
|
45
|
+
"200": "var(--color-neutral-200)",
|
|
46
|
+
"300": "var(--color-neutral-300)",
|
|
47
|
+
"350": "var(--color-neutral-350)",
|
|
48
|
+
"400": "var(--color-neutral-400)",
|
|
49
|
+
"450": "var(--color-neutral-450)",
|
|
50
|
+
"500": "var(--color-neutral-500)",
|
|
51
|
+
"600": "var(--color-neutral-600)",
|
|
52
|
+
"700": "var(--color-neutral-700)",
|
|
53
|
+
"800": "var(--color-neutral-800)",
|
|
54
|
+
"900": "var(--color-neutral-900)",
|
|
55
|
+
"gray": "var(--color-neutral-gray)",
|
|
56
|
+
"muted": "var(--color-neutral-muted)",
|
|
57
|
+
"white": "var(--color-neutral-white)"
|
|
58
|
+
},
|
|
59
|
+
"status": {
|
|
60
|
+
"danger": "var(--color-status-danger)",
|
|
61
|
+
"success": "var(--color-status-success)",
|
|
62
|
+
"warning": "var(--color-status-warning)"
|
|
63
|
+
},
|
|
64
|
+
"text": {
|
|
65
|
+
"muted": "var(--color-text-muted)",
|
|
66
|
+
"primary": "var(--color-text-primary)"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
"fontSize": {
|
|
70
|
+
"base": "var(--font-size-base)",
|
|
71
|
+
"lg": "var(--font-size-lg)",
|
|
72
|
+
"sm": "var(--font-size-sm)",
|
|
73
|
+
"xl": "var(--font-size-xl)",
|
|
74
|
+
"xs": "var(--font-size-xs)"
|
|
75
|
+
},
|
|
76
|
+
"spacing": {
|
|
77
|
+
"button-x": "var(--spacing-button-x)",
|
|
78
|
+
"component-gap": "var(--spacing-component-gap)",
|
|
79
|
+
"form-control": "var(--spacing-form-control)",
|
|
80
|
+
"lg": "var(--spacing-lg)",
|
|
81
|
+
"md": "var(--spacing-md)",
|
|
82
|
+
"sm": "var(--spacing-sm)",
|
|
83
|
+
"xl": "var(--spacing-xl)",
|
|
84
|
+
"xs": "var(--spacing-xs)",
|
|
85
|
+
"xxl": "var(--spacing-xxl)"
|
|
86
|
+
}
|
|
87
|
+
};
|