@firstnoodle-ui/bui 0.0.28 → 0.0.32

package/src/components/calendar-view/utils/utils/date.ts

@@ -1,130 +0,0 @@
-import { parseTimeUnit, TimeInMilliseconds, TimeUnit } from "./time.ts";
-
-type StringOrDate = string | Date;
-
-export const parseDate = (date: StringOrDate): Date => {
-  if (typeof date === "string") date = date.replace(/-/g, "\/");
-
-  const d = new Date(date);
-  const dateIsValid = !Number.isNaN(d.getTime()) && !d.toString().includes("Thu Jan 01 1970");
-
-  if (dateIsValid) {
-    return new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
-  }
-  throw new Error(`Invalid date [${date}]`);
-};
-
-export const dateDelta = (date1: StringOrDate, date2: StringOrDate, timeUnit: TimeUnit): number | null => {
-  if (date1 == null || date2 == null) return null;
-
-  date1 = parseDate(date1);
-  date2 = parseDate(date2);
-  const unit: keyof typeof TimeUnit | null = parseTimeUnit(timeUnit);
-
-  if (!date1 || !date2 || !unit) {
-    return null;
-  }
-  if (unit === TimeUnit.MONTH || unit === TimeUnit.YEAR) {
-    throw new Error("Cannot calculate delta in months or years");
-  }
-
-  const deltaMilliseconds = date1.getTime() - date2.getTime();
-
-  return deltaMilliseconds / TimeInMilliseconds[unit];
-};
-
-export const datesAreEqual = (date1: Date, date2: Date): boolean => {
-  date1 = parseDate(date1);
-  date2 = parseDate(date2);
-
-  if (!date1 || !date2) return false;
-
-  return (
-    date1.getUTCFullYear() === date2.getUTCFullYear()
-    && date1.getUTCMonth() === date2.getUTCMonth()
-    && date1.getUTCDate() === date2.getUTCDate()
-  );
-};
-
-export const dateIsAfter = (subjectDate: StringOrDate, targetDate: StringOrDate, includeTarget: boolean = false): boolean => {
-  subjectDate = parseDate(subjectDate);
-  targetDate = parseDate(targetDate);
-
-  return subjectDate.getTime() > targetDate.getTime() || (includeTarget && datesAreEqual(subjectDate, targetDate));
-};
-
-export const dateIsBefore = (subjectDate: StringOrDate, targetDate: StringOrDate, includeTarget: boolean = false): boolean => {
-  subjectDate = parseDate(subjectDate);
-  targetDate = parseDate(targetDate);
-
-  return subjectDate.getTime() < targetDate.getTime() || (includeTarget && datesAreEqual(subjectDate, targetDate));
-};
-
-export const dateIsBetween = (subjectDate: StringOrDate, startDate: StringOrDate, endDate: StringOrDate, includeStartAndEndDates: boolean = false): boolean => {
-  return dateIsAfter(subjectDate, startDate, includeStartAndEndDates) && dateIsBefore(subjectDate, endDate, includeStartAndEndDates);
-};
-
-export const getDecade = (date: Date): number => {
-  date = parseDate(date);
-  return Math.floor(date.getUTCFullYear() / 10) * 10;
-};
-
-export const getWeekNumber = (date: Date): number => {
-  const parsedDate = parseDate(date);
-
-  // Set to nearest Thursday: current date + 4 - current day number
-  // Make Sunday's day number 7
-  parsedDate.setUTCDate(parsedDate.getUTCDate() + 4 - (parsedDate.getUTCDay() || 7));
-
-  // Get first day of year
-  const yearStart = new Date(Date.UTC(parsedDate.getUTCFullYear(), 0, 1));
-
-  if (parsedDate && yearStart) {
-    ;
-    // Calculate full weeks to nearest Thursday
-    const weekNumber = Math.ceil(((parsedDate.getTime() - yearStart.getTime()) / TimeInMilliseconds.DAY + 1) / 7);
-    return weekNumber;
-  }
-
-  return 0;
-};
-
-export const moveDate = (date: StringOrDate, value: number, unit: TimeUnit): Date => {
-  const parsedDate = parseDate(date);
-  const parsedUnit = parseTimeUnit(unit);
-
-  if (parsedUnit === TimeUnit.MONTH) throw new Error("Cannot move date by month");
-
-  let unixTime = parsedDate.getTime();
-  unixTime += value * TimeInMilliseconds[parsedUnit as keyof typeof TimeInMilliseconds];
-  parsedDate.setTime(unixTime);
-
-  return parsedDate;
-};
-
-export const printDate = (date: Date): void => {
-  // eslint-disable-next-line no-console
-  console.log(
-    date
-      .toISOString()
-      .substr(0, 16)
-      .replace("T", " "),
-  );
-};
-
-export const stringifyDate = (date: StringOrDate): string | null => {
-  const parsedDate = parseDate(date);
-  if (!parsedDate) return null;
-
-  return parsedDate.toISOString().substring(0, 10);
-};
-
-export const stringifyDatetime = (date: StringOrDate): string | null => {
-  date = parseDate(date);
-  if (!date) return null;
-
-  return date
-    .toISOString()
-    .substring(0, 16)
-    .replace("T", " ");
-};

