@youcan/celeste 0.6.57 → 0.6.60

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>

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

@@ -0,0 +1,28 @@
+<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"
+    :class="clsx('celeste-sidebar-group', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="css">
+.celeste-sidebar-group {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  padding: var(--spacing-10);
+}
+</style>

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

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

package/src/components/sidebar/sidebar-menu-action.vue

@@ -0,0 +1,118 @@
+<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<SidebarMenuActionProps>(), {
+  as: 'button',
+});
+</script>
+
+<script lang="ts">
+export interface SidebarMenuActionProps extends PrimitiveProps {
+  showOnHover?: boolean;
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-action"
+    :class="clsx(
+      'celeste-sidebar-menu-action',
+      showOnHover && 'celeste-sidebar-menu-action-show-on-hover',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-action {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  padding: 0;
+  transition: transform var(--animation-fast) ease-in-out;
+  border-radius: var(--radius-8);
+  outline: none;
+  color: var(--sidebar-foreground);
+  inset-inline-end: var(--spacing-4);
+  inset-block-start: var(--spacing-8);
+  aspect-ratio: 1;
+}
+
+.celeste-sidebar-menu-sub-item > .celeste-sidebar-menu-action {
+  inset-block-start: var(--spacing-6);
+}
+
+.celeste-sidebar-menu-action::after {
+  content: '';
+  position: absolute;
+  inset: -8px;
+}
+
+@media (width >= 768px) {
+  .celeste-sidebar-menu-action::after {
+    display: none;
+  }
+}
+
+.celeste-sidebar-menu-action:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-action:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.celeste-sidebar-menu-action :is(svg, i) {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  transition: transform var(--animation-extra-fast) ease-out;
+}
+
+.celeste-sidebar-menu-action:dir(rtl) :is(svg, i) {
+  transform: rotate(180deg);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-action {
+  display: none;
+}
+
+.celeste-sidebar-menu-button:hover ~ .celeste-sidebar-menu-action {
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-button[data-state='open'] + .celeste-sidebar-menu-action :is(svg, i) {
+  transform: rotate(90deg);
+}
+
+.celeste-sidebar-menu-action-show-on-hover {
+  opacity: 0;
+}
+
+@media (width >= 768px) {
+  .celeste-sidebar-menu-action-show-on-hover {
+    opacity: 0;
+  }
+}
+
+.celeste-sidebar-menu-item:focus-within .celeste-sidebar-menu-action-show-on-hover,
+.celeste-sidebar-menu-item:hover .celeste-sidebar-menu-action-show-on-hover,
+.celeste-sidebar-menu-action-show-on-hover[data-state='open'] {
+  opacity: 1;
+}
+
+.celeste-sidebar-menu-button[data-active='true'] ~ .celeste-sidebar-menu-action-show-on-hover {
+  color: var(--sidebar-accent-foreground);
+}
+</style>