@youcan/celeste 0.6.32 → 0.6.34

package/src/components/progress/stories/progress-circular.stories.ts

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import ProgressCircle from '../progress-circle.vue';
+
+const meta: Meta<typeof ProgressCircle> = {
+  title: 'Components/Progress/Progress Circle',
+  component: ProgressCircle,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProgressCircle>;
+
+export const Default: Story = {
+  args: {
+    modelValue: 45,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressCircle v-bind="args" />
+    `,
+  }),
+};
+
+export const ZeroProgress: Story = {
+  args: {
+    modelValue: 0,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `<ProgressCircle v-bind="args" />`,
+  }),
+};
+
+export const FullProgress: Story = {
+  args: {
+    modelValue: 100,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `<ProgressCircle v-bind="args" />`,
+  }),
+};
+
+export const WithValueAndMax: Story = {
+  name: 'With Custom Max Value',
+  args: {
+    modelValue: 256,
+    max: 1024,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `<ProgressCircle v-bind="args" />`,
+  }),
+};
+
+export const WithCustomLabelInSlot: Story = {
+  name: 'With Custom Label (Slot)',
+  args: {
+    modelValue: 5,
+    max: 10,
+    size: 80,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressCircle v-bind="args">
+        5/10 Done
+      </ProgressCircle>
+    `,
+  }),
+};
+
+export const WithCustomIconInSlot: Story = {
+  name: 'With Custom Icon (Slot)',
+  args: {
+    modelValue: 100,
+    max: 100,
+    size: 80,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressCircle v-bind="args">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 13l4 4L19 7" />
+        </svg>
+      </ProgressCircle>
+    `,
+  }),
+};
+
+export const DifferentSizes: Story = {
+  args: {
+    modelValue: 75,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <ProgressCircle v-bind="args" :size="80" />
+        <ProgressCircle v-bind="args" :size="72" />
+        <ProgressCircle v-bind="args" :size="64" />
+        <ProgressCircle v-bind="args" :size="56" />
+        <ProgressCircle v-bind="args" :size="48" />
+      </div>
+    `,
+  }),
+};
+
+export const EdgeCases: Story = {
+  render: () => ({
+    components: { ProgressCircle },
+    template: `
+      <div style="display: flex; align-items: center; gap: 24px;">
+        <div>
+          <p style="text-align: center; margin-bottom: 8px; font: var(--label-sm);">Over Max</p>
+          <ProgressCircle :modelValue="150" :max="100" />
+        </div>
+        <div>
+          <p style="text-align: center; margin-bottom: 8px; font: var(--label-sm);">Negative Value</p>
+          <ProgressCircle :modelValue="-50" />
+        </div>
+        <div>
+          <p style="text-align: center; margin-bottom: 8px; font: var(--label-sm);">Max is Zero</p>
+          <ProgressCircle :modelValue="0" :max="0" />
+        </div>
+      </div>
+    `,
+  }),
+};

package/dist/cjs/chunks/dropdown-menu-content.vue_vue_type_style_index_0_lang.js