package/src/components/calendar-view/utils/utils/format.ts

@@ -1,61 +0,0 @@
-/**
- * Format a date string or object to a readable format (with optional day and time)
- * (Mon) 04 Oct 2021 (23:59)
- */
-const formatDateTimeReadable = (value: string | Date, includeDay: boolean = true, includeTime = false): string => {
-  const d = new Date(value);
-  const day = new Intl.DateTimeFormat("en-001", { weekday: "short" }).format(d);
-  const date = d.getDate().toString().padStart(2, "0");
-  const month = new Intl.DateTimeFormat("en-001", { month: "short" }).format(d);
-  const year = d.getFullYear();
-  const hours = d.getHours().toString().padStart(2, "0");
-  const minutes = d.getMinutes().toString().padStart(2, "0");
-
-  let result = `${date} ${month} ${year}`;
-
-  includeDay && (result = `${day} ${result}`);
-  includeTime && (result = `${result} ${hours}:${minutes}`);
-
-  return result;
-};
-
-export const readableDate = (value: string | Date): string => formatDateTimeReadable(value, false, false);
-export const readableDateWithDay = (value: string | Date): string => formatDateTimeReadable(value, true, false);
-export const readableDateTime = (value: string | Date): string => formatDateTimeReadable(value, false, true);
-export const readableDateTimeWithDay = (value: string | Date): string => formatDateTimeReadable(value, true, true);
-
-/**
- * Format a date string or object to the default Database date format withoptional time
- * 2021-10-04 (12:59)
- */
-const formatDateTimeDB = (value: string | Date, includeTime = false): string => {
-  const d = new Date(value);
-  const year = d.getFullYear();
-  const month = (d.getMonth() + 1).toString().padStart(2, "0");
-  const date = d.getDate().toString().padStart(2, "0");
-  const hours = d.getHours().toString().padStart(2, "0");
-  const minutes = d.getMinutes().toString().padStart(2, "0");
-
-  let result = `${year}-${month}-${date}`;
-  includeTime && (result = `${result} ${hours}:${minutes}`);
-
-  return result;
-};
-
-export const dbDate = (value: string | Date): string => formatDateTimeDB(value, false);
-export const dbDateTime = (value: string | Date): string => formatDateTimeDB(value, true);
-
-export const formatDate = {
-  readableDate,
-  readableDateWithDay,
-  readableDateTime,
-  readableDateTimeWithDay,
-  dbDate,
-  dbDateTime,
-};
-
-export const dateFormat = ["nnDate", "nnDateWithDay", "nnDateTime", "nnDateTimeWithDay", "dbDate", "dbDateTime"] as const;
-export type DateFormat = (typeof dateFormat)[number];
-
-export const readableDateFormat = ["readableDate", "readableDateWithDay", "readableDateTime", "readableDateTimeWithDay"] as const;
-export type ReadableDateFormat = (typeof readableDateFormat)[number];

package/src/components/calendar-view/utils/utils/time.ts

