@app-studio/web 0.9.85 → 0.9.86
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/docs/app-studio/Events.md +1 -1
- package/docs/components/Center.mdx +3 -3
- package/docs/components/ColorPicker.mdx +1 -1
- package/docs/components/OTPInput.mdx +2 -2
- package/docs/components/Resizable.mdx +6 -6
- package/docs/components/Selector.mdx +1 -1
- package/docs/components/Sidebar.mdx +1 -1
- package/docs/components/TagInput.mdx +1 -1
- package/docs/components/Vertical.mdx +1 -1
- package/package.json +1 -1
|
@@ -203,7 +203,7 @@ This example achieves the same result as the previous one but uses the more conc
|
|
|
203
203
|
on={{
|
|
204
204
|
firstChild: { borderTop: '1px solid color-gray-200' },
|
|
205
205
|
lastChild: { borderBottom: 'none' },
|
|
206
|
-
hover: { backgroundColor: 'color-gray
|
|
206
|
+
hover: { backgroundColor: 'color-gray-50' }
|
|
207
207
|
}}
|
|
208
208
|
>
|
|
209
209
|
{item.name}
|
|
@@ -50,7 +50,7 @@ import { Text, Vertical } from '@app-studio/web';
|
|
|
50
50
|
import { EmptyIcon } from '@app-studio/web';
|
|
51
51
|
|
|
52
52
|
export const EmptyStateCenter = () => (
|
|
53
|
-
<Center height={400} backgroundColor="color-gray
|
|
53
|
+
<Center height={400} backgroundColor="color-gray-50" borderRadius={12}>
|
|
54
54
|
<Vertical gap={20} alignItems="center" textAlign="center">
|
|
55
55
|
<EmptyIcon widthHeight={64} color="color-gray-400" />
|
|
56
56
|
<Vertical gap={8} alignItems="center">
|
|
@@ -288,7 +288,7 @@ import { ErrorIcon } from '@app-studio/web';
|
|
|
288
288
|
export const ErrorStateCenter = () => (
|
|
289
289
|
<Center
|
|
290
290
|
height={400}
|
|
291
|
-
backgroundColor="color-red
|
|
291
|
+
backgroundColor="color-red-50"
|
|
292
292
|
borderRadius={12}
|
|
293
293
|
border="1px solid"
|
|
294
294
|
borderColor="color-red-200"
|
|
@@ -388,7 +388,7 @@ export const ImagePlaceholder = () => (
|
|
|
388
388
|
|
|
389
389
|
**Feature Highlight:**
|
|
390
390
|
```tsx
|
|
391
|
-
<Center height={300} backgroundColor="color-blue
|
|
391
|
+
<Center height={300} backgroundColor="color-blue-50">
|
|
392
392
|
<Vertical gap={16} alignItems="center" textAlign="center">
|
|
393
393
|
<FeatureIcon widthHeight={48} />
|
|
394
394
|
<Text fontSize={20} fontWeight="bold">Feature Name</Text>
|
|
@@ -55,7 +55,7 @@ export const CustomizedOTPInput = () => {
|
|
|
55
55
|
views={{
|
|
56
56
|
container: {
|
|
57
57
|
borderColor: 'theme-primary',
|
|
58
|
-
backgroundColor: 'color-gray
|
|
58
|
+
backgroundColor: 'color-gray-50',
|
|
59
59
|
},
|
|
60
60
|
input: {
|
|
61
61
|
color: 'theme-primary',
|
|
@@ -161,7 +161,7 @@ export const StepValuesOTPInput = () => {
|
|
|
161
161
|
views={{
|
|
162
162
|
container: {
|
|
163
163
|
borderColor: 'theme-primary',
|
|
164
|
-
backgroundColor: 'color-gray
|
|
164
|
+
backgroundColor: 'color-gray-50',
|
|
165
165
|
},
|
|
166
166
|
input: {
|
|
167
167
|
color: 'theme-primary',
|
|
@@ -25,7 +25,7 @@ export const DefaultResizable = () => {
|
|
|
25
25
|
>
|
|
26
26
|
<Resizable>
|
|
27
27
|
<Resizable.Panel id="panel1" defaultSize="30%">
|
|
28
|
-
<View padding="16px" height="100%" backgroundColor="color-blue
|
|
28
|
+
<View padding="16px" height="100%" backgroundColor="color-blue-50">
|
|
29
29
|
<Text fontWeight="bold" marginBottom="8px">
|
|
30
30
|
Panel 1
|
|
31
31
|
</Text>
|
|
@@ -36,7 +36,7 @@ export const DefaultResizable = () => {
|
|
|
36
36
|
<Resizable.Handle id="handle1" withVisualIndicator />
|
|
37
37
|
|
|
38
38
|
<Resizable.Panel id="panel2" defaultSize="40%">
|
|
39
|
-
<View padding="16px" height="100%" backgroundColor="color-green
|
|
39
|
+
<View padding="16px" height="100%" backgroundColor="color-green-50">
|
|
40
40
|
<Text fontWeight="bold" marginBottom="8px">
|
|
41
41
|
Panel 2
|
|
42
42
|
</Text>
|
|
@@ -47,7 +47,7 @@ export const DefaultResizable = () => {
|
|
|
47
47
|
<Resizable.Handle id="handle2" withVisualIndicator />
|
|
48
48
|
|
|
49
49
|
<Resizable.Panel id="panel3" defaultSize="30%">
|
|
50
|
-
<View padding="16px" height="100%" backgroundColor="color-purple
|
|
50
|
+
<View padding="16px" height="100%" backgroundColor="color-purple-50">
|
|
51
51
|
<Text fontWeight="bold" marginBottom="8px">
|
|
52
52
|
Panel 3
|
|
53
53
|
</Text>
|
|
@@ -93,7 +93,7 @@ export const CollapsibleResizable = () => {
|
|
|
93
93
|
minSize={100}
|
|
94
94
|
maxSize={300}
|
|
95
95
|
>
|
|
96
|
-
<View padding="16px" height="100%" backgroundColor="color-blue
|
|
96
|
+
<View padding="16px" height="100%" backgroundColor="color-blue-50">
|
|
97
97
|
<Text fontWeight="bold" marginBottom="8px">
|
|
98
98
|
Collapsible Panel
|
|
99
99
|
</Text>
|
|
@@ -107,7 +107,7 @@ export const CollapsibleResizable = () => {
|
|
|
107
107
|
<Resizable.Handle id="handle1" withVisualIndicator withCollapseButton />
|
|
108
108
|
|
|
109
109
|
<Resizable.Panel id="panel2" defaultSize="50%">
|
|
110
|
-
<View padding="16px" height="100%" backgroundColor="color-green
|
|
110
|
+
<View padding="16px" height="100%" backgroundColor="color-green-50">
|
|
111
111
|
<Text fontWeight="bold" marginBottom="8px">
|
|
112
112
|
Main Panel
|
|
113
113
|
</Text>
|
|
@@ -131,7 +131,7 @@ export const CollapsibleResizable = () => {
|
|
|
131
131
|
collapsible={true}
|
|
132
132
|
defaultCollapsed={true}
|
|
133
133
|
>
|
|
134
|
-
<View padding="16px" height="100%" backgroundColor="color-purple
|
|
134
|
+
<View padding="16px" height="100%" backgroundColor="color-purple-50">
|
|
135
135
|
<Text fontWeight="bold" marginBottom="8px">
|
|
136
136
|
Initially Collapsed Panel
|
|
137
137
|
</Text>
|
|
@@ -66,7 +66,7 @@ export const CustomStyleSelector = () => (
|
|
|
66
66
|
<Selector
|
|
67
67
|
label="Custom Styled"
|
|
68
68
|
views={{
|
|
69
|
-
container: { backgroundColor: 'color-gray
|
|
69
|
+
container: { backgroundColor: 'color-gray-50' },
|
|
70
70
|
item: { fontSize: '14px', fontStyle: 'italic' }
|
|
71
71
|
}}
|
|
72
72
|
options={[
|
|
@@ -69,7 +69,7 @@ export const DefaultSidebar = () => {
|
|
|
69
69
|
</Text>
|
|
70
70
|
</Sidebar.Footer>
|
|
71
71
|
</Sidebar>
|
|
72
|
-
<View flex="1" padding="16px" backgroundColor="color-gray
|
|
72
|
+
<View flex="1" padding="16px" backgroundColor="color-gray-50">
|
|
73
73
|
<Text fontWeight="bold" size="xl" marginBottom="16px">
|
|
74
74
|
Main Content
|
|
75
75
|
</Text>
|