@semio/ui 0.0.0 → 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/theme.css ADDED
@@ -0,0 +1,117 @@
1
+ @theme {
2
+ /* Primary Color */
3
+ --color-primary: var(--color-sky-500);
4
+ --color-primary-50: var(--color-sky-50);
5
+ --color-primary-100: var(--color-sky-100);
6
+ --color-primary-200: var(--color-sky-200);
7
+ --color-primary-300: var(--color-sky-300);
8
+ --color-primary-400: var(--color-sky-400);
9
+ --color-primary-500: var(--color-sky-500);
10
+ --color-primary-600: var(--color-sky-600);
11
+ --color-primary-700: var(--color-sky-700);
12
+ --color-primary-800: var(--color-sky-800);
13
+ --color-primary-900: var(--color-sky-900);
14
+ --color-primary-950: var(--color-sky-950);
15
+
16
+ /* Secondary Color */
17
+ --color-secondary: var(--color-violet-500);
18
+ --color-secondary-50: var(--color-violet-50);
19
+ --color-secondary-100: var(--color-violet-100);
20
+ --color-secondary-200: var(--color-violet-200);
21
+ --color-secondary-300: var(--color-violet-300);
22
+ --color-secondary-400: var(--color-violet-400);
23
+ --color-secondary-500: var(--color-violet-500);
24
+ --color-secondary-600: var(--color-violet-600);
25
+ --color-secondary-700: var(--color-violet-700);
26
+ --color-secondary-800: var(--color-violet-800);
27
+ --color-secondary-900: var(--color-violet-900);
28
+ --color-secondary-950: var(--color-violet-950);
29
+
30
+ /* Tertiary Color */
31
+ --color-tertiary: var(--color-pink-500);
32
+ --color-tertiary-50: var(--color-pink-50);
33
+ --color-tertiary-100: var(--color-pink-100);
34
+ --color-tertiary-200: var(--color-pink-200);
35
+ --color-tertiary-300: var(--color-pink-300);
36
+ --color-tertiary-400: var(--color-pink-400);
37
+ --color-tertiary-500: var(--color-pink-500);
38
+ --color-tertiary-600: var(--color-pink-600);
39
+ --color-tertiary-700: var(--color-pink-700);
40
+ --color-tertiary-800: var(--color-pink-800);
41
+ --color-tertiary-900: var(--color-pink-900);
42
+ --color-tertiary-950: var(--color-pink-950);
43
+
44
+ --color-layout-light-separator: var(--color-neutral-400);
45
+ --color-layout-dark-separator: var(--color-neutral-950);
46
+ --color-layout-light-base: #cccccc;
47
+ --color-layout-dark-base: #333333;
48
+ --color-layout-light-inset: var(--color-neutral-200);
49
+ --color-layout-dark-inset: var(--color-neutral-800);
50
+ --color-layout-light-deep-inset: #ededed;
51
+ --color-layout-dark-deep-inset: var(--color-neutral-900);
52
+
53
+ --color-success: var(--color-green-500);
54
+ --color-success-50: var(--color-green-50);
55
+ --color-success-100: var(--color-green-100);
56
+ --color-success-200: var(--color-green-200);
57
+ --color-success-300: var(--color-green-300);
58
+ --color-success-400: var(--color-green-400);
59
+ --color-success-500: var(--color-green-500);
60
+ --color-success-600: var(--color-green-600);
61
+ --color-success-700: var(--color-green-700);
62
+ --color-success-800: var(--color-green-800);
63
+ --color-success-900: var(--color-green-900);
64
+ --color-success-950: var(--color-green-950);
65
+
66
+ --color-warning: var(--color-yellow-500);
67
+ --color-warning-50: var(--color-yellow-50);
68
+ --color-warning-100: var(--color-yellow-100);
69
+ --color-warning-200: var(--color-yellow-200);
70
+ --color-warning-300: var(--color-yellow-300);
71
+ --color-warning-400: var(--color-yellow-400);
72
+ --color-warning-500: var(--color-yellow-500);
73
+ --color-warning-600: var(--color-yellow-600);
74
+ --color-warning-700: var(--color-yellow-700);
75
+ --color-warning-800: var(--color-yellow-800);
76
+ --color-warning-900: var(--color-yellow-900);
77
+ --color-warning-950: var(--color-yellow-950);
78
+
79
+ --color-error: var(--color-red-500);
80
+ --color-error-50: var(--color-red-50);
81
+ --color-error-100: var(--color-red-100);
82
+ --color-error-200: var(--color-red-200);
83
+ --color-error-300: var(--color-red-300);
84
+ --color-error-400: var(--color-red-400);
85
+ --color-error-500: var(--color-red-500);
86
+ --color-error-600: var(--color-red-600);
87
+ --color-error-700: var(--color-red-700);
88
+ --color-error-800: var(--color-red-800);
89
+ --color-error-900: var(--color-red-900);
90
+ --color-error-950: var(--color-red-950);
91
+
92
+ --color-info: var(--color-teal-500);
93
+ --color-info-50: var(--color-teal-50);
94
+ --color-info-100: var(--color-teal-100);
95
+ --color-info-200: var(--color-teal-200);
96
+ --color-info-300: var(--color-teal-300);
97
+ --color-info-400: var(--color-teal-400);
98
+ --color-info-500: var(--color-teal-500);
99
+ --color-info-600: var(--color-teal-600);
100
+ --color-info-700: var(--color-teal-700);
101
+ --color-info-800: var(--color-teal-800);
102
+ --color-info-900: var(--color-teal-900);
103
+ --color-info-950: var(--color-teal-950);
104
+
105
+ --color-default: var(--color-neutral-500);
106
+ --color-default-50: var(--color-neutral-50);
107
+ --color-default-100: var(--color-neutral-100);
108
+ --color-default-200: var(--color-neutral-200);
109
+ --color-default-300: var(--color-neutral-300);
110
+ --color-default-400: var(--color-neutral-400);
111
+ --color-default-500: var(--color-neutral-500);
112
+ --color-default-600: var(--color-neutral-600);
113
+ --color-default-700: var(--color-neutral-700);
114
+ --color-default-800: var(--color-neutral-800);
115
+ --color-default-900: var(--color-neutral-900);
116
+ --color-default-950: var(--color-neutral-950);
117
+ }
package/package.json CHANGED
@@ -1,82 +1,84 @@
1
1
  {
2
2
  "name": "@semio/ui",
3
3
  "description": "Basic React components, built by Semio with Radix/Tailwind",
4
- "version": "0.0.0",
4
+ "version": "0.1.0",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "source": "./src/index.tsx",
12
+ "import": "./dist/index.mjs",
13
+ "require": "./dist/index.js"
14
+ },
15
+ "./dist/styles.css": "./dist/styles.css",
16
+ "./styles.css": "./dist/semio-ui.css"
17
+ },
8
18
  "license": "MIT",
