@youcan/celeste 0.6.59 → 0.6.60

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>

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import Badge from '@/components/badge/badge.vue';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<SidebarMenuBadgeProps>(), {
+  variant: 'lighter',
+  state: 'faded',
+  size: 'sm',
+});
+</script>
+
+<script lang="ts">
+export interface SidebarMenuBadgeProps {
+  class?: HTMLAttributes['class'];
+  variant?: 'fill' | 'light' | 'lighter' | 'stroke';
+  state?: 'faded' | 'information' | 'warning' | 'error' | 'success' | 'away' | 'feature' | 'verified' | 'highlighted' | 'stable';
+  size?: 'sm' | 'md';
+  label?: string;
+}
+</script>
+
+<template>
+  <Badge
+    data-sidebar="menu-badge"
+    :class="clsx('celeste-sidebar-menu-badge', props.class)"
+    :variant="variant"
+    :state="state"
+    :size="size"
+    :label="label"
+    type="basic"
+  />
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-badge {
+  --celeste-sidebar-badge-offset: 0px;
+
+  position: absolute;
+  pointer-events: none;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+  inset-inline-end: calc(var(--spacing-8) + var(--celeste-sidebar-badge-offset));
+}
+
+.celeste-sidebar-menu-item > .celeste-sidebar-menu-badge.celeste-badge-sm {
+  inset-block-start: var(--spacing-10);
+}
+
+.celeste-sidebar-menu-item > .celeste-sidebar-menu-badge.celeste-badge-md {
+  inset-block-start: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-sub-item > .celeste-sidebar-menu-badge.celeste-badge-sm {
+  inset-block-start: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-sub-item > .celeste-sidebar-menu-badge.celeste-badge-md {
+  inset-block-start: var(--spacing-6);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-badge {
+  display: none;
+}
+
+.celeste-sidebar-menu-item:has([data-sidebar='menu-action']) > .celeste-sidebar-menu-badge,
+.celeste-sidebar-menu-sub-item:has([data-sidebar='menu-action']) > .celeste-sidebar-menu-badge {
+  --celeste-sidebar-badge-offset: 20px;
+}
+</style>

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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { Primitive } from 'radix-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class'];
+  variant?: 'default' | 'outline';
+  isActive?: boolean;
+}>(), {
+  as: 'button',
+  variant: 'default',
+  isActive: false,
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'variant', 'isActive');
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-button"
+    :data-active="isActive"
+    :class="clsx(
+      'celeste-sidebar-menu-button',
+      `celeste-sidebar-menu-button-variant-${variant}`,
+      props.class,
+    )"
+    v-bind="{ ...delegatedProps, ...$attrs }"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-button {
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  height: 36px;
+  padding: var(--spacing-8);
+  overflow: hidden;
+  transition:
+    width var(--animation-fast) linear,
+    height var(--animation-fast) linear,
+    padding var(--animation-fast) linear,
+    background-color var(--animation-fast);
+  border-radius: var(--radius-8);
+  outline: none;
+  font: var(--label-sm);
+  text-align: start;
+  gap: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-button:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-button:focus-visible {
+  box-shadow: var(--sidebar-ring);
+}
+
+.celeste-sidebar-menu-button:active {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.celeste-sidebar-menu-button[aria-disabled='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.celeste-sidebar-menu-button[data-active='true'] {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-button[data-active='true'] :is(i, svg) {
+  color: var(--sidebar-primary);
+}
+
+.celeste-sidebar-menu-button[data-state='open']:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-button {
+  width: 34px;
+  height: 34px;
+  padding: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-button > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celeste-sidebar-menu-button svg,
+.celeste-sidebar-menu-button i {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+}
+
+.celeste-sidebar-menu-button-variant-outline {
+  background-color: var(--sidebar-background);
+  box-shadow: 0 0 0 1px var(--sidebar-border);
+}
+
+.celeste-sidebar-menu-button-variant-outline:hover {
+  background-color: var(--sidebar-accent);
+  box-shadow: var(--sidebar-ring);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-button-size-md {
+  height: 36px;
+  font: var(--label-sm);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-button-size-lg {
+  padding: 0;
+}
+
+.celeste-sidebar-menu-item:has([data-sidebar='menu-action']) .celeste-sidebar-menu-button {
+  padding-inline-end: 32px;
+}
+</style>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-item"
+    :class="clsx('celeste-sidebar-menu-item', props.class)"
+  >
+    <slot />
+  </li>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-item {
+  position: relative;
+}
+</style>

package/src/components/sidebar/sidebar-menu-sub-button.vue

@@ -0,0 +1,110 @@
+<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<SidebarMenuSubButtonProps>(), {
+  as: 'a',
+  size: 'md',
+  isActive: false,
+});
+</script>
+
+<script lang="ts">
+export interface SidebarMenuSubButtonProps extends PrimitiveProps {
+  size?: 'sm' | 'md';
+  isActive?: boolean;
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="clsx(
+      'celeste-sidebar-menu-sub-button',
+      `celeste-sidebar-menu-sub-button-size-${size}`,
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-sub-button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  padding: var(--spacing-8);
+  overflow: hidden;
+  transform: translateX(-1px);
+  transition: background-color var(--animation-fast);
+  border-radius: var(--radius-8);
+  outline: none;
+  color: var(--sidebar-foreground);
+  gap: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-sub-button:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-sub-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.celeste-sidebar-menu-sub-button:active {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-sub-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.celeste-sidebar-menu-sub-button[aria-disabled='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.celeste-sidebar-menu-sub-button[data-active='true'] {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-sub-button > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celeste-sidebar-menu-sub-button :is(svg, i) {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-sub-button-size-sm {
+  font: var(--paragraph-xs);
+}
+
+.celeste-sidebar-menu-sub-button-size-md {
+  font: var(--paragraph-sm);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-sub-button {
+  display: none;
+}
+</style>

package/src/components/sidebar/sidebar-menu-sub-item.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-sub-item"
+    :class="clsx('celeste-sidebar-menu-sub-item', props.class)"
+  >
+    <slot />
+  </li>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-sub-item {
+  position: relative;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu-sub"
+    :class="clsx('celeste-sidebar-menu-sub', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-sub {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin-inline: var(--spacing-16);
+  padding-block: var(--spacing-4);
+  padding-inline: var(--spacing-10);
+  transform: translateX(1px);
+  gap: var(--spacing-4);
+  border-inline-start: 1px solid var(--sidebar-border);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-sub {
+  display: none;
+}
+</style>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu"
+    :class="clsx('celeste-sidebar-menu', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  gap: var(--spacing-4);
+}
+</style>