Skip to content

Commit 056df5b

Browse files
cschroetercschroeter
authored
feat(svelte): add avatar (#3084)
1 parent 16620c0 commit 056df5b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+2408
-114
lines changed

‎.prettierrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
"arrowParens": "always",
66
"semi": false,
77
"htmlWhitespaceSensitivity": "ignore",
8+
"plugins": ["prettier-plugin-svelte"],
89
"overrides": [
10+
{ "files": "*.svelte", "options": { "parser": "svelte" } },
911
{
1012
"files": "*.md",
1113
"options": {

‎bun.lockb

19.8 KB
Binary file not shown.

‎packages/react/src/components/avatar/examples/root-provider.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ export const RootProvider = () => {
55

66
return (
77
<>
8-
<button onClick={() => avatar.setSrc('https://new-source.com')}>Change Source</button>
8+
<button onClick={() => avatar.setSrc('https://avatars.githubusercontent.com/u/6916170?v=4')}>
9+
Change Source
10+
</button>
911

1012
<Avatar.RootProvider value={avatar}>
1113
<Avatar.Fallback>PA</Avatar.Fallback>
12-
<Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
14+
<Avatar.Image src="https://avatars.githubusercontent.com/u/1846056?v=4" alt="avatar" />
1315
</Avatar.RootProvider>
1416
</>
1517
)

‎packages/svelte/.gitignore

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎packages/svelte/.npmrc

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/svelte/.storybook/main.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import url("./styles/accordion.css");
2+
@import url("./styles/avatar.css");
3+
@import url("./styles/carousel.css");
4+
@import url("./styles/checkbox.css");
5+
@import url("./styles/collapsible.css");
6+
@import url("./styles/color-picker.css");
7+
@import url("./styles/combobox.css");
8+
@import url("./styles/date-picker.css");
9+
@import url("./styles/dialog.css");
10+
@import url("./styles/field.css");
11+
@import url("./styles/file-upload.css");
12+
@import url("./styles/hover-card.css");
13+
@import url("./styles/menu.css");
14+
@import url("./styles/number-input.css");
15+
@import url("./styles/pagination.css");
16+
@import url("./styles/pin-input.css");
17+
@import url("./styles/popover.css");
18+
@import url("./styles/presence.css");
19+
@import url("./styles/progress.css");
20+
@import url("./styles/qr-code.css");
21+
@import url("./styles/radio-group.css");
22+
@import url("./styles/segment-group.css");
23+
@import url("./styles/select.css");
24+
@import url("./styles/signature-pad.css");
25+
@import url("./styles/slider.css");
26+
@import url("./styles/splitter.css");
27+
@import url("./styles/steps.css");
28+
@import url("./styles/switch.css");
29+
@import url("./styles/tabs.css");
30+
@import url("./styles/tags-input.css");
31+
@import url("./styles/time-picker.css");
32+
@import url("./styles/timer.css");
33+
@import url("./styles/toast.css");
34+
@import url("./styles/toggle-group.css");
35+
@import url("./styles/tooltip.css");
36+
@import url("./styles/tree-view.css");

‎packages/svelte/.storybook/main.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { StorybookConfig } from '@storybook/sveltekit'
2+
3+
const config: StorybookConfig = {
4+
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
5+
framework: '@storybook/sveltekit',
6+
addons: [
7+
{
8+
name: '@storybook/addon-essentials',
9+
options: { backgrounds: false, controls: false, actions: false },
10+
},
11+
'@storybook/addon-a11y',
12+
],
13+
core: {
14+
disableTelemetry: true,
15+
},
16+
docs: {
17+
autodocs: false,
18+
},
19+
}
20+
21+
export default config

‎packages/svelte/.storybook/preview.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { Preview } from '@storybook/react'
2+
import './main.css'
3+
4+
const preview: Preview = {
5+
parameters: {
6+
options: {
7+
storySort: {
8+
method: 'alphabetical',
9+
},
10+
},
11+
layout: 'padded',
12+
},
13+
}
14+
15+
export default preview

‎packages/svelte/.storybook/styles/accordion.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@keyframes slideDown {
2+
from {
3+
opacity: 0.01;
4+
height: 0;
5+
}
6+
to {
7+
opacity: 1;
8+
height: var(--height);
9+
}
10+
}
11+
12+
@keyframes slideUp {
13+
from {
14+
opacity: 1;
15+
height: var(--height);
16+
}
17+
to {
18+
opacity: 0.01;
19+
height: 0;
20+
}
21+
}
22+
23+
24+
[data-scope='accordion'][data-part='item-indicator'][data-state='open'] {
25+
rotate: 90deg;
26+
}
27+
28+
[data-scope='accordion'][data-part='item-trigger'] {
29+
display: inline-flex;
30+
align-items: center;
31+
gap: 8px;
32+
}
33+
34+
[data-scope='accordion'][data-part='item-trigger'] svg {
35+
width: 1em;
36+
height: 1em;
37+
}
38+
39+
40+
[data-scope="accordion"][data-part="item-content"] {
41+
overflow: hidden;
42+
max-width: 400px;
43+
background-color: cadetblue;
44+
color:white;
45+
}
46+
47+
[data-scope="accordion"][data-part="item-content"][data-state="open"] {
48+
animation: slideDown 250ms cubic-bezier(0, 0, 0.38, 0.9);
49+
}
50+
51+
[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
52+
animation: slideUp 200ms cubic-bezier(0, 0, 0.38, 0.9);
53+
}

‎packages/svelte/.storybook/styles/avatar.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
[data-scope='avatar'][data-part='root'] {
2+
width: 80px;
3+
height: 80px;
4+
border-radius: 9999px;
5+
}
6+
7+
[data-scope='avatar'][data-part='image'] {
8+
width: 80px;
9+
height: 80px;
10+
object-fit: cover;
11+
border-radius: inherit;
12+
}
13+
14+
[data-scope='avatar'][data-part='fallback'] {
15+
width: 80px;
16+
height: 80px;
17+
font-size: 14px;
18+
line-height: 1;
19+
font-weight: 600;
20+
color: white;
21+
background-color: #777;
22+
}
23+
24+
[data-scope='avatar'][data-part='fallback']:not([hidden]) {
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
}

‎packages/svelte/.storybook/styles/carousel.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[data-scope='carousel'][data-part='viewport'] {
2+
max-width: 600px;
3+
margin-top: 40px;
4+
overflow-x: hidden;
5+
}

‎packages/svelte/.storybook/styles/checkbox.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
[data-scope='checkbox'][data-part='root'] {
2+
cursor: pointer;
3+
display: flex;
4+
flex-direction: column;
5+
gap: 8px;
6+
}
7+
8+
[data-scope='checkbox'][data-part='group'] {
9+
display: flex;
10+
gap: 24px;
11+
}
12+
13+
[data-scope='checkbox'][data-part='control'] {
14+
border: 2px solid;
15+
border-radius: 4px;
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
width: 24px;
20+
height: 24px;
21+
22+
&[data-invalid] {
23+
border-color: red;
24+
}
25+
26+
&[data-disabled] {
27+
opacity: 0.5;
28+
}
29+
}
30+
31+
32+
[data-scope='checkbox'][data-part='indicator']:not([hidden]) {
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
}

‎packages/svelte/.storybook/styles/collapsible.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
@keyframes slideDown {
3+
from {
4+
opacity: 0.01;
5+
height: 0;
6+
}
7+
to {
8+
opacity: 1;
9+
height: var(--height);
10+
}
11+
}
12+
13+
@keyframes slideUp {
14+
from {
15+
opacity: 1;
16+
height: var(--height);
17+
}
18+
to {
19+
opacity: 0.01;
20+
height: 0;
21+
}
22+
}
23+
24+
[data-scope="collapsible"][data-part="content"] {
25+
overflow: hidden;
26+
max-width: 400px;
27+
background-color: cadetblue;
28+
color:white;
29+
}
30+
31+
[data-scope="collapsible"][data-part="content"][data-state="open"] {
32+
animation: slideDown 250ms cubic-bezier(0, 0, 0.38, 0.9);
33+
}
34+
35+
[data-scope="collapsible"][data-part="content"][data-state="closed"] {
36+
animation: slideUp 200ms cubic-bezier(0, 0, 0.38, 0.9);
37+
}
38+

‎packages/svelte/.storybook/styles/color-picker.css

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
[data-scope='color-picker'][data-part='root'] {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 10px;
5+
margin-bottom: 10px;
6+
max-width: 400px;
7+
}
8+
9+
[data-scope='color-picker'][data-part='control'] {
10+
display: flex;
11+
gap: 4px;
12+
}
13+
14+
[data-scope='color-picker'][data-part='content'] {
15+
width: 260px;
16+
box-sizing: border-box;
17+
padding: 24px;
18+
border: 1px solid #d5d5d5;
19+
background: white;
20+
}
21+
22+
[data-scope='color-picker'][data-part='value-text'] {
23+
min-width: fit-content;
24+
}
25+
26+
[data-scope='color-picker'][data-part='content']:not(:is([hidden])) {
27+
display: flex;
28+
flex-direction: column;
29+
gap: 16px;
30+
}
31+
32+
[data-scope='color-picker'][data-part='area'] {
33+
height: 200px;
34+
border-radius: 4px;
35+
border: 1px solid #ebebeb;
36+
}
37+
38+
[data-scope='color-picker'][data-part='area-background'] {
39+
background: rgb(142, 142, 142);
40+
border-radius: 4px;
41+
height: 200px;
42+
}
43+
44+
[data-scope='color-picker'][data-part='area-thumb'],
45+
[data-scope='color-picker'][data-part='channel-slider-thumb'] {
46+
border: 2px solid white;
47+
border-radius: 9999px;
48+
box-sizing: border-box;
49+
transform: translate(-50%, -50%);
50+
box-shadow:
51+
black 0px 0px 0px 1px,
52+
black 0px 0px 0px 1px inset;
53+
width: 16px;
54+
height: 16px;
55+
}
56+
57+
[data-scope='color-picker'][data-part='channel-slider-track'] {
58+
height: 20px;
59+
border-radius: 4px;
60+
}
61+
62+
[data-scope='color-picker'][data-part='channel-input'] {
63+
border-radius: 4px;
64+
width: 100%;
65+
border: 1px solid #c2c2c2;
66+
}
67+
68+
[data-scope='color-picker'][data-part='swatch-group'] {
69+
display: flex;
70+
gap: 8px;
71+
}
72+
73+
[data-scope='color-picker'][data-part='swatch'] {
74+
width: 20px;
75+
height: 20px;
76+
flex-shrink: 0;
77+
}
78+
79+
[data-scope='color-picker'][data-part='transparency-grid'] {
80+
border-radius: 4px;
81+
}

0 commit comments

Comments
 (0)