@youcan/celeste 0.6.57 → 0.6.60

package/src/components/sidebar/sidebar.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { Sheet, SheetContent } from '@/components/sheet';
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from '@/composables/use-sidebar';
+import clsx from 'clsx';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  variant: 'sidebar',
+  collapsible: 'offcanvas',
+});
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+</script>
+
+<script lang="ts">
+export interface SidebarProps {
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <Sheet
+    v-if="isMobile"
+    :open="openMobile"
+    v-bind="$attrs"
+    @update:open="setOpenMobile"
+  >
+    <SheetContent
+      data-sidebar="sidebar"
+      data-mobile="true"
+      side="right"
+      class="celeste-sidebar-mobile"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <div class="celeste-sidebar-mobile-content">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="celeste-sidebar-desktop"
+    :data-state="collapsible === 'none' ? undefined : state"
+    :data-collapsible="state === 'collapsed' && collapsible !== 'none' ? collapsible : ''"
+    :data-variant="variant"
+  >
+    <div
+      :class="clsx(
+        'celeste-sidebar-gap',
+        `celeste-sidebar-gap-variant-${variant}`,
+      )"
+    />
+    <div
+      :class="clsx(
+        'celeste-sidebar-container',
+        `celeste-sidebar-container-variant-${variant}`,
+        collapsible === 'none' && 'celeste-sidebar-container-collapsible-none',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <div data-sidebar="sidebar" class="celeste-sidebar-inner">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="css">
+.celeste-sidebar-static {
+  display: flex;
+  position: sticky;
+  top: 0;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: var(--sidebar-width);
+  height: 100svh;
+  padding: var(--spacing-8);
+  overflow-y: auto;
+  background-color: var(--sidebar-background);
+  color: var(--sidebar-foreground);
+}
+
+.celeste-sidebar-mobile {
+  width: var(--sidebar-width);
+  padding: 0;
+  background-color: var(--sidebar-background);
+  color: var(--sidebar-foreground);
+}
+
+.celeste-sidebar-mobile > .celeste-sheet-close {
+  display: none;
+}
+
+.celeste-sidebar-mobile-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.celeste-sidebar-desktop {
+  display: none;
+}
+
+@media (width >= 768px) {
+  .celeste-sidebar-desktop {
+    display: block;
+  }
+}
+
+.celeste-sidebar-gap {
+  position: relative;
+  width: var(--sidebar-width);
+  height: 100svh;
+  transition: width var(--animation-fast) linear;
+  background-color: transparent;
+}
+
+.celeste-sidebar-desktop[data-collapsible='offcanvas'] .celeste-sidebar-gap {
+  width: 0;
+}
+
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-gap-variant-floating,
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-gap-variant-inset {
+  width: calc(var(--sidebar-width-icon) + 18px);
+}
+
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-gap-variant-sidebar {
+  width: var(--sidebar-width-icon);
+}
+
+.celeste-sidebar-container {
+  display: none;
+  position: fixed;
+  inset-block: 0;
+  z-index: 10;
+  width: var(--sidebar-width);
+  height: 100svh;
+  transition:
+    inset-inline-start var(--animation-fast) linear,
+    inset-inline-end var(--animation-fast) linear,
+    width var(--animation-fast) linear;
+}
+
+@media (width >= 768px) {
+  .celeste-sidebar-container {
+    display: flex;
+  }
+}
+
+.celeste-sidebar-desktop .celeste-sidebar-container-variant-sidebar {
+  border-inline-end: 1px solid var(--sidebar-border);
+}
+
+.celeste-sidebar-desktop[data-collapsible='offcanvas'] .celeste-sidebar-container-side-start {
+  inset-inline-start: calc(var(--sidebar-width) * -1);
+}
+
+.celeste-sidebar-desktop[data-collapsible='offcanvas'] .celeste-sidebar-container-side-end {
+  inset-inline-end: calc(var(--sidebar-width) * -1);
+}
+
+.celeste-sidebar-container-variant-floating,
+.celeste-sidebar-container-variant-inset {
+  padding: var(--spacing-8);
+}
+
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-container-variant-floating,
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-container-variant-inset {
+  width: calc(var(--sidebar-width-icon) + 18px + 2px);
+}
+
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-container-variant-sidebar {
+  width: var(--sidebar-width-icon);
+}
+
+.celeste-sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: var(--sidebar-background);
+  color: var(--sidebar-foreground);
+}
+
+.celeste-sidebar-desktop[data-variant='floating'] .celeste-sidebar-inner {
+  border: 1px solid var(--sidebar-border);
+  border-radius: var(--radius-8);
+  box-shadow: var(--shadow-regular-md);
+}
+</style>

