@youcan/celeste 0.6.3

package/src/components/switch/switch.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { SwitchRoot, type SwitchRootEmits, type SwitchRootProps, SwitchThumb, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<SwitchRootEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-switch', props.class)"
+  >
+    <SwitchThumb class="celeste-switch-thumb" />
+  </SwitchRoot>
+</template>
+
+<style lang="scss">
+.celeste-switch {
+  --switch-w: 26px;
+  --switch-h: 16px;
+  --animation-function: cubic-bezier(0.18, 0.89, 0.43, 1.19);
+
+  position: relative;
+  width: var(--switch-w);
+  height: var(--switch-h);
+  transition: background var(--animation-fast) ease-out;
+  border: 1px solid transparent;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-soft-200);
+  cursor: pointer;
+
+  .celeste-switch-thumb {
+    --switch-thumb-size: 12px;
+
+    position: absolute;
+    width: calc(var(--switch-thumb-size) / 3);
+    height: calc(var(--switch-thumb-size) / 3);
+    transform: translateY(-50%);
+    transition-property: inset-inline-start, width, height;
+    transition-duration: var(--animation-fast);
+    transition-timing-function: var(--animation-function), ease-out, ease-out;
+    border: calc(var(--switch-thumb-size) / 4) solid var(--color-static-white);
+    border-radius: var(--radius-full);
+    box-shadow: var(--shadow-toggle-switch);
+    inset-block-start: 50%;
+    inset-inline-start: 1px;
+
+    &[data-state='checked'] {
+      inset-inline-start: calc(100% - (var(--switch-thumb-size) - 1px));
+    }
+  }
+
+  &[aria-checked='true'] {
+    background-color: var(--color-primary-base);
+  }
+
+  &:disabled {
+    border-color: var(--color-stroke-soft-200);
+    background-color: var(--color-bg-white-0);
+    pointer-events: none;
+
+    .celeste-switch-thumb {
+      inset-inline-start: var(--spacing-2);
+      border-color: var(--color-bg-soft-200);
+      background-color: var(--color-bg-soft-200);
+      box-shadow: none;
+
+      &[data-state='checked'] {
+        inset-inline-start: calc(100% - var(--switch-thumb-size));
+      }
+    }
+  }
+
+  &:active:not(:disabled) .celeste-switch-thumb {
+    --switch-thumb-size: 10px;
+  }
+
+  &:hover:not(:active, :disabled) {
+    background-color: var(--color-bg-sub-300);
+
+    &[aria-checked='true'] {
+      background-color: var(--color-primary-darker);
+    }
+  }
+}
+</style>

package/src/components/tab-menu/index.ts

@@ -0,0 +1,11 @@
+export * from './tab-menu-content.vue';
+export { default as TabMenuContent } from './tab-menu-content.vue';
+
+export * from './tab-menu-item.vue';
+export { default as TabMenuItem } from './tab-menu-item.vue';
+
+export * from './tab-menu-list.vue';
+export { default as TabMenuList } from './tab-menu-list.vue';
+
+export * from './tab-menu.vue';
+export { default as TabMenu } from './tab-menu.vue';

package/src/components/tab-menu/stories/tab-menu.stories.ts

