@youcan/celeste 0.6.57 → 0.6.60

package/dist/es/tooltip-content.js

@@ -0,0 +1,95 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
+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, aI as jg, aJ as Hg, aK as Wg } from "./chunks/index.js";
+/* empty css                                                                       */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "celeste-tooltip-content-box" };
+const _hoisted_2 = {
+  key: 0,
+  class: "celeste-tooltip-content-title"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "celeste-tooltip-content-description"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tooltip-content",
+  props: {
+    class: {},
+    size: { default: "sm" },
+    variant: { default: "light" },
+    icon: {},
+    title: {},
+    description: {},
+    dismissible: { type: Boolean },
+    onDismiss: {},
+    forceMount: { type: Boolean },
+    ariaLabel: {},
+    asChild: { type: Boolean },
+    as: {},
+    side: {},
+    sideOffset: { default: 12 },
+    align: {},
+    alignOffset: {},
+    avoidCollisions: { type: Boolean },
+    collisionBoundary: {},
+    collisionPadding: {},
+    arrowPadding: {},
+    sticky: {},
+    hideWhenDetached: { type: Boolean }
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegated = useDelegatedProps(props, ["class", "size", "variant", "icon", "title", "description", "dismissible", "onDismiss"]);
+    const forwarded = xe(delegated, emits);
+    function handleDismiss() {
+      var _a;
+      (_a = props.onDismiss) == null ? void 0 : _a.call(props);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(jg), { class: "celeste-tooltip-portal" }, {
+        default: withCtx(() => [
+          createVNode(unref(Hg), mergeProps(unref(forwarded), {
+            size: _ctx.size,
+            variant: _ctx.variant,
+            class: unref(clsx)("celeste-tooltip-content", props.class)
+          }), {
+            default: withCtx(() => [
+              _ctx.icon ? (openBlock(), createElementBlock("i", {
+                key: 0,
+                class: normalizeClass(`celeste-tooltip-content-icon ${_ctx.icon}`)
+              }, null, 2)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_1, [
+                _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+                _ctx.description ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true),
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ]),
+              _ctx.dismissible ? (openBlock(), createBlock(CompactButton, {
+                key: 1,
+                variant: "ghost",
+                icon: "i-celeste-close-line",
+                onClick: handleDismiss
+              })) : createCommentVNode("", true),
+              createVNode(unref(Wg), { "as-child": "" }, {
+                default: withCtx(() => _cache[0] || (_cache[0] = [
+                  createElementVNode("span", { class: "celeste-tooltip-content-arrow" }, null, -1)
+                ])),
+                _: 1
+              })
+            ]),
+            _: 3
+          }, 16, ["size", "variant", "class"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const TooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14ac7b61"]]);
+export {
+  TooltipContent as default
+};

package/dist/es/tooltip-provider.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "./chunks/tooltip-provider.js";
+export {
+  _sfc_main as default
+};

package/dist/es/tooltip-root.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "./chunks/tooltip-root.js";
+export {
+  _sfc_main as default
+};

package/dist/es/tooltip-trigger.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "./chunks/tooltip-trigger.js";
+export {
+  _sfc_main as default
+};

package/dist/es/tooltip.js

@@ -1,116 +1,4 @@
-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 { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _hoisted_1 = { class: "celeste-tooltip-content-box" };
-const _hoisted_2 = {
-  key: 0,
-  class: "celeste-tooltip-content-title"
-};
-const _hoisted_3 = {
-  key: 1,
-  class: "celeste-tooltip-content-description"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "tooltip",
-  props: {
-    class: {},
-    size: { default: "sm" },
-    variant: { default: "light" },
-    icon: {},
-    title: {},
-    description: {},
-    dismissible: { type: Boolean },
-    defaultOpen: { type: Boolean },
-    open: { type: Boolean },
-    delayDuration: { default: 0 },
-    disableHoverableContent: { type: Boolean },
-    disableClosingTrigger: { type: Boolean },
-    disabled: { type: Boolean },
-    ignoreNonKeyboardFocus: { type: Boolean },
-    forceMount: { type: Boolean },
-    ariaLabel: {},
-    asChild: { type: Boolean },
-    as: {},
-    side: {},
-    sideOffset: { default: 12 },
-    align: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean },
-    collisionBoundary: {},
-    collisionPadding: {},
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean }
-  },
-  emits: ["update:open"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const forwarded = xe(props, emits);
-    const isOpen = ref(props.defaultOpen);
-    function close() {
-      isOpen.value = false;
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Lg), null, {
-        default: withCtx(() => [
-          createVNode(unref(zg), mergeProps(unref(forwarded), {
-            open: props.open || isOpen.value,
-            "onUpdate:open": _cache[0] || (_cache[0] = (state) => isOpen.value = state)
-          }), {
-            default: withCtx(() => [
-              createVNode(unref(Kg), { "as-child": "" }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "default", {}, void 0, true)
-                ]),
-                _: 3
-              }),
-              createVNode(unref(jg), { class: "celeste-tooltip-portal" }, {
-                default: withCtx(() => [
-                  createVNode(unref(Hg), mergeProps({ ...unref(forwarded), ..._ctx.$attrs }, {
-                    size: _ctx.size,
-                    variant: _ctx.variant,
-                    class: unref(clsx)("celeste-tooltip-content", props.class)
-                  }), {
-                    default: withCtx(() => [
-                      _ctx.icon ? (openBlock(), createElementBlock("i", {
-                        key: 0,
-                        class: normalizeClass(`celeste-tooltip-content-icon ${_ctx.icon}`)
-                      }, null, 2)) : createCommentVNode("", true),
-                      createElementVNode("div", _hoisted_1, [
-                        _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
-                        _ctx.description ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
-                      ]),
-                      _ctx.dismissible ? (openBlock(), createBlock(CompactButton, {
-                        key: 1,
-                        variant: "ghost",
-                        icon: "i-celeste-close-line",
-                        onClick: close
-                      })) : createCommentVNode("", true),
-                      createVNode(unref(Wg), { "as-child": "" }, {
-                        default: withCtx(() => _cache[1] || (_cache[1] = [
-                          createElementVNode("span", { class: "celeste-tooltip-content-arrow" }, null, -1)
-                        ])),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  }, 16, ["size", "variant", "class"])
-                ]),
-                _: 1
-              })
-            ]),
-            _: 3
-          }, 16, ["open"])
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0dc4a40e"]]);
+import { _ as _sfc_main } from "./chunks/tooltip.js";
 export {
-  Tooltip as default
+  _sfc_main as default
 };

package/dist/es/use-color-model.js

@@ -1,6 +1,33 @@
-import { C, d } from "./chunks/use-color-model.js";
-import "vue";
+import { t as tinycolor } from "./chunks/tinycolor.js";
+import { computed } from "vue";
+const ColorPickerEmits = ["update:modelValue"];
+function defineColorModel(props, emit) {
+  let originalFormat;
+  const tinyColorRef = computed({
+    get: () => {
+      const colorInput = props.modelValue;
+      const value = tinycolor(colorInput);
+      originalFormat = value.getFormat();
+      return value;
+    },
+    set: (newValue) => {
+      const newTinyColor = tinycolor(newValue);
+      const transformedValue = transformToOriginalInputFormat(
+        newTinyColor,
+        originalFormat
+      );
+      emit("update:modelValue", transformedValue);
+    }
+  });
+  return tinyColorRef;
+}
+function transformToOriginalInputFormat(color, originalFormat) {
+  if (originalFormat === "hex" && color.getAlpha() < 1) {
+    return color.toString("hex8");
+  }
+  return color.toString(originalFormat);
+}
 export {
-  C as ColorPickerEmits,
-  d as defineColorModel
+  ColorPickerEmits,
+  defineColorModel
 };

package/dist/es/use-sidebar.js

@@ -0,0 +1,18 @@
+import { Q } from "./chunks/index.js";
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "17rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "52px";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const [useSidebar, provideSidebarContext] = Q("Sidebar");
+export {
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
+  provideSidebarContext,
+  useSidebar
+};

package/dist/index.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.57",
+  "version": "0.6.60",
   "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.60",
+    "@youcan/celeste-tokens": "0.6.60"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
@@ -59,6 +59,7 @@
     "@types/tinycolor2": "^1.4.6",
     "@typescript-eslint/typescript-estree": "^8.37.0",
     "@typescript-eslint/utils": "^8.37.0",
+    "@unocss/reset": "^66.5.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/compiler-core": "^3.5.17",
     "@vue/test-utils": "^2.4.6",

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps as PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { CollapsibleContent } from 'radix-vue';
+
+const props = defineProps<CollapsibleContentProps>();
+</script>
+
+<script lang="ts">
+export interface CollapsibleContentProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <CollapsibleContent
+    v-bind="props"
+    :class="clsx('celeste-collapsible-content', props.class)"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>
+
+<style lang="css">
+.celeste-collapsible-content {
+  overflow: hidden;
+  transition: all var(--animation-normal);
+}
+
+.celeste-collapsible-content[data-state='closed'] {
+  animation: celeste-collapsible-up var(--animation-normal);
+}
+
+.celeste-collapsible-content[data-state='open'] {
+  animation: celeste-collapsible-down var(--animation-normal);
+}
+</style>

package/src/components/collapsible/collapsible-trigger.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps as PrimitiveProps } from 'radix-vue';
+import { CollapsibleTrigger } from 'radix-vue';
+
+const props = defineProps<CollapsibleTriggerProps>();
+</script>
+
+<script lang="ts">
+export interface CollapsibleTriggerProps extends PrimitiveProps {}
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>

package/src/components/collapsible/collapsible.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue';
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<CollapsibleProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<script lang="ts">
+export interface CollapsibleProps extends CollapsibleRootProps {}
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>

package/src/components/collapsible/index.ts

@@ -0,0 +1,6 @@
+export { default as CollapsibleContent } from './collapsible-content.vue';
+export * from './collapsible-content.vue';
+export { default as CollapsibleTrigger } from './collapsible-trigger.vue';
+export * from './collapsible-trigger.vue';
+export { default as Collapsible } from './collapsible.vue';
+export * from './collapsible.vue';

package/src/components/collapsible/stories/collapsible.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import CompactButton from '@/components/button/compact-button.vue';
+import { ref } from 'vue';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../index';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'Components/Collapsible',
+  component: Collapsible,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Collapsible>;
+
+export const Simple: Story = {
+  render: args => ({
+    components: {
+      Collapsible,
+      CollapsibleContent,
+      CollapsibleTrigger,
+      CompactButton,
+    },
+    setup() {
+      const isOpen = ref(false);
+
+      return { args, isOpen };
+    },
+    template: `
+      <div style="max-width: 450px;">
+        <Collapsible v-model:open="isOpen" v-bind="args">
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-16);">
+            <h4 style="font: var(--label-md); color: var(--color-text-strong-950);">
+              @azuradara starred 3 repositories
+            </h4>
+            <CollapsibleTrigger as-child>
+              <CompactButton 
+                variant="ghost" 
+                size="sm" 
+                :icon="isOpen ? 'i-celeste-arrow-up-s-line' : 'i-celeste-arrow-down-s-line'"
+              />
+            </CollapsibleTrigger>
+          </div>
+          
+          <div style="padding: 0 var(--spacing-16) var(--spacing-16) var(--spacing-16);">
+            <div style="display: flex; align-items: center; gap: var(--spacing-8); padding: var(--spacing-8); border-radius: var(--radius-8); border: 1px solid var(--color-stroke-soft-200);">
+              <i class="i-celeste-github-fill" style="width: 16px; height: 16px;"></i>
+              <span style="font: var(--label-sm); color: var(--color-text-strong-950);">@radix-ui/primitives</span>
+            </div>
+          </div>
+          
+          <CollapsibleContent>
+            <div style="padding: 0 var(--spacing-16) var(--spacing-16) var(--spacing-16); display: flex; flex-direction: column; gap: var(--spacing-8);">
+              <div style="display: flex; align-items: center; gap: var(--spacing-8); padding: var(--spacing-8); border-radius: var(--radius-8); border: 1px solid var(--color-stroke-soft-200);">
+                <i class="i-celeste-github-fill" style="width: 16px; height: 16px;"></i>
+                <span style="font: var(--label-sm); color: var(--color-text-strong-950);">@radix-ui/colors</span>
+              </div>
+              <div style="display: flex; align-items: center; gap: var(--spacing-8); padding: var(--spacing-8); border-radius: var(--radius-8); border: 1px solid var(--color-stroke-soft-200);">
+                <i class="i-celeste-github-fill" style="width: 16px; height: 16px;"></i>
+                <span style="font: var(--label-sm); color: var(--color-text-strong-950);">@youcan-shop/egg</span>
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    `,
+  }),
+};

package/src/components/index.ts

@@ -2,6 +2,7 @@ export * from './alert';
 export * from './badge';
 export * from './button';
 export * from './checkbox';
+export * from './collapsible';
 export * from './color-picker';
 export * from './combobox';
 export * from './content-divider';
@@ -12,6 +13,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';
@@ -19,6 +21,8 @@ export * from './rich-editor';
 export * from './scroll-area';
 export * from './segmented-control';
 export * from './select';
+export * from './sheet';
+export * from './sidebar';
 export * from './slider';
 export * from './sonner';
 export * from './switch';

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>