pukaad-ui-lib 1.0.1

package/dist/runtime/components/tab.d.vue.ts

@@ -0,0 +1,48 @@
+import type { TabProps, TabColor, TabVariant } from "@/types/components/tab";
+type __VLS_Props = TabProps;
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: `tab-${any}-label`, __VLS_8: {
+    active: boolean;
+    disabled: any;
+}, __VLS_11: `tab-${any}-label-text`, __VLS_12: {}, __VLS_15: `tab-${any}-label-text-prepend-icon`, __VLS_16: {}, __VLS_24: `tab-${any}-label-text-word`, __VLS_25: {}, __VLS_28: `tab-${any}-label-text-append-icon`, __VLS_29: {}, __VLS_47: `tab-content-${any}`, __VLS_48: {
+    active: boolean;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+} & {
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
+} & {
+    [K in NonNullable<typeof __VLS_28>]?: (props: typeof __VLS_29) => any;
+} & {
+    [K in NonNullable<typeof __VLS_47>]?: (props: typeof __VLS_48) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    variant: TabVariant;
+    color: TabColor;
+    items: Item[];
+    tabButtonSize: import("@/types/components/tab").TabButtonSize;
+    tabButtonGap: string | number;
+    changeTabContentReset: boolean;
+    disabledHeader: boolean;
+    disabledHeaderDivider: boolean;
+    disabledContent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/tab.vue

@@ -0,0 +1,176 @@
+<template>
+  <div v-if="!props.disabledHeader">
+    <div class="relative">
+      <button
+        v-if="!isTabScrollLeft"
+        :class="[
+  'absolute flex items-center justify-start left-0 top-1/2 transform -translate-y-1/2',
+  'bg-gradient-to-r from-white via-white to-transparent w-12 cursor-pointer',
+  buttonSize
+]"
+        @click="onScrollLeft"
+      >
+        <Icon name="mdi:chevron-left" size="24" />
+      </button>
+
+      <div
+        ref="tabHeaderRef"
+        class="flex overflow-x-hidden"
+        :style="{
+  columnGap: `${props.tabButtonGap}px`
+}"
+      >
+        <div v-for="(tab, i) in items" :key="i" @click="activeTab = tab.value">
+          <slot
+            :name="`tab-${tab.value}-label`"
+            :active="activeTab == tab.value"
+            :disabled="tab.disabled"
+          >
+            <button
+              :class="[
+  'flex items-center justify-center font-body-large p-[16px] gap-[8px] text-nowrap',
+  'cursor-pointer disabled:cursor-not-allowed',
+  tab.disabled ? 'text-cloud' : 'text-gray',
+  color(tab.value),
+  buttonSize
+]"
+              :disabled="tab.disabled"
+            >
+              <slot :name="`tab-${tab.value}-label-text`">
+                <slot
+                  v-if="
+  $slots[`tab-${tab.value}-label-text-prepend-icon`] || props.tabButtonPrependIcon
+"
+                  :name="`tab-${tab.value}-label-text-prepend-icon`"
+                >
+                  <Icon :name="props.tabButtonPrependIcon" />
+                </slot>
+                <slot :name="`tab-${tab.value}-label-text-word`">
+                  {{ tab.label }}
+                </slot>
+                <slot
+                  v-if="
+  $slots[`tab-${tab.value}-label-text-append-icon`] || props.tabButtonAppendIcon
+"
+                  :name="`tab-${tab.value}-label-text-append-icon`"
+                >
+                  <Icon :name="props.tabButtonAppendIcon" />
+                </slot>
+              </slot>
+            </button>
+          </slot>
+        </div>
+      </div>
+
+      <button
+        v-if="!isTabScrollRight"
+        :class="[
+  'absolute flex items-center justify-end right-0 top-1/2 transform -translate-y-1/2',
+  'bg-gradient-to-l from-white via-white to-transparent w-12 cursor-pointer',
+  buttonSize
+]"
+        @click="onScrollRight"
+      >
+        <Icon name="mdi:chevron-right" size="24" />
+      </button>
+    </div>
+
+    <Divider
+      v-if="!props.disabledHeaderDivider && props.variant == 'text'"
+      class="mt-[-2px]"
+    />
+  </div>
+
+  <div
+    v-if="!props.disabledContent"
+    v-for="(content, i_content) in items"
+    :key="i_content"
+    v-show="activeTab == content.value"
+    :style="{
+  marginTop: !props.disabledHeader ? `${props.tabContentGab}px` : '0px'
+}"
+  >
+    <slot
+      :name="`tab-content-${content.value}`"
+      :active="activeTab == content.value"
+    >
+      <div class="font-body-medium">
+        {{ content.content }}
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useScroll } from "@vueuse/core";
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  color: { type: String, required: false, default: "primary" },
+  variant: { type: String, required: false, default: "button" },
+  tabButtonPrependIcon: { type: String, required: false },
+  tabButtonAppendIcon: { type: String, required: false },
+  tabButtonSize: { type: String, required: false, default: "medium" },
+  tabButtonGap: { type: [String, Number], required: false, default: 8 },
+  tabContentGab: { type: null, required: false },
+  changeTabContentReset: { type: Boolean, required: false, default: false },
+  disabledHeader: { type: Boolean, required: false, default: false },
+  disabledHeaderDivider: { type: Boolean, required: false, default: false },
+  disabledContent: { type: Boolean, required: false, default: false }
+});
+const tabHeaderRef = ref(null);
+const activeTab = defineModel({ type: [String, Number] });
+const items = computed(() => {
+  return props.items?.filter((item) => !item.hidden);
+});
+const color = (tab) => {
+  if (activeTab.value == tab) {
+    const colors = {
+      primary: {
+        button: "font-body-large-prominent text-primary bg-info rounded-[8px] ",
+        text: " font-body-large-prominent text-primary border-b-[2px] border-primary",
+        outline: "font-body-large-prominent text-primary border-[1px] rounded-full"
+      },
+      black: {
+        button: "font-body-large-prominent bg-dark text-white rounded-[8px]",
+        text: "font-body-large-prominent border-b-[2px] text-black",
+        outline: "font-body-large-prominent border-[1px] border-black rounded-full text-black "
+      }
+    };
+    return colors[props.color]?.[props.variant];
+  } else {
+    const types = {
+      button: "bg-bright rounded-[8px]",
+      outline: "rounded-[8px] border-[1px] border-mercury rounded-full ",
+      text: ""
+    };
+    return types[props.variant];
+  }
+};
+const buttonSize = computed(() => {
+  const sizes = {
+    small: "h-[32px]",
+    medium: "h-[40px]",
+    large: "h-[48px]"
+  };
+  return sizes[props.tabButtonSize];
+});
+const { x, arrivedState } = useScroll(tabHeaderRef, {
+  behavior: "smooth"
+});
+const onScrollLeft = () => {
+  x.value -= 100;
+};
+const onScrollRight = () => {
+  x.value += 100;
+};
+const isTabScrollLeft = computed(() => {
+  return arrivedState.left;
+});
+const isTabScrollRight = computed(() => arrivedState.right);
+onMounted(() => {
+  if (!activeTab.value) {
+    activeTab.value = props.items[0]?.value;
+  }
+});
+</script>