9
19
  "files": [
10
20
  "dist/**",
11
- "dist/index.css"
21
+ "src/styles.css",
22
+ "src/theme.css"
12
23
  ],
13
24
  "sideEffects": [
14
25
  "**/*.css"
15
26
  ],
16
27
  "scripts": {
17
- "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
18
- "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
28
+ "build": "tsup src/index.tsx --format esm,cjs --dts --external react --publicDir && npm run build:css",
29
+ "build:css": "tailwindcss -i make-kit/make.css -o dist/semio-ui.css --minify",
30
+ "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react --publicDir",
19
31
  "lint": "eslint . --max-warnings 0",
20
- "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
32
+ "lint:fix": "eslint . --fix",
33
+ "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
34
+ "test:unit": "vitest run",
35
+ "test": "vitest run"
21
36
  },
22
37
  "dependencies": {
23
- "@emotion/react": "^11.11.4",
24
- "@emotion/styled": "^11.11.5",
38
+ "@base-ui/react": "^1.4.1",
25
39
  "@floating-ui/react": "^0.27.4",
26
- "@headlessui/react": "^2.1.2",
27
- "@radix-ui/react-accordion": "^1.2.0",
28
- "@radix-ui/react-alert-dialog": "^1.1.1",
29
- "@radix-ui/react-avatar": "^1.1.0",
30
- "@radix-ui/react-checkbox": "^1.1.2",
31
- "@radix-ui/react-collapsible": "^1.1.0",
32
- "@radix-ui/react-context-menu": "^2.2.1",
33
- "@radix-ui/react-dialog": "^1.1.0",
34
- "@radix-ui/react-dropdown-menu": "^2.1.1",
35
- "@radix-ui/react-popover": "^1.1.1",
36
- "@radix-ui/react-progress": "^1.0.3",
37
- "@radix-ui/react-scroll-area": "^1.1.0",
38
- "@radix-ui/react-select": "^2.1.1",
39
- "@radix-ui/react-separator": "^1.1.0",
40
- "@radix-ui/react-switch": "^1.1.0",
41
- "@radix-ui/react-tabs": "^1.1.0",
42
- "@radix-ui/react-toast": "^1.2.6",
43
- "@radix-ui/react-toggle": "^1.1.0",
44
- "@radix-ui/react-toggle-group": "^1.1.0",
45
- "@radix-ui/react-tooltip": "^1.1.1",
46
- "@semio/utils": "*",
47
- "@tabler/icons-react": "^2.46.0",
40
+ "@react-three/fiber": "^9.0.0",
41
+ "@semio/utils": "^0.1.0",
42
+ "@tabler/icons-react": "^3.34.0",
48
43
  "@use-gesture/react": "^10.3.0",
49
- "@visx/responsive": "^3.10.2",
50
44
  "clsx": "^2.1.1",
51
45
  "jotai": "^2.11.0",
52
- "lodash": "^4.17.21",
46
+ "jotai-effect": "^2.0.2",
47
+ "lodash": "^4.18.1",
53
48
  "match-sorter": "^6.3.4",
54
49
  "motion": "^12.4.7",
55
50
  "number-precision": "^1.6.0",
51
+ "prism-react-renderer": "^2.4.1",
52
+ "radix-ui": "^1.4.2",
56
53
  "react-colorful": "^5.6.1",
57
- "react-dom": "^18.3.1",
58
- "react-dropzone": "^14.2.9",
54
+ "react-dropzone": "^15.0.0",
59
55
  "react-hook-form": "^7.53.2",
60
56
  "react-imask": "^7.6.0",
61
57
  "react-merge-refs": "^2.1.1",
62
- "react-syntax-highlighter": "^15.6.1",
63
- "react-use-measure": "^2.1.1"
58
+ "react-use-measure": "^2.1.1",
59
+ "three": "^0.170.0",
60
+ "zustand": "^5.0.2"
61
+ },
62
+ "peerDependencies": {
63
+ "react": "^18.2.0 || ^19.0.0",
64
+ "react-dom": "^18.2.0 || ^19.0.0",
65
+ "tailwindcss": "^4.1.3"
64
66
  },
65
67
  "devDependencies": {
66
68
  "@semio/eslint-config": "*",
67
- "@semio/tailwind-config": "*",
68
69
  "@semio/typescript-config": "*",
70
+ "@tailwindcss/cli": "^4.1.3",
69
71
  "@types/lodash": "^4.17.0",
70
- "@types/react": "^18.3.1",
71
- "@types/react-dom": "^18.3.1",
72
- "@types/react-syntax-highlighter": "^15.5.13",
72
+ "@types/react": "^19.1.0",
73
+ "@types/react-dom": "^19.1.0",
74
+ "@types/three": "^0.170.0",
73
75
  "autoprefixer": "^10.4.19",
74
- "eslint": "^8.57.1",
75
- "postcss": "^8.4.38",
76
- "react": "^18.3.1",
77
- "tailwindcss": "^3.4.13",
76
+ "postcss": "^8.5.10",
77
+ "react": "^19.1.0",
78
+ "react-dom": "^19.1.0",
78
79
  "tsup": "^8.0.1",
79
- "typescript": "^5.3.3"
80
+ "typescript": "^5.3.3",
81
+ "vitest": "^3.2.4"
80
82
  },
81
83
  "publishConfig": {
82
84
  "access": "public"