@youcan/celeste 0.6.3

package/src/components/select/select.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { SelectRoot, type SelectRootEmits, type SelectRootProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<SelectRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<SelectRootEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SelectRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-select', props.class)"
+  >
+    <slot />
+  </SelectRoot>
+</template>

package/src/components/select/stories/select.stories.ts

@@ -0,0 +1,428 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import SelectContent from '../select-content.vue';
+import SelectGroup from '../select-group.vue';
+import SelectIcon from '../select-icon.vue';
+import SelectItem from '../select-item.vue';
+import SelectLabel from '../select-label.vue';
+import SelectSeparator from '../select-separator.vue';
+import SelectTrigger from '../select-trigger.vue';
+import SelectValue from '../select-value.vue';
+import Select from '../select.vue';
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  args: {
+
+  },
+
+  render: args => ({
+    components: { Select, SelectValue, SelectTrigger, SelectSeparator, SelectLabel, SelectGroup, SelectItem, SelectIcon, SelectContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Select v-bind="args">
+        <SelectTrigger style="width: 300px;">
+          <SelectValue placeholder="Select your favorite fruit.." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="carrot">Carrot</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="broccoli">Broccoli</SelectItem>
+        </SelectContent>
+      </Select>
+    `,
+  }),
+};
+
+export const WithIcons: Story = {
+  args: {
+    defaultValue: 'utility',
+  },
+
+  render: args => ({
+    components: { Select, SelectValue, SelectTrigger, SelectSeparator, SelectLabel, SelectGroup, SelectItem, SelectIcon, SelectContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Select v-bind="args">
+        <SelectTrigger style="width: 300px;">
+          <SelectValue placeholder="Select your favorite fruit.." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="utility">
+            <SelectIcon>
+              <i class="i-celeste-flashlight-line" />
+            </SelectIcon>
+            Utility Payment
+          </SelectItem>
+          <SelectItem value="rent">
+            <SelectIcon>
+              <i class="i-celeste-home-4-line" />
+            </SelectIcon>
+            Rent Payment
+          </SelectItem>
+          <SelectItem value="donation">
+            <SelectIcon>
+              <i class="i-celeste-hand-coin-line" />
+            </SelectIcon>
+            Donation
+          </SelectItem>
+          <SelectItem value="tax">
+            <SelectIcon>
+              <i class="i-celeste-file-list-2-line" />
+            </SelectIcon>
+            Tax payment
+          </SelectItem>
+          <SelectItem value="tuition">
+            <SelectIcon>
+              <i class="i-celeste-building-line" />
+            </SelectIcon>
+            Tuition Fee
+          </SelectItem>
+          <SelectItem value="phone">
+            <SelectIcon>
+              <i class="i-celeste-smartphone-line" />
+            </SelectIcon>
+            Phone Bill
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    `,
+  }),
+};
+
+export const Size: Story = {
+  args: {
+    defaultValue: 'apple',
+  },
+
+  render: args => ({
+    components: { Select, SelectValue, SelectTrigger, SelectSeparator, SelectLabel, SelectGroup, SelectItem, SelectIcon, SelectContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 1em;">
+        <Select v-bind="args">
+          <SelectTrigger style="width: 300px;" size="md">
+            <SelectValue placeholder="Select your favorite fruit.." />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="carrot">Carrot</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="broccoli">Broccoli</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select v-bind="args">
+          <SelectTrigger style="width: 300px;" size="sm">
+            <SelectValue placeholder="Select your favorite fruit..">
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="carrot">Carrot</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="broccoli">Broccoli</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select v-bind="args">
+          <SelectTrigger style="width: 300px;" size="xs">
+            <SelectValue placeholder="Select your favorite fruit..">
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="carrot">Carrot</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="broccoli">Broccoli</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    `,
+  }),
+};
+
+export const Country: Story = {
+  args: {
+    disabled: true,
+  },
+
+  render: args => ({
+    components: { Select, SelectValue, SelectTrigger, SelectSeparator, SelectLabel, SelectGroup, SelectItem, SelectIcon, SelectContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Select v-bind="args">
+        <SelectTrigger style="width: 300px;">
+          <SelectIcon>
+            <i class="i-celeste-global-line" />
+          </SelectIcon>
+          <SelectValue placeholder="Select a country.." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="usa">
+            <SelectIcon>
+              <img 
+                style="object-fit: cover; clip-path: circle()" 
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Flag_of_the_United_States.png/1024px-Flag_of_the_United_States.png" alt="USA" />
+            </SelectIcon>
+            United States
+          </SelectItem>
+          <SelectItem value="germany">
+            <SelectIcon>
+              <img 
+                style="object-fit: cover; clip-path: circle()"
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/2560px-Flag_of_Germany.svg.png" alt="Germany" />
+            </SelectIcon>
+            Germany
+          </SelectItem>
+          <SelectItem value="france">
+            <SelectIcon>
+              <img
+                style="object-fit: cover; clip-path: circle()"
+                src="https://upload.wikimedia.org/wikipedia/commons/6/62/Flag_of_France.png" alt="France" />
+            </SelectIcon>
+            France
+          </SelectItem>
+          <SelectItem value="denmark">
+            <SelectIcon>
+              <img
+                style="object-fit: cover; clip-path: circle()"
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Flag_of_Denmark.svg/1280px-Flag_of_Denmark.svg.png" alt="Denmark" />
+            </SelectIcon>
+            Denmark
+          </SelectItem>
+          <SelectItem value="finland">
+            <SelectIcon>
+              <img
+                style="object-fit: cover; clip-path: circle()"
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Flag_of_Finland.svg/1800px-Flag_of_Finland.svg.png" alt="Finland" />
+            </SelectIcon>
+            Finland
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: 'apple',
+    disabled: true,
+  },
+
+  render: args => ({
+    components: { Select, SelectValue, SelectTrigger, SelectSeparator, SelectLabel, SelectGroup, SelectItem, SelectIcon, SelectContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 1em;">
+        <Select v-bind="args">
+          <SelectTrigger style="width: 300px;">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">Apple</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select v-bind="args">
+          <SelectTrigger style="width: 300px;">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">
+              <SelectIcon>
+                <i class="i-celeste-apple-line" />
+              </SelectIcon>
+              Apple
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <Select v-bind="args">
+          <SelectTrigger style="width: 300px;">
+            <SelectValue placeholder="Select your favorite fruit..">
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">
+              <SelectIcon>
+                <img src="https://static.vecteezy.com/system/resources/previews/023/271/623/non_2x/3d-red-apple-with-green-leaf-free-png.png" alt="Apple" />
+              </SelectIcon>
+              Apple
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    `,
+  }),
+};
+
+export const Compact: Story = {
+  args: {
+    defaultValue: '5',
+  },
+
+  render: args => ({
+    components: { Select, SelectValue, SelectTrigger, SelectSeparator, SelectLabel, SelectGroup, SelectItem, SelectIcon, SelectContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Select v-bind="args">
+        <SelectTrigger variant="compact">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent align="center">
+          <SelectItem value="5">5</SelectItem>
+          <SelectItem value="25">25</SelectItem>
+          <SelectItem value="50">50</SelectItem>
+          <SelectItem value="100">100</SelectItem>
+        </SelectContent>
+      </Select>
+    `,
+  }),
+};
+
+export const Inline: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { Select, SelectValue, SelectTrigger, SelectSeparator, SelectLabel, SelectGroup, SelectItem, SelectIcon, SelectContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Select v-bind="args">
+        <SelectTrigger variant="inline">
+          <SelectIcon>
+            <i class="i-celeste-global-line" />
+          </SelectIcon>
+          <SelectValue placeholder="Select" />
+        </SelectTrigger>
+        <SelectContent align="center" width="fit">
+          <SelectItem value="usa">
+            <SelectIcon>
+              <img
+                style="object-fit: cover; clip-path: circle()"
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Flag_of_the_United_States.png/1024px-Flag_of_the_United_States.png" alt="USA" />
+            </SelectIcon>
+            US
+          </SelectItem>
+          <SelectItem value="germany">
+            <SelectIcon>
+              <img 
+                style="object-fit: cover; clip-path: circle()"
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/2560px-Flag_of_Germany.svg.png" alt="Germany" />
+            </SelectIcon>
+            DE
+          </SelectItem>
+          <SelectItem value="france" disabled>
+            <SelectIcon>
+              <img 
+                style="object-fit: cover; clip-path: circle()"
+                src="https://upload.wikimedia.org/wikipedia/commons/6/62/Flag_of_France.png" alt="France" />
+            </SelectIcon>
+            FR
+          </SelectItem>
+          <SelectItem value="denmark">
+            <SelectIcon>
+              <img 
+                style="object-fit: cover; clip-path: circle()"
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Flag_of_Denmark.svg/1280px-Flag_of_Denmark.svg.png" alt="Denmark" />
+            </SelectIcon>
+            DK
+          </SelectItem>
+          <SelectItem value="finland">
+            <SelectIcon>
+              <img 
+                style="object-fit: cover; clip-path: circle()"
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Flag_of_Finland.svg/1800px-Flag_of_Finland.svg.png" alt="Finland" />
+            </SelectIcon>
+            FI
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    `,
+  }),
+};
+
+export const Group: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { Select, SelectValue, SelectTrigger, SelectSeparator, SelectLabel, SelectGroup, SelectItem, SelectIcon, SelectContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Select v-bind="args">
+        <SelectTrigger style="width: 300px;">
+          <SelectValue placeholder="Select a fruit.." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="blueberry">Blueberry</SelectItem>
+            <SelectItem value="grapes">Grapes</SelectItem>
+            <SelectItem value="pineapple">Pineapple</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Vegetables</SelectLabel>
+            <SelectItem value="aubergine">Aubergine</SelectItem>
+            <SelectItem value="broccoli">Broccoli</SelectItem>
+            <SelectItem value="carrot">Carrot</SelectItem>
+            <SelectItem value="courgette" disabled>Courgette</SelectItem>
+            <SelectItem value="leek">Leek</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    `,
+  }),
+};
+
+export const HasError: Story = {
+  args: {
+
+  },
+
+  render: args => ({
+    components: { Select, SelectValue, SelectTrigger, SelectSeparator, SelectLabel, SelectGroup, SelectItem, SelectIcon, SelectContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Select v-bind="args">
+        <SelectTrigger style="width: 300px;" has-error>
+          <SelectValue placeholder="Select your favorite fruit..">
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="carrot">Carrot</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="broccoli">Broccoli</SelectItem>
+        </SelectContent>
+      </Select>
+    `,
+  }),
+};

package/src/components/slider/index.ts

@@ -0,0 +1,2 @@
+export * from './slider.vue';
+export { default as Slider } from './slider.vue';

package/src/components/slider/slider.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { SliderRange, SliderRoot, type SliderRootEmits, type SliderRootProps, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<Omit<SliderRootProps, 'orientation'> & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<SliderRootEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-slider', props.class)"
+  >
+    <SliderTrack class="celeste-slider-track">
+      <SliderRange class="celeste-slider-range" />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="celeste-slider-thumb"
+    />
+  </SliderRoot>
+</template>
+
+<style lang="scss">
+.celeste-slider {
+  display: flex;
+  position: relative;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+
+  .celeste-slider-track {
+    position: relative;
+    flex-grow: 1;
+    width: 100%;
+    height: 6px;
+    overflow: hidden;
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-soft-200);
+
+    .celeste-slider-range {
+      position: absolute;
+      height: 100%;
+      border-radius: var(--radius-full) 0 0 var(--radius-full);
+      background-color: var(--color-primary-base);
+    }
+  }
+
+  .celeste-slider-thumb {
+    display: block;
+    width: 6px;
+    height: 6px;
+    border: 5px solid var(--color-static-white);
+    border-radius: var(--radius-full);
+    outline: none;
+    background: var(--color-primary-base) content-box;
+    cursor: pointer;
+    filter: drop-shadow(0 2px 4px rgb(14 18 27 / 3%)) drop-shadow(0 6px 10px rgb(14 18 27 / 6%));
+
+    &[style*='left: calc(0%'],
+    &[style*='right: calc(0%'] {
+      background-color: var(--color-bg-soft-200);
+    }
+
+    &:hover {
+      cursor: grab;
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+</style>

package/src/components/slider/stories/slider.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import Slider from '../slider.vue';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Slider',
+  component: Slider,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    max: 100,
+    step: 1,
+  },
+
+  render: args => ({
+    components: { Slider },
+    setup() {
+      const value = ref([50]);
+      return { args, value };
+    },
+    template: `
+      <Slider v-model="value" v-bind="args" />
+    `,
+  }),
+};

package/src/components/switch/index.ts

@@ -0,0 +1,2 @@
+export * from './switch.vue';
+export { default as Switch } from './switch.vue';

package/src/components/switch/stories/switch.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Switch from '../switch.vue';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  args: {
+    defaultChecked: true,
+  },
+
+  render: args => ({
+    components: { Switch },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Switch v-bind="args" />
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+
+  render: args => ({
+    components: { Switch },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Switch v-bind="args" />
+    `,
+  }),
+};
+
+export const WithLabel: Story = {
+  args: {},
+
+  render: args => ({
+    components: { Switch },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 1em;">
+        <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+          <Switch v-bind="args" :default-checked="true" />
+          SMS Verification
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+          <Switch v-bind="args" />
+          Authenticator App
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+          <Switch v-bind="args" disabled />
+          Disabled
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+          <Switch v-bind="args" :default-checked="true" disabled />
+          Disabled but default checked
+        </label>
+      </div>
+    `,
+  }),
+};