@@ -1,70 +0,0 @@
-export enum TimeUnit {
-  MILLISECOND = "MILLISECOND",
-  SECOND = "SECOND",
-  MINUTE = "MINUTE",
-  HOUR = "HOUR",
-  DAY = "DAY",
-  WEEK = "WEEK",
-  MONTH = "MONTH",
-  YEAR = "YEAR",
-  DECADE = "DECADE",
-}
-
-export const TimeUnitAcronym = {
-  MS: TimeUnit.MILLISECOND,
-  S: TimeUnit.SECOND,
-  M: TimeUnit.MINUTE,
-  H: TimeUnit.HOUR,
-  D: TimeUnit.DAY,
-  W: TimeUnit.WEEK,
-  MTH: TimeUnit.MONTH,
-  Y: TimeUnit.YEAR,
-  DC: TimeUnit.DECADE,
-};
-
-export const TimeInMilliseconds = {
-  [TimeUnit.MILLISECOND]: 1,
-  [TimeUnit.SECOND]: 1000,
-  [TimeUnit.MINUTE]: 60000,
-  [TimeUnit.HOUR]: 3600000,
-  [TimeUnit.DAY]: 86400000,
-  [TimeUnit.WEEK]: 604800000,
-  [TimeUnit.YEAR]: 3.154e+10,
-  [TimeUnit.DECADE]: 3.154e+10 * 10,
-};
-
-export const parseTimeUnit = (unit: TimeUnit | string): TimeUnit => {
-  if (Object.keys(TimeUnitAcronym).includes(unit)) {
-    return (TimeUnitAcronym as any)[unit] as TimeUnit;
-  }
-  if (Object.keys(TimeUnit).includes(unit)) {
-    return unit as TimeUnit;
-  }
-  throw new Error(`Invalid time unit [${unit}}]`);
-};
-
-const validateFormat = (timeString: string): boolean => {
-  // eslint-disable-next-line regexp/no-unused-capturing-group
-  return /^([012]|[01]\d|2[0-3]):[0-5]\d$/.test(timeString);
-};
-
-export const timeToDecimal = (timeString: string): number | null => {
-  if (!timeString) return null;
-  if (!timeString.includes(":")) throw new Error(`Invalid time format [${timeString}]. Must be in HH:MM format`);
-  if (!validateFormat(timeString)) throw new Error(`Invalid time format [${timeString}]. Must be in HH:MM format`);
-  const [hours, minutes] = timeString.split(":");
-  return Number.parseInt(hours) + Number.parseInt(minutes) / 60;
-};
-
-const convertToMilliseconds = (value: number, unit: TimeUnit) => {
-  if (typeof value !== "number") throw new Error("Value must be a number");
-  const parsedUnit = parseTimeUnit(unit);
-  return value * (TimeInMilliseconds[parsedUnit as keyof typeof TimeInMilliseconds] || 1);
-};
-
-export const convert = (value: number, from: TimeUnit, to: TimeUnit): number => {
-  const parsedFrom = parseTimeUnit(from);
-  const parsedTo = parseTimeUnit(to);
-  const fromMilliseconds = convertToMilliseconds(value, parsedFrom);
-  return fromMilliseconds / (TimeInMilliseconds[parsedTo as keyof typeof TimeInMilliseconds] || 1);
-};

package/src/components/checkbox/Checkbox.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import type { TCheckboxType } from "../types";
-import CircleIndicator from "./CircleIndicator.vue";
-import DefaultIndicator from "./DefaultIndicator.vue";
-
-const { checked, type = "default", indeterminate = false, disabled = false } = defineProps<{
-  label?: string;
-  type?: TCheckboxType;
-  checked: boolean;
-  indeterminate?: boolean;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits(["click"]);
-</script>
-
-<template>
-  <div
-    class="group flex items-center space-x-2"
-    :class="{
-      'border-action': checked && !disabled,
-      'border-default': !checked && !disabled,
-      'border-subtle cursor-default': disabled,
-      'cursor-pointer': !disabled,
-    }"
-    @click.stop.prevent="!disabled && emit('click')"
-  >
-    <DefaultIndicator
-      v-if="type === 'default'"
-      :value="checked"
-      :disabled="disabled"
-      :indeterminate="indeterminate"
-    />
-    <CircleIndicator
-      v-else
-      :value="checked"
-      :disabled="disabled"
-      :indeterminate="indeterminate"
-    />
-    <span
-      v-if="label"
-      class="block text-sm leading-tight select-none"
-      :class="{
-        'hover:underline': !disabled,
-        'text-tertiary': disabled,
-      }"
-    >
-      {{ label }}
-    </span>
-  </div>
-</template>

