@youcan/celeste 0.6.31 → 0.6.33

package/dist/es/index.js

@@ -44,6 +44,8 @@ import { _ as _sfc_main$7 } from "./chunks/modal.js";
 import PopoverContent from "./popover-content.js";
 import PopoverTrigger from "./popover-trigger.js";
 import { _ as _sfc_main$a } from "./chunks/popover.js";
+import progressBar from "./progress-bar.js";
+import progressCircle from "./progress-circle.js";
 import richEditor from "./rich-editor.js";
 import { _ as _sfc_main$b } from "./chunks/scroll-area.js";
 import segmentedControlItem from "./segmented-control-item.js";
@@ -58,8 +60,8 @@ import SelectTrigger from "./select-trigger.js";
 import SelectValue from "./select-value.js";
 import { _ as _sfc_main$c } from "./chunks/select.js";
 import { _ as _sfc_main$e } from "./chunks/slider.vue_vue_type_style_index_0_lang.js";
-import sonnerAlert from "./sonner-alert.js";
-import { _ as _sfc_main$f } from "./chunks/sonner.js";
+import SonnerAlert from "./sonner-alert.js";
+import { _ as _sfc_main$f, t as toast$1 } from "./chunks/sonner.js";
 import { _ as _sfc_main$g } from "./chunks/switch.vue_vue_type_style_index_0_lang.js";
 import tabMenuContent from "./tab-menu-content.js";
 import tabMenuItem from "./tab-menu-item.js";
@@ -70,6 +72,9 @@ import TextInputButton from "./text-input-button.js";
 import TextInput from "./text-input.js";
 import textarea from "./textarea.js";
 import Tooltip from "./tooltip.js";
+import { COLOR_NUMBER_VALIDATION_PATTERN, DEFAULT_SWATCH, HEX_VALIDATION_PATTERN, bumpColorValue, clamp, getAbsolutePosition, getColorConstraints, getFractionDigit, getPageXYFromEvent, getScrollXY, resolveArrowDirection, truncColorValue } from "./color.js";
+import { uid } from "./crypto.js";
+import { markRaw } from "vue";
 const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Alert,
@@ -116,6 +121,8 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Popover: _sfc_main$a,
   PopoverContent,
   PopoverTrigger,
+  ProgressBar: progressBar,
+  ProgressCircle: progressCircle,
   RichEditor: richEditor,
   ScrollArea: _sfc_main$b,
   SegmentedControl: segmentedControl,
@@ -132,7 +139,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Slider: _sfc_main$e,
   SocialButton: socialButton,
   Sonner: _sfc_main$f,
-  SonnerAlert: sonnerAlert,
+  SonnerAlert,
   StatusBadge: statusBadge,
   Switch: _sfc_main$g,
   TabMenu: tabMenu,
@@ -145,6 +152,55 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Textarea: textarea,
   Tooltip
 }, Symbol.toStringTag, { value: "Module" }));
