@shoplflow/base 0.0.4 → 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/emotion.d.cjs.map +1 -1
- package/dist/emotion.d.d.cts +0 -107
- package/dist/emotion.d.d.ts +0 -107
- package/dist/emotion.d.js.map +1 -1
- package/dist/index.cjs +183 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +322 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +223 -3
- package/dist/index.d.ts +223 -3
- package/dist/index.js +184 -1
- package/dist/index.js.map +1 -1
- package/package.json +28 -26
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,225 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
|
|
2
|
+
import React from 'react';
|
|
2
3
|
|
|
3
|
-
declare const Button: () =>
|
|
4
|
+
declare const Button: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
type DomainType = 'SHOPL' | 'HADA';
|
|
7
|
+
|
|
8
|
+
interface ShoplflowProviderProps {
|
|
9
|
+
domain?: DomainType;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
}
|
|
12
|
+
declare const ShoplflowProvider: ({ children, domain }: ShoplflowProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
13
|
+
|
|
14
|
+
type UseDarkModeProps = {
|
|
15
|
+
domain?: DomainType;
|
|
16
|
+
};
|
|
17
|
+
declare function useDomain({ domain }: UseDarkModeProps): null;
|
|
18
|
+
|
|
19
|
+
declare const fontWeightRegular = "var(--font-weight-regular)";
|
|
20
|
+
declare const fontWeightMedium = "var(--font-weight-medium)";
|
|
21
|
+
declare const fontWeightBold = "var(--font-weight-bold)";
|
|
22
|
+
declare const borderRadius04 = "var(--border-radius04)";
|
|
23
|
+
declare const borderRadius06 = "var(--border-radius06)";
|
|
24
|
+
declare const borderRadius08 = "var(--border-radius08)";
|
|
25
|
+
declare const borderRadius12 = "var(--border-radius12)";
|
|
26
|
+
declare const borderRadius16 = "var(--border-radius16)";
|
|
27
|
+
declare const coolgray300 = "var(--coolgray300)";
|
|
28
|
+
declare const coolgray200 = "var(--coolgray200)";
|
|
29
|
+
declare const coolgray100 = "var(--coolgray100)";
|
|
30
|
+
declare const coolgray50 = "var(--coolgray50)";
|
|
31
|
+
declare const navy400 = "var(--navy400)";
|
|
32
|
+
declare const navy300 = "var(--navy300)";
|
|
33
|
+
declare const neutral0 = "var(--neutral0)";
|
|
34
|
+
declare const neutral100 = "var(--neutral100)";
|
|
35
|
+
declare const neutral150 = "var(--neutral150)";
|
|
36
|
+
declare const neutral200 = "var(--neutral200)";
|
|
37
|
+
declare const neutral300 = "var(--neutral300)";
|
|
38
|
+
declare const neutral350 = "var(--neutral350)";
|
|
39
|
+
declare const neutral400 = "var(--neutral400)";
|
|
40
|
+
declare const neutral500 = "var(--neutral500)";
|
|
41
|
+
declare const neutral600 = "var(--neutral600)";
|
|
42
|
+
declare const neutral700 = "var(--neutral700)";
|
|
43
|
+
declare const neutral400_5 = "var(--neutral400_5)";
|
|
44
|
+
declare const red300 = "var(--red300)";
|
|
45
|
+
declare const red200 = "var(--red200)";
|
|
46
|
+
declare const red100 = "var(--red100)";
|
|
47
|
+
declare const ocean300 = "var(--ocean300)";
|
|
48
|
+
declare const ocean200 = "var(--ocean200)";
|
|
49
|
+
declare const ocean100 = "var(--ocean100)";
|
|
50
|
+
declare const purple400 = "var(--purple400)";
|
|
51
|
+
declare const purple300 = "var(--purple300)";
|
|
52
|
+
declare const purple100 = "var(--purple100)";
|
|
53
|
+
declare const yellow300 = "var(--yellow300)";
|
|
54
|
+
declare const yellow200 = "var(--yellow200)";
|
|
55
|
+
declare const yellow100 = "var(--yellow100)";
|
|
56
|
+
declare const green300 = "var(--green300)";
|
|
57
|
+
declare const green200 = "var(--green200)";
|
|
58
|
+
declare const green100 = "var(--green100)";
|
|
59
|
+
declare const shopl400 = "var(--shopl400)";
|
|
60
|
+
declare const shopl300 = "var(--shopl300)";
|
|
61
|
+
declare const shopl200 = "var(--shopl200)";
|
|
62
|
+
declare const shopl150 = "var(--shopl150)";
|
|
63
|
+
declare const shopl100 = "var(--shopl100)";
|
|
64
|
+
declare const hada400 = "var(--hada400)";
|
|
65
|
+
declare const hada300 = "var(--hada300)";
|
|
66
|
+
declare const hada200 = "var(--hada200)";
|
|
67
|
+
declare const hada150 = "var(--hada150)";
|
|
68
|
+
declare const hada100 = "var(--hada100)";
|
|
69
|
+
declare const background = "var(--background)";
|
|
70
|
+
declare const primary100 = "var(--primary100)";
|
|
71
|
+
declare const primary150 = "var(--primary150)";
|
|
72
|
+
declare const primary200 = "var(--primary200)";
|
|
73
|
+
declare const primary300 = "var(--primary300)";
|
|
74
|
+
declare const primary400 = "var(--primary400)";
|
|
75
|
+
declare const spacing04 = "var(--spacing04)";
|
|
76
|
+
declare const spacing06 = "var(--spacing06)";
|
|
77
|
+
declare const spacing08 = "var(--spacing08)";
|
|
78
|
+
declare const spacing12 = "var(--spacing12)";
|
|
79
|
+
declare const spacing16 = "var(--spacing16)";
|
|
80
|
+
declare const spacing20 = "var(--spacing20)";
|
|
81
|
+
declare const spacing24 = "var(--spacing24)";
|
|
82
|
+
declare const spacing30 = "var(--spacing30)";
|
|
83
|
+
declare const spacing32 = "var(--spacing32)";
|
|
84
|
+
declare const spacing40 = "var(--spacing40)";
|
|
85
|
+
|
|
86
|
+
declare const tokens_background: typeof background;
|
|
87
|
+
declare const tokens_borderRadius04: typeof borderRadius04;
|
|
88
|
+
declare const tokens_borderRadius06: typeof borderRadius06;
|
|
89
|
+
declare const tokens_borderRadius08: typeof borderRadius08;
|
|
90
|
+
declare const tokens_borderRadius12: typeof borderRadius12;
|
|
91
|
+
declare const tokens_borderRadius16: typeof borderRadius16;
|
|
92
|
+
declare const tokens_coolgray100: typeof coolgray100;
|
|
93
|
+
declare const tokens_coolgray200: typeof coolgray200;
|
|
94
|
+
declare const tokens_coolgray300: typeof coolgray300;
|
|
95
|
+
declare const tokens_coolgray50: typeof coolgray50;
|
|
96
|
+
declare const tokens_fontWeightBold: typeof fontWeightBold;
|
|
97
|
+
declare const tokens_fontWeightMedium: typeof fontWeightMedium;
|
|
98
|
+
declare const tokens_fontWeightRegular: typeof fontWeightRegular;
|
|
99
|
+
declare const tokens_green100: typeof green100;
|
|
100
|
+
declare const tokens_green200: typeof green200;
|
|
101
|
+
declare const tokens_green300: typeof green300;
|
|
102
|
+
declare const tokens_hada100: typeof hada100;
|
|
103
|
+
declare const tokens_hada150: typeof hada150;
|
|
104
|
+
declare const tokens_hada200: typeof hada200;
|
|
105
|
+
declare const tokens_hada300: typeof hada300;
|
|
106
|
+
declare const tokens_hada400: typeof hada400;
|
|
107
|
+
declare const tokens_navy300: typeof navy300;
|
|
108
|
+
declare const tokens_navy400: typeof navy400;
|
|
109
|
+
declare const tokens_neutral0: typeof neutral0;
|
|
110
|
+
declare const tokens_neutral100: typeof neutral100;
|
|
111
|
+
declare const tokens_neutral150: typeof neutral150;
|
|
112
|
+
declare const tokens_neutral200: typeof neutral200;
|
|
113
|
+
declare const tokens_neutral300: typeof neutral300;
|
|
114
|
+
declare const tokens_neutral350: typeof neutral350;
|
|
115
|
+
declare const tokens_neutral400: typeof neutral400;
|
|
116
|
+
declare const tokens_neutral400_5: typeof neutral400_5;
|
|
117
|
+
declare const tokens_neutral500: typeof neutral500;
|
|
118
|
+
declare const tokens_neutral600: typeof neutral600;
|
|
119
|
+
declare const tokens_neutral700: typeof neutral700;
|
|
120
|
+
declare const tokens_ocean100: typeof ocean100;
|
|
121
|
+
declare const tokens_ocean200: typeof ocean200;
|
|
122
|
+
declare const tokens_ocean300: typeof ocean300;
|
|
123
|
+
declare const tokens_primary100: typeof primary100;
|
|
124
|
+
declare const tokens_primary150: typeof primary150;
|
|
125
|
+
declare const tokens_primary200: typeof primary200;
|
|
126
|
+
declare const tokens_primary300: typeof primary300;
|
|
127
|
+
declare const tokens_primary400: typeof primary400;
|
|
128
|
+
declare const tokens_purple100: typeof purple100;
|
|
129
|
+
declare const tokens_purple300: typeof purple300;
|
|
130
|
+
declare const tokens_purple400: typeof purple400;
|
|
131
|
+
declare const tokens_red100: typeof red100;
|
|
132
|
+
declare const tokens_red200: typeof red200;
|
|
133
|
+
declare const tokens_red300: typeof red300;
|
|
134
|
+
declare const tokens_shopl100: typeof shopl100;
|
|
135
|
+
declare const tokens_shopl150: typeof shopl150;
|
|
136
|
+
declare const tokens_shopl200: typeof shopl200;
|
|
137
|
+
declare const tokens_shopl300: typeof shopl300;
|
|
138
|
+
declare const tokens_shopl400: typeof shopl400;
|
|
139
|
+
declare const tokens_spacing04: typeof spacing04;
|
|
140
|
+
declare const tokens_spacing06: typeof spacing06;
|
|
141
|
+
declare const tokens_spacing08: typeof spacing08;
|
|
142
|
+
declare const tokens_spacing12: typeof spacing12;
|
|
143
|
+
declare const tokens_spacing16: typeof spacing16;
|
|
144
|
+
declare const tokens_spacing20: typeof spacing20;
|
|
145
|
+
declare const tokens_spacing24: typeof spacing24;
|
|
146
|
+
declare const tokens_spacing30: typeof spacing30;
|
|
147
|
+
declare const tokens_spacing32: typeof spacing32;
|
|
148
|
+
declare const tokens_spacing40: typeof spacing40;
|
|
149
|
+
declare const tokens_yellow100: typeof yellow100;
|
|
150
|
+
declare const tokens_yellow200: typeof yellow200;
|
|
151
|
+
declare const tokens_yellow300: typeof yellow300;
|
|
152
|
+
declare namespace tokens {
|
|
153
|
+
export {
|
|
154
|
+
tokens_background as background,
|
|
155
|
+
tokens_borderRadius04 as borderRadius04,
|
|
156
|
+
tokens_borderRadius06 as borderRadius06,
|
|
157
|
+
tokens_borderRadius08 as borderRadius08,
|
|
158
|
+
tokens_borderRadius12 as borderRadius12,
|
|
159
|
+
tokens_borderRadius16 as borderRadius16,
|
|
160
|
+
tokens_coolgray100 as coolgray100,
|
|
161
|
+
tokens_coolgray200 as coolgray200,
|
|
162
|
+
tokens_coolgray300 as coolgray300,
|
|
163
|
+
tokens_coolgray50 as coolgray50,
|
|
164
|
+
tokens_fontWeightBold as fontWeightBold,
|
|
165
|
+
tokens_fontWeightMedium as fontWeightMedium,
|
|
166
|
+
tokens_fontWeightRegular as fontWeightRegular,
|
|
167
|
+
tokens_green100 as green100,
|
|
168
|
+
tokens_green200 as green200,
|
|
169
|
+
tokens_green300 as green300,
|
|
170
|
+
tokens_hada100 as hada100,
|
|
171
|
+
tokens_hada150 as hada150,
|
|
172
|
+
tokens_hada200 as hada200,
|
|
173
|
+
tokens_hada300 as hada300,
|
|
174
|
+
tokens_hada400 as hada400,
|
|
175
|
+
tokens_navy300 as navy300,
|
|
176
|
+
tokens_navy400 as navy400,
|
|
177
|
+
tokens_neutral0 as neutral0,
|
|
178
|
+
tokens_neutral100 as neutral100,
|
|
179
|
+
tokens_neutral150 as neutral150,
|
|
180
|
+
tokens_neutral200 as neutral200,
|
|
181
|
+
tokens_neutral300 as neutral300,
|
|
182
|
+
tokens_neutral350 as neutral350,
|
|
183
|
+
tokens_neutral400 as neutral400,
|
|
184
|
+
tokens_neutral400_5 as neutral400_5,
|
|
185
|
+
tokens_neutral500 as neutral500,
|
|
186
|
+
tokens_neutral600 as neutral600,
|
|
187
|
+
tokens_neutral700 as neutral700,
|
|
188
|
+
tokens_ocean100 as ocean100,
|
|
189
|
+
tokens_ocean200 as ocean200,
|
|
190
|
+
tokens_ocean300 as ocean300,
|
|
191
|
+
tokens_primary100 as primary100,
|
|
192
|
+
tokens_primary150 as primary150,
|
|
193
|
+
tokens_primary200 as primary200,
|
|
194
|
+
tokens_primary300 as primary300,
|
|
195
|
+
tokens_primary400 as primary400,
|
|
196
|
+
tokens_purple100 as purple100,
|
|
197
|
+
tokens_purple300 as purple300,
|
|
198
|
+
tokens_purple400 as purple400,
|
|
199
|
+
tokens_red100 as red100,
|
|
200
|
+
tokens_red200 as red200,
|
|
201
|
+
tokens_red300 as red300,
|
|
202
|
+
tokens_shopl100 as shopl100,
|
|
203
|
+
tokens_shopl150 as shopl150,
|
|
204
|
+
tokens_shopl200 as shopl200,
|
|
205
|
+
tokens_shopl300 as shopl300,
|
|
206
|
+
tokens_shopl400 as shopl400,
|
|
207
|
+
tokens_spacing04 as spacing04,
|
|
208
|
+
tokens_spacing06 as spacing06,
|
|
209
|
+
tokens_spacing08 as spacing08,
|
|
210
|
+
tokens_spacing12 as spacing12,
|
|
211
|
+
tokens_spacing16 as spacing16,
|
|
212
|
+
tokens_spacing20 as spacing20,
|
|
213
|
+
tokens_spacing24 as spacing24,
|
|
214
|
+
tokens_spacing30 as spacing30,
|
|
215
|
+
tokens_spacing32 as spacing32,
|
|
216
|
+
tokens_spacing40 as spacing40,
|
|
217
|
+
tokens_yellow100 as yellow100,
|
|
218
|
+
tokens_yellow200 as yellow200,
|
|
219
|
+
tokens_yellow300 as yellow300,
|
|
220
|
+
};
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
type ShoplflowTokens = keyof typeof tokens;
|
|
224
|
+
|
|
225
|
+
export { Button, ShoplflowProvider, ShoplflowProviderProps, ShoplflowTokens, tokens, useDomain };
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,193 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __export = (target, all) => {
|
|
3
|
+
for (var name in all)
|
|
4
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
5
|
+
};
|
|
6
|
+
|
|
1
7
|
// src/components/Button.tsx
|
|
2
8
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
3
9
|
var Button = () => {
|
|
4
10
|
return /* @__PURE__ */ jsx("div", { children: "Button" });
|
|
5
11
|
};
|
|
6
12
|
var Button_default = Button;
|
|
13
|
+
|
|
14
|
+
// src/hooks/useDomain.ts
|
|
15
|
+
import { useEffect, useState } from "react";
|
|
16
|
+
function useDomain({ domain = "SHOPL" }) {
|
|
17
|
+
const [domainType, setDomainType] = useState(void 0);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (domain) {
|
|
20
|
+
setDomainType(domain);
|
|
21
|
+
}
|
|
22
|
+
}, [domain]);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (typeof window !== "undefined") {
|
|
25
|
+
}
|
|
26
|
+
}, []);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (!domainType) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
document.documentElement.dataset.shoplflow = domainType;
|
|
32
|
+
if (domainType === "SHOPL") {
|
|
33
|
+
document.documentElement.dataset.shoplflow = "shopl";
|
|
34
|
+
} else {
|
|
35
|
+
document.documentElement.dataset.shoplflow = "hada";
|
|
36
|
+
}
|
|
37
|
+
}, [domainType]);
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// src/providers/ShoplflowProvider.tsx
|
|
42
|
+
import { Fragment, jsx as jsx2 } from "@emotion/react/jsx-runtime";
|
|
43
|
+
var ShoplflowProvider = ({ children, domain = "HADA" }) => {
|
|
44
|
+
useDomain({
|
|
45
|
+
domain
|
|
46
|
+
});
|
|
47
|
+
return /* @__PURE__ */ jsx2(Fragment, { children });
|
|
48
|
+
};
|
|
49
|
+
var ShoplflowProvider_default = ShoplflowProvider;
|
|
50
|
+
|
|
51
|
+
// src/styles/tokens.ts
|
|
52
|
+
var tokens_exports = {};
|
|
53
|
+
__export(tokens_exports, {
|
|
54
|
+
background: () => background,
|
|
55
|
+
borderRadius04: () => borderRadius04,
|
|
56
|
+
borderRadius06: () => borderRadius06,
|
|
57
|
+
borderRadius08: () => borderRadius08,
|
|
58
|
+
borderRadius12: () => borderRadius12,
|
|
59
|
+
borderRadius16: () => borderRadius16,
|
|
60
|
+
coolgray100: () => coolgray100,
|
|
61
|
+
coolgray200: () => coolgray200,
|
|
62
|
+
coolgray300: () => coolgray300,
|
|
63
|
+
coolgray50: () => coolgray50,
|
|
64
|
+
fontWeightBold: () => fontWeightBold,
|
|
65
|
+
fontWeightMedium: () => fontWeightMedium,
|
|
66
|
+
fontWeightRegular: () => fontWeightRegular,
|
|
67
|
+
green100: () => green100,
|
|
68
|
+
green200: () => green200,
|
|
69
|
+
green300: () => green300,
|
|
70
|
+
hada100: () => hada100,
|
|
71
|
+
hada150: () => hada150,
|
|
72
|
+
hada200: () => hada200,
|
|
73
|
+
hada300: () => hada300,
|
|
74
|
+
hada400: () => hada400,
|
|
75
|
+
navy300: () => navy300,
|
|
76
|
+
navy400: () => navy400,
|
|
77
|
+
neutral0: () => neutral0,
|
|
78
|
+
neutral100: () => neutral100,
|
|
79
|
+
neutral150: () => neutral150,
|
|
80
|
+
neutral200: () => neutral200,
|
|
81
|
+
neutral300: () => neutral300,
|
|
82
|
+
neutral350: () => neutral350,
|
|
83
|
+
neutral400: () => neutral400,
|
|
84
|
+
neutral400_5: () => neutral400_5,
|
|
85
|
+
neutral500: () => neutral500,
|
|
86
|
+
neutral600: () => neutral600,
|
|
87
|
+
neutral700: () => neutral700,
|
|
88
|
+
ocean100: () => ocean100,
|
|
89
|
+
ocean200: () => ocean200,
|
|
90
|
+
ocean300: () => ocean300,
|
|
91
|
+
primary100: () => primary100,
|
|
92
|
+
primary150: () => primary150,
|
|
93
|
+
primary200: () => primary200,
|
|
94
|
+
primary300: () => primary300,
|
|
95
|
+
primary400: () => primary400,
|
|
96
|
+
purple100: () => purple100,
|
|
97
|
+
purple300: () => purple300,
|
|
98
|
+
purple400: () => purple400,
|
|
99
|
+
red100: () => red100,
|
|
100
|
+
red200: () => red200,
|
|
101
|
+
red300: () => red300,
|
|
102
|
+
shopl100: () => shopl100,
|
|
103
|
+
shopl150: () => shopl150,
|
|
104
|
+
shopl200: () => shopl200,
|
|
105
|
+
shopl300: () => shopl300,
|
|
106
|
+
shopl400: () => shopl400,
|
|
107
|
+
spacing04: () => spacing04,
|
|
108
|
+
spacing06: () => spacing06,
|
|
109
|
+
spacing08: () => spacing08,
|
|
110
|
+
spacing12: () => spacing12,
|
|
111
|
+
spacing16: () => spacing16,
|
|
112
|
+
spacing20: () => spacing20,
|
|
113
|
+
spacing24: () => spacing24,
|
|
114
|
+
spacing30: () => spacing30,
|
|
115
|
+
spacing32: () => spacing32,
|
|
116
|
+
spacing40: () => spacing40,
|
|
117
|
+
yellow100: () => yellow100,
|
|
118
|
+
yellow200: () => yellow200,
|
|
119
|
+
yellow300: () => yellow300
|
|
120
|
+
});
|
|
121
|
+
var fontWeightRegular = "var(--font-weight-regular)";
|
|
122
|
+
var fontWeightMedium = "var(--font-weight-medium)";
|
|
123
|
+
var fontWeightBold = "var(--font-weight-bold)";
|
|
124
|
+
var borderRadius04 = "var(--border-radius04)";
|
|
125
|
+
var borderRadius06 = "var(--border-radius06)";
|
|
126
|
+
var borderRadius08 = "var(--border-radius08)";
|
|
127
|
+
var borderRadius12 = "var(--border-radius12)";
|
|
128
|
+
var borderRadius16 = "var(--border-radius16)";
|
|
129
|
+
var coolgray300 = "var(--coolgray300)";
|
|
130
|
+
var coolgray200 = "var(--coolgray200)";
|
|
131
|
+
var coolgray100 = "var(--coolgray100)";
|
|
132
|
+
var coolgray50 = "var(--coolgray50)";
|
|
133
|
+
var navy400 = "var(--navy400)";
|
|
134
|
+
var navy300 = "var(--navy300)";
|
|
135
|
+
var neutral0 = "var(--neutral0)";
|
|
136
|
+
var neutral100 = "var(--neutral100)";
|
|
137
|
+
var neutral150 = "var(--neutral150)";
|
|
138
|
+
var neutral200 = "var(--neutral200)";
|
|
139
|
+
var neutral300 = "var(--neutral300)";
|
|
140
|
+
var neutral350 = "var(--neutral350)";
|
|
141
|
+
var neutral400 = "var(--neutral400)";
|
|
142
|
+
var neutral500 = "var(--neutral500)";
|
|
143
|
+
var neutral600 = "var(--neutral600)";
|
|
144
|
+
var neutral700 = "var(--neutral700)";
|
|
145
|
+
var neutral400_5 = "var(--neutral400_5)";
|
|
146
|
+
var red300 = "var(--red300)";
|
|
147
|
+
var red200 = "var(--red200)";
|
|
148
|
+
var red100 = "var(--red100)";
|
|
149
|
+
var ocean300 = "var(--ocean300)";
|
|
150
|
+
var ocean200 = "var(--ocean200)";
|
|
151
|
+
var ocean100 = "var(--ocean100)";
|
|
152
|
+
var purple400 = "var(--purple400)";
|
|
153
|
+
var purple300 = "var(--purple300)";
|
|
154
|
+
var purple100 = "var(--purple100)";
|
|
155
|
+
var yellow300 = "var(--yellow300)";
|
|
156
|
+
var yellow200 = "var(--yellow200)";
|
|
157
|
+
var yellow100 = "var(--yellow100)";
|
|
158
|
+
var green300 = "var(--green300)";
|
|
159
|
+
var green200 = "var(--green200)";
|
|
160
|
+
var green100 = "var(--green100)";
|
|
161
|
+
var shopl400 = "var(--shopl400)";
|
|
162
|
+
var shopl300 = "var(--shopl300)";
|
|
163
|
+
var shopl200 = "var(--shopl200)";
|
|
164
|
+
var shopl150 = "var(--shopl150)";
|
|
165
|
+
var shopl100 = "var(--shopl100)";
|
|
166
|
+
var hada400 = "var(--hada400)";
|
|
167
|
+
var hada300 = "var(--hada300)";
|
|
168
|
+
var hada200 = "var(--hada200)";
|
|
169
|
+
var hada150 = "var(--hada150)";
|
|
170
|
+
var hada100 = "var(--hada100)";
|
|
171
|
+
var background = "var(--background)";
|
|
172
|
+
var primary100 = "var(--primary100)";
|
|
173
|
+
var primary150 = "var(--primary150)";
|
|
174
|
+
var primary200 = "var(--primary200)";
|
|
175
|
+
var primary300 = "var(--primary300)";
|
|
176
|
+
var primary400 = "var(--primary400)";
|
|
177
|
+
var spacing04 = "var(--spacing04)";
|
|
178
|
+
var spacing06 = "var(--spacing06)";
|
|
179
|
+
var spacing08 = "var(--spacing08)";
|
|
180
|
+
var spacing12 = "var(--spacing12)";
|
|
181
|
+
var spacing16 = "var(--spacing16)";
|
|
182
|
+
var spacing20 = "var(--spacing20)";
|
|
183
|
+
var spacing24 = "var(--spacing24)";
|
|
184
|
+
var spacing30 = "var(--spacing30)";
|
|
185
|
+
var spacing32 = "var(--spacing32)";
|
|
186
|
+
var spacing40 = "var(--spacing40)";
|
|
7
187
|
export {
|
|
8
|
-
Button_default as Button
|
|
188
|
+
Button_default as Button,
|
|
189
|
+
ShoplflowProvider_default as ShoplflowProvider,
|
|
190
|
+
tokens_exports as tokens,
|
|
191
|
+
useDomain
|
|
9
192
|
};
|
|
10
193
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button.tsx"],"sourcesContent":["const Button = () => {\n return <div>Button</div>;\n};\n\nexport default Button;\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/Button.tsx","../src/hooks/useDomain.ts","../src/providers/ShoplflowProvider.tsx","../src/styles/tokens.ts"],"sourcesContent":["const Button = () => {\n return <div>Button</div>;\n};\n\nexport default Button;\n","import { useEffect, useState } from 'react';\nimport type { DomainType } from '../types/Domain';\n\ntype UseDarkModeProps = {\n domain?: DomainType;\n};\n\nexport function useDomain({ domain = 'SHOPL' }: UseDarkModeProps) {\n const [domainType, setDomainType] = useState<DomainType | undefined>(undefined);\n\n useEffect(() => {\n if (domain) {\n setDomainType(domain);\n }\n }, [domain]);\n useEffect(() => {\n if (typeof window !== 'undefined') {\n // const domain = localStorage.getItem('domain');\n // setDomainType(domain ? (domain as DomainType) : 'SHOPL');\n }\n }, []);\n\n useEffect(() => {\n if (!domainType) {\n return;\n }\n document.documentElement.dataset.shoplflow = domainType;\n if (domainType === 'SHOPL') {\n document.documentElement.dataset.shoplflow = 'shopl';\n // localStorage.setItem('domain', domainType);\n } else {\n document.documentElement.dataset.shoplflow = 'hada';\n // localStorage.setItem('domain', domainType);\n }\n }, [domainType]);\n return null;\n}\n","import React from 'react';\n\nimport { useDomain } from '../hooks/useDomain';\nimport type { DomainType } from '../types/Domain';\n\nexport interface ShoplflowProviderProps {\n domain?: DomainType;\n children: React.ReactNode;\n}\n\nconst ShoplflowProvider = ({ children, domain = 'HADA' }: ShoplflowProviderProps) => {\n useDomain({\n domain,\n });\n return <>{children}</>;\n};\n\nexport default ShoplflowProvider;\n","/* Generate by scripts/generate-tokens.js */\n/* eslint-disable */\nexport const fontWeightRegular = 'var(--font-weight-regular)';\nexport const fontWeightMedium = 'var(--font-weight-medium)';\nexport const fontWeightBold = 'var(--font-weight-bold)';\nexport const borderRadius04 = 'var(--border-radius04)';\nexport const borderRadius06 = 'var(--border-radius06)';\nexport const borderRadius08 = 'var(--border-radius08)';\nexport const borderRadius12 = 'var(--border-radius12)';\nexport const borderRadius16 = 'var(--border-radius16)';\nexport const coolgray300 = 'var(--coolgray300)';\nexport const coolgray200 = 'var(--coolgray200)';\nexport const coolgray100 = 'var(--coolgray100)';\nexport const coolgray50 = 'var(--coolgray50)';\nexport const navy400 = 'var(--navy400)';\nexport const navy300 = 'var(--navy300)';\nexport const neutral0 = 'var(--neutral0)';\nexport const neutral100 = 'var(--neutral100)';\nexport const neutral150 = 'var(--neutral150)';\nexport const neutral200 = 'var(--neutral200)';\nexport const neutral300 = 'var(--neutral300)';\nexport const neutral350 = 'var(--neutral350)';\nexport const neutral400 = 'var(--neutral400)';\nexport const neutral500 = 'var(--neutral500)';\nexport const neutral600 = 'var(--neutral600)';\nexport const neutral700 = 'var(--neutral700)';\nexport const neutral400_5 = 'var(--neutral400_5)';\nexport const red300 = 'var(--red300)';\nexport const red200 = 'var(--red200)';\nexport const red100 = 'var(--red100)';\nexport const ocean300 = 'var(--ocean300)';\nexport const ocean200 = 'var(--ocean200)';\nexport const ocean100 = 'var(--ocean100)';\nexport const purple400 = 'var(--purple400)';\nexport const purple300 = 'var(--purple300)';\nexport const purple100 = 'var(--purple100)';\nexport const yellow300 = 'var(--yellow300)';\nexport const yellow200 = 'var(--yellow200)';\nexport const yellow100 = 'var(--yellow100)';\nexport const green300 = 'var(--green300)';\nexport const green200 = 'var(--green200)';\nexport const green100 = 'var(--green100)';\nexport const shopl400 = 'var(--shopl400)';\nexport const shopl300 = 'var(--shopl300)';\nexport const shopl200 = 'var(--shopl200)';\nexport const shopl150 = 'var(--shopl150)';\nexport const shopl100 = 'var(--shopl100)';\nexport const hada400 = 'var(--hada400)';\nexport const hada300 = 'var(--hada300)';\nexport const hada200 = 'var(--hada200)';\nexport const hada150 = 'var(--hada150)';\nexport const hada100 = 'var(--hada100)';\nexport const background = 'var(--background)';\nexport const primary100 = 'var(--primary100)';\nexport const primary150 = 'var(--primary150)';\nexport const primary200 = 'var(--primary200)';\nexport const primary300 = 'var(--primary300)';\nexport const primary400 = 'var(--primary400)';\nexport const spacing04 = 'var(--spacing04)';\nexport const spacing06 = 'var(--spacing06)';\nexport const spacing08 = 'var(--spacing08)';\nexport const spacing12 = 'var(--spacing12)';\nexport const spacing16 = 'var(--spacing16)';\nexport const spacing20 = 'var(--spacing20)';\nexport const spacing24 = 'var(--spacing24)';\nexport const spacing30 = 'var(--spacing30)';\nexport const spacing32 = 'var(--spacing32)';\nexport const spacing40 = 'var(--spacing40)';\n"],"mappings":"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","names":["jsx"]}
|
package/package.json
CHANGED
|
@@ -1,50 +1,52 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shoplflow/base",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"
|
|
6
|
-
"test": "jest --onlyChanged",
|
|
7
|
-
"build:tokens": "node scripts/generate-tokens.cjs",
|
|
8
|
-
"type-check": "tsc --noEmit",
|
|
9
|
-
"build": "tsup --format esm,cjs --dts --external react",
|
|
10
|
-
"develop": "tsup --format esm,cjs --watch --dts --external react"
|
|
11
|
-
},
|
|
12
|
-
"main": "dist/index.js",
|
|
13
|
-
"module": "dist/index.mjs",
|
|
5
|
+
"module": "dist/index.js",
|
|
14
6
|
"types": "dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"require": "./dist/index.cjs"
|
|
12
|
+
},
|
|
13
|
+
"./styles": "./dist/index.css",
|
|
14
|
+
"./package.json": "./package.json"
|
|
15
|
+
},
|
|
16
|
+
"main": "dist/index.cjs",
|
|
15
17
|
"files": [
|
|
16
|
-
"
|
|
18
|
+
"dist",
|
|
19
|
+
"styles"
|
|
17
20
|
],
|
|
18
21
|
"publishConfig": {
|
|
19
22
|
"access": "public"
|
|
20
23
|
},
|
|
21
24
|
"peerDependencies": {
|
|
22
25
|
"@emotion/react": "*",
|
|
23
|
-
"@emotion/styled": "*"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
"react": "^18.2.0",
|
|
27
|
-
"react-dom": "^18.2.0"
|
|
26
|
+
"@emotion/styled": "*",
|
|
27
|
+
"react": "*",
|
|
28
|
+
"react-dom": "*"
|
|
28
29
|
},
|
|
29
30
|
"devDependencies": {
|
|
30
31
|
"@babel/core": "^7.22.5",
|
|
31
32
|
"@babel/preset-env": "^7.22.5",
|
|
32
33
|
"@babel/preset-typescript": "^7.22.5",
|
|
33
|
-
"@emotion/
|
|
34
|
-
"@emotion/
|
|
35
|
-
"@emotion/styled": "11.11.0",
|
|
36
|
-
"@jest/globals": "^29.5.0",
|
|
37
|
-
"@types/jest": "^29.5.2",
|
|
34
|
+
"@emotion/react": "^11",
|
|
35
|
+
"@emotion/styled": "^11",
|
|
38
36
|
"@types/node": "20.4.9",
|
|
39
37
|
"@types/react": "^18.0.37",
|
|
40
38
|
"@types/react-dom": "^18.0.11",
|
|
41
39
|
"eslint": "^8.44.0",
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"jest-pnp-resolver": "^1.2.3",
|
|
45
|
-
"ts-jest": "^29.1.0",
|
|
40
|
+
"react": "^18",
|
|
41
|
+
"react-dom": "^18",
|
|
46
42
|
"ts-node": "^10.9.1",
|
|
47
43
|
"tsup": "7.2.0",
|
|
48
44
|
"typescript": "^5.0.2"
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"build:tokens": "node scripts/generate-tokens.cjs",
|
|
48
|
+
"type-check": "tsc --noEmit",
|
|
49
|
+
"build": "tsup",
|
|
50
|
+
"dev": "tsup --watch"
|
|
49
51
|
}
|
|
50
|
-
}
|
|
52
|
+
}
|