@youcan/celeste 0.6.15 → 0.6.17

package/dist/es/select-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ab as jy, ac as Yy, ad as Uy } from "./chunks/index.js";
+import { ae as jy, af as Yy, ag as Uy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-item",

package/dist/es/select-trigger.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createVNode, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ae as Ly, af as eg } from "./chunks/index.js";
+import { ah as Ly, ai as eg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-trigger",

package/dist/es/select-value.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ag as Qy } from "./chunks/index.js";
+import { aj as Qy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-value",

package/dist/es/tab-menu-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { p as bg } from "./chunks/index.js";
+import { r as bg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-menu-content",

package/dist/es/tab-menu-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, createCommentVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { A as At, l as Cg } from "./chunks/index.js";
+import { A as At, p as Cg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
   key: 0,

package/dist/es/tab-menu-list.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { j as gg } from "./chunks/index.js";
+import { l as gg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-menu-list",

package/dist/es/text-input-icon.js

@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const textInputIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3b859b72"]]);
+const TextInputIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3b859b72"]]);
 export {
-  textInputIcon as default
+  TextInputIcon as default
 };

package/dist/es/tooltip.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from "vue";
 import CompactButton from "./compact-button.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, ah as Lg, ai as zg, aj as Kg, ak as jg, al as Hg, am as Wg } from "./chunks/index.js";
+import { x as xe, ak as Lg, al as zg, am as Kg, an as jg, ao as Hg, ap as Wg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "celeste-tooltip-content-box" };
 const _hoisted_2 = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.15",
+  "version": "0.6.17",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -32,8 +32,8 @@
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
-    "@youcan/celeste-icons": "0.6.15",
-    "@youcan/celeste-tokens": "0.6.15"
+    "@youcan/celeste-icons": "0.6.17",
+    "@youcan/celeste-tokens": "0.6.17"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

package/src/components/combobox/combobox-anchor.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ComboboxAnchorProps } from 'radix-vue';
+import clsx from 'clsx';
+import { ComboboxAnchor, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ComboboxAnchor
+    v-bind="forwarded"
+    :class="clsx(props.class, 'celeste-dropdown-anchor')"
+  >
+    <slot />
+  </ComboboxAnchor>
+</template>

package/src/components/combobox/combobox-empty.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'radix-vue';
+import clsx from 'clsx';
+import { ComboboxEmpty } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="clsx('celeste-dropdown-empty-list', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
+
+<style lang="scss" scoped>
+.celeste-dropdown-empty-list {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-8);
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-sm);
+}
+</style>

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'radix-vue';
+import clsx from 'clsx';
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class'];
+  heading?: string;
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="clsx(props.class, 'celeste-dropdown-items-group')"
+  >
+    <ComboboxLabel v-if="heading" class="">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
+
+<style lang="scss" scoped>
+ .celeste-dropdown-items-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+
+  &:deep([data-radix-vue-combobox-item]) {
+    width: auto;
+    height: auto;
+  }
+}
+</style>

package/src/components/combobox/combobox-input.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import clsx from 'clsx';
+import { ComboboxInput, type ComboboxInputProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import TextInputIcon from '../text-input/text-input-icon.vue';
+import TextInput, { type TextInputProps } from '../text-input/text-input.vue';
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class'];
+  textInputProps?: Partial<TextInputProps>;
+  searchable?: boolean;
+}>();
+
+const model = defineModel<string | undefined>();
+
+const comboboxInputProps = computed(() => {
+  const { class: _class, textInputProps: _textInputProps, ...rest } = props;
+  return rest;
+});
+
+const textInputProps = computed((): TextInputProps => {
+  return {
+    type: 'search',
+    size: 'sm',
+    placeholder: 'Search',
+    ...props.textInputProps,
+  };
+});
+</script>
+
+<template>
+  <ComboboxInput
+    v-bind="comboboxInputProps"
+    :class="clsx('celeste-dropdown-input', props.class)"
+    :readonly="!props.searchable"
+    as="div"
+  >
+    <TextInput
+      v-bind="textInputProps"
+      v-model="model"
+      :readonly="!props.searchable"
+      :style="!props.searchable ? 'opacity: 0; height: 1px; padding: 0; border: none;' : ''"
+    >
+      <TextInputIcon v-if="props.searchable" icon="i-celeste-search-2-line" />
+    </TextInput>
+  </ComboboxInput>
+</template>
+
+<style lang="scss" scoped>
+.celeste-dropdown-input {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  background-color: var(--color-bg-white-0);
+
+  &:deep(.celeste-text-input-wrapper) {
+    width: 100%;
+    border: none;
+    border-radius: var(--radius-8) var(--radius-8) 0 0;
+    outline: none;
+    box-shadow: none;
+  }
+}
+</style>

package/src/components/combobox/combobox-item.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits } from 'radix-vue';
+import clsx from 'clsx';
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import Checkbox from '../checkbox/checkbox.vue';
+
+const props = withDefaults(defineProps<ComboboxItemPropsType>(), {
+  size: 'sm',
+});
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<script lang="ts">
+export interface ComboboxItemPropsType {
+  class?: HTMLAttributes['class'];
+  label: string;
+  size?: 'sm' | 'lg';
+  checkbox?: boolean;
+  sublabel?: string;
+  description?: string;
+  selected?: boolean | 'indeterminate';
+  focused?: boolean;
+  value: string | number | boolean | Record<string, any>;
+  icon?: string;
+  image?: string;
+  disabled?: boolean;
+}
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :disabled="disabled"
+    as-child
+  >
+    <div
+      tabindex="0"
+      :aria-disabled="disabled"
+      :class="clsx(
+        props.class,
+        'celeste-dropdown-item',
+        { 'celeste-dropdown-item-disabled': disabled },
+        { 'celeste-dropdown-item-selected': selected },
+        { 'celeste-dropdown-item-focused': focused },
+      )"
+    >
+      <Checkbox
+        v-if="checkbox && size === 'sm'"
+        :checked="selected"
+        :disabled="disabled"
+      />
+      <div
+        v-if="$slots.prefix"
+        :class="clsx(
+          'celeste-dropdown-item-prefix',
+          `celeste-dropdown-item-prefix-${size}`,
+        )"
+      >
+        <slot name="prefix" />
+      </div>
+      <div class="celeste-dropdown-item-info">
+        <div
+          :class="clsx(
+            'celeste-dropdown-item-header',
+            `celeste-dropdown-item-header-${size}`,
+          )"
+        >
+          <span class="celeste-dropdown-item-label" v-html="label" />
+          <span v-if="sublabel" class="celeste-dropdown-item-sublabel">{{ sublabel }}</span>
+        </div>
+        <p v-if="description && size === 'lg'" class="celeste-dropdown-item-description">
+          {{ description }}
+        </p>
+      </div>
+      <div v-if="$slots.suffix" class="celeste-dropdown-item-suffix">
+        <slot name="suffix" />
+      </div>
+      <i v-if="selected" class="i-celeste-check-fill" />
+    </div>
+  </ComboboxItem>
+</template>
+
+<style lang="scss" scoped>
+.celeste-dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-8);
+  transition-property: background-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border-radius: var(--radius-8);
+  background: var(--color-bg-white-0);
+  cursor: pointer;
+  gap: var(--spacing-8);
+
+  i {
+    color: var(--color-icon-sub-600);
+  }
+
+  &[data-highlighted],
+  &:hover,
+  &-focused,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    background: var(--color-bg-weak-50);
+  }
+
+  :deep(.celeste-input-wrapper) {
+    gap: 0;
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
+  }
+
+  &-label {
+    color: var(--color-text-strong-950);
+    font: var(--paragraph-sm);
+  }
+
+  &-sublabel {
+    color: var(--color-text-soft-400);
+    font: var(--paragraph-xs);
+  }
+
+  &-description {
+    margin: var(--spacing-0);
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-xs);
+  }
+
+  .celeste-dropdown-item-prefix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-icon-sub-600);
+
+    &-lg {
+      padding: var(--spacing-10);
+      border: 1px solid var(--color-stroke-soft-200);
+      border-radius: var(--radius-full);
+      box-shadow: var(--shadow-regular-xs);
+      gap: var(--spacing-10);
+    }
+  }
+
+  .celeste-dropdown-item-suffix {
+    color: var(--color-icon-sub-600);
+  }
+
+  &-disabled {
+    color: var(--color-text-disabled-300);
+    cursor: not-allowed;
+
+    :deep(i) {
+      color: var(--color-text-disabled-300);
+    }
+
+    .celeste-dropdown-item-label,
+    .celeste-dropdown-item-sublabel,
+    .celeste-dropdown-item-description {
+      color: var(--color-text-disabled-300);
+    }
+  }
+
+  &-selected {
+    background: var(--color-bg-weak-50);
+  }
+
+  .celeste-dropdown-item-info {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-4);
+  }
+
+  .celeste-dropdown-item-header-lg {
+    .celeste-dropdown-item-label {
+      font-weight: var(--font-weights-display-0);
+    }
+  }
+}
+</style>

