feat(svelte): add avatar (#3084)

.prettierrc

@@ -5,7 +5,9 @@
   "arrowParens": "always",
   "semi": false,
   "htmlWhitespaceSensitivity": "ignore",
+  "plugins": ["prettier-plugin-svelte"],
   "overrides": [
+    { "files": "*.svelte", "options": { "parser": "svelte" } },
     {
       "files": "*.md",
       "options": {

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

@@ -5,11 +5,13 @@ export const RootProvider = () => {
 
   return (
     <>
-      <button onClick={() => avatar.setSrc('https://new-source.com')}>Change Source</button>
+      <button onClick={() => avatar.setSrc('https://avatars.githubusercontent.com/u/6916170?v=4')}>
+        Change Source
+      </button>
 
       <Avatar.RootProvider value={avatar}>
         <Avatar.Fallback>PA</Avatar.Fallback>
-        <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
+        <Avatar.Image src="https://avatars.githubusercontent.com/u/1846056?v=4" alt="avatar" />
       </Avatar.RootProvider>
     </>
   )

packages/svelte/.storybook/main.css

@@ -0,0 +1,36 @@
+@import url("./styles/accordion.css");
+@import url("./styles/avatar.css");
+@import url("./styles/carousel.css");
+@import url("./styles/checkbox.css");
+@import url("./styles/collapsible.css");
+@import url("./styles/color-picker.css");
+@import url("./styles/combobox.css");
+@import url("./styles/date-picker.css");
+@import url("./styles/dialog.css");
+@import url("./styles/field.css");
+@import url("./styles/file-upload.css");
+@import url("./styles/hover-card.css");
+@import url("./styles/menu.css");
+@import url("./styles/number-input.css");
+@import url("./styles/pagination.css");
+@import url("./styles/pin-input.css");
+@import url("./styles/popover.css");
+@import url("./styles/presence.css");
+@import url("./styles/progress.css");
+@import url("./styles/qr-code.css");
+@import url("./styles/radio-group.css");
+@import url("./styles/segment-group.css");
+@import url("./styles/select.css");
+@import url("./styles/signature-pad.css");
+@import url("./styles/slider.css");
+@import url("./styles/splitter.css");
+@import url("./styles/steps.css");
+@import url("./styles/switch.css");
+@import url("./styles/tabs.css");
+@import url("./styles/tags-input.css");
+@import url("./styles/time-picker.css");
+@import url("./styles/timer.css");
+@import url("./styles/toast.css");
+@import url("./styles/toggle-group.css");
+@import url("./styles/tooltip.css");
+@import url("./styles/tree-view.css");

packages/svelte/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/sveltekit'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  framework: '@storybook/sveltekit',
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: { backgrounds: false, controls: false, actions: false },
+    },
+    '@storybook/addon-a11y',
+  ],
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {
+    autodocs: false,
+  },
+}
+
+export default config

packages/svelte/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+import './main.css'
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
+    layout: 'padded',
+  },
+}
+
+export default preview

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