package/src/components/checkbox/CircleIndicator.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { BIcon } from "../";
-
-const { value, disabled = false, indeterminate = false } = defineProps<{ value: boolean; indeterminate?: boolean; disabled?: boolean }>();
-
-const icon = computed(() => {
-  if (indeterminate) return "dash";
-  if (value) return "check";
-  return null;
-});
-</script>
-
-<template>
-  <button
-    class="group inline-flex items-center justify-center w-6 h-6 rounded-full border focus:outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"
-    :class="{
-      'border-default bg-primary hover:bg-secondary hover:border-strong cursor-pointer': !disabled && !value,
-      'border-action bg-action text-white hover:bg-action-hover hover:border-action-hover cursor-pointer': !disabled && value,
-      'border-default bg-tertiary text-white cursor-default': disabled && value,
-      'border-default bg-secondary hover:bg-secondary': disabled && !value,
-    }"
-  >
-    <BIcon v-if="icon" :name="icon" class="text-white" />
-  </button>
-</template>

package/src/components/checkbox/DefaultIndicator.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const { value, disabled = false, indeterminate = false } = defineProps<{ value: boolean; disabled?: boolean; indeterminate?: boolean }>();
-</script>
-
-<template>
-  <button
-    class="flex items-center justify-center w-4 h-4 border rounded focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"
-    :class="{
-      'border-action bg-action hover:bg-action-hover hover:border-action-hover cursor-pointer': (value || indeterminate) && !disabled,
-      'bg-primary border-default hover:border-strong hover:bg-secondary cursor-pointer': !value && !indeterminate && !disabled,
-      'cursor-default border-default bg-tertiary': disabled,
-    }"
-  >
-    <div v-if="indeterminate" class="w-2 bg-white" style="height: 2px" />
-    <svg v-else-if="value" width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M8.41166 0.5L10 2.0417L4.01353 7.5L0 3.57411L1.60557 2.04932L4.02897 4.39988L8.41166 0.5Z" fill="white" />
-    </svg>
-  </button>
-</template>

package/src/components/checkbox/index.ts

@@ -1 +0,0 @@
-export { default as BCheckbox } from "./Checkbox.vue";

