@youcan/celeste 0.6.56 → 0.6.59

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/table-body.js

@@ -0,0 +1,24 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                                  */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-body",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("tbody", {
+        class: normalizeClass(unref(clsx)("celeste-table-body", props.class))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const tableBody = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b9eb0cd1"]]);
+export {
+  tableBody as default
+};

package/dist/es/table-caption.js

@@ -0,0 +1,24 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                                     */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-caption",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("caption", {
+        class: normalizeClass(unref(clsx)("celeste-table-caption", props.class))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const tableCaption = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-13a21605"]]);
+export {
+  tableCaption as default
+};

package/dist/es/table-cell.js

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-cell",
+  props: {
+    class: {},
+    end: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("td", {
+        class: normalizeClass(unref(clsx)("celeste-table-cell", props.class, {
+          "celeste-table-cell-align-end": props.end
+        }))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const TableCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5f65ee4a"]]);
+export {
+  TableCell as default
+};

package/dist/es/table-empty.js

@@ -0,0 +1,44 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, createElementVNode, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                                  */
+/* empty css                                                                     */
+import TableCell from "./table-cell.js";
+import { useDelegatedProps } from "./use-delegated-props.js";
+/* empty css                                                                    */
+/* empty css                                                                  */
+import TableRow from "./table-row.js";
+/* empty css                                                             */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "celeste-table-empty-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-empty",
+  props: {
+    colspan: { default: 1 },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegated = useDelegatedProps(props, "class");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TableRow), null, {
+        default: withCtx(() => [
+          createVNode(unref(TableCell), mergeProps(unref(delegated), {
+            class: unref(clsx)("celeste-table-empty", props.class)
+          }), {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1, [
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ])
+            ]),
+            _: 3
+          }, 16, ["class"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const tableEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1c0042ab"]]);
+export {
+  tableEmpty as default
+};

package/dist/es/table-footer.js

@@ -0,0 +1,24 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                                    */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-footer",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("tfoot", {
+        class: normalizeClass(unref(clsx)("celeste-table-footer", props.class))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const tableFooter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-50b76b8f"]]);
+export {
+  tableFooter as default
+};

package/dist/es/table-head.js

@@ -0,0 +1,25 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                                  */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-head",
+  props: {
+    class: {},
+    end: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("th", {
+        class: normalizeClass(unref(clsx)("celeste-table-head", props.class, { "celeste-table-head-align-end": props.end }))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const tableHead = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-76a52252"]]);
+export {
+  tableHead as default
+};

package/dist/es/table-header.js

@@ -0,0 +1,21 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-header",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("thead", {
+        class: normalizeClass(unref(clsx)("celeste-table-header", props.class))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/table-row.js

@@ -0,0 +1,32 @@
+import { defineComponent, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-row",
+  props: {
+    class: {},
+    hoverable: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("tr", {
+          class: normalizeClass(unref(clsx)("celeste-table-row", props.class, { "celeste-table-row-hoverable": props.hoverable }))
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 2),
+        _cache[0] || (_cache[0] = createElementVNode("tr", {
+          "aria-hidden": "true",
+          class: "celeste-table-row-divider"
+        }, [
+          createElementVNode("td", { colspan: "100" })
+        ], -1))
+      ], 64);
+    };
+  }
+});
+const TableRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5a7011d2"]]);
+export {
+  TableRow as default
+};

package/dist/es/table.js

@@ -0,0 +1,27 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                             */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "celeste-table-wrapper" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("table", {
+          class: normalizeClass(unref(clsx)("celeste-table", props.class))
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 2)
+      ]);
+    };
+  }
+});
+const table = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8ed967fe"]]);
+export {
+  table 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, aE as Lg, aF as zg, aG as Kg, aH as jg, aI as Hg, aJ 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.56",
+  "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.56",
-    "@youcan/celeste-tokens": "0.6.56"
+    "@youcan/celeste-icons": "0.6.59",
+    "@youcan/celeste-tokens": "0.6.59"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
@@ -53,6 +53,7 @@
     "@storybook/addon-knobs": "^8.0.1",
     "@storybook/addon-onboarding": "^9.1.10",
     "@storybook/vue3-vite": "^9.1.10",
+    "@tanstack/vue-table": "^8.20.5",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/tinycolor2": "^1.4.6",

package/src/components/color-picker/composable/use-color-model.ts

@@ -36,5 +36,9 @@ export function defineColorModel(props: useTinyColorModelProps, emit: any): Writ
 }
 
 function transformToOriginalInputFormat(color: tinycolor.Instance, originalFormat?: TinyColorFormat): any {
+  if (originalFormat === 'hex' && color.getAlpha() < 1) {
+    return color.toString('hex8');
+  }
+
   return color.toString(originalFormat);
 }

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>