package/dist/runtime/components/tab.vue.d.ts

@@ -0,0 +1,48 @@
+import type { TabProps, TabColor, TabVariant } from "@/types/components/tab";
+type __VLS_Props = TabProps;
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: `tab-${any}-label`, __VLS_8: {
+    active: boolean;
+    disabled: any;
+}, __VLS_11: `tab-${any}-label-text`, __VLS_12: {}, __VLS_15: `tab-${any}-label-text-prepend-icon`, __VLS_16: {}, __VLS_24: `tab-${any}-label-text-word`, __VLS_25: {}, __VLS_28: `tab-${any}-label-text-append-icon`, __VLS_29: {}, __VLS_47: `tab-content-${any}`, __VLS_48: {
+    active: boolean;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+} & {
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
+} & {
+    [K in NonNullable<typeof __VLS_28>]?: (props: typeof __VLS_29) => any;
+} & {
+    [K in NonNullable<typeof __VLS_47>]?: (props: typeof __VLS_48) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    variant: TabVariant;
+    color: TabColor;
+    items: Item[];
+    tabButtonSize: import("@/types/components/tab").TabButtonSize;
+    tabButtonGap: string | number;
+    changeTabContentReset: boolean;
+    disabledHeader: boolean;
+    disabledHeaderDivider: boolean;
+    disabledContent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/table.d.vue.ts

@@ -0,0 +1,58 @@
+import type { TableProps, TableHeader } from "@/types/components/table";
+type __VLS_Props = TableProps;
+declare const __VLS_defaultModels: {
+    page: number;
+};
+type __VLS_ModelProps = {
+    "page"?: typeof __VLS_defaultModels['page'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    item: TableHeader[];
+}, __VLS_8: {
+    items: Record<string, any>[];
+    header: TableHeader[] | undefined;
+}, __VLS_10: {
+    item: Record<string, any>;
+    header: TableHeader[] | undefined;
+    index: number;
+}, __VLS_13: `item-${string}`, __VLS_14: {
+    item: Record<string, any>;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_13>]?: (props: typeof __VLS_14) => any;
+} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    body?: (props: typeof __VLS_8) => any;
+} & {
+    item?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-page": (...args: any[]) => void;
+    "change-page": (...args: any[]) => void;
+    "click-row": (...args: any[]) => void;
+    "update:page": (value: number) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSelect-page"?: ((...args: any[]) => any) | undefined;
+    "onChange-page"?: ((...args: any[]) => any) | undefined;
+    "onClick-row"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
+    items: Record<string, any>[];
+    fullHeight: false;
+    totalPage: number;
+    disabledHeader: false;
+    itemHeader: TableHeader[];
+    headerAlinement: "start" | "center" | "end";
+    disabledSort: false;
+    paginationVisible: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/table.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="bg-white rounded-[8px] h-full">
+    <div
+      class="overflow-auto"
+      :style="{
+  height: props.fullHeight ? '100%' : `${props.height}px`
+}"
+    >
+      <table class="w-full">
+        <thead v-if="!props.disabledHeader">
+          <slot name="header" :item="props.itemHeader">
+            <tr>
+              <template v-for="(header, i) in itemHeaders" :key="i">
+                <th class="sticky top-0 bg-white">
+                  <div
+                    class="p-[14px] flex gap-[8px] text-gray font-label-sans-serif-large"
+                    :style="{
+  justifyContent: header.alinement || props.headerAlinement
+}"
+                  >
+                    <div class="flex">
+                      {{ header.label }}
+                    </div>
+                    <div
+                      :class="[
+  'flex justify-center items-center cursor-pointer',
+  sortkey === header.key && 'text-primary'
+]"
+                      @click="onSortBy(header.key)"
+                    >
+                      <Icon name="fa6-solid:sort" size="16" />
+                    </div>
+                  </div>
+                </th>
+              </template>
+            </tr>
+          </slot>
+        </thead>
+
+        <slot name="body" :items="items" :header="itemHeaders">
+          <tbody>
+            <tr
+              v-for="(body, i_body) in items"
+              :key="i_body"
+              @click="emit('click-row', body, i_body)"
+            >
+              <slot
+                name="item"
+                :item="body"
+                :header="itemHeaders"
+                :index="i_body"
+              >
+                <td
+                  v-for="(header, i_header) in itemHeaders"
+                  :key="i_header"
+                  class="font-body-medium border-y-[1px] border-mercury p-[14px]"
+                >
+                  <slot :name="`item-${header.key}`" :item="body">
+                    <div>
+                      {{ body[header.key] }}
+                    </div>
+                  </slot>
+                </td>
+              </slot>
+            </tr>
+          </tbody>
+        </slot>
+      </table>
+    </div>
+
+    <div
+      v-if="items.length === 0"
+      class="w-full h-full flex justify-center items-center p-[16px]"
+    >
+      <Icon name="pukaad:page-not-found" size="150"></Icon>
+    </div>
+
+    <div
+      v-if="items.length > 0"
+      class="p-[14px] flex justify-center items-center"
+    >
+      <Pagination
+        :totalPage="props.totalPage"
+        :totalVisible="props.paginationVisible"
+        @change="(e) => emit('change-page', e)"
+        @select="(e) => emit('select-page', e)"
+        v-model="page"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+const emit = defineEmits(["select-page", "change-page", "click-row"]);
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  itemHeader: { type: Array, required: false, default: () => [] },
+  headerAlinement: { type: String, required: false, default: "start" },
+  width: { type: [Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  fullHeight: { type: Boolean, required: false, default: false },
+  disabledHeader: { type: Boolean, required: false, default: false },
+  disabledSort: { type: Boolean, required: false, default: false },
+  totalPage: { type: Number, required: false, default: 2 },
+  paginationVisible: { type: Number, required: false, default: 5 }
+});
+const page = defineModel("page", {
+  default: 1
+});
+const sortkey = ref("");
+const sortDesc = ref(false);
+const itemHeaders = computed(() => {
+  if (props.itemHeader.length > 0) return props.itemHeader;
+  if (props.items.length === 0) return;
+  const header = Object.keys(props.items[0] || {}).map(
+    (key) => ({
+      label: key,
+      key,
+      sort: true
+    })
+  );
+  return header;
+});
+const items = computed(() => {
+  return props.items.slice().sort((a, b) => {
+    if (!sortkey.value) return 0;
+    const valueA = a[sortkey.value];
+    const valueB = b[sortkey.value];
+    if (valueA === valueB) return 0;
+    const comparison = valueA > valueB ? 1 : -1;
+    return sortDesc.value ? -comparison : comparison;
+  });
+});
+const onSortBy = (key) => {
+  sortkey.value = key;
+  sortDesc.value = !sortDesc.value;
+};
+</script>