+function createToast(title, data) {
+  const {
+    state = "success",
+    variant = "stroke",
+    size = "lg",
+    dismissable = true,
+    ...externalToastProps
+  } = data || {};
+  let toastId;
+  const dismissToast = () => {
+    toast$1.dismiss(toastId);
+  };
+  toastId = toast$1.custom(markRaw(SonnerAlert), {
+    ...externalToastProps,
+    componentProps: {
+      title,
+      description: data == null ? void 0 : data.description,
+      state,
+      variant,
+      size,
+      dismissable,
+      onDismiss: dismissToast
+    }
+  });
+  return toastId;
+}
+const toast = Object.assign(createToast, {
+  success: (title, data) => {
+    return createToast(title, { ...data, state: "success" });
+  },
+  error: (title, data) => {
+    return createToast(title, { ...data, state: "error" });
+  },
+  warning: (title, data) => {
+    return createToast(title, { ...data, state: "warning" });
+  },
+  info: (title, data) => {
+    return createToast(title, { ...data, state: "information" });
+  },
+  feature: (title, data) => {
+    return createToast(title, { ...data, state: "feature" });
+  },
+  dismiss: (id) => {
+    toast$1.dismiss(id);
+  },
+  loading: (title, data) => {
+    return toast$1.loading(title, data);
+  }
+});
 const Celeste = {
   install(vue) {
     Object.entries(components).forEach(([name, component]) => {
@@ -156,6 +212,7 @@ export {
   Alert,
   Badge,
   Button,
+  COLOR_NUMBER_VALIDATION_PATTERN,
   Celeste,
   _sfc_main as Checkbox,
   checkboxLabel as CheckboxLabel,
@@ -172,6 +229,7 @@ export {
   CompactButton,
   _sfc_main$2 as ContentDivider,
   contextMenuItem as ContextMenuItem,
+  DEFAULT_SWATCH,
   dropdown as Dropdown,
   DropdownItem,
   dropdownMenu as DropdownMenu,
@@ -185,6 +243,7 @@ export {
   _sfc_main$6 as DropdownMenuSubTrigger,
   dropdownMenuTrigger as DropdownMenuTrigger,
   fancyButton as FancyButton,
+  HEX_VALIDATION_PATTERN,
   hintText as HintText,
   Label,
   LinkButton,
@@ -198,6 +257,8 @@ export {
   _sfc_main$a as Popover,
   PopoverContent,
   PopoverTrigger,
+  progressBar as ProgressBar,
+  progressCircle as ProgressCircle,
   richEditor as RichEditor,
   _sfc_main$b as ScrollArea,
   segmentedControl as SegmentedControl,
@@ -214,7 +275,7 @@ export {
   _sfc_main$e as Slider,
   socialButton as SocialButton,
   _sfc_main$f as Sonner,
-  sonnerAlert as SonnerAlert,
+  SonnerAlert,
   statusBadge as StatusBadge,
   _sfc_main$g as Switch,
   tabMenu as TabMenu,
@@ -225,5 +286,16 @@ export {
   TextInputAffix,
   TextInputButton,
   textarea as Textarea,
-  Tooltip
+  Tooltip,
+  bumpColorValue,
+  clamp,
+  getAbsolutePosition,
+  getColorConstraints,
+  getFractionDigit,
+  getPageXYFromEvent,
+  getScrollXY,
+  resolveArrowDirection,
+  toast,
+  truncColorValue,
+  uid
 };

package/dist/es/progress-bar.js

@@ -0,0 +1,85 @@
+import { defineComponent, useCssVars, computed, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, renderSlot, createTextVNode, createVNode, unref, mergeProps, withCtx } from "vue";
+import { useDelegatedProps } from "./use-delegated-props.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { ak as By, al as Iy } from "./chunks/index.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["data-layout"];
+const _hoisted_2 = {
+  key: 0,
+  class: "celeste-progress-bar-label"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "celeste-progress-bar-label-title"
+};
+const _hoisted_4 = { class: "celeste-progress-bar-label" };
+const _hoisted_5 = {
+  key: 1,
+  class: "celeste-progress-bar-description"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "progress-bar",
+  props: {
+    modelValue: { default: 0 },
+    max: { default: 100 },
+    getValueLabel: {},
+    asChild: { type: Boolean },
+    as: {},
+    class: {},
+    color: { default: "primary" },
+    title: {},
+    layout: { default: "bare" }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "6ba22aeb": progressIndicator.value
+    }));
+    const props = __props;
+    const delegatedProps = useDelegatedProps(props, "class");
+    const progress = computed(() => {
+      if (props.max === 0)
+        return 0;
+      const value = Math.min(Math.max(props.modelValue ?? 0, 0), props.max);
+      return Math.round(value / props.max * 100);
+    });
+    const progressIndicator = computed(() => {
+      return 100 - (props.modelValue ?? 0) / props.max * 100;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "celeste-progress-bar-wrapper",
+        "data-layout": _ctx.layout
+      }, [
+        _ctx.layout !== "bare" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          props.title && _ctx.layout !== "inline" ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+          createElementVNode("span", _hoisted_4, [
+            renderSlot(_ctx.$slots, "label", {}, () => [
+              createTextVNode(toDisplayString(progress.value) + "% ", 1)
+            ], true)
+          ])
+        ])) : createCommentVNode("", true),
+        createVNode(unref(By), mergeProps(unref(delegatedProps), {
+          class: unref(clsx)(
+            "celeste-progress-bar",
+            props.class
+          )
+        }), {
+          default: withCtx(() => [
+            createVNode(unref(Iy), {
+              class: "celeste-progress-bar-indicator",
+              "data-color": _ctx.color
+            }, null, 8, ["data-color"])
+          ]),
+          _: 1
+        }, 16, ["class"]),
+        _ctx.$slots.description && _ctx.layout === "default" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          renderSlot(_ctx.$slots, "description", {}, void 0, true)
+        ])) : createCommentVNode("", true)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+const progressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-850aadb2"]]);
+export {
+  progressBar as default
+};

package/dist/es/progress-circle.js

@@ -0,0 +1,93 @@
+import { defineComponent, useCssVars, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementBlock, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { useDelegatedProps } from "./use-delegated-props.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { ak as By, al as Iy } from "./chunks/index.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["width", "height"];
+const _hoisted_2 = ["cx", "cy", "r"];
+const _hoisted_3 = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset"];
+const _hoisted_4 = {
+  key: 0,
+  class: "celeste-progress-circle-label"
+};
+const STROKE_WIDTH = 6.4;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "progress-circle",
+  props: {
+    modelValue: { default: 0 },
+    max: { default: 100 },
+    getValueLabel: {},
+    asChild: { type: Boolean },
+    as: {},
+    class: {},
+    size: { default: 80 }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "433ff7ca": circleSize.value
+    }));
+    const props = __props;
+    const delegatedProps = useDelegatedProps(props, "class");
+    const radius = computed(() => (props.size - STROKE_WIDTH) / 2);
+    const circumference = computed(() => 2 * Math.PI * radius.value);
+    const progress = computed(() => {
+      if (props.max === 0)
+        return 0;
+      const value = Math.min(Math.max(props.modelValue ?? 0, 0), props.max);
+      return Math.round(value / props.max * 100);
+    });
+    const offset = computed(() => {
+      return circumference.value * (1 - progress.value / 100);
+    });
+    const circleSize = computed(() => `${props.size}px`);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(By), mergeProps(unref(delegatedProps), {
+        value: props.modelValue,
+        class: unref(clsx)("celeste-progress-circle", props.class),
+        as: "div"
+      }), {
+        default: withCtx(() => [
+          createVNode(unref(Iy), { "as-child": "" }, {
+            default: withCtx(() => [
+              (openBlock(), createElementBlock("svg", {
+                class: "celeste-progress-circle-svg",
+                width: props.size,
+                height: props.size
+              }, [
+                createElementVNode("circle", {
+                  class: "celeste-progress-circle-track",
+                  cx: props.size / 2,
+                  cy: props.size / 2,
+                  r: radius.value,
+                  "stroke-width": STROKE_WIDTH,
+                  fill: "transparent"
+                }, null, 8, _hoisted_2),
+                createElementVNode("circle", {
+                  class: "celeste-progress-circle-indicator",
+                  cx: props.size / 2,
+                  cy: props.size / 2,
+                  r: radius.value,
+                  "stroke-width": STROKE_WIDTH,
+                  fill: "transparent",
+                  "stroke-dasharray": circumference.value,
+                  "stroke-dashoffset": offset.value
+                }, null, 8, _hoisted_3)
+              ], 8, _hoisted_1))
+            ]),
+            _: 1
+          }),
+          props.size !== 48 ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(progress.value) + "% ", 1)
+            ], true)
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["value", "class"]);
+    };
+  }
+});
+const progressCircle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f8ba36bb"]]);
+export {
+  progressCircle as default
+};