@@ -0,0 +1,53 @@
+@keyframes slideDown {
+  from {
+    opacity: 0.01;
+    height: 0;
+  }
+  to {
+    opacity: 1;
+    height: var(--height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    height: var(--height);
+  }
+  to {
+    opacity: 0.01;
+    height: 0;
+  }
+}
+
+
+[data-scope='accordion'][data-part='item-indicator'][data-state='open'] {
+  rotate: 90deg;
+}
+
+[data-scope='accordion'][data-part='item-trigger'] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+[data-scope='accordion'][data-part='item-trigger'] svg {
+  width: 1em;
+  height: 1em;
+}
+
+
+[data-scope="accordion"][data-part="item-content"] {
+  overflow: hidden;
+  max-width: 400px;
+  background-color: cadetblue;
+  color:white;
+}
+
+[data-scope="accordion"][data-part="item-content"][data-state="open"] {
+  animation: slideDown 250ms cubic-bezier(0, 0, 0.38, 0.9);
+}
+
+[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
+  animation: slideUp 200ms cubic-bezier(0, 0, 0.38, 0.9);
+}

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

@@ -0,0 +1,28 @@
+[data-scope='avatar'][data-part='root'] {
+  width: 80px;
+  height: 80px;
+  border-radius: 9999px;
+}
+
+[data-scope='avatar'][data-part='image'] {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+[data-scope='avatar'][data-part='fallback'] {
+  width: 80px;
+  height: 80px;
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 600;
+  color: white;
+  background-color: #777;
+}
+
+[data-scope='avatar'][data-part='fallback']:not([hidden]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,5 @@
+[data-scope='carousel'][data-part='viewport'] {
+  max-width: 600px;
+  margin-top: 40px;
+  overflow-x: hidden;
+}

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

@@ -0,0 +1,36 @@
+[data-scope='checkbox'][data-part='root'] {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+[data-scope='checkbox'][data-part='group'] {
+  display: flex;
+  gap: 24px;
+}
+
+[data-scope='checkbox'][data-part='control'] {
+  border: 2px solid;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+
+  &[data-invalid] {
+    border-color: red;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+  }
+}
+
+
+[data-scope='checkbox'][data-part='indicator']:not([hidden]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,38 @@
+
+@keyframes slideDown {
+    from {
+      opacity: 0.01;
+      height: 0;
+    }
+    to {
+      opacity: 1;
+      height: var(--height);
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 1;
+      height: var(--height);
+    }
+    to {
+      opacity: 0.01;
+      height: 0;
+    }
+  }
+
+  [data-scope="collapsible"][data-part="content"] {
+    overflow: hidden;
+    max-width: 400px;
+    background-color: cadetblue;
+    color:white;
+  }
+
+  [data-scope="collapsible"][data-part="content"][data-state="open"] {
+    animation: slideDown 250ms cubic-bezier(0, 0, 0.38, 0.9);
+  }
+
+  [data-scope="collapsible"][data-part="content"][data-state="closed"] {
+    animation: slideUp 200ms cubic-bezier(0, 0, 0.38, 0.9);
+  }
+

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

@@ -0,0 +1,81 @@
+[data-scope='color-picker'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+  max-width: 400px;
+}
+
+[data-scope='color-picker'][data-part='control'] {
+  display: flex;
+  gap: 4px;
+}
+
+[data-scope='color-picker'][data-part='content'] {
+  width: 260px;
+  box-sizing: border-box;
+  padding: 24px;
+  border: 1px solid #d5d5d5;
+  background: white;
+}
+
+[data-scope='color-picker'][data-part='value-text'] {
+  min-width: fit-content;
+}
+
+[data-scope='color-picker'][data-part='content']:not(:is([hidden])) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+[data-scope='color-picker'][data-part='area'] {
+  height: 200px;
+  border-radius: 4px;
+  border: 1px solid #ebebeb;
+}
+
+[data-scope='color-picker'][data-part='area-background'] {
+  background: rgb(142, 142, 142);
+  border-radius: 4px;
+  height: 200px;
+}
+
+[data-scope='color-picker'][data-part='area-thumb'],
+[data-scope='color-picker'][data-part='channel-slider-thumb'] {
+  border: 2px solid white;
+  border-radius: 9999px;
+  box-sizing: border-box;
+  transform: translate(-50%, -50%);
+  box-shadow:
+    black 0px 0px 0px 1px,
+    black 0px 0px 0px 1px inset;
+  width: 16px;
+  height: 16px;
+}
+
+[data-scope='color-picker'][data-part='channel-slider-track'] {
+  height: 20px;
+  border-radius: 4px;
+}
+
+[data-scope='color-picker'][data-part='channel-input'] {
+  border-radius: 4px;
+  width: 100%;
+  border: 1px solid #c2c2c2;
+}
+
+[data-scope='color-picker'][data-part='swatch-group'] {
+  display: flex;
+  gap: 8px;
+}
+
+[data-scope='color-picker'][data-part='swatch'] {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+[data-scope='color-picker'][data-part='transparency-grid'] {
+  border-radius: 4px;
+}