package/dist/runtime/components/table.vue.d.ts

@@ -0,0 +1,58 @@
+import type { TableProps, TableHeader } from "@/types/components/table";
+type __VLS_Props = TableProps;
+declare const __VLS_defaultModels: {
+    page: number;
+};
+type __VLS_ModelProps = {
+    "page"?: typeof __VLS_defaultModels['page'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    item: TableHeader[];
+}, __VLS_8: {
+    items: Record<string, any>[];
+    header: TableHeader[] | undefined;
+}, __VLS_10: {
+    item: Record<string, any>;
+    header: TableHeader[] | undefined;
+    index: number;
+}, __VLS_13: `item-${string}`, __VLS_14: {
+    item: Record<string, any>;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_13>]?: (props: typeof __VLS_14) => any;
+} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    body?: (props: typeof __VLS_8) => any;
+} & {
+    item?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-page": (...args: any[]) => void;
+    "change-page": (...args: any[]) => void;
+    "click-row": (...args: any[]) => void;
+    "update:page": (value: number) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSelect-page"?: ((...args: any[]) => any) | undefined;
+    "onChange-page"?: ((...args: any[]) => any) | undefined;
+    "onClick-row"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
+    items: Record<string, any>[];
+    fullHeight: false;
+    totalPage: number;
+    disabledHeader: false;
+    itemHeader: TableHeader[];
+    headerAlinement: "start" | "center" | "end";
+    disabledSort: false;
+    paginationVisible: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/tooltip.d.vue.ts

@@ -0,0 +1,20 @@
+import type { TooltipProps } from "@/types/components/tooltip";
+declare var __VLS_1: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    text?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
+    delay: number;
+    position: import("@/types/components/tooltip").TooltipPosition;
+    arrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/tooltip.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="relative inline-block"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <slot name="default" />
+    <transition name="fade">
+      <div
+        v-if="isShowTooltip"
+        :class="['tooltip', positionClass, { 'has-arrow': props.arrow }]"
+      >
+        <slot v-if="$slots.text || props.text" name="text">
+          <div class="font-body-small">
+            {{ props.text }}
+          </div>
+        </slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  delay: { type: Number, required: false, default: 500 },
+  position: { type: String, required: false, default: "top" },
+  arrow: { type: Boolean, required: false, default: false },
+  text: { type: String, required: false }
+});
+const isShowTooltip = ref(false);
+let timer = null;
+const positionClass = computed(() => {
+  switch (props.position) {
+    case "bottom":
+      return "tooltip-bottom";
+    case "left":
+      return "tooltip-left";
+    case "right":
+      return "tooltip-right";
+    default:
+      return "tooltip-top";
+  }
+});
+const onMouseEnter = () => {
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    isShowTooltip.value = true;
+    timer = null;
+  }, props.delay);
+};
+const onMouseLeave = () => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  isShowTooltip.value = false;
+};
+</script>
+
+<style scoped>
+.tooltip{background-color:#fff;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.2);color:#000;font-size:14px;padding:6px 10px;position:absolute;white-space:nowrap;z-index:10}.tooltip-top{bottom:100%;left:50%;margin-bottom:8px;transform:translateX(-50%)}.tooltip-top.has-arrow:after{border:6px solid transparent;border-top-color:#fff;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}.tooltip-bottom{left:50%;margin-top:8px;top:100%;transform:translateX(-50%)}.tooltip-bottom.has-arrow:after{border:6px solid transparent;border-bottom-color:#fff;bottom:100%;content:"";left:50%;position:absolute;transform:translateX(-50%)}.tooltip-left{margin-right:8px;right:100%;top:50%;transform:translateY(-50%)}.tooltip-left.has-arrow:after{border:6px solid transparent;border-left-color:#fff;content:"";left:100%;position:absolute;top:50%;transform:translateY(-50%)}.tooltip-right{left:100%;margin-left:8px;top:50%;transform:translateY(-50%)}.tooltip-right.has-arrow:after{border:6px solid transparent;border-right-color:#fff;content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%)}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}
+</style>

package/dist/runtime/components/tooltip.vue.d.ts

@@ -0,0 +1,20 @@
+import type { TooltipProps } from "@/types/components/tooltip";
+declare var __VLS_1: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    text?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
+    delay: number;
+    position: import("@/types/components/tooltip").TooltipPosition;
+    arrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/alert/Alert.d.vue.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "vue";
+import type { AlertVariants } from ".";
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+    variant?: AlertVariants["variant"];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/alert/Alert.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+import { alertVariants } from ".";
+const props = defineProps({
+  class: { type: null, required: false },
+  variant: { type: null, required: false }
+});
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>