package/dist/es/select-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, ak as zy, al as Ky, am as Xy } from "./chunks/index.js";
+import { x as xe, am as zy, an as Ky, ao as Xy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-content",

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 { an as jy, ao as Yy, ap as Uy } from "./chunks/index.js";
+import { ap as jy, aq as Yy, ar 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 { aq as Ly, ar as eg } from "./chunks/index.js";
+import { as as Ly, at 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 { as as Qy } from "./chunks/index.js";
+import { au 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/sonner-alert.js

@@ -36,7 +36,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const sonnerAlert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c8bb23e0"]]);
+const SonnerAlert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c8bb23e0"]]);
 export {
-  sonnerAlert as default
+  SonnerAlert 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, at as Lg, au as zg, av as Kg, aw as jg, ax as Hg, ay as Wg } from "./chunks/index.js";
+import { x as xe, av as Lg, aw as zg, ax as Kg, ay as jg, az as Hg, aA 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/dist/index.d.ts

@@ -3,3 +3,4 @@ export declare const Celeste: {
     install(vue: App): void;
 };
 export * from './components';
+export * from './utils';

package/package.json

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

package/src/components/dropdown-menu/dropdown-menu-content.vue

@@ -41,6 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   --dropdown-max-width: 350px;
 
   display: flex;
+  z-index: 50;
   box-sizing: border-box;
   flex-direction: column;
   width: var(--dropdown-width);
@@ -52,11 +53,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   transition-property: display, transform, opacity;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
-  transition-behavior: allow-discrete;
   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);
+  transition-behavior: allow-discrete;
   gap: var(--spacing-4);
 
   &[data-state='closed'] {

package/src/components/index.ts

@@ -10,6 +10,7 @@ export * from './hint-text';
 export * from './label';
 export * from './modal';
 export * from './popover';
+export * from './progress';
 export * from './rich-editor';
 export * from './scroll-area';
 export * from './segmented-control';

package/src/components/progress/index.ts

@@ -0,0 +1,5 @@
+export * from './progress-bar.vue';
+export { default as ProgressBar } from './progress-bar.vue';
+
+export * from './progress-circle.vue';
+export { default as ProgressCircle } from './progress-circle.vue';

package/src/components/progress/progress-bar.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(
+  defineProps<
+    ProgressRootProps & {
+      class?: HTMLAttributes['class'];
+      color?: 'blue' | 'red' | 'orange' | 'green' | 'primary';
+      title?: string;
+      layout?: 'default' | 'no-description' | 'inline' | 'bare';
+    }
+  >(),
+  {
+    modelValue: 0,
+    color: 'primary',
+    layout: 'bare',
+    max: 100,
+  },
+);
+
+const delegatedProps = useDelegatedProps(props, 'class');
+
+const progress = computed(() => {
+  if (props.max === 0)
+    return 0;
+
+  const value = Math.min(Math.max(props.modelValue ?? 0, 0), props.max);
+
+  return Math.round((value / props.max) * 100);
+});
+
+const progressIndicator = computed(() => {
+  return 100 - (props.modelValue ?? 0) / props.max * 100;
+});
+</script>
+
+<template>
+  <div class="celeste-progress-bar-wrapper" :data-layout="layout">
+    <div v-if="layout !== 'bare'" class="celeste-progress-bar-label">
+      <span
+        v-if="props.title && layout !== 'inline'"
+        class="celeste-progress-bar-label-title"
+      >
+        {{ title }}
+      </span>
+      <span
+        class="celeste-progress-bar-label"
+      >
+        <slot name="label">
+          {{ progress }}%
+        </slot>
+      </span>
+    </div>
+
+    <ProgressRoot
+      v-bind="delegatedProps"
+      :class="
+        clsx(
+          'celeste-progress-bar',
+          props.class,
+        )
+      "
+    >
+      <ProgressIndicator
+        class="celeste-progress-bar-indicator"
+        :data-color="color"
+      />
+    </ProgressRoot>
+
+    <div v-if="$slots.description && layout === 'default'" class="celeste-progress-bar-description">
+      <slot name="description" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.celeste-progress-bar-wrapper {
+  --bar-height: 6px;
+
+  display: flex;
+  width: 100%;
+  gap: var(--spacing-6);
+
+  .celeste-progress-bar {
+    height: var(--bar-height);
+    overflow: hidden;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-soft-200);
+  }
+
+  .celeste-progress-bar-indicator {
+    --progress: v-bind('progressIndicator');
+
+    width: 100%;
+    height: 100%;
+    transform: translateX(calc(var(--progress) * -1%));
+    border-radius: var(--radius-full);
+    background: var(--color-primary-base);
+
+    :dir(rtl) & {
+      transform: translateX(calc(var(--progress) * 1%));
+    }
+
+    &[data-color='orange'] {
+      background: var(--color-state-warning-base);
+    }
+
+    &[data-color='red'] {
+      background: var(--color-state-error-base);
+    }
+
+    &[data-color='blue'] {
+      background: var(--color-state-information-base);
+    }
+
+    &[data-color='green'] {
+      background: var(--color-state-success-base);
+    }
+  }
+
+  .celeste-progress-bar-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-6);
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-sm);
+
+    &.celeste-progress-bar-title {
+      color: var(--color-text-strong-950);
+      font: var(--label-sm);
+    }
+  }
+
+  .celeste-progress-bar-description {
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-xs);
+  }
+
+  &[data-layout='default'],
+  &[data-layout='no-description'] {
+    flex-direction: column;
+
+    &:deep(.celeste-progress-bar) {
+      width: 100%;
+    }
+  }
+
+  &[data-layout='inline'],
+  &[data-layout='bare'] {
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: var(--spacing-8);
+
+    &:deep(.celeste-progress-bar) {
+      flex: 1;
+    }
+  }
+}
+</style>