@youcan/celeste 0.6.59 → 0.6.61

package/src/components/sheet/sheet-content.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import CompactButton from '@/components/button/compact-button.vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: 'right',
+});
+
+const emits = defineEmits<DialogContentEmits>();
+
+const delegated = reactiveOmit(props, 'class', 'side');
+const forwarded = useForwardPropsEmits(delegated, emits);
+</script>
+
+<script lang="ts">
+export interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class'];
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay class="celeste-sheet-overlay" />
+    <DialogContent
+      :class="clsx('celeste-sheet-content', `celeste-sheet-side-${side}`, props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose as-child class="celeste-sheet-close">
+        <CompactButton
+          size="lg"
+          variant="ghost"
+          icon="i-celeste-close-line"
+        />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
+
+<style scoped lang="css">
+.celeste-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 80%);
+}
+
+.celeste-sheet-overlay[data-state='open'] {
+  animation: celeste-fade-in var(--animation-fast) ease-in;
+}
+
+.celeste-sheet-overlay[data-state='closed'] {
+  animation: celeste-fade-out var(--animation-fast) ease-out;
+}
+
+.celeste-sheet-content {
+  position: fixed;
+  z-index: 50;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-lg);
+  gap: var(--spacing-16);
+}
+
+.celeste-sheet-side-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  border-bottom: 1px solid var(--color-stroke-soft-200);
+}
+
+.celeste-sheet-side-top[data-state='open'] {
+  animation: celeste-slide-in-from-top var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-top[data-state='closed'] {
+  animation: celeste-slide-out-to-top var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-bottom {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid var(--color-stroke-soft-200);
+}
+
+.celeste-sheet-side-bottom[data-state='open'] {
+  animation: celeste-slide-in-from-bottom var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-bottom[data-state='closed'] {
+  animation: celeste-slide-out-to-bottom var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  border-right: 1px solid var(--color-stroke-soft-200);
+}
+
+.celeste-sheet-side-left[data-state='open'] {
+  animation: celeste-slide-in-from-left var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-left[data-state='closed'] {
+  animation: celeste-slide-out-to-left var(--animation-fast) ease-in-out;
+}
+
+@media (width >= 640px) {
+  .celeste-sheet-side-left {
+    max-width: 384px;
+  }
+}
+
+.celeste-sheet-side-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  border-left: 1px solid var(--color-stroke-soft-200);
+}
+
+.celeste-sheet-side-right[data-state='open'] {
+  animation: celeste-slide-in-from-right var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-right[data-state='closed'] {
+  animation: celeste-slide-out-to-right var(--animation-fast) ease-in-out;
+}
+
+@media (width >= 640px) {
+  .celeste-sheet-side-right {
+    max-width: 384px;
+  }
+}
+
+.celeste-sheet-close {
+  position: absolute;
+  inset-inline-end: var(--spacing-16);
+  inset-block-start: var(--spacing-16);
+}
+
+.celeste-sheet-close[data-state='open'] {
+  background-color: var(--color-bg-weak-50);
+}
+</style>

package/src/components/sheet/sheet-description.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { DialogDescription } from 'radix-vue';
+
+const props = defineProps<SheetDescriptionProps>();
+
+const delegated = reactiveOmit(props, 'class');
+</script>
+
+<script lang="ts">
+export interface SheetDescriptionProps extends DialogDescriptionProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <DialogDescription
+    :class="clsx('celeste-sheet-description', props.class)"
+    v-bind="delegated"
+  >
+    <slot />
+  </DialogDescription>
+</template>
+
+<style scoped lang="scss">
+.celeste-sheet-description {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-sm);
+}
+</style>

package/src/components/sheet/sheet-footer.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<SheetFooterProps>();
+</script>
+
+<script lang="ts">
+export interface SheetFooterProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <div
+    :class="
+      clsx(
+        'celeste-sheet-footer',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-sheet-footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--spacing-8);
+}
+
+@media (width >= 640px) {
+  .celeste-sheet-footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+</style>

package/src/components/sheet/sheet-header.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<SheetHeaderProps>();
+</script>
+
+<script lang="ts">
+export interface SheetHeaderProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <div
+    :class="clsx('celeste-sheet-header', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-sheet-header {
+  display: flex;
+  flex-direction: column;
+  font: var(--label-md);
+  row-gap: var(--spacing-2);
+  text-align: center;
+}
+
+@media (width >= 640px) {
+  .celeste-sheet-header {
+    text-align: start;
+  }
+}
+</style>

package/src/components/sheet/sheet-title.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { DialogTitle } from 'radix-vue';
+
+const props = defineProps<SheetTitleProps>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<script lang="ts">
+export interface SheetTitleProps extends DialogTitleProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <DialogTitle
+    :class="clsx('celeste-sheet-title', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
+
+<style scoped>
+.celeste-sheet-title {
+  color: var(--color-text-strong-950);
+  font: var(--label-md);
+}
+</style>

package/src/components/sheet/sheet-trigger.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'radix-vue';
+import { DialogTrigger } from 'radix-vue';
+
+const props = defineProps<SheetTriggerProps>();
+</script>
+
+<script lang="ts">
+export interface SheetTriggerProps extends DialogTriggerProps {}
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

package/src/components/sheet/sheet.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

package/src/components/sheet/stories/sheet.stories.ts

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Button from '@/components/button/button.vue';
+import ContentDivider from '@/components/content-divider/content-divider.vue';
+import Label from '@/components/label/label.vue';
+import TextInput from '@/components/text-input/text-input.vue';
+import SheetClose from '../sheet-close.vue';
+import SheetContent from '../sheet-content.vue';
+import SheetDescription from '../sheet-description.vue';
+import SheetFooter from '../sheet-footer.vue';
+import SheetHeader from '../sheet-header.vue';
+import SheetTitle from '../sheet-title.vue';
+import SheetTrigger from '../sheet-trigger.vue';
+import Sheet from '../sheet.vue';
+
+const meta: Meta<typeof Sheet> = {
+  title: 'Components/Sheet',
+  component: Sheet,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sheet>;
+
+export const Default: Story = {
+  args: {},
+
+  render: args => ({
+    components: {
+      Sheet,
+      SheetTrigger,
+      SheetContent,
+      SheetHeader,
+      SheetTitle,
+      SheetDescription,
+      SheetFooter,
+      SheetClose,
+      Button,
+      Label,
+      TextInput,
+      ContentDivider,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Sheet v-bind="args">
+        <SheetTrigger as-child>
+          <Button variant="stroke" intent="neutral">
+            <i class="i-celeste-user-settings-line" />
+            Edit Profile
+          </Button>
+        </SheetTrigger>
+        <SheetContent>
+        
+          <SheetHeader>
+            <SheetTitle>Edit Profile</SheetTitle>
+            <SheetDescription>
+              Make changes to your profile here. Click save when you're done.
+            </SheetDescription>
+          </SheetHeader>
+          
+          <ContentDivider />
+          
+          <div style="display: grid; gap: 16px; margin-top: 16px;">
+            <div>
+              <Label style="margin-bottom: 4px;">Name</Label>
+              <TextInput placeholder="Dara" />
+            </div>
+            <div>
+              <Label style="margin-bottom: 4px;">Email</Label>
+              <TextInput type="email" placeholder="dara-@outlook.jp" />
+            </div>
+          </div>
+
+          
+          <SheetFooter style="margin-top: 16px;">
+            <SheetClose as-child>
+              <Button intent="neutral" variant="stroke">Cancel</Button>
+            </SheetClose>
+            <SheetClose as-child>
+              <Button>Save changes</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    `,
+  }),
+};

package/src/components/sidebar/index.ts

@@ -0,0 +1,38 @@
+export { default as SidebarContent } from './sidebar-content.vue';
+export * from './sidebar-content.vue';
+export { default as SidebarElement } from './sidebar-element.vue';
+export * from './sidebar-element.vue';
+export { default as SidebarFooter } from './sidebar-footer.vue';
+export * from './sidebar-footer.vue';
+export { default as SidebarGroupContent } from './sidebar-group-content.vue';
+export * from './sidebar-group-content.vue';
+export { default as SidebarGroupLabel } from './sidebar-group-label.vue';
+export * from './sidebar-group-label.vue';
+export { default as SidebarGroup } from './sidebar-group.vue';
+export * from './sidebar-group.vue';
+export { default as SidebarHeader } from './sidebar-header.vue';
+export * from './sidebar-header.vue';
+export { default as SidebarMenuAction } from './sidebar-menu-action.vue';
+export * from './sidebar-menu-action.vue';
+export { default as SidebarMenuBadge } from './sidebar-menu-badge.vue';
+export * from './sidebar-menu-badge.vue';
+export { default as SidebarMenuButton } from './sidebar-menu-button.vue';
+export * from './sidebar-menu-button.vue';
+export { default as SidebarMenuItem } from './sidebar-menu-item.vue';
+export * from './sidebar-menu-item.vue';
+export { default as SidebarMenuSubButton } from './sidebar-menu-sub-button.vue';
+export * from './sidebar-menu-sub-button.vue';
+export { default as SidebarMenuSubItem } from './sidebar-menu-sub-item.vue';
+export * from './sidebar-menu-sub-item.vue';
+export { default as SidebarMenuSub } from './sidebar-menu-sub.vue';
+export * from './sidebar-menu-sub.vue';
+export { default as SidebarMenu } from './sidebar-menu.vue';
+export * from './sidebar-menu.vue';
+export { default as SidebarProvider } from './sidebar-provider.vue';
+export * from './sidebar-provider.vue';
+export { default as SidebarSeparator } from './sidebar-separator.vue';
+export * from './sidebar-separator.vue';
+export { default as SidebarTrigger } from './sidebar-trigger.vue';
+export * from './sidebar-trigger.vue';
+export { default as Sidebar } from './sidebar.vue';
+export * from './sidebar.vue';

package/src/components/sidebar/sidebar-content.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-sidebar="content"
+    :class="clsx('celeste-sidebar-content', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="css">
+.celeste-sidebar-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  gap: var(--spacing-8);
+  overflow: auto;
+}
+
+[data-collapsible='icon'] .celeste-sidebar-content {
+  overflow: hidden;
+}
+</style>

package/src/components/sidebar/sidebar-element.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive } from 'radix-vue';
+
+const props = withDefaults(defineProps<SidebarElementProps>(), {
+  as: 'div',
+});
+</script>
+
+<script lang="ts">
+export interface SidebarElementProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="element"
+    :class="clsx('celeste-sidebar-element', props.class)"
+    :as="as"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="css">
+.celeste-sidebar-element {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--spacing-8);
+  padding: var(--spacing-8);
+  transition: background-color var(--animation-fast);
+  border-radius: var(--radius-8);
+  outline: none;
+}
+
+.celeste-sidebar-element :is(svg, i) {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+}
+
+.celeste-sidebar-element > :is(span, div):not(:first-child) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celeste-sidebar-desktop[data-state='collapsed'][data-collapsible='icon'] .celeste-sidebar-element {
+  justify-content: center;
+  padding: var(--spacing-8) var(--spacing-4);
+}
+
+.celeste-sidebar-desktop[data-state='collapsed'][data-collapsible='icon']
+  .celeste-sidebar-element
+  > *:not(:first-child) {
+  display: none;
+}
+
+.celeste-sidebar-desktop[data-state='collapsed'][data-collapsible='icon'] .celeste-sidebar-element > *:first-child {
+  width: 18px;
+  height: 18px;
+}
+</style>

package/src/components/sidebar/sidebar-footer.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<SidebarFooterProps>();
+</script>
+
+<script lang="ts">
+export interface SidebarFooterProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <div
+    data-sidebar="footer"
+    :class="clsx('celeste-sidebar-footer', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="css">
+.celeste-sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-10);
+  gap: var(--spacing-8);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-footer {
+  padding: var(--spacing-8) var(--spacing-4);
+}
+</style>

package/src/components/sidebar/sidebar-group-content.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-sidebar="group-content"
+    :class="clsx('celeste-sidebar-group-content', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="css">
+.celeste-sidebar-group-content {
+  width: 100%;
+  font: var(--paragraph-sm);
+}
+</style>

package/src/components/sidebar/sidebar-group-label.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive } from 'radix-vue';
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="clsx('celeste-sidebar-group-label', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="css">
+.celeste-sidebar-group-label {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 32px;
+  padding-inline: var(--spacing-8);
+  transition:
+    margin var(--animation-fast) linear,
+    opacity var(--animation-fast) linear;
+  border-radius: var(--radius-8);
+  outline: none;
+  color: var(--color-text-soft-400);
+  font: var(--subheading-xs);
+  text-transform: uppercase;
+}
+
+.celeste-sidebar-group-label:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.celeste-sidebar-group-label svg,
+.celeste-sidebar-group-label i {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+}
+
+[data-collapsible='icon'] .celeste-sidebar-group-label {
+  margin-top: -32px;
+  opacity: 0;
+}
+</style>