package/src/components/sidebar/stories/sidebar.stories.ts

@@ -0,0 +1,358 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import CompactButton from '@/components/button/compact-button.vue';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/collapsible';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/dropdown-menu';
+import SidebarMenuBadge from '@/components/sidebar/sidebar-menu-badge.vue';
+import { ref } from 'vue';
+import { Sidebar, SidebarContent, SidebarElement, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarSeparator, SidebarTrigger } from '..';
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Components/Sidebar',
+  component: Sidebar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sidebar>;
+
+export const Simple: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+
+  args: {},
+
+  render: args => ({
+    components: {
+      CompactButton,
+      Collapsible,
+      CollapsibleContent,
+      CollapsibleTrigger,
+      DropdownMenu,
+      DropdownMenuContent,
+      DropdownMenuGroup,
+      DropdownMenuItem,
+      DropdownMenuLabel,
+      DropdownMenuSeparator,
+      DropdownMenuTrigger,
+      Sidebar,
+      SidebarContent,
+      SidebarElement,
+      SidebarFooter,
+      SidebarGroup,
+      SidebarGroupLabel,
+      SidebarHeader,
+      SidebarMenu,
+      SidebarMenuAction,
+      SidebarMenuButton,
+      SidebarMenuItem,
+      SidebarMenuSub,
+      SidebarMenuSubButton,
+      SidebarMenuSubItem,
+      SidebarProvider,
+      SidebarSeparator,
+      SidebarMenuBadge,
+      SidebarTrigger,
+    },
+    setup() {
+      // Track which items are expanded
+      const expandedItems = ref<Record<string, boolean>>({
+        Orders: true,
+        Products: false,
+        Upsells: false,
+        Coupons: false,
+        Customers: false,
+        Store: true,
+        Insights: false,
+        Invoices: false,
+      });
+
+      const sidebarItems = [
+        {
+          title: 'Dashboard',
+          link: '#',
+          icon: 'i-celeste-dashboard-line',
+        },
+        {
+          title: 'Orders',
+          link: '#',
+          icon: 'i-celeste-shopping-bag-line',
+          children: [
+            { title: 'All orders', link: '#' },
+            { title: 'New order', link: '#' },
+            { title: 'Abandoned carts', link: '#' },
+          ],
+        },
+        {
+          title: 'Products',
+          link: '#',
+          icon: 'i-celeste-shopping-cart-line',
+          children: [
+            { title: 'All products', link: '#' },
+            { title: 'New product', link: '#' },
+            { title: 'Categories', link: '#' },
+            { title: 'Reviews', link: '#' },
+            { title: 'Inventory', link: '#' },
+          ],
+        },
+        {
+          title: 'Upsells',
+          link: '#',
+          icon: 'i-celeste-arrow-up-line',
+          children: [
+            { title: 'All upsells', link: '#' },
+            { title: 'New upsell', link: '#' },
+          ],
+        },
+        {
+          title: 'Coupons',
+          link: '#',
+          icon: 'i-celeste-coupon-line',
+          children: [
+            { title: 'All coupons', link: '#' },
+            { title: 'New coupon', link: '#' },
+          ],
+        },
+        {
+          title: 'Customers',
+          link: '#',
+          icon: 'i-celeste-group-line',
+          children: [
+            { title: 'All customers', link: '#' },
+            { title: 'New customer', link: '#' },
+          ],
+        },
+        {
+          title: 'Store',
+          link: '#',
+          icon: 'i-celeste-store-line',
+          children: [
+            { title: 'Theme', link: '#' },
+            { title: 'Themes', link: '#' },
+            { title: 'Menus', link: '#' },
+            { title: 'Languages', link: '#' },
+            { title: 'Pages', link: '#' },
+            { title: 'Funnels', link: '#' },
+            { title: 'Domains', link: '#' },
+          ],
+        },
+        {
+          title: 'Insights',
+          link: '#',
+          icon: 'i-celeste-bar-chart-line',
+        },
+        {
+          title: 'Invoices',
+          link: '#',
+          icon: 'i-celeste-file-list-line',
+        },
+        {
+          title: 'Apps',
+          link: '#',
+          icon: 'i-celeste-apps-line',
+        },
+      ];
+
+      const footerItems = [
+        {
+          title: 'Affiliate',
+          link: '#',
+          icon: 'i-celeste-service-line',
+        },
+        {
+          title: 'Support',
+          link: '#',
+          icon: 'i-celeste-question-line',
+        },
+        {
+          title: 'Settings',
+          link: '#',
+          icon: 'i-celeste-settings-line',
+        },
+      ];
+
+      return {
+        expandedItems,
+        sidebarItems,
+        footerItems,
+        args,
+      };
+    },
+    template: `
+      <SidebarProvider>
+        <Sidebar collapsible="icon" side="end" v-bind="args">
+          <SidebarHeader>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarElement>
+                  <i class="i-celeste-apps-line" />
+                  <div class="flex flex-col">
+                    <div style="color: var(--color-text-strong-950);font: var(--label-sm)">
+                      Ageeba
+                    </div>
+                    <div style="color: var(--color-text-sub-600);font: var(--paragraph-xs)">
+                      ageeba.dotshop.com
+                    </div>
+                  </div>
+                  <CompactButton
+                    style="margin-inline-start: auto;"
+                    variant="stroke"
+                    size="md"
+                    icon="i-celeste-expand-up-down-line"
+                  />
+                </SidebarElement>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>Stores</DropdownMenuLabel>
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    Dotshop
+                    <template #prefix>
+                      <i class="i-celeste-building-line" />
+                    </template>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    Dawg
+                    <template #prefix>
+                      <i class="i-celeste-building-line" />
+                    </template>
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  Create a new store
+                  <template #prefix>
+                    <i class="i-celeste-add-line" />
+                  </template>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarHeader>
+
+          <SidebarSeparator />
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Application</SidebarGroupLabel>
+              <SidebarMenu>
+                <template v-for="item in sidebarItems" :key="item.title">
+                  <SidebarMenuItem v-if="!item.children">
+                    <SidebarMenuButton
+                      as="a"
+                      :href="item.link"
+                    >
+                      <i :class="item.icon" />
+                      <span>{{ item.title }}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <Collapsible
+                    v-else
+                    v-model:open="expandedItems[item.title]"
+                    as-child
+                  >
+                    <SidebarMenuItem>
+                      <CollapsibleTrigger as-child>
+                        <SidebarMenuButton :is-active="item.title === 'Store'">
+                          <i :class="item.icon" />
+                          <span>{{ item.title }}</span>
+                          </SidebarMenuButton>
+                          <SidebarMenuBadge size="sm" v-if="item.title === 'Store'" label="New" state="information" />
+                      </CollapsibleTrigger>
+                      <SidebarMenuAction>
+                        <i class="i-celeste-arrow-right-s-line"/>
+                      </SidebarMenuAction>
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          <SidebarMenuSubItem v-for="child in item.children" :key="child.title">
+                            <SidebarMenuSubButton
+                              as="a"
+                              :href="child.link"
+                              :is-active="child.title === 'Themes'"
+                            >
+                              <span>{{ child.title }}</span>
+                              </SidebarMenuSubButton>
+                              <SidebarMenuBadge size="sm" v-if="child.title === 'Themes'" label="New" state="information" />
+                          </SidebarMenuSubItem>
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                </template>
+              </SidebarMenu>
+            </SidebarGroup>
+            <SidebarGroup style="margin-block-start: auto;">
+              <SidebarGroupLabel>Other</SidebarGroupLabel>
+              <SidebarMenu>
+                <template v-for="item in footerItems" :key="item.title">
+                  <SidebarMenuButton
+                    as="a"
+                    :href="item.link"
+                  >
+                    <i :class="item.icon" />
+                    <span>{{ item.title }}</span>
+                  </SidebarMenuButton>
+                </template>
+              </SidebarMenu>
+            </SidebarGroup>
+          </SidebarContent>
+
+          <SidebarSeparator />
+
+          <SidebarFooter>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarElement>
+                  <i class="i-celeste-user-line" />
+                  <div class="flex flex-col">
+                    <div style="color: var(--color-text-strong-950);font: var(--label-sm)">
+                      Dara
+                    </div>
+                  </div>
+                  <CompactButton
+                    style="margin-inline-start: auto;"
+                    variant="stroke"
+                    size="md"
+                    icon="i-celeste-more-2-fill"
+                  />
+                </SidebarElement>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    Profile
+                    <template #prefix>
+                      <i class="i-celeste-user-line" />
+                    </template>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    Settings
+                    <template #prefix>
+                      <i class="i-celeste-settings-line" />
+                    </template>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    Billing
+                    <template #prefix>
+                      <i class="i-celeste-bank-card-line" />
+                    </template>
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  Log out
+                  <template #prefix>
+                    <i class="i-celeste-logout-box-line" />
+                  </template>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarFooter>
+        </Sidebar>
+
+        <div style="padding: 24px;">
+          <SidebarTrigger />
+        <div>
+      </SidebarProvider>
+    `,
+  }),
+};