package/src/components/collapse/Collapse.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { BButton } from "../";
-
-const props = withDefaults(
-  defineProps<{
-    alignment?: "left" | "right";
-    borderClassOpen?: string;
-    borderClassClosed?: string;
-    headerBgClass?: string;
-    id?: string | number;
-    open?: boolean;
-    sticky?: boolean;
-  }>(),
-  {
-    alignment: "right",
-    borderClassOpen: "border-strong",
-    borderClassClosed: "border-default",
-    headerBgClass: "bg-primary",
-    id: "",
-    open: false,
-    sticky: false,
-  },
-);
-
-const emit = defineEmits(["toggle"]);
-
-const buttonRef = ref<HTMLButtonElement>();
-const headerRef = ref<HTMLHeadElement>();
-const isSticky = ref(false);
-
-const borderClass = computed(() => props.open ? props.borderClassOpen : props.borderClassClosed);
-const styles = computed(() => {
-  return isSticky.value
-    ? {
-        top: "-1px",
-        paddingTop: "1px",
-      }
-    : {};
-});
-
-watch(
-  () => props.open,
-  (newValue) => {
-    if (!newValue) isSticky.value = false;
-  },
-);
-
-watch(isSticky, (newValue) => {
-  if (newValue) buttonRef.value!.blur();
-});
-
-const observer = ref<IntersectionObserver | null>(null);
-onMounted(() => {
-  if (props.sticky) {
-    observer.value = new IntersectionObserver(
-      ([e]) => {
-        if (props.open) {
-          isSticky.value = e.intersectionRatio < 1;
-        }
-      },
-      {
-        threshold: [1],
-      },
-    );
-
-    observer.value.observe(headerRef.value!);
-  }
-});
-onBeforeUnmount(() => {
-  if (observer.value) {
-    observer.value.disconnect();
-  }
-});
-</script>
-
-<template>
-  <section class="w-full">
-    <header
-      ref="headerRef"
-      class="w-full border-b"
-      :style="styles"
-      :class="[
-        {
-          'shadow-sm-xs border-strong sticky z-10': isSticky,
-          'relative': !isSticky,
-        },
-        borderClass,
-        headerBgClass,
-      ]"
-    >
-      <div class="flex items-center w-full h-10">
-        <div v-if="alignment === 'left'" class="relative flex-1 min-w-0 flex items-center text-sm">
-          <slot name="header" :sticky="isSticky" />
-        </div>
-        <div class="flex-none w-8 h-8 flex items-center justify-center">
-          <BButton
-            v-if="$slots.content"
-            small
-            variant="textSubtle"
-            :icon="open ? 'chevron-down-small' : 'chevron-right-small'"
-            @click="emit('toggle', id)"
-          />
-        </div>
-        <div v-if="alignment === 'right'" class="relative flex-1 min-w-0 flex items-center text-sm">
-          <slot name="header" :sticky="isSticky" />
-        </div>
-      </div>
-    </header>
-    <main v-if="open" class="relative">
-      <slot name="content" />
-    </main>
-  </section>
-</template>

package/src/components/collapse/index.ts

@@ -1 +0,0 @@
-export { default as BCollapse } from "./Collapse.vue";

package/src/components/confirm-cancel/ConfirmCancel.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import type { ConfirmCancelProps } from "./types";
-import { computed } from "vue";
-import { BButton, BFlexbox } from "../";
-
-const props = withDefaults(
-  defineProps<ConfirmCancelProps>(),
-  {
-    order: "confirm-first",
-    cancelButtonIsText: false,
-    cancelDisabled: false,
-    cancelLabel: "Cancel",
-    cancelVariant: "outline",
-    confirmDisabled: false,
-    confirmLabel: "Confirm",
-    confirmVariant: "fill",
-    fillContainer: false,
-    loading: false,
-    small: false,
-    vertical: false,
-  },
-);
-
-const emit = defineEmits(["confirm", "cancel"]);
-
-const confirmFirst = computed(() => props.order === "confirm-first");
-</script>
-
-<template>
-  <BFlexbox :col="vertical" class="gap-2">
-    <BButton
-      v-if="confirmFirst"
-      :small="small"
-      stop-propagation
-      :icon="confirmIcon"
-      :label="confirmLabel"
-      :variant="confirmVariant"
-      :disabled="confirmDisabled"
-      :loading="loading"
-      :class="{ 'flex-1': fillContainer }"
-      @click="emit('confirm')"
-    />
-    <BButton
-      :variant="cancelVariant"
-      stop-propagation
-      :disabled="cancelDisabled"
-      :small="small"
-      :icon="cancelIcon"
-      :label="cancelLabel"
-      :class="{ 'flex-1': fillContainer }"
-      @click="emit('cancel')"
-    />
-    <BButton
-      v-if="!confirmFirst"
-      :small="small"
-      stop-propagation
-      :icon="confirmIcon"
-      :label="confirmLabel"
-      :variant="confirmVariant"
-      :disabled="confirmDisabled"
-      :loading="loading"
-      :class="{ 'flex-1': fillContainer }"
-      @click="emit('confirm')"
-    />
-  </BFlexbox>
-</template>

package/src/components/confirm-cancel/index.ts

@@ -1 +0,0 @@
-export { default as BConfirmCancel } from "./ConfirmCancel.vue";

package/src/components/confirm-cancel/types.ts