@@ -1,51 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const useDelegatedProps = require("../use-delegated-props.js");
-const clsx = require("./clsx.js");
-const index = require("./index.js");
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "dropdown-menu-content",
-  props: {
-    forceMount: { type: Boolean },
-    loop: { type: Boolean },
-    side: {},
-    sideOffset: { default: 4 },
-    align: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean },
-    collisionBoundary: {},
-    collisionPadding: {},
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean },
-    updatePositionStrategy: {},
-    prioritizePosition: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
-    const forwarded = index.xe(delegatedProps, emits);
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.ih), null, {
-        default: Mo.withCtx(() => [
-          Mo.createVNode(Mo.unref(index.uh), Mo.mergeProps(Mo.unref(forwarded), {
-            "force-mount": "",
-            class: Mo.unref(clsx.clsx)("celeste-dropdown-menu-content", props.class)
-          }), {
-            default: Mo.withCtx(() => [
-              Mo.renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 16, ["class"])
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-exports._sfc_main = _sfc_main;

package/dist/cjs/chunks/dropdown-menu-sub-content.vue_vue_type_style_index_0_lang.js

@@ -1,49 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const useDelegatedProps = require("../use-delegated-props.js");
-const clsx = require("./clsx.js");
-const index = require("./index.js");
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "dropdown-menu-sub-content",
-  props: {
-    forceMount: { type: Boolean },
-    loop: { type: Boolean },
-    sideOffset: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean },
-    collisionBoundary: {},
-    collisionPadding: {},
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean },
-    updatePositionStrategy: {},
-    prioritizePosition: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "entryFocus", "openAutoFocus", "closeAutoFocus"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
-    const forwarded = index.xe(delegatedProps, emits);
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.ih), null, {
-        default: Mo.withCtx(() => [
-          Mo.createVNode(Mo.unref(index.Ch), Mo.mergeProps(Mo.unref(forwarded), {
-            "force-mount": "",
-            class: Mo.unref(clsx.clsx)(props.class, "celeste-dropdown-menu-sub-content")
-          }), {
-            default: Mo.withCtx(() => [
-              Mo.renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 16, ["class"])
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-exports._sfc_main = _sfc_main;

package/dist/cjs/chunks/dropdown-menu-sub-trigger.vue_vue_type_style_index_0_lang.js

@@ -1,32 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const useDelegatedProps = require("../use-delegated-props.js");
-const clsx = require("./clsx.js");
-const index = require("./index.js");
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "dropdown-menu-sub-trigger",
-  props: {
-    disabled: { type: Boolean },
-    textValue: {},
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
-    const forwardedProps = index.At(delegatedProps);
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.wh), Mo.mergeProps(Mo.unref(forwardedProps), {
-        class: Mo.unref(clsx.clsx)(props.class, "celeste-dropdown-menu-sub-trigger")
-      }), {
-        default: Mo.withCtx(() => [
-          Mo.renderSlot(_ctx.$slots, "default"),
-          _cache[0] || (_cache[0] = Mo.createElementVNode("i", { class: "i-celeste-arrow-right-s-line" }, null, -1))
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-exports._sfc_main = _sfc_main;

package/dist/es/chunks/dropdown-menu-content.vue_vue_type_style_index_0_lang.js

@@ -1,52 +0,0 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
-import { useDelegatedProps } from "../use-delegated-props.js";
-import { c as clsx } from "./clsx.js";
-import { x as xe, i as ih, u as uh } from "./index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "dropdown-menu-content",
-  props: {
-    forceMount: { type: Boolean },
-    loop: { type: Boolean },
-    side: {},
-    sideOffset: { default: 4 },
-    align: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean },
-    collisionBoundary: {},
-    collisionPadding: {},
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean },
-    updatePositionStrategy: {},
-    prioritizePosition: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const delegatedProps = useDelegatedProps(props, "class");
-    const forwarded = xe(delegatedProps, emits);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ih), null, {
-        default: withCtx(() => [
-          createVNode(unref(uh), mergeProps(unref(forwarded), {
-            "force-mount": "",
-            class: unref(clsx)("celeste-dropdown-menu-content", props.class)
-          }), {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 16, ["class"])
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/es/chunks/dropdown-menu-sub-content.vue_vue_type_style_index_0_lang.js

@@ -1,50 +0,0 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
-import { useDelegatedProps } from "../use-delegated-props.js";
-import { c as clsx } from "./clsx.js";
-import { x as xe, i as ih, C as Ch } from "./index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "dropdown-menu-sub-content",
-  props: {
-    forceMount: { type: Boolean },
-    loop: { type: Boolean },
-    sideOffset: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean },
-    collisionBoundary: {},
-    collisionPadding: {},
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean },
-    updatePositionStrategy: {},
-    prioritizePosition: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "entryFocus", "openAutoFocus", "closeAutoFocus"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const delegatedProps = useDelegatedProps(props, "class");
-    const forwarded = xe(delegatedProps, emits);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ih), null, {
-        default: withCtx(() => [
-          createVNode(unref(Ch), mergeProps(unref(forwarded), {
-            "force-mount": "",
-            class: unref(clsx)(props.class, "celeste-dropdown-menu-sub-content")
-          }), {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 16, ["class"])
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/es/chunks/dropdown-menu-sub-trigger.vue_vue_type_style_index_0_lang.js

@@ -1,33 +0,0 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementVNode } from "vue";
-import { useDelegatedProps } from "../use-delegated-props.js";
-import { c as clsx } from "./clsx.js";
-import { A as At, w as wh } from "./index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "dropdown-menu-sub-trigger",
-  props: {
-    disabled: { type: Boolean },
-    textValue: {},
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = useDelegatedProps(props, "class");
-    const forwardedProps = At(delegatedProps);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(wh), mergeProps(unref(forwardedProps), {
-        class: unref(clsx)(props.class, "celeste-dropdown-menu-sub-trigger")
-      }), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default"),
-          _cache[0] || (_cache[0] = createElementVNode("i", { class: "i-celeste-arrow-right-s-line" }, null, -1))
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};