@juanarenas31/metrik-ui 0.2.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.
Files changed (11) hide show
  1. package/LICENSE +15 -0
  2. package/README.md +268 -0
  3. package/dist/index.d.ts +646 -0
  4. package/dist/index.js +2244 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/styles.css +57 -0
  7. package/dist/tailwind-preset.d.ts +13 -0
  8. package/dist/tailwind-preset.js +87 -0
  9. package/dist/tailwind-preset.js.map +1 -0
  10. package/dist/tokens.css +141 -0
  11. package/package.json +101 -0
package/dist/tailwind-preset.js ADDED
@@ -0,0 +1,87 @@
1
+ // src/tailwind-preset.ts
2
+ var preset = {
3
+ darkMode: ["class"],
4
+ theme: {
5
+ extend: {
6
+ colors: {
7
+ bg: "var(--metrik-bg)",
8
+ surface: "var(--metrik-surface)",
9
+ "surface-muted": "var(--metrik-surface-muted)",
10
+ "surface-elev": "var(--metrik-surface-elev)",
11
+ border: "var(--metrik-border)",
12
+ "border-strong": "var(--metrik-border-strong)",
13
+ fg: "var(--metrik-fg)",
14
+ "fg-muted": "var(--metrik-fg-muted)",
15
+ "fg-subtle": "var(--metrik-fg-subtle)",
16
+ primary: {
17
+ DEFAULT: "var(--metrik-primary)",
18
+ hover: "var(--metrik-primary-hover)",
19
+ soft: "var(--metrik-primary-soft)",
20
+ fg: "var(--metrik-primary-fg)"
21
+ },
22
+ accent: {
23
+ DEFAULT: "var(--metrik-accent)",
24
+ hover: "var(--metrik-accent-hover)",
25
+ soft: "var(--metrik-accent-soft)",
26
+ fg: "var(--metrik-accent-fg)"
27
+ },
28
+ success: { DEFAULT: "var(--metrik-success)", soft: "var(--metrik-success-soft)" },
29
+ danger: { DEFAULT: "var(--metrik-danger)", soft: "var(--metrik-danger-soft)" },
30
+ warning: { DEFAULT: "var(--metrik-warning)", soft: "var(--metrik-warning-soft)" },
31
+ ring: "var(--metrik-ring)",
32
+ // raw palette · útil para charts
33
+ teal: { 50: "var(--metrik-teal-50)", 100: "var(--metrik-teal-100)", 200: "var(--metrik-teal-200)", 300: "var(--metrik-teal-300)", 400: "var(--metrik-teal-400)", 500: "var(--metrik-teal-500)", 600: "var(--metrik-teal-600)", 700: "var(--metrik-teal-700)", 800: "var(--metrik-teal-800)", 900: "var(--metrik-teal-900)", 950: "var(--metrik-teal-950)" },
34
+ coral: { 50: "var(--metrik-coral-50)", 100: "var(--metrik-coral-100)", 200: "var(--metrik-coral-200)", 300: "var(--metrik-coral-300)", 400: "var(--metrik-coral-400)", 500: "var(--metrik-coral-500)", 600: "var(--metrik-coral-600)", 700: "var(--metrik-coral-700)", 800: "var(--metrik-coral-800)", 900: "var(--metrik-coral-900)", 950: "var(--metrik-coral-950)" }
35
+ },
36
+ borderRadius: {
37
+ sm: "var(--metrik-radius-sm)",
38
+ md: "var(--metrik-radius-md)",
39
+ lg: "var(--metrik-radius-lg)",
40
+ xl: "var(--metrik-radius-xl)",
41
+ full: "var(--metrik-radius-full)"
42
+ },
43
+ boxShadow: {
44
+ xs: "var(--metrik-shadow-xs)",
45
+ sm: "var(--metrik-shadow-sm)",
46
+ md: "var(--metrik-shadow-md)",
47
+ lg: "var(--metrik-shadow-lg)"
48
+ },
49
+ transitionDuration: {
50
+ fast: "var(--metrik-duration-fast)",
51
+ base: "var(--metrik-duration-base)",
52
+ slow: "var(--metrik-duration-slow)"
53
+ },
54
+ transitionTimingFunction: { metrik: "var(--metrik-ease)" },
55
+ zIndex: {
56
+ sticky: "var(--metrik-z-sticky)",
57
+ dropdown: "var(--metrik-z-dropdown)",
58
+ overlay: "var(--metrik-z-overlay)",
59
+ modal: "var(--metrik-z-modal)",
60
+ toast: "var(--metrik-z-toast)"
61
+ },
62
+ keyframes: {
63
+ "metrik-fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
64
+ "metrik-fade-out": { from: { opacity: "1" }, to: { opacity: "0" } },
65
+ "metrik-zoom-in": { from: { opacity: "0", transform: "scale(.96)" }, to: { opacity: "1", transform: "scale(1)" } },
66
+ "metrik-zoom-out": { from: { opacity: "1", transform: "scale(1)" }, to: { opacity: "0", transform: "scale(.96)" } },
67
+ "metrik-slide-in-right": { from: { transform: "translateX(100%)" }, to: { transform: "translateX(0)" } },
68
+ "metrik-slide-out-right": { from: { transform: "translateX(0)" }, to: { transform: "translateX(100%)" } },
69
+ "metrik-spin": { to: { transform: "rotate(360deg)" } }
70
+ },
71
+ animation: {
72
+ "fade-in": "metrik-fade-in var(--metrik-duration-base) var(--metrik-ease)",
73
+ "fade-out": "metrik-fade-out var(--metrik-duration-base) var(--metrik-ease)",
74
+ "zoom-in": "metrik-zoom-in var(--metrik-duration-base) var(--metrik-ease)",
75
+ "zoom-out": "metrik-zoom-out var(--metrik-duration-base) var(--metrik-ease)",
76
+ "slide-in-right": "metrik-slide-in-right var(--metrik-duration-slow) var(--metrik-ease)",
77
+ "slide-out-right": "metrik-slide-out-right var(--metrik-duration-slow) var(--metrik-ease)",
78
+ spin: "metrik-spin 1s linear infinite"
79
+ }
80
+ }
81
+ }
82
+ };
83
+ var tailwind_preset_default = preset;
84
+
85
+ export { tailwind_preset_default as default };
86
+ //# sourceMappingURL=tailwind-preset.js.map
87
+ //# sourceMappingURL=tailwind-preset.js.map
package/dist/tailwind-preset.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.js","sourcesContent":["import type { Config } from \"tailwindcss\";\n\n/**\n * Preset de Tailwind para @juanarenas31/metrik-ui.\n * Mapea los tokens (CSS vars) a las clases utility · bg-primary, text-fg-muted, etc.\n *\n * // tailwind.config.ts\n * import metrikPreset from \"@juanarenas31/metrik-ui/tailwind-preset\";\n * export default { presets: [metrikPreset], content: [...] } satisfies Config;\n */\nconst preset: Partial<Config> = {\n darkMode: [\"class\"],\n theme: {\n extend: {\n colors: {\n bg: \"var(--metrik-bg)\",\n surface: \"var(--metrik-surface)\",\n \"surface-muted\": \"var(--metrik-surface-muted)\",\n \"surface-elev\": \"var(--metrik-surface-elev)\",\n border: \"var(--metrik-border)\",\n \"border-strong\": \"var(--metrik-border-strong)\",\n fg: \"var(--metrik-fg)\",\n \"fg-muted\": \"var(--metrik-fg-muted)\",\n \"fg-subtle\": \"var(--metrik-fg-subtle)\",\n primary: {\n DEFAULT: \"var(--metrik-primary)\",\n hover: \"var(--metrik-primary-hover)\",\n soft: \"var(--metrik-primary-soft)\",\n fg: \"var(--metrik-primary-fg)\",\n },\n accent: {\n DEFAULT: \"var(--metrik-accent)\",\n hover: \"var(--metrik-accent-hover)\",\n soft: \"var(--metrik-accent-soft)\",\n fg: \"var(--metrik-accent-fg)\",\n },\n success: { DEFAULT: \"var(--metrik-success)\", soft: \"var(--metrik-success-soft)\" },\n danger: { DEFAULT: \"var(--metrik-danger)\", soft: \"var(--metrik-danger-soft)\" },\n warning: { DEFAULT: \"var(--metrik-warning)\", soft: \"var(--metrik-warning-soft)\" },\n ring: \"var(--metrik-ring)\",\n // raw palette · útil para charts\n teal: { 50:\"var(--metrik-teal-50)\", 100:\"var(--metrik-teal-100)\", 200:\"var(--metrik-teal-200)\", 300:\"var(--metrik-teal-300)\", 400:\"var(--metrik-teal-400)\", 500:\"var(--metrik-teal-500)\", 600:\"var(--metrik-teal-600)\", 700:\"var(--metrik-teal-700)\", 800:\"var(--metrik-teal-800)\", 900:\"var(--metrik-teal-900)\", 950:\"var(--metrik-teal-950)\" },\n coral: { 50:\"var(--metrik-coral-50)\", 100:\"var(--metrik-coral-100)\", 200:\"var(--metrik-coral-200)\", 300:\"var(--metrik-coral-300)\", 400:\"var(--metrik-coral-400)\", 500:\"var(--metrik-coral-500)\", 600:\"var(--metrik-coral-600)\", 700:\"var(--metrik-coral-700)\", 800:\"var(--metrik-coral-800)\", 900:\"var(--metrik-coral-900)\", 950:\"var(--metrik-coral-950)\" },\n },\n borderRadius: {\n sm: \"var(--metrik-radius-sm)\",\n md: \"var(--metrik-radius-md)\",\n lg: \"var(--metrik-radius-lg)\",\n xl: \"var(--metrik-radius-xl)\",\n full: \"var(--metrik-radius-full)\",\n },\n boxShadow: {\n xs: \"var(--metrik-shadow-xs)\",\n sm: \"var(--metrik-shadow-sm)\",\n md: \"var(--metrik-shadow-md)\",\n lg: \"var(--metrik-shadow-lg)\",\n },\n transitionDuration: {\n fast: \"var(--metrik-duration-fast)\",\n base: \"var(--metrik-duration-base)\",\n slow: \"var(--metrik-duration-slow)\",\n },\n transitionTimingFunction: { metrik: \"var(--metrik-ease)\" },\n zIndex: {\n sticky: \"var(--metrik-z-sticky)\",\n dropdown: \"var(--metrik-z-dropdown)\",\n overlay: \"var(--metrik-z-overlay)\",\n modal: \"var(--metrik-z-modal)\",\n toast: \"var(--metrik-z-toast)\",\n },\n keyframes: {\n \"metrik-fade-in\": { from: { opacity: \"0\" }, to: { opacity: \"1\" } },\n \"metrik-fade-out\": { from: { opacity: \"1\" }, to: { opacity: \"0\" } },\n \"metrik-zoom-in\": { from: { opacity: \"0\", transform: \"scale(.96)\" }, to: { opacity: \"1\", transform: \"scale(1)\" } },\n \"metrik-zoom-out\": { from: { opacity: \"1\", transform: \"scale(1)\" }, to: { opacity: \"0\", transform: \"scale(.96)\" } },\n \"metrik-slide-in-right\": { from: { transform: \"translateX(100%)\" }, to: { transform: \"translateX(0)\" } },\n \"metrik-slide-out-right\": { from: { transform: \"translateX(0)\" }, to: { transform: \"translateX(100%)\" } },\n \"metrik-spin\": { to: { transform: \"rotate(360deg)\" } },\n },\n animation: {\n \"fade-in\": \"metrik-fade-in var(--metrik-duration-base) var(--metrik-ease)\",\n \"fade-out\": \"metrik-fade-out var(--metrik-duration-base) var(--metrik-ease)\",\n \"zoom-in\": \"metrik-zoom-in var(--metrik-duration-base) var(--metrik-ease)\",\n \"zoom-out\": \"metrik-zoom-out var(--metrik-duration-base) var(--metrik-ease)\",\n \"slide-in-right\": \"metrik-slide-in-right var(--metrik-duration-slow) var(--metrik-ease)\",\n \"slide-out-right\": \"metrik-slide-out-right var(--metrik-duration-slow) var(--metrik-ease)\",\n spin: \"metrik-spin 1s linear infinite\",\n },\n },\n },\n};\n\nexport default preset;\n"]}
package/dist/tokens.css ADDED
@@ -0,0 +1,141 @@
1
+ /* @juanarenas31/metrik-ui · design tokens
2
+ Importa este archivo una sola vez en tu globals.css */
3
+
4
+ :root {
5
+ /* ─── Color · primitives ─────────────────────────────────────────── */
6
+ --metrik-teal-50: #f0fbf7;
7
+ --metrik-teal-100: #d6f4ea;
8
+ --metrik-teal-200: #aee7d3;
9
+ --metrik-teal-300: #7fd5b8;
10
+ --metrik-teal-400: #4cc89e;
11
+ --metrik-teal-500: #2bbfa0;
12
+ --metrik-teal-600: #1ea486;
13
+ --metrik-teal-700: #16846b;
14
+ --metrik-teal-800: #0f6451;
15
+ --metrik-teal-900: #0a4838;
16
+ --metrik-teal-950: #062b22;
17
+
18
+ --metrik-coral-50: #fff3f4;
19
+ --metrik-coral-100: #ffdde0;
20
+ --metrik-coral-200: #ffb6bc;
21
+ --metrik-coral-300: #fb8e98;
22
+ --metrik-coral-400: #f7798a;
23
+ --metrik-coral-500: #f26b7a;
24
+ --metrik-coral-600: #d94e5d;
25
+ --metrik-coral-700: #b53847;
26
+ --metrik-coral-800: #8c2632;
27
+ --metrik-coral-900: #651923;
28
+ --metrik-coral-950: #3b0d13;
29
+
30
+ --metrik-slate-50: #fafbfc;
31
+ --metrik-slate-100: #f1f3f5;
32
+ --metrik-slate-200: #e3e6ea;
33
+ --metrik-slate-300: #cbd0d6;
34
+ --metrik-slate-400: #a4abb4;
35
+ --metrik-slate-500: #7a828c;
36
+ --metrik-slate-600: #5b626c;
37
+ --metrik-slate-700: #444a52;
38
+ --metrik-slate-800: #2c3743;
39
+ --metrik-slate-900: #1a2028;
40
+ --metrik-slate-950: #0f1216;
41
+
42
+ --metrik-amber-300: #fbcf6c;
43
+ --metrik-amber-500: #e7a300;
44
+ --metrik-amber-700: #8a6b00;
45
+
46
+ /* ─── Semantic · light ───────────────────────────────────────────── */
47
+ --metrik-bg: var(--metrik-slate-50);
48
+ --metrik-surface: #ffffff;
49
+ --metrik-surface-muted: var(--metrik-slate-100);
50
+ --metrik-surface-elev: #ffffff;
51
+ --metrik-border: var(--metrik-slate-200);
52
+ --metrik-border-strong: var(--metrik-slate-300);
53
+ --metrik-fg: var(--metrik-slate-800);
54
+ --metrik-fg-muted: var(--metrik-slate-500);
55
+ --metrik-fg-subtle: var(--metrik-slate-400);
56
+
57
+ --metrik-primary: var(--metrik-teal-500);
58
+ --metrik-primary-hover: var(--metrik-teal-600);
59
+ --metrik-primary-soft: var(--metrik-teal-100);
60
+ --metrik-primary-fg: #ffffff;
61
+
62
+ --metrik-accent: var(--metrik-coral-500);
63
+ --metrik-accent-hover: var(--metrik-coral-600);
64
+ --metrik-accent-soft: var(--metrik-coral-100);
65
+ --metrik-accent-fg: #ffffff;
66
+
67
+ --metrik-success: var(--metrik-teal-600);
68
+ --metrik-success-soft: var(--metrik-teal-100);
69
+ --metrik-danger: var(--metrik-coral-600);
70
+ --metrik-danger-soft: var(--metrik-coral-100);
71
+ --metrik-warning: var(--metrik-amber-500);
72
+ --metrik-warning-soft: #fcefcf;
73
+
74
+ --metrik-ring: var(--metrik-teal-500);
75
+
76
+ /* ─── Radius ─────────────────────────────────────────────────────── */
77
+ --metrik-radius-sm: 4px;
78
+ --metrik-radius-md: 8px;
79
+ --metrik-radius-lg: 12px;
80
+ --metrik-radius-xl: 16px;
81
+ --metrik-radius-full: 9999px;
82
+
83
+ /* ─── Shadow ─────────────────────────────────────────────────────── */
84
+ --metrik-shadow-xs: 0 1px 2px rgba(20,28,40,.06);
85
+ --metrik-shadow-sm: 0 2px 6px rgba(20,28,40,.08), 0 1px 2px rgba(20,28,40,.04);
86
+ --metrik-shadow-md: 0 6px 16px rgba(20,28,40,.10), 0 2px 4px rgba(20,28,40,.06);
87
+ --metrik-shadow-lg: 0 16px 40px rgba(20,28,40,.18), 0 6px 12px rgba(20,28,40,.08);
88
+
89
+ /* ─── Motion ─────────────────────────────────────────────────────── */
90
+ --metrik-duration-fast: 120ms;
91
+ --metrik-duration-base: 200ms;
92
+ --metrik-duration-slow: 320ms;
93
+ --metrik-ease: cubic-bezier(.2,.7,.2,1);
94
+
95
+ /* ─── Z-index ────────────────────────────────────────────────────── */
96
+ --metrik-z-base: 0;
97
+ --metrik-z-sticky: 10;
98
+ --metrik-z-dropdown: 100;
99
+ --metrik-z-overlay: 1000;
100
+ --metrik-z-modal: 1100;
101
+ --metrik-z-toast: 1500;
102
+ }
103
+
104
+ /* ─── Dark mode ────────────────────────────────────────────────────── */
105
+ .dark {
106
+ --metrik-bg: var(--metrik-slate-950);
107
+ --metrik-surface: var(--metrik-slate-900);
108
+ --metrik-surface-muted: var(--metrik-slate-800);
109
+ --metrik-surface-elev: var(--metrik-slate-800);
110
+ --metrik-border: var(--metrik-slate-700);
111
+ --metrik-border-strong: var(--metrik-slate-600);
112
+ --metrik-fg: var(--metrik-slate-50);
113
+ --metrik-fg-muted: var(--metrik-slate-400);
114
+ --metrik-fg-subtle: var(--metrik-slate-500);
115
+
116
+ --metrik-primary: var(--metrik-teal-400);
117
+ --metrik-primary-hover: var(--metrik-teal-300);
118
+ --metrik-primary-soft: rgba(43,191,160,.18);
119
+ --metrik-primary-fg: var(--metrik-teal-950);
120
+
121
+ --metrik-accent: var(--metrik-coral-400);
122
+ --metrik-accent-hover: var(--metrik-coral-300);
123
+ --metrik-accent-soft: rgba(242,107,122,.18);
124
+ --metrik-accent-fg: var(--metrik-coral-950);
125
+
126
+ --metrik-success: var(--metrik-teal-400);
127
+ --metrik-success-soft: rgba(43,191,160,.18);
128
+ --metrik-danger: var(--metrik-coral-400);
129
+ --metrik-danger-soft: rgba(242,107,122,.18);
130
+ --metrik-warning: var(--metrik-amber-300);
131
+ --metrik-warning-soft: rgba(231,163,0,.18);
132
+
133
+ --metrik-ring: var(--metrik-teal-400);
134
+ }
135
+
136
+ @media (prefers-color-scheme: dark) {
137
+ :root:not(.light) {
138
+ /* OPT-IN auto · descomenta si quieres dark automático sin tocar la clase
139
+ Por defecto, controla el tema con .dark / .light en <html> via useTheme(). */
140
+ }
141
+ }
package/package.json ADDED
@@ -0,0 +1,101 @@
1
+ {
2
+ "name": "@juanarenas31/metrik-ui",
3
+ "version": "0.2.0",
4
+ "description": "Librería de componentes React para dashboards analíticos · Unidad de Ciencia de los Datos · Universidad Simón Bolívar.",
5
+ "type": "module",
6
+ "sideEffects": [
7
+ "**/*.css"
8
+ ],
9
+ "main": "./dist/index.js",
10
+ "module": "./dist/index.js",
11
+ "types": "./dist/index.d.ts",
12
+ "files": [
13
+ "dist",
14
+ "README.md"
15
+ ],
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
+ "./tailwind-preset": {
24
+ "types": "./dist/tailwind-preset.d.ts",
25
+ "import": "./dist/tailwind-preset.js"
26
+ }
27
+ },
28
+ "scripts": {
29
+ "build": "tsup",
30
+ "dev": "tsup --watch",
31
+ "typecheck": "tsc --noEmit",
32
+ "lint": "eslint src --ext .ts,.tsx",
33
+ "format": "prettier --write src",
34
+ "clean": "rm -rf dist",
35
+ "prepublishOnly": "pnpm build"
36
+ },
37
+ "peerDependencies": {
38
+ "react": "^18.0.0 || ^19.0.0",
39
+ "react-dom": "^18.0.0 || ^19.0.0",
40
+ "tailwindcss": "^3.4.0 || ^4.0.0"
41
+ },
42
+ "dependencies": {
43
+ "@radix-ui/react-accordion": "^1.2.12",
44
+ "@radix-ui/react-alert-dialog": "^1.1.15",
45
+ "@radix-ui/react-avatar": "^1.1.0",
46
+ "@radix-ui/react-checkbox": "^1.1.0",
47
+ "@radix-ui/react-collapsible": "^1.1.12",
48
+ "@radix-ui/react-context-menu": "^2.2.16",
49
+ "@radix-ui/react-dialog": "^1.1.0",
50
+ "@radix-ui/react-dropdown-menu": "^2.1.0",
51
+ "@radix-ui/react-hover-card": "^1.1.15",
52
+ "@radix-ui/react-label": "^2.1.0",
53
+ "@radix-ui/react-popover": "^1.1.0",
54
+ "@radix-ui/react-progress": "^1.1.8",
55
+ "@radix-ui/react-radio-group": "^1.3.8",
56
+ "@radix-ui/react-scroll-area": "^1.2.10",
57
+ "@radix-ui/react-select": "^2.1.0",
58
+ "@radix-ui/react-separator": "^1.1.0",
59
+ "@radix-ui/react-slider": "^1.3.6",
60
+ "@radix-ui/react-slot": "^1.1.0",
61
+ "@radix-ui/react-switch": "^1.1.0",
62
+ "@radix-ui/react-tabs": "^1.1.0",
63
+ "@radix-ui/react-toggle": "^1.1.10",
64
+ "@radix-ui/react-toggle-group": "^1.1.11",
65
+ "@radix-ui/react-tooltip": "^1.1.0",
66
+ "@radix-ui/react-visually-hidden": "^1.2.4",
67
+ "class-variance-authority": "^0.7.0",
68
+ "clsx": "^2.1.1",
69
+ "cmdk": "^1.1.1",
70
+ "lucide-react": "^0.456.0",
71
+ "react-day-picker": "^10.0.1",
72
+ "sonner": "^2.0.7",
73
+ "tailwind-merge": "^2.5.0"
74
+ },
75
+ "devDependencies": {
76
+ "@types/node": "^22.0.0",
77
+ "@types/react": "^18.3.0",
78
+ "@types/react-dom": "^18.3.0",
79
+ "react": "^18.3.0",
80
+ "react-dom": "^18.3.0",
81
+ "tailwindcss": "^3.4.0",
82
+ "tsup": "^8.3.0",
83
+ "typescript": "^5.6.0"
84
+ },
85
+ "publishConfig": {
86
+ "access": "public"
87
+ },
88
+ "keywords": [
89
+ "react",
90
+ "ui",
91
+ "components",
92
+ "tailwind",
93
+ "design-system",
94
+ "dashboard",
95
+ "metrik",
96
+ "unisimon"
97
+ ],
98
+ "author": "Unidad de Ciencia de los Datos · Universidad Simón Bolívar",
99
+ "license": "MIT",
100
+ "packageManager": "pnpm@11.3.0"
101
+ }