@@ -1,18 +0,0 @@
-import type { ButtonVariant, TIcon } from "../types";
-
-export type ConfirmCancelProps = {
-  order?: "confirm-first" | "confirm-last";
-  cancelButtonIsText?: boolean;
-  cancelDisabled?: boolean;
-  cancelIcon?: TIcon;
-  cancelLabel?: string;
-  cancelVariant?: ButtonVariant;
-  confirmDisabled?: boolean;
-  confirmIcon?: TIcon;
-  confirmLabel?: string;
-  confirmVariant?: ButtonVariant;
-  fillContainer?: boolean;
-  loading?: boolean;
-  small?: boolean;
-  vertical?: boolean;
-};

package/src/components/content-slider/ContentSlider.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from "vue";
-import { BButton } from "../../";
-import { useNextFrame } from "../../composables";
-
-const scrollPosition = ref(0);
-const scrollStep = 120; // Change this value to adjust the scroll amount
-
-const listContainer = ref<HTMLElement | null>(null);
-const buttonList = ref<HTMLElement | null>(null);
-
-const containerWidth = ref(listContainer.value ? listContainer.value.clientWidth : 0);
-const contentWidth = ref(buttonList.value ? buttonList.value.scrollWidth : 0);
-const scrollLeft = () => scrollPosition.value = Math.max(0, scrollPosition.value - scrollStep);
-const scrollRight = () => {
-  scrollPosition.value = Math.min(contentWidth.value - containerWidth.value, scrollPosition.value + scrollStep);
-};
-
-const showLeftButton = computed(() => scrollPosition.value > 0);
-const showRightButton = computed(() => {
-  return scrollPosition.value < contentWidth.value - containerWidth.value;
-});
-
-const { nextFrame } = useNextFrame();
-const update = () => {
-  nextTick(() => {
-    nextFrame(() => {
-      containerWidth.value = listContainer.value ? listContainer.value.clientWidth : 0;
-      contentWidth.value = buttonList.value ? buttonList.value.scrollWidth : 0;
-      if (containerWidth.value >= contentWidth.value) {
-        scrollPosition.value = 0;
-      }
-    });
-  });
-};
-onMounted(update);
-defineExpose({ update });
-</script>
-
-<template>
-  <div ref="listContainer" class="relative flex-1 flex items-center py-1 overflow-hidden whitespace-nowrap">
-    <aside
-      v-if="showLeftButton"
-      class="absolute w-16 left-0 z-10 h-full flex items-center"
-      style="background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%)"
-    >
-      <BButton
-        small
-        icon="chevron-left"
-        variant="outline"
-        class="shadow-sm"
-        @click="scrollLeft"
-      />
-    </aside>
-
-    <main
-      ref="buttonList"
-      class="flex items-center gap-2 snap-x scroll-px-2 transition-transform duration-300"
-      :style="{ transform: `translateX(-${scrollPosition}px)` }"
-    >
-      <slot />
-    </main>
-
-    <aside
-      v-if="showRightButton"
-      class="absolute w-16 right-0 z-10 h-full flex items-center justify-end pl-2"
-      style="background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%)"
-    >
-      <BButton
-        v-if="showRightButton"
-        small
-        icon="chevron-right"
-        variant="outline"
-        class="shadow-sm"
-        @click="scrollRight"
-      />
-    </aside>
-  </div>
-</template>

package/src/components/content-slider/index.ts

@@ -1 +0,0 @@
-export { default as BContentSlider } from "./ContentSlider.vue";

package/src/components/data-point/DataPoint.vue

@@ -1,5 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  To be implemented
-</template>

package/src/components/data-point/index.ts

@@ -1 +0,0 @@
-export { default as BDataPoint } from "./DataPoint.vue";

package/src/components/delete-button/DeleteButton.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { BIcon } from "../icon";
-
-defineEmits(["click"]);
-</script>
-
-<template>
-  <button
-    class="
-        flex items-center justify-center w-4 h-4 rounded-full
-        hover:bg-black/15 focus-visible:bg-black/15 active:bg-black/25
-        dark:hover:bg-white/15 dark:focus-visible:bg-white/15 dark:active:bg-white/25
-        text-primary
-        cursor-pointer"
-    @click.stop.prevent="$emit('click')"
-  >
-    <BIcon name="close" />
-  </button>
-</template>