@firstnoodle-ui/bui 0.0.26 → 0.0.28

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

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,61 @@
+/**
+ * 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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,51 @@
+<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

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,19 @@
+<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

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

package/src/components/collapse/Collapse.vue

@@ -0,0 +1,114 @@
+<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

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

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

@@ -0,0 +1,66 @@
+<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

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

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,79 @@
+<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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+<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>