@youcan/celeste 0.14.0 → 0.14.1
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/ai/README.md +21 -0
- package/ai/component-registry.json +1817 -664
- package/ai/icons.json +12600 -0
- package/ai/tokens.json +2189 -0
- package/dist/celeste.css +15 -0
- package/package.json +3 -3
- package/src/components/modal/stories/modal.stories.ts +3 -3
- package/src/components/sidebar/sidebar-menu-action.vue +3 -0
- package/src/components/sidebar/sidebar-menu-button.vue +4 -0
- package/src/components/sidebar/sidebar-menu-sub-button.vue +3 -0
- package/src/components/sidebar/sidebar-menu-sub.vue +2 -0
- package/src/components/sidebar/sidebar-menu.vue +3 -0
- package/src/components/sidebar/stories/sidebar.stories.ts +2 -2
- package/ai/component-registry.md +0 -3518
- package/ai/icons.md +0 -142
- package/ai/tokens.md +0 -444
package/dist/celeste.css
CHANGED
|
@@ -5952,9 +5952,12 @@ to {
|
|
|
5952
5952
|
width: 20px;
|
|
5953
5953
|
padding: 0;
|
|
5954
5954
|
transition: transform var(--animation-fast) ease-in-out;
|
|
5955
|
+
border: 0;
|
|
5955
5956
|
border-radius: var(--radius-8);
|
|
5956
5957
|
outline: none;
|
|
5958
|
+
background: none;
|
|
5957
5959
|
color: var(--sidebar-foreground);
|
|
5960
|
+
text-decoration: none;
|
|
5958
5961
|
inset-inline-end: var(--spacing-4);
|
|
5959
5962
|
inset-block-start: var(--spacing-8);
|
|
5960
5963
|
aspect-ratio: 1;
|
|
@@ -6058,10 +6061,14 @@ to {
|
|
|
6058
6061
|
height var(--animation-fast) linear,
|
|
6059
6062
|
padding var(--animation-fast) linear,
|
|
6060
6063
|
background-color var(--animation-fast);
|
|
6064
|
+
border: 0;
|
|
6061
6065
|
border-radius: var(--radius-8);
|
|
6062
6066
|
outline: none;
|
|
6067
|
+
background: none;
|
|
6068
|
+
color: var(--sidebar-foreground);
|
|
6063
6069
|
font: var(--label-sm);
|
|
6064
6070
|
text-align: start;
|
|
6071
|
+
text-decoration: none;
|
|
6065
6072
|
gap: var(--spacing-8);
|
|
6066
6073
|
}
|
|
6067
6074
|
.celeste-sidebar-menu-button:hover {
|
|
@@ -6144,9 +6151,12 @@ to {
|
|
|
6144
6151
|
overflow: hidden;
|
|
6145
6152
|
transform: translateX(-1px);
|
|
6146
6153
|
transition: background-color var(--animation-fast);
|
|
6154
|
+
border: 0;
|
|
6147
6155
|
border-radius: var(--radius-8);
|
|
6148
6156
|
outline: none;
|
|
6157
|
+
background: none;
|
|
6149
6158
|
color: var(--sidebar-foreground);
|
|
6159
|
+
text-decoration: none;
|
|
6150
6160
|
gap: var(--spacing-8);
|
|
6151
6161
|
}
|
|
6152
6162
|
.celeste-sidebar-menu-sub-button:hover {
|
|
@@ -6201,12 +6211,14 @@ to {
|
|
|
6201
6211
|
display: flex;
|
|
6202
6212
|
flex-direction: column;
|
|
6203
6213
|
min-width: 0;
|
|
6214
|
+
margin-block: 0;
|
|
6204
6215
|
margin-inline: var(--spacing-16);
|
|
6205
6216
|
padding-block: var(--spacing-4);
|
|
6206
6217
|
padding-inline: var(--spacing-10);
|
|
6207
6218
|
transform: translateX(1px);
|
|
6208
6219
|
gap: var(--spacing-4);
|
|
6209
6220
|
border-inline-start: 1px solid var(--sidebar-border);
|
|
6221
|
+
list-style: none;
|
|
6210
6222
|
}
|
|
6211
6223
|
[data-collapsible='icon'] .celeste-sidebar-menu-sub {
|
|
6212
6224
|
display: none;
|
|
@@ -6217,7 +6229,10 @@ to {
|
|
|
6217
6229
|
flex-direction: column;
|
|
6218
6230
|
width: 100%;
|
|
6219
6231
|
min-width: 0;
|
|
6232
|
+
margin: 0;
|
|
6233
|
+
padding: 0;
|
|
6220
6234
|
gap: var(--spacing-4);
|
|
6235
|
+
list-style: none;
|
|
6221
6236
|
}
|
|
6222
6237
|
|
|
6223
6238
|
:root {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@youcan/celeste",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.14.
|
|
4
|
+
"version": "0.14.1",
|
|
5
5
|
"author": "YouCan <tech@youcan.shop>",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
"reka-ui": "^2.10.1",
|
|
53
53
|
"tinycolor2": "^1.6.0",
|
|
54
54
|
"vue-sonner": "^2.0.9",
|
|
55
|
-
"@youcan/celeste-icons": "0.14.
|
|
56
|
-
"@youcan/celeste-tokens": "0.14.
|
|
55
|
+
"@youcan/celeste-icons": "0.14.1",
|
|
56
|
+
"@youcan/celeste-tokens": "0.14.1"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@chromatic-com/storybook": "^5.3.0",
|
|
@@ -42,7 +42,7 @@ export const Default: Story = {
|
|
|
42
42
|
/>
|
|
43
43
|
<ModalBody>
|
|
44
44
|
<div style="display: grid; gap: 4px;">
|
|
45
|
-
<Label
|
|
45
|
+
<Label sublabel="(Optional)" required>Email address</Label>
|
|
46
46
|
<TextInput type="email" placeholder="hello@live.fr" size="md" />
|
|
47
47
|
</div>
|
|
48
48
|
</ModalBody>
|
|
@@ -79,7 +79,7 @@ export const WithoutDescription: Story = {
|
|
|
79
79
|
/>
|
|
80
80
|
<ModalBody>
|
|
81
81
|
<div style="display: grid; gap: 4px;">
|
|
82
|
-
<Label
|
|
82
|
+
<Label sublabel="(Optional)" required>Email address</Label>
|
|
83
83
|
<TextInput type="email" placeholder="hello@live.fr" size="md" />
|
|
84
84
|
</div>
|
|
85
85
|
</ModalBody>
|
|
@@ -113,7 +113,7 @@ export const WithoutIcon: Story = {
|
|
|
113
113
|
<ModalHeader title="Email Verification"/>
|
|
114
114
|
<ModalBody>
|
|
115
115
|
<div style="display: grid; gap: 4px;">
|
|
116
|
-
<Label
|
|
116
|
+
<Label sublabel="(Optional)" required>Email address</Label>
|
|
117
117
|
<TextInput type="email" placeholder="hello@live.fr" size="md" />
|
|
118
118
|
</div>
|
|
119
119
|
</ModalBody>
|
|
@@ -38,9 +38,12 @@ const props = withDefaults(defineProps<SidebarMenuActionProps>(), {
|
|
|
38
38
|
width: 20px;
|
|
39
39
|
padding: 0;
|
|
40
40
|
transition: transform var(--animation-fast) ease-in-out;
|
|
41
|
+
border: 0;
|
|
41
42
|
border-radius: var(--radius-8);
|
|
42
43
|
outline: none;
|
|
44
|
+
background: none;
|
|
43
45
|
color: var(--sidebar-foreground);
|
|
46
|
+
text-decoration: none;
|
|
44
47
|
inset-inline-end: var(--spacing-4);
|
|
45
48
|
inset-block-start: var(--spacing-8);
|
|
46
49
|
aspect-ratio: 1;
|
|
@@ -51,10 +51,14 @@ const delegatedProps = reactiveOmit(props, 'class', 'variant', 'isActive');
|
|
|
51
51
|
height var(--animation-fast) linear,
|
|
52
52
|
padding var(--animation-fast) linear,
|
|
53
53
|
background-color var(--animation-fast);
|
|
54
|
+
border: 0;
|
|
54
55
|
border-radius: var(--radius-8);
|
|
55
56
|
outline: none;
|
|
57
|
+
background: none;
|
|
58
|
+
color: var(--sidebar-foreground);
|
|
56
59
|
font: var(--label-sm);
|
|
57
60
|
text-align: start;
|
|
61
|
+
text-decoration: none;
|
|
58
62
|
gap: var(--spacing-8);
|
|
59
63
|
}
|
|
60
64
|
|
|
@@ -46,9 +46,12 @@ const props = withDefaults(defineProps<SidebarMenuSubButtonProps>(), {
|
|
|
46
46
|
overflow: hidden;
|
|
47
47
|
transform: translateX(-1px);
|
|
48
48
|
transition: background-color var(--animation-fast);
|
|
49
|
+
border: 0;
|
|
49
50
|
border-radius: var(--radius-8);
|
|
50
51
|
outline: none;
|
|
52
|
+
background: none;
|
|
51
53
|
color: var(--sidebar-foreground);
|
|
54
|
+
text-decoration: none;
|
|
52
55
|
gap: var(--spacing-8);
|
|
53
56
|
}
|
|
54
57
|
|
|
@@ -21,12 +21,14 @@ const props = defineProps<{
|
|
|
21
21
|
display: flex;
|
|
22
22
|
flex-direction: column;
|
|
23
23
|
min-width: 0;
|
|
24
|
+
margin-block: 0;
|
|
24
25
|
margin-inline: var(--spacing-16);
|
|
25
26
|
padding-block: var(--spacing-4);
|
|
26
27
|
padding-inline: var(--spacing-10);
|
|
27
28
|
transform: translateX(1px);
|
|
28
29
|
gap: var(--spacing-4);
|
|
29
30
|
border-inline-start: 1px solid var(--sidebar-border);
|
|
31
|
+
list-style: none;
|
|
30
32
|
}
|
|
31
33
|
|
|
32
34
|
[data-collapsible='icon'] .celeste-sidebar-menu-sub {
|
|
@@ -180,7 +180,7 @@ export const Simple: Story = {
|
|
|
180
180
|
},
|
|
181
181
|
template: `
|
|
182
182
|
<SidebarProvider>
|
|
183
|
-
<Sidebar collapsible="icon"
|
|
183
|
+
<Sidebar collapsible="icon" v-bind="args">
|
|
184
184
|
<SidebarHeader>
|
|
185
185
|
<DropdownMenu>
|
|
186
186
|
<DropdownMenuTrigger as-child>
|
|
@@ -351,7 +351,7 @@ export const Simple: Story = {
|
|
|
351
351
|
|
|
352
352
|
<div style="padding: 24px;">
|
|
353
353
|
<SidebarTrigger />
|
|
354
|
-
|
|
354
|
+
</div>
|
|
355
355
|
</SidebarProvider>
|
|
356
356
|
`,
|
|
357
357
|
}),
|