@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import HintText from '../../hint-text/hint-text.vue';
+import TabMenuContent from '../tab-menu-content.vue';
+import TabMenuItem from '../tab-menu-item.vue';
+import TabMenuList from '../tab-menu-list.vue';
+import TabMenu from '../tab-menu.vue';
+
+const meta: Meta<typeof TabMenu> = {
+  title: 'Components/Tab Menu',
+  component: TabMenu,
+  argTypes: {
+    orientation: {
+      control: { type: 'select' },
+      options: ['horizontal', 'vertical'],
+      description: 'The orientation of the tab menu',
+    },
+    defaultValue: {
+      control: 'text',
+      description: 'The default active tab',
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+    dir: 'ltr',
+    defaultValue: 'tab1',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabMenu>;
+
+export const Default: Story = {
+  render: args => ({
+    components: { TabMenu, TabMenuList, TabMenuItem, TabMenuContent, HintText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <TabMenu v-bind="args" style="width: 600px; margin: 0 auto;">
+        <TabMenuList>
+          <TabMenuItem value="tab1">
+            <template #prefix>
+              <i class="i-celeste-user-line" />
+            </template>
+            Profile Settings
+          </TabMenuItem>
+          <TabMenuItem value="tab2">
+            <template #prefix>
+              <i class="i-celeste-contacts-book-line" />
+            </template>
+            Contact Information
+          </TabMenuItem>
+          <TabMenuItem value="tab3">
+            <template #prefix>
+              <i class="i-celeste-settings-line" />
+            </template>
+            Preferences
+          </TabMenuItem>
+        </TabMenuList>
+        
+        <TabMenuContent value="tab1">
+          <div style="padding: 20px;">
+            <HintText text="Profile Settings tab content" />
+          </div>
+        </TabMenuContent>
+        <TabMenuContent value="tab2">
+          <div style="padding: 20px;">
+            <HintText text="Contact Information tab content" />
+          </div>
+        </TabMenuContent>
+        <TabMenuContent value="tab3">
+          <div style="padding: 20px;">
+            <HintText text="Preferences tab content" />
+          </div>
+        </TabMenuContent>
+      </TabMenu>
+    `,
+  }),
+};
+
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+    defaultValue: 'dashboard',
+  },
+  render: args => ({
+    components: { TabMenu, TabMenuList, TabMenuItem, TabMenuContent, HintText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <TabMenu v-bind="args" style="width: 500px; margin: 0 auto;">
+        <TabMenuList>
+          <TabMenuItem value="dashboard">
+            <template #prefix>
+              <i class="i-celeste-dashboard-line" />
+            </template>
+            Dashboard
+          </TabMenuItem>
+          <TabMenuItem value="analytics">
+            <template #prefix>
+              <i class="i-celeste-bar-chart-line" />
+            </template>
+            Analytics
+          </TabMenuItem>
+          <TabMenuItem value="reports">
+            <template #prefix>
+              <i class="i-celeste-file-chart-line" />
+            </template>
+            Reports
+          </TabMenuItem>
+        </TabMenuList>
+        
+        <TabMenuContent value="dashboard">
+          <div style="padding: 24px; text-align: center;">
+            <HintText text="Dashboard tab content" />
+          </div>
+        </TabMenuContent>
+        <TabMenuContent value="analytics">
+          <div style="padding: 24px; text-align: center;">
+            <HintText text="Detailed tab content" />
+          </div>
+        </TabMenuContent>
+        <TabMenuContent value="reports">
+          <div style="padding: 24px; text-align: center;">
+            <HintText text="Generated tab content" />
+          </div>
+        </TabMenuContent>
+      </TabMenu>
+    `,
+  }),
+};
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+    defaultValue: 'general',
+  },
+  render: args => ({
+    components: { TabMenu, TabMenuList, TabMenuItem, TabMenuContent, HintText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; height: 300px; width: 600px; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 8px;">
+        <TabMenu v-bind="args" style="flex: 1;">
+          <TabMenuList style="width: 240px; border-inline-end: 1px solid #e0e0e0;">
+            <TabMenuItem value="general">
+              <template #prefix>
+                <i class="i-celeste-settings-line" />
+              </template>
+              General
+            </TabMenuItem>
+            <TabMenuItem value="security">
+              <template #prefix>
+                <i class="i-celeste-shield-line" />
+              </template>
+              Security
+            </TabMenuItem>
+            <TabMenuItem value="notifications">
+              <template #prefix>
+                <i class="i-celeste-notification-line" />
+              </template>
+              Notifications
+            </TabMenuItem>
+          </TabMenuList>
+          
+          <TabMenuContent value="general" style="flex: 1;">
+            <div style="padding: 24px;">
+              <HintText text="General settings tab contents" />
+            </div>
+          </TabMenuContent>
+          <TabMenuContent value="security" style="flex: 1;">
+            <div style="padding: 24px;">
+              <HintText text="Security settings tab content" />
+            </div>
+          </TabMenuContent>
+          <TabMenuContent value="notifications" style="flex: 1;">
+            <div style="padding: 24px;">
+              <HintText text="Notification preferences tab content" />
+            </div>
+          </TabMenuContent>
+        </TabMenu>
+      </div>
+    `,
+  }),
+};
+
+export const IconsOnly: Story = {
+  args: {
+    orientation: 'vertical',
+    defaultValue: 'general',
+  },
+  render: args => ({
+    components: { TabMenu, TabMenuList, TabMenuItem, TabMenuContent, HintText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; flex-direction:row; height: 300px; width: 600px; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 8px;">
+        <TabMenu v-bind="args" style="flex: 1;">
+          <TabMenuList style="width: fit-content; border-inline-end: 1px solid #e0e0e0;">
+            <TabMenuItem value="general">
+              <template #prefix>
+                <i class="i-celeste-settings-line" />
+              </template>
+            </TabMenuItem>
+            <TabMenuItem value="security">
+              <template #prefix>
+                <i class="i-celeste-shield-line" />
+              </template>
+            </TabMenuItem>
+            <TabMenuItem value="notifications">
+              <template #prefix>
+                <i class="i-celeste-notification-line" />
+              </template>
+            </TabMenuItem>
+          </TabMenuList>
+          
+          <TabMenuContent value="general" style="flex: 1;">
+            <div style="padding: 24px;">
+              <HintText text="General settings tab contents" />
+            </div>
+          </TabMenuContent>
+          <TabMenuContent value="security" style="flex: 1;">
+            <div style="padding: 24px;">
+              <HintText text="Security settings tab content" />
+            </div>
+          </TabMenuContent>
+          <TabMenuContent value="notifications" style="flex: 1;">
+            <div style="padding: 24px;">
+              <HintText text="Notification preferences tab content" />
+            </div>
+          </TabMenuContent>
+        </TabMenu>
+      </div>
+    `,
+  }),
+};

package/src/components/tab-menu/tab-menu-content.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { TabsContent, type TabsContentProps } from 'radix-vue';
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <TabsContent
+    :class="clsx('celeste-tab-menu-content', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
+
+<style scoped>
+.celeste-tab-menu-content {
+  &[data-orientation='vertical'] {
+    flex: 1;
+  }
+}
+</style>

package/src/components/tab-menu/tab-menu-item.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="clsx(
+      'celeste-tab-menu-item',
+      props.class,
+    )"
+  >
+    <slot name="prefix" />
+    <span v-if="$slots.default" class="celeste-tab-menu-item-label">
+      <slot />
+    </span>
+    <slot name="postfix" />
+  </TabsTrigger>
+</template>
+
+<style scoped>
+.celeste-tab-menu-item {
+  --animation-function: cubic-bezier(0, 0, 0.2, 1);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: var(--spacing-8);
+  transition: all var(--animation-fast) var(--animation-function);
+  border: none;
+  border-radius: var(--radius-8);
+  color: var(--color-text-sub-600);
+  font-size: var(--font-size-10);
+  cursor: pointer;
+  gap: var(--spacing-6);
+
+  &:deep(i) {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &[data-orientation='horizontal'] {
+    position: relative;
+    padding-block: var(--spacing-14);
+    padding-inline: var(--spacing-0);
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      inset-inline: 0;
+      inset-block-end: 0;
+      width: 100%;
+      height: 2px;
+      transition: all var(--animation-fast) var(--animation-function);
+      background-color: transparent;
+    }
+  }
+
+  &[data-orientation='vertical'][data-state='active'] {
+    background-color: var(--color-bg-weak-50);
+  }
+
+  &[data-orientation='horizontal'][data-state='active'] {
+    background-color: var(--color-bg-white-0);
+
+    &::after {
+      background-color: var(--color-primary-base);
+    }
+  }
+
+  &[data-state='active'] {
+    &:deep(i) {
+      color: var(--color-primary-base);
+    }
+
+    span {
+      color: var(--color-text-strong-950);
+    }
+  }
+
+  &[data-state='inactive'] {
+    background-color: var(--color-bg-white-0);
+  }
+
+  .celeste-tab-menu-item-label {
+    flex: 1;
+    overflow: hidden;
+    font-size: var(--font-size-2);
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

package/src/components/tab-menu/tab-menu-list.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { TabsList, type TabsListProps } from 'radix-vue';
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>();
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="clsx(
+      'celeste-tab-menu-list',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
+
+<style scoped>
+.celeste-tab-menu-list {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: var(--spacing-10);
+  gap: var(--spacing-8);
+
+  &[data-orientation='horizontal'] {
+    flex-direction: row;
+    padding: var(--spacing-0);
+    border-block: 1px solid var(--color-stroke-soft-200);
+    gap: var(--spacing-16);
+  }
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+}
+</style>

package/src/components/tab-menu/tab-menu.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue';
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<TabsRootProps>();
+const emits = defineEmits<TabsRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded" class="celeste-tab-menu-root">
+    <slot />
+  </TabsRoot>
+</template>
+
+<style scoped>
+.celeste-tab-menu-root {
+  display: flex;
+
+  &[data-orientation='vertical'] {
+    flex-direction: row;
+  }
+
+  &[data-orientation='horizontal'] {
+    flex-direction: column;
+  }
+}
+</style>

package/src/components/text-input/index.ts

@@ -0,0 +1,11 @@
+export * from './text-input-affix.vue';
+export { default as TextInputAffix } from './text-input-affix.vue';
+
+export * from './text-input-button.vue';
+export { default as TextInputButton } from './text-input-button.vue';
+
+export * from './text-input-icon.vue';
+export { default as TextInputIcon } from './text-input-icon.vue';
+
+export * from './text-input.vue';
+export { default as TextInput } from './text-input.vue';