@dishopsaas/design-system 0.0.47

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 (9) hide show
  1. package/README.md +69 -0
  2. package/dist/design-system.css +1 -0
  3. package/dist/index.cjs +172 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.mjs +26081 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/dist/vite.svg +1 -0
  8. package/package.json +80 -0
  9. package/src/css/design-system.css +169 -0
package/dist/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/package.json ADDED
@@ -0,0 +1,80 @@
1
+ {
2
+ "name": "@dishopsaas/design-system",
3
+ "private": false,
4
+ "version": "0.0.47",
5
+ "description": "Design System Dishop (React + TS + MUI) minimal with Storybook",
6
+ "license": "MIT",
7
+ "type": "module",
8
+ "main": "dist/index.cjs",
9
+ "module": "dist/index.mjs",
10
+ "types": "dist-types/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "types": "dist-types/index.d.ts",
14
+ "import": "./dist/index.mjs",
15
+ "require": "./dist/index.cjs"
16
+ },
17
+ "./design-system.css": "./dist/design-system.css"
18
+ },
19
+ "files": [
20
+ "dist",
21
+ "src/css/design-system.css",
22
+ "README.md"
23
+ ],
24
+ "sideEffects": false,
25
+ "scripts": {
26
+ "dev": "storybook dev -p 6006",
27
+ "build:types": "tsc -p tsconfig.build.json",
28
+ "build:js": "vite build --config vite.lib.config.ts",
29
+ "build": "npm run build:types && npm run build:js",
30
+ "preview": "vite preview",
31
+ "storybook": "storybook dev -p 6006",
32
+ "storybook:build": "storybook build",
33
+ "format": "prettier --write .",
34
+ "check:format": "prettier --check .",
35
+ "lint": "eslint ."
36
+ },
37
+ "peerDependencies": {
38
+ "@emotion/react": "^11",
39
+ "@emotion/styled": "^11",
40
+ "@mui/icons-material": "^7",
41
+ "@mui/material": "^7",
42
+ "react": "^18 || ^19",
43
+ "react-dom": "^18 || ^19"
44
+ },
45
+ "devDependencies": {
46
+ "@emotion/react": "^11.14.0",
47
+ "@emotion/styled": "^11.14.1",
48
+ "@eslint/js": "^9.33.0",
49
+ "@mui/icons-material": "^7.3.1",
50
+ "@mui/material": "^7.3.5",
51
+ "@types/react": "^19.1.11",
52
+ "@types/react-dom": "^19.1.8",
53
+ "@vitejs/plugin-react": "^5.0.0",
54
+ "eslint": "^9.33.0",
55
+ "eslint-config-prettier": "^10.1.8",
56
+ "eslint-plugin-react-hooks": "^5.2.0",
57
+ "eslint-plugin-react-refresh": "^0.4.20",
58
+ "eslint-plugin-storybook": "10.0.8",
59
+ "globals": "^16.3.0",
60
+ "prettier": "^3.6.2",
61
+ "react": "^19.1.1",
62
+ "react-dom": "^19.1.1",
63
+ "storybook": "^10.0.8",
64
+ "typescript": "~5.8.3",
65
+ "vite": "^7.1.2",
66
+ "vite-plugin-static-copy": "^3.1.4"
67
+ },
68
+ "engines": {
69
+ "node": ">=22.0.0"
70
+ },
71
+ "dependencies": {
72
+ "@storybook/react-vite": "^10.0.8",
73
+ "@stripe/react-stripe-js": "^3.9.2",
74
+ "@stripe/stripe-js": "^7.9.0",
75
+ "lucide-react": "^0.542.0",
76
+ "mui-tel-input": "^9.0.1",
77
+ "react-perfect-scrollbar": "^1.5.8",
78
+ "vite-plugin-dts": "^4.5.4"
79
+ }
80
+ }
package/src/css/design-system.css ADDED
@@ -0,0 +1,169 @@
1
+ /* =======================================================
2
+ DESIGN SYSTEM WRAPPER
3
+ ======================================================= */
4
+ .design-system-wrapper {
5
+ font-family: "GT America LCGV VF", sans-serif;
6
+ color: #333;
7
+ background-color: #FFF;
8
+ }
9
+
10
+ /* =======================================================
11
+ HEADINGS (h1 → h6) — from theme.fontSizes + fontWeights
12
+ ======================================================= */
13
+ .design-system-wrapper h1 {
14
+ font-family: "PP Right Grotesk Casual Variable", sans-serif;
15
+ font-weight: 620;
16
+ font-size: 24px;
17
+ line-height: 1.2;
18
+ letter-spacing: -0.02em;
19
+ margin-bottom: 0rem;
20
+ }
21
+
22
+ .design-system-wrapper h2 {
23
+ font-family: "PP Right Grotesk Casual Variable", sans-serif;
24
+ font-weight: 620;
25
+ font-size: 20px;
26
+ line-height: 1.25;
27
+ letter-spacing: -0.02em;
28
+ margin-bottom: 0rem;
29
+ }
30
+
31
+ .design-system-wrapper h3 {
32
+ font-family: "PP Right Grotesk Casual Variable", sans-serif;
33
+ font-weight: 620;
34
+ font-size: 18px;
35
+ line-height: 1.25;
36
+ letter-spacing: -0.02em;
37
+ margin-bottom: 0rem;
38
+ }
39
+
40
+ .design-system-wrapper h4 {
41
+ font-family: "PP Right Grotesk Casual Variable", sans-serif;
42
+ font-weight: 620;
43
+ font-size: 16px;
44
+ line-height: 1.2;
45
+ letter-spacing: -0.02em;
46
+ margin-bottom: 0rem;
47
+ }
48
+
49
+ .design-system-wrapper h5 {
50
+ font-family: "PP Right Grotesk Casual Variable", sans-serif;
51
+ font-weight: 620;
52
+ font-size: 14px;
53
+ line-height: 1.25;
54
+ letter-spacing: -0.02em;
55
+ margin-bottom: 0rem;
56
+ }
57
+
58
+ .design-system-wrapper h6 {
59
+ font-family: "PP Right Grotesk Casual Variable", sans-serif;
60
+ font-weight: 600;
61
+ font-size: 12px;
62
+ line-height: 1.25;
63
+ letter-spacing: -0.02em;
64
+ margin-bottom: 0rem;
65
+ }
66
+
67
+ /* =======================================================
68
+ BODY TEXT / SUBTITLE / CAPTION (synced with theme.ts)
69
+ ======================================================= */
70
+
71
+ /* subtitle2 → weight 500, size = h5 (14px), line-height 1.125 */
72
+ .design-system-wrapper .subtitle2 {
73
+ font-family: "GT America LCGV VF", sans-serif;
74
+ font-weight: 500;
75
+ font-size: 14px;
76
+ line-height: 1.125;
77
+ }
78
+
79
+ /* body1 → weight 400, size = h3 (18px), line-height 1.25 */
80
+ .design-system-wrapper .body1 {
81
+ font-family: "GT America LCGV VF", sans-serif;
82
+ font-weight: 400;
83
+ font-size: 18px;
84
+ line-height: 1.25;
85
+ }
86
+
87
+ /* body2 → weight 400, size = h5 (14px), line-height 1.125 */
88
+ .design-system-wrapper .body2 {
89
+ font-family: "GT America LCGV VF", sans-serif;
90
+ font-weight: 400;
91
+ font-size: 14px;
92
+ line-height: 1.125;
93
+ }
94
+
95
+ /* caption → weight 400, size = h6 (12px), line-height 1.2 */
96
+ .design-system-wrapper .caption {
97
+ font-family: "GT America LCGV VF", sans-serif;
98
+ font-weight: 400;
99
+ font-size: 12px;
100
+ line-height: 1.2;
101
+ }
102
+
103
+ /* =======================================================
104
+ BUTTONS — synced with MuiButton override
105
+ ======================================================= */
106
+ .design-system-wrapper button {
107
+ font-family: "PP Right Grotesk Casual Variable", sans-serif;
108
+ font-weight: 620;
109
+ font-size: 14px;
110
+ line-height: 1.25
111
+ }
112
+
113
+ /* =======================================================
114
+ ACCORDION — synced with theme.ts overrides
115
+ ======================================================= */
116
+ .design-system-wrapper .accordion {
117
+ box-shadow: none;
118
+ border-bottom: 1px solid #E1E1E1;
119
+ }
120
+
121
+ .design-system-wrapper .accordion-header {
122
+ min-height: 32px;
123
+ padding: 8px;
124
+ }
125
+
126
+ .design-system-wrapper .accordion-header.expanded {
127
+ border: 1px solid #E1E1E1;
128
+ }
129
+
130
+ .design-system-wrapper .accordion-header svg {
131
+ width: 24px;
132
+ height: 24px;
133
+ }
134
+
135
+ /* =======================================================
136
+ LIST ITEM ICON
137
+ ======================================================= */
138
+ .design-system-wrapper .list-item-icon {
139
+ min-width: 0 !important;
140
+ margin-right: 15px;
141
+ display: flex;
142
+ align-items: center;
143
+ justify-content: center;
144
+ width: 20px;
145
+ height: 20px;
146
+ }
147
+
148
+ /* =======================================================
149
+ COLOR VARIABLES — copied from palette
150
+ ======================================================= */
151
+ :root {
152
+ --ds-primary-color: #1E90FF;
153
+ --ds-secondary-color: #9013FE;
154
+ --ds-error-color: #D6392C;
155
+ --ds-success-color: #039F43;
156
+ --ds-warning-color: #FFC107;
157
+ --ds-info-color: #17A2B8;
158
+
159
+ --ds-gray-50: #F9F9F9;
160
+ --ds-gray-100: #F0F0F0;
161
+ --ds-gray-200: #E0E0E0;
162
+ --ds-gray-300: #CFCFCF;
163
+ --ds-gray-400: #B0B0B0;
164
+ --ds-gray-500: #999999;
165
+ --ds-gray-600: #707070;
166
+ --ds-gray-700: #2D2E2C;
167
+ --ds-gray-800: #3D3D3D;
168
+ --ds-gray-900: #1A1A1A;
169
+ }