@youcan/celeste 0.6.57 → 0.6.59

package/dist/es/pagination.js

@@ -0,0 +1,60 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, createElementVNode } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+import { x as xe, ar as by } from "./chunks/index.js";
+import { r as reactiveOmit } from "./chunks/index2.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "celeste-pagination-leading"
+};
+const _hoisted_2 = { class: "celeste-pagination-center" };
+const _hoisted_3 = {
+  key: 1,
+  class: "celeste-pagination-trailing"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "pagination",
+  props: {
+    class: {},
+    variant: { default: "basic" },
+    page: {},
+    defaultPage: {},
+    itemsPerPage: {},
+    total: {},
+    siblingCount: {},
+    disabled: { type: Boolean },
+    showEdges: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  emits: ["update:page"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegated = reactiveOmit(props, "class");
+    const forwarded = xe(delegated, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(by), mergeProps(unref(forwarded), {
+        "data-slot": "pagination",
+        class: unref(clsx)("celeste-pagination", `celeste-pagination-variant-${props.variant}`, props.class)
+      }), {
+        default: withCtx((sprops) => [
+          _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "leading", normalizeProps(guardReactiveProps(sprops)), void 0, true)
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2, [
+            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(sprops)), void 0, true)
+          ]),
+          _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "trailing", normalizeProps(guardReactiveProps(sprops)), void 0, true)
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const pagination = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0511c5ac"]]);
+export {
+  pagination as default
+};

package/dist/es/popover-content.js

@@ -2,7 +2,7 @@ import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, m
 import CompactButton from "./compact-button.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, ak as bs, al as ws, am as _s, an as xs } from "./chunks/index.js";
+import { x as xe, as as bs, at as ws, au as _s, av as xs } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["data-icon-size"];
 const _hoisted_2 = { class: "celeste-popover-title" };

package/dist/es/popover-trigger.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { ao as gs } from "./chunks/index.js";
+import { aw as gs } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "popover-trigger",

package/dist/es/progress-bar.js

@@ -1,7 +1,7 @@
 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 { ap as By, aq as Iy } from "./chunks/index.js";
+import { ax as By, ay 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 = {

package/dist/es/progress-circle.js

@@ -1,7 +1,7 @@
 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 { ap as By, aq as Iy } from "./chunks/index.js";
+import { ax as By, ay 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"];

package/dist/es/radio-group-card.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, normalizeClass, Fragment, createElementVNode, renderSlot, createCommentVNode, createVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { P as Oh, l as O } from "./chunks/index.js";
+import { X as Oh, l as O } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "celeste-radio-card-content" };
 const _hoisted_2 = { role: "presentation" };

package/dist/es/radio-group-label.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, createElementVNode, createCommentVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { P as Oh, l as O } from "./chunks/index.js";
+import { X as Oh, l as O } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = { role: "presentation" };
 const _hoisted_2 = {

package/dist/es/scroll-bar.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { aI as My, aJ as Vy } from "./chunks/index.js";
+import { aQ as My, aR as Vy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "scroll-bar",

package/dist/es/segmented-control-item.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 { ar as sv } from "./chunks/index.js";
+import { az as sv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "segmented-control-item",

package/dist/es/segmented-control.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 { x as xe, as as lv } from "./chunks/index.js";
+import { x as xe, aA as lv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "segmented-control",

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, at as zy, au as Ky, av as Xy } from "./chunks/index.js";
+import { x as xe, aB as zy, aC as Ky, aD 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 { aw as jy, ax as Yy, ay 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 { az as Ly, aA 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 { aB 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 { M as bg } from "./chunks/index.js";
+import { V 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, U 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 { M 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/tab-menu.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { x as xe, I as yg } from "./chunks/index.js";
+import { x as xe, L as yg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-menu",

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, aC as Lg, aD as zg, aE as Kg, aF as jg, aG as Hg, aH 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.57",
+  "version": "0.6.59",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -44,8 +44,8 @@
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-icons": "0.6.57",
-    "@youcan/celeste-tokens": "0.6.57"
+    "@youcan/celeste-icons": "0.6.59",
+    "@youcan/celeste-tokens": "0.6.59"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './file-upload';
 export * from './hint-text';
 export * from './label';
 export * from './modal';
+export * from './pagination';
 export * from './popover';
 export * from './progress';
 export * from './radio-group';

package/src/components/pagination/index.ts

@@ -0,0 +1,23 @@
+export * from './pagination-content.vue';
+export { default as PaginationContent } from './pagination-content.vue';
+
+export * from './pagination-ellipsis.vue';
+export { default as PaginationEllipsis } from './pagination-ellipsis.vue';
+
+export * from './pagination-first.vue';
+export { default as PaginationFirst } from './pagination-first.vue';
+
+export * from './pagination-item.vue';
+export { default as PaginationItem } from './pagination-item.vue';
+
+export * from './pagination-last.vue';
+export { default as PaginationLast } from './pagination-last.vue';
+
+export * from './pagination-next.vue';
+export { default as PaginationNext } from './pagination-next.vue';
+
+export * from './pagination-previous.vue';
+export { default as PaginationPrevious } from './pagination-previous.vue';
+
+export * from './pagination.vue';
+export { default as Pagination } from './pagination.vue';

package/src/components/pagination/pagination-content.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import { PaginationList, type PaginationListProps } from 'radix-vue';
+
+const props = defineProps<PaginationContentProps>();
+
+const delegated = reactiveOmit(props, 'class');
+</script>
+
+<script lang="ts">
+export interface PaginationContentProps extends PaginationListProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <PaginationList
+    v-slot="sprops"
+    data-slot="pagination-content"
+    v-bind="delegated"
+    :class="clsx('celeste-pagination-content', props.class)"
+  >
+    <slot v-bind="sprops" />
+  </PaginationList>
+</template>
+
+<style scoped>
+.celeste-pagination-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+</style>

package/src/components/pagination/pagination-ellipsis.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import { PaginationEllipsis, type PaginationEllipsisProps as PrimitivePaginationEllipsisProps } from 'radix-vue';
+
+const props = defineProps<PaginationEllipsisProps>();
+
+const delegated = reactiveOmit(props, 'class');
+</script>
+
+<script lang="ts">
+export interface PaginationEllipsisProps extends PrimitivePaginationEllipsisProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <PaginationEllipsis
+    v-bind="delegated"
+    :class="clsx('celeste-pagination-element', 'celeste-pagination-ellipsis', props.class)"
+    data-slot="pagination-ellipsis"
+  >
+    <slot>
+      <span class="celeste-pagination-ellipsis-dots">...</span>
+      <span class="celeste-pagination-ellipsis-sr">More pages</span>
+    </slot>
+  </PaginationEllipsis>
+</template>
+
+<style lang="scss" scoped>
+.celeste-pagination-ellipsis {
+  user-select: none;
+}
+
+.celeste-pagination-ellipsis .celeste-pagination-ellipsis-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border-width: 0;
+  white-space: nowrap;
+}
+</style>

package/src/components/pagination/pagination-first.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import { PaginationFirst, type PaginationFirstProps as PrimitivePaginationFirstProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<PaginationFirstProps>();
+
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardProps(delegated);
+</script>
+
+<script lang="ts">
+export interface PaginationFirstProps extends PrimitivePaginationFirstProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <PaginationFirst
+    :class="clsx('celeste-pagination-element', 'celeste-pagination-first', props.class)"
+    data-slot="pagination-first"
+    v-bind="forwarded"
+  >
+    <slot>
+      <i class="i-celeste-arrow-left-double-line" />
+    </slot>
+  </PaginationFirst>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import { PaginationListItem, type PaginationListItemProps } from 'radix-vue';
+
+const props = defineProps<PaginationItemProps>();
+
+const delegated = reactiveOmit(props, 'class', 'isActive', 'disabled');
+</script>
+
+<script lang="ts">
+export interface PaginationItemProps extends PaginationListItemProps {
+  class?: HTMLAttributes['class'];
+  isActive?: boolean;
+  disabled?: boolean;
+}
+</script>
+
+<template>
+  <PaginationListItem
+    v-bind="delegated"
+    data-slot="pagination-item"
+    :class="clsx('celeste-pagination-element', 'celeste-pagination-item', props.class, { 'celeste-pagination-item-active': props.isActive }, props.disabled && 'celeste-pagination-item-disabled')"
+  >
+    <slot />
+  </PaginationListItem>
+</template>

package/src/components/pagination/pagination-last.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import { PaginationLast, type PaginationLastProps as PrimitivePaginationLastProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<PaginationLastProps>();
+
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardProps(delegated);
+</script>
+
+<script lang="ts">
+export interface PaginationLastProps extends PrimitivePaginationLastProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <PaginationLast
+    :class="clsx('celeste-pagination-element', 'celeste-pagination-last', props.class)"
+    data-slot="pagination-last"
+    v-bind="forwarded"
+  >
+    <slot>
+      <i class="i-celeste-arrow-right-double-line" />
+    </slot>
+  </PaginationLast>
+</template>

package/src/components/pagination/pagination-next.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import { PaginationNext, type PaginationNextProps as PrimitivePaginationNextProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<PaginationNextProps>();
+
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardProps(delegated);
+</script>
+
+<script lang="ts">
+export interface PaginationNextProps extends PrimitivePaginationNextProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <PaginationNext
+    :class="clsx('celeste-pagination-element', 'celeste-pagination-next', props.class)"
+    data-slot="pagination-next"
+    v-bind="forwarded"
+  >
+    <slot>
+      <i class="i-celeste-arrow-right-s-line" />
+    </slot>
+  </PaginationNext>
+</template>

package/src/components/pagination/pagination-previous.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import {
+  PaginationPrev as PaginationPrevious,
+  type PaginationPrevProps as PrimitivePaginationPreviousProps,
+  useForwardProps,
+} from 'radix-vue';
+
+const props = defineProps<PaginationPreviousProps>();
+
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardProps(delegated);
+</script>
+
+<script lang="ts">
+export interface PaginationPreviousProps extends PrimitivePaginationPreviousProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <PaginationPrevious
+    :class="clsx('celeste-pagination-element', 'celeste-pagination-previous', props.class)"
+    data-slot="pagination-previous"
+    v-bind="forwarded"
+  >
+    <slot>
+      <i class="i-celeste-arrow-left-s-line" />
+    </slot>
+  </PaginationPrevious>
+</template>