package/src/components/combobox/combobox-list.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
+import clsx from 'clsx';
+import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper',
+  align: 'start',
+  sideOffset: 4,
+});
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxPortal>
+    <ComboboxContent
+      v-bind="forwarded"
+      :class="clsx('celeste-dropdown-content', props.class)"
+    >
+      <ComboboxViewport class="celeste-dropdown-items-viewport">
+        <slot />
+      </ComboboxViewport>
+    </ComboboxContent>
+  </ComboboxPortal>
+</template>
+
+<style lang="scss" scoped>
+.celeste-dropdown-content,
+div:deep(.celeste-dropdown-content) {
+  --dropdown-width: fit-content;
+  --dropdown-height: 300px;
+  --dropdown-min-width: var(--radix-combobox-trigger-width, 300px);
+
+  display: flex;
+  z-index: 50;
+  box-sizing: border-box;
+  flex-direction: column;
+  width: var(--dropdown-width);
+  min-width: var(--dropdown-min-width);
+  max-height: var(--dropdown-height);
+  margin-top: var(--spacing-10);
+  padding: var(--spacing-8);
+  overflow: visible;
+  transform-origin: var(--radix-combobox-content-transform-origin);
+  animation-duration: var(--animation-fast);
+  animation-timing-function: ease-out;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-16);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+  gap: var(--spacing-4);
+
+  &[data-state='open'] {
+    animation-name: slide-up-and-fade;
+  }
+
+  &[data-state='closed'] {
+    animation-name: slide-down-and-fade;
+  }
+}
+
+div:deep(.celeste-dropdown-items-viewport) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+@keyframes slide-up-and-fade {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-down-and-fade {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+}
+</style>

package/src/components/combobox/combobox-root.vue

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

package/src/components/combobox/combobox-separator.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'radix-vue';
+import clsx from 'clsx';
+import { ComboboxSeparator } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="clsx('celeste-dropdown-separator', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
+
+<style lang="scss" scoped>
+ .celeste-dropdown-separator {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-stroke-soft-200);
+}
+</style>