package/src/components/switch/switch.vue

@@ -22,47 +22,65 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <style lang="scss">
 .celeste-switch {
-  --switch-w: 26px;
-  --switch-h: 16px;
+  --width: 26px;
+  --height: 16px;
+  --bg-color: var(--color-bg-soft-200);
   --animation-function: cubic-bezier(0.18, 0.89, 0.43, 1.19);
 
   position: relative;
-  width: var(--switch-w);
-  height: var(--switch-h);
+  width: var(--width);
+  height: var(--height);
   transition: background var(--animation-fast) ease-out;
   border: 1px solid transparent;
   border-radius: var(--radius-full);
-  background-color: var(--color-bg-soft-200);
+  background-color: var(--bg-color);
   cursor: pointer;
 
   .celeste-switch-thumb {
-    --switch-thumb-size: 12px;
+    --thumb-size: 12px;
+    --thumb-hole: 4px;
 
     position: absolute;
-    width: calc(var(--switch-thumb-size) / 3);
-    height: calc(var(--switch-thumb-size) / 3);
+    box-sizing: border-box;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
     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);
+    background-color: var(--color-static-white);
     box-shadow: var(--shadow-toggle-switch);
     inset-block-start: 50%;
     inset-inline-start: 1px;
+    will-change: transform;
 
     &[data-state='checked'] {
-      inset-inline-start: calc(100% - (var(--switch-thumb-size) - 1px));
+      inset-inline-start: calc(100% - var(--thumb-size) - 1px);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: var(--thumb-hole);
+      height: var(--thumb-hole);
+      margin: auto;
+      transition: background var(--animation-fast) ease-out;
+      border-radius: var(--radius-full);
+      background-color: var(--bg-color);
+      inset: var(--spacing-0);
     }
   }
 
   &[aria-checked='true'] {
-    background-color: var(--color-primary-base);
+    --bg-color: var(--color-primary-base);
   }
 
   &:disabled {
+    --bg-color: var(--color-bg-white-0);
+
     border-color: var(--color-stroke-soft-200);
-    background-color: var(--color-bg-white-0);
+    background-color: var(--bg-color);
     pointer-events: none;
 
     .celeste-switch-thumb {
@@ -72,20 +90,20 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       box-shadow: none;
 
       &[data-state='checked'] {
-        inset-inline-start: calc(100% - var(--switch-thumb-size));
+        inset-inline-start: calc(100% - var(--thumb-size));
       }
     }
   }
 
   &:active:not(:disabled) .celeste-switch-thumb {
-    --switch-thumb-size: 10px;
+    --thumb-size: 10px;
   }
 
   &:hover:not(:active, :disabled) {
-    background-color: var(--color-bg-sub-300);
+    --bg-color: var(--color-bg-sub-300);
 
     &[aria-checked='true'] {
-      background-color: var(--color-primary-darker);
+      --bg-color: var(--color-primary-darker);
     }
   }
 }

package/src/components/tooltip/index.ts

@@ -1,2 +1,14 @@
+export * from './tooltip-content.vue';
+export { default as TooltipContent } from './tooltip-content.vue';
+
+export * from './tooltip-provider.vue';
+export { default as TooltipProvider } from './tooltip-provider.vue';
+
+export * from './tooltip-root.vue';
+export { default as TooltipRoot } from './tooltip-root.vue';
+
+export * from './tooltip-trigger.vue';
+export { default as TooltipTrigger } from './tooltip-trigger.vue';
+
 export * from './tooltip.vue';
 export { default as Tooltip } from './tooltip.vue';