pukaad-ui-lib 1.332.0 → 1.333.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.332.0",
+  "version": "1.333.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/chart/chart-approval-activity.d.vue.ts

@@ -0,0 +1,35 @@
+export type ApprovalStatusKey = "pending" | "approved" | "rejected";
+export interface ApprovalSeriesPoint {
+    date: string | Date;
+    value: number;
+}
+export interface ApprovalSeries {
+    /** เดือนที่โฟกัสของแถวนี้ (controlled โดย parent) */
+    month?: string | Date;
+    /** ข้อมูลรายวันของแถวนี้ */
+    data?: ApprovalSeriesPoint[];
+    /** ตัวเลขสรุปของแถว — ถ้าไม่ส่งจะรวมจาก data ให้ */
+    summary?: number;
+}
+type __VLS_Props = {
+    pending?: ApprovalSeries;
+    approved?: ApprovalSeries;
+    rejected?: ApprovalSeries;
+    /** locale ของชื่อเดือน (default en-US ตาม Figma) */
+    locale?: string;
+    /** ความสูง component เช่น "600px" หรือ 600 — ไม่ส่ง = เต็ม parent */
+    height?: string | number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (key: ApprovalStatusKey, month: Date) => any;
+    prev: (key: ApprovalStatusKey, month: Date) => any;
+    next: (key: ApprovalStatusKey, month: Date) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+    onPrev?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+    onNext?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+}>, {
+    locale: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chart/chart-approval-activity.vue

@@ -0,0 +1,152 @@
+<script setup>
+import { computed } from "vue";
+import { VisAxis, VisGroupedBar, VisXYContainer } from "@unovis/vue";
+import { ChartContainer } from "#pukaad-ui/runtime/components/ui/chart";
+const props = defineProps({
+  pending: { type: Object, required: false },
+  approved: { type: Object, required: false },
+  rejected: { type: Object, required: false },
+  locale: { type: String, required: false, default: "en-US" },
+  height: { type: [String, Number], required: false }
+});
+const emit = defineEmits(["change", "prev", "next"]);
+const rows = [
+  { key: "pending", title: "\u0E23\u0E2D\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19", color: "#FEF3C7" },
+  { key: "approved", title: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E49\u0E27", color: "#E3F5E3" },
+  { key: "rejected", title: "\u0E1B\u0E0F\u0E34\u0E40\u0E2A\u0E18", color: "#FDE3E3" }
+];
+const summaryMeta = [
+  { key: "pending", label: "\u0E23\u0E2D\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19", color: "#F9A825" },
+  { key: "approved", label: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E49\u0E27", color: "#43A047" },
+  { key: "rejected", label: "\u0E1B\u0E0F\u0E34\u0E40\u0E2A\u0E18", color: "#D32F2F" }
+];
+const chartConfig = {};
+const seriesByKey = computed(() => ({
+  pending: props.pending ?? {},
+  approved: props.approved ?? {},
+  rejected: props.rejected ?? {}
+}));
+const normalizedByKey = computed(() => {
+  const out = { pending: [], approved: [], rejected: [] };
+  for (const r of rows) {
+    out[r.key] = (seriesByKey.value[r.key].data ?? []).map((d) => ({
+      _date: d.date instanceof Date ? d.date : new Date(d.date),
+      value: d.value ?? 0
+    }));
+  }
+  return out;
+});
+const monthByKey = computed(() => {
+  const out = {};
+  for (const r of rows) {
+    const m = seriesByKey.value[r.key].month;
+    out[r.key] = m ? m instanceof Date ? m : new Date(m) : /* @__PURE__ */ new Date();
+  }
+  return out;
+});
+const summaryByKey = computed(() => {
+  const out = {};
+  for (const r of rows) {
+    const s = seriesByKey.value[r.key].summary;
+    out[r.key] = s ?? normalizedByKey.value[r.key].reduce((a, p) => a + p.value, 0);
+  }
+  return out;
+});
+const rootHeight = computed(
+  () => props.height == null ? void 0 : typeof props.height === "number" ? `${props.height}px` : props.height
+);
+const addMonths = (d, delta) => new Date(d.getFullYear(), d.getMonth() + delta, 1);
+const fmtMonth = (d, withYear) => d.toLocaleDateString(props.locale, {
+  month: "long",
+  ...withYear ? { year: "numeric" } : {}
+});
+const monthLabelOf = (k) => fmtMonth(monthByKey.value[k], true);
+const prevLabelOf = (k) => fmtMonth(addMonths(monthByKey.value[k], -1), false);
+const nextLabelOf = (k) => fmtMonth(addMonths(monthByKey.value[k], 1), false);
+const goPrev = (k) => {
+  const m = addMonths(monthByKey.value[k], -1);
+  emit("prev", k, m);
+  emit("change", k, m);
+};
+const goNext = (k) => {
+  const m = addMonths(monthByKey.value[k], 1);
+  emit("next", k, m);
+  emit("change", k, m);
+};
+const indicesOf = (k) => normalizedByKey.value[k].map((_, i) => i);
+const dayLabelOf = (k, i) => {
+  const d = normalizedByKey.value[k][i]?._date;
+  return d ? String(d.getDate()) : "";
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-[16px] w-full"
+    :class="rootHeight ? '' : 'h-full'"
+    :style="rootHeight ? { height: rootHeight } : void 0"
+  >
+    <div
+      v-for="(row, ri) in rows"
+      :key="row.key"
+      class="flex flex-col gap-[16px] flex-1 min-h-0"
+    >
+      <div class="flex items-end justify-between gap-[16px]">
+        <div class="font-title-small-prominent">{{ row.title }}</div>
+        <div v-if="ri === 0" class="flex gap-[17px]">
+          <div
+            v-for="m in summaryMeta"
+            :key="m.key"
+            class="flex flex-col items-center border rounded-[8px] py-[8px] px-[16px] min-w-[114px]"
+          >
+            <div
+              class="font-title-medium-prominent"
+              :style="{ color: m.color }"
+            >
+              {{ summaryByKey[m.key] }}
+            </div>
+            <div class="font-body-large-prominent text-gray">{{ m.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <ChartContainer
+        :config="chartConfig"
+        class="flex-1 min-h-0 w-full aspect-auto"
+      >
+        <VisXYContainer :data="normalizedByKey[row.key]">
+          <VisGroupedBar
+            :x="(_d, i) => i"
+            :y="[(d) => d.value]"
+            :color="[row.color]"
+            :rounded-corners="4"
+            bar-padding="0.25"
+          />
+          <VisAxis
+            type="x"
+            :x="(_d, i) => i"
+            :tick-values="indicesOf(row.key)"
+            :tick-format="(i) => dayLabelOf(row.key, i)"
+            :tick-line="false"
+            :domain-line="false"
+            :grid-line="false"
+          />
+        </VisXYContainer>
+      </ChartContainer>
+
+      <div
+        class="flex items-center justify-between font-label-sans-serif-small-prominent text-gray uppercase"
+      >
+        <div class="flex items-center cursor-pointer" @click="goPrev(row.key)">
+          <Icon name="lucide:chevrons-left" size="16" />
+          {{ prevLabelOf(row.key) }}
+        </div>
+        <div>{{ monthLabelOf(row.key) }}</div>
+        <div class="flex items-center cursor-pointer" @click="goNext(row.key)">
+          {{ nextLabelOf(row.key) }}
+          <Icon name="lucide:chevrons-right" size="16" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/chart/chart-approval-activity.vue.d.ts

@@ -0,0 +1,35 @@
+export type ApprovalStatusKey = "pending" | "approved" | "rejected";
+export interface ApprovalSeriesPoint {
+    date: string | Date;
+    value: number;
+}
+export interface ApprovalSeries {
+    /** เดือนที่โฟกัสของแถวนี้ (controlled โดย parent) */
+    month?: string | Date;
+    /** ข้อมูลรายวันของแถวนี้ */
+    data?: ApprovalSeriesPoint[];
+    /** ตัวเลขสรุปของแถว — ถ้าไม่ส่งจะรวมจาก data ให้ */
+    summary?: number;
+}
+type __VLS_Props = {
+    pending?: ApprovalSeries;
+    approved?: ApprovalSeries;
+    rejected?: ApprovalSeries;
+    /** locale ของชื่อเดือน (default en-US ตาม Figma) */
+    locale?: string;
+    /** ความสูง component เช่น "600px" หรือ 600 — ไม่ส่ง = เต็ม parent */
+    height?: string | number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (key: ApprovalStatusKey, month: Date) => any;
+    prev: (key: ApprovalStatusKey, month: Date) => any;
+    next: (key: ApprovalStatusKey, month: Date) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+    onPrev?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+    onNext?: ((key: ApprovalStatusKey, month: Date) => any) | undefined;
+}>, {
+    locale: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -50,15 +50,15 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     options: AutocompleteOption[] | string[] | number[];
     description: string;
-    limit: number;
+    labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     returnObject: boolean;
     freeText: boolean;
     valueKey: string;
-    labelKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -50,15 +50,15 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     options: AutocompleteOption[] | string[] | number[];
     description: string;
-    limit: number;
+    labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     returnObject: boolean;
     freeText: boolean;
     valueKey: string;
-    labelKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-birth-date.d.vue.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
+    locale: string;
     placeholder: string;
     disabledErrorMessage: boolean;
-    locale: string;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;
     minAge: number;

package/dist/runtime/components/input/input-birth-date.vue.d.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
+    locale: string;
     placeholder: string;
     disabledErrorMessage: boolean;
-    locale: string;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;
     minAge: number;

package/dist/runtime/components/input/input-combobox.d.vue.ts

@@ -55,9 +55,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
+    labelKey: string;
     limit: number;
     valueKey: string;
-    labelKey: string;
     multiple: boolean;
     placeholderSearch: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-combobox.vue.d.ts

@@ -55,9 +55,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
+    labelKey: string;
     limit: number;
     valueKey: string;
-    labelKey: string;
     multiple: boolean;
     placeholderSearch: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    locale: string;
     placeholder: string;
     disabledErrorMessage: boolean;
-    locale: string;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;
     showTime: boolean;

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    locale: string;
     placeholder: string;
     disabledErrorMessage: boolean;
-    locale: string;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;
     showTime: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: LocalizedNameItem[];
     options: InputSelectItem[];
-    limit: number;
     placeholder: string;
+    limit: number;
     showCounter: boolean;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: LocalizedNameItem[];
     options: InputSelectItem[];
-    limit: number;
     placeholder: string;
+    limit: number;
     showCounter: boolean;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-suggest.d.vue.ts

@@ -20,12 +20,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    limit: number;
+    labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    labelKey: string;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-suggest.vue.d.ts

@@ -20,12 +20,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    limit: number;
+    labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    labelKey: string;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-textarea.d.vue.ts

@@ -46,12 +46,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
+    rows: number;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     readonly: boolean;
-    rows: number;
     heightScroll: boolean;
     spaceToComma: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-textarea.vue.d.ts

@@ -46,12 +46,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
+    rows: number;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     readonly: boolean;
-    rows: number;
     heightScroll: boolean;
     spaceToComma: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/alert-dialog/AlertDialog.vue

@@ -2,7 +2,8 @@
 import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui";
 const props = defineProps({
   open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false }
+  defaultOpen: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:open"]);
 const forwarded = useForwardPropsEmits(props, emits);

package/dist/runtime/components/ui/calendar/Calendar.d.vue.ts

@@ -30,7 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((date: DateValue | undefined) => any) | undefined;
     "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
 }>, {
-    modelValue: DateValue | DateValue[];
+    modelValue: DateValue | DateValue[] | null;
     layout: "month-and-year" | "month-only" | "year-only";
     reverseYears: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/calendar/Calendar.vue.d.ts

@@ -30,7 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((date: DateValue | undefined) => any) | undefined;
     "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
 }>, {
-    modelValue: DateValue | DateValue[];
+    modelValue: DateValue | DateValue[] | null;
     layout: "month-and-year" | "month-only" | "year-only";
     reverseYears: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/chart/ChartContainer.d.vue.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "vue";
+import type { ChartConfig } from ".";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    id?: HTMLAttributes["id"];
+    class?: HTMLAttributes["class"];
+    config: ChartConfig;
+    cursor?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id?: HTMLAttributes["id"];
+    class?: HTMLAttributes["class"];
+    config: ChartConfig;
+    cursor?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default: {
+        id: string;
+        config: ChartConfig;
+    };
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/chart/ChartContainer.vue

@@ -0,0 +1,49 @@
+<script>
+import { useId } from "reka-ui";
+import { computed, toRefs } from "vue";
+import { cn } from "#pukaad-ui/runtime/plugins/shadcn";
+import { provideChartContext } from ".";
+import ChartStyle from "./ChartStyle.vue";
+</script>
+
+<script setup>
+const props = defineProps({
+  id: { type: null, required: false },
+  class: { type: null, required: false },
+  config: { type: null, required: true },
+  cursor: { type: Boolean, required: false }
+});
+defineSlots();
+const { config } = toRefs(props);
+const uniqueId = useId();
+const chartId = computed(() => `chart-${props.id || uniqueId.replace(/:/g, "")}`);
+provideChartContext({
+  id: uniqueId,
+  config
+});
+</script>
+
+<template>
+  <div
+    data-slot="chart"
+    :data-chart="chartId"
+    :class="cn(
+  `[&_.tick_text]:!fill-muted-foreground [&_.tick_line]:!stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex flex-col aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden [&_[data-vis-xy-container]]:h-full [&_[data-vis-single-container]]:h-full h-full [&_[data-vis-xy-container]]:w-full [&_[data-vis-single-container]]:w-full w-full `,
+  props.class
+)"
+    :style="{
+  '--vis-tooltip-padding': '0px',
+  '--vis-tooltip-background-color': 'transparent',
+  '--vis-tooltip-border-color': 'transparent',
+  '--vis-tooltip-text-color': 'none',
+  '--vis-tooltip-shadow-color': 'none',
+  '--vis-tooltip-backdrop-filter': 'none',
+  '--vis-crosshair-circle-stroke-color': '#0000',
+  '--vis-crosshair-line-stroke-width': cursor ? '1px' : '0px',
+  '--vis-font-family': 'var(--font-sans)'
+}"
+  >
+    <slot :id="uniqueId" :config="config" />
+    <ChartStyle :id="chartId" />
+  </div>
+</template>

package/dist/runtime/components/ui/chart/ChartContainer.vue.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "vue";
+import type { ChartConfig } from ".";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    id?: HTMLAttributes["id"];
+    class?: HTMLAttributes["class"];
+    config: ChartConfig;
+    cursor?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id?: HTMLAttributes["id"];
+    class?: HTMLAttributes["class"];
+    config: ChartConfig;
+    cursor?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default: {
+        id: string;
+        config: ChartConfig;
+    };
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/chart/ChartLegendContent.d.vue.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "vue";
+type __VLS_Props = {
+    hideIcon?: boolean;
+    nameKey?: string;
+    verticalAlign?: "bottom" | "top";
+    class?: HTMLAttributes["class"];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    verticalAlign: "bottom" | "top";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;