@firstnoodle-ui/bui 0.0.13

package/dist/utils/array.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Modulo function that works with negative numbers as well
+ */
+export declare const loopRange: (index: number, length: number) => number;
+export declare const range: (start: number, end: number) => number[];

package/dist/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/utils/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (fn: Function, timeout?: number) => (...args: any[]) => void;

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './array';
+export * from './clamp';
+export * from './debounce';
+export * from './scrollbarWidth';
+export * from './scrollIntoView';

package/dist/utils/scrollIntoView.d.ts

@@ -0,0 +1 @@
+export declare const scrollIntoView: (container: HTMLElement, selected: HTMLElement) => void;

package/dist/utils/scrollbarWidth.d.ts

@@ -0,0 +1 @@
+export declare const scrollbarWidth: () => number;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@firstnoodle-ui/bui",
+  "type": "module",
+  "version": "0.0.13",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/firstnoodle-ui/bui.git"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "tailwindcss": "^4.1.1",
+    "vue": "^3.5.13"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.13",
+    "@tiptap/extension-bold": "^2.11.7",
+    "@tiptap/extension-bullet-list": "^2.11.7",
+    "@tiptap/extension-document": "^2.11.7",
+    "@tiptap/extension-heading": "^2.11.7",
+    "@tiptap/extension-highlight": "^2.11.7",
+    "@tiptap/extension-history": "^2.11.7",
+    "@tiptap/extension-italic": "^2.11.7",
+    "@tiptap/extension-link": "^2.11.7",
+    "@tiptap/extension-list-item": "^2.11.7",
+    "@tiptap/extension-ordered-list": "^2.11.7",
+    "@tiptap/extension-paragraph": "^2.11.7",
+    "@tiptap/extension-placeholder": "^2.11.7",
+    "@tiptap/extension-text": "^2.11.7",
+    "@tiptap/extension-underline": "^2.11.7",
+    "@tiptap/vue-3": "^2.11.7",
+    "debounce": "^2.2.0",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.1",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "sass-embedded": "^1.86.3",
+    "tailwindcss": "^4.1.1",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.4",
+    "vite-plugin-dts": "^4.5.3",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.8"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
+    "watch": "vite build --watch",
+    "release:publish": "pnpm publish --access public --otp=533339 --no-git-checks"
+  }
+}

package/src/components/application-wrapper/ApplicationWrapper.vue

@@ -0,0 +1,8 @@
+<template>
+  <main class="fixed top-0 left-0 w-screen h-screen overflow-hidden text-primary">
+    <slot />
+    <div id="modals" class="z-10 fixed w-screen h-screen top-0 left-0 pointer-events-none" />
+    <div id="notifications" class="z-10 fixed w-screen h-screen top-0 left-0 pointer-events-none flex items-end justify-center p-12" />
+    <div id="poppers" class="z-10 fixed w-screen h-screen top-0 left-0 pointer-events-none" />
+  </main>
+</template>

package/src/components/application-wrapper/index.ts

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

package/src/components/aside-section-label/AsideSectionLabel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{ label: string }>();
+</script>
+
+<template>
+  <section class="w-full space-y-4">
+    <div class="w-full h-12 flex items-center">
+      <p class="flex-none pr-2 text-xs leading-none font-medium text-secondary">
+        {{ label }}
+      </p>
+      <div class="flex-1 h-full">
+        <div class="w-full border-b border-default" style="height: 54%" />
+      </div>
+    </div>
+  </section>
+</template>

package/src/components/aside-section-label/index.ts

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

package/src/components/button/Button.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import type { Placement } from "@floating-ui/dom";
+import type { ButtonVariant, TIcon } from "../types";
+import { computed, ref } from "vue";
+import { BIcon, BLoadSpinner, BTooltip } from "../";
+import NotificationBadge from "./NotificationBadge.vue";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: ButtonVariant;
+    classes?: string;
+    disabled?: boolean;
+    fullwidth?: boolean;
+    href?: string;
+    icon?: TIcon;
+    iconAfter?: TIcon;
+    label?: string;
+    linkTarget?: string;
+    loading?: boolean;
+    mailto?: string;
+    notification?: boolean;
+    rounded?: boolean;
+    routerLinkTo?: string | { path: string } | { name: string };
+    small?: boolean;
+    focus?: boolean;
+    stopPropagation?: boolean;
+    tooltip?: string;
+    tooltipDelay?: number;
+    tooltipPlacement?: Placement;
+  }>(),
+  {
+    variant: "fill",
+    disabled: false,
+    focus: false,
+    fullwidth: false,
+    loading: false,
+    notification: false,
+    rounded: false,
+    small: false,
+    stopPropagation: false,
+    tooltipDelay: 500,
+    tooltipPlacement: "top",
+  },
+);
+
+const emit = defineEmits(["click", "blur"]);
+
+const component = ref<string>(props.routerLinkTo ? "router-link" : "button");
+const buttonRef = ref<HTMLButtonElement>();
+
+const loadSpinnerClass = computed(() => {
+  const classes = ["w-4 h-4"];
+  if (props.variant === "fill" || props.variant === "destructive") {
+    classes.push("text-light");
+  }
+  else if (props.variant === "outline" || props.variant === "text") {
+    classes.push("text-blue-500");
+  }
+  else if (props.variant === "outlineSubtle" || props.variant === "textSubtle") {
+    classes.push("text-slate-700 dark:text-slate-200");
+  }
+  return classes.join(" ");
+});
+
+const buttonClasses = computed(() => {
+  const result = [];
+
+  // Set padding x.
+  // Add extra if rounded and there is a label
+  props.rounded && props.label
+    ? result.push(props.small ? "px-2" : "px-3")
+    : result.push(props.loading && props.icon && !props.label ? "px-0" : "px-2");
+
+  props.small ? result.push("h-6") : result.push("h-8");
+
+  if (props.icon && !props.label) {
+    props.small ? result.push("w-6") : result.push("w-8");
+  }
+
+  props.disabled ? result.push("opacity-75 cursor-not-allowed") : result.push("cursor-pointer");
+  props.fullwidth && result.push("w-full");
+
+  if (props.rounded) result.push("rounded-full");
+  else result.push("rounded-lg");
+
+  switch (props.variant) {
+    case "fill":
+      result.push(
+        ...(props.focus
+          ? [""]
+          : [
+              "bg-blue-500 hover:bg-blue-600 focus-visible:bg-blue-600 active:bg-blue-700",
+              "border border-blue-500 hover:border-blue-600 focus-visible:border-blue-600 active:border-blue-700",
+              "text-white focus-visible:outline",
+              "dark:bg-blue-700 dark:hover:bg-blue-600 focus-visible:bg-blue-600 dark:active:bg-blue-500",
+              "border dark:border-blue-700 dark:hover:border-blue-600 focus-visible:border-blue-600 dark:active:border-blue-500",
+            ]
+        ),
+      );
+      break;
+    case "outline":
+      result.push(
+        ...(props.focus
+          ? [""]
+          : [
+              "hover:bg-blue-100 focus-visible:bg-blue-100 active:bg-blue-200",
+              "border border-blue-500 hover:border-blue-600 focus-visible:border-blue-600 active:border-blue-700",
+              "text-blue-500 hover:text-blue-600 focus-visible:text-blue-600 active:text-blue-700",
+              "dark:hover:bg-blue-900 dark:focus-visible:bg-blue-900 dark:active:bg-blue-700",
+              "dark:border-blue-500 dark:hover:border-blue-500 dark:focus-visible:border-blue-500 dark:active:border-blue-600",
+              "dark:text-blue-500 dark:hover:text-blue-100 focus-visible:text-blue-100 dark:active:text-white",
+            ]
+        ),
+      );
+      break;
+    case "outlineSubtle":
+      result.push(
+        ...(props.focus
+          ? [""]
+          : [
+              "hover:bg-slate-100 focus-visible:bg-slate-100 active:bg-slate-200",
+              "border border-stone-300 hover:border-stone-400 focus-visible:border-stone-400 active:border-stone-500",
+              "text-slate-700 hover:text-slate-800 focus-visible:text-slate-800 active:text-slate-900",
+              "dark:hover:bg-neutral-700 focus-visible:bg-neutral-700 dark:active:bg-neutral-600",
+              "dark:border-stone-700 dark:hover:border-stone-600 focus-visible:border-stone-600 dark:active:border-stone-500",
+              "dark:text-slate-200 dark:hover:text-slate-100 focus-visible:text-slate-100 dark:active:text-white",
+            ]
+        ),
+      );
+      break;
+    case "text":
+      result.push(
+        ...(props.focus
+          ? [""]
+          : [
+              "hover:bg-blue-100 focus-visible:bg-blue-100 active:bg-blue-200",
+              "border-none",
+              "text-blue-500 hover:text-blue-600 focus-visible:text-blue-600 active:text-blue-700",
+              "dark:hover:bg-blue-900 dark:focus-visible:bg-blue-900 dark:active:bg-blue-700",
+              "dark:text-blue-500 dark:hover:text-blue-100 focus-visible:text-blue-100 dark:active:text-white",
+            ]
+        ),
+      );
+      break;
+    case "textSubtle":
+      result.push(
+        ...(props.focus
+          ? ["bg-slate-200 text-slate-900 dark:bg-neutral-600 dark:text-white"]
+          : [
+              "hover:bg-slate-100 focus-visible:bg-slate-100 active:bg-slate-200",
+              "border-none",
+              "text-slate-700 hover:text-slate-800 focus-visible:text-slate-800 active:text-slate-900",
+              "dark:hover:bg-neutral-700 focus-visible:bg-neutral-700 dark:active:bg-neutral-600",
+              "dark:text-slate-200 dark:hover:text-slate-100 focus-visible:text-slate-100 dark:active:text-white",
+            ]
+        ),
+      );
+      break;
+    case "destructive":
+      result.push(
+        ...(props.focus
+          ? ["bg-red-800 border-red-800 text-white"]
+          : [
+              "bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800",
+              "border border-red-600 hover:border-red-700 focus-visible:border-red-700 active:border-red-800",
+              "text-white",
+            ]
+        ),
+      );
+      break;
+  }
+
+  if (props.classes) result.push(props.classes);
+
+  return result.filter(i => i).join(" ");
+});
+
+const disabledStyle = computed(() => {
+  if (props.disabled) {
+    return props.variant === "fill" || props.variant === "destructive" ? { filter: "grayscale(50%)" } : { background: "hsl(0 0% 90%)" };
+  }
+  return {};
+});
+
+const onClick = (event: MouseEvent) => {
+  props.stopPropagation && event.stopPropagation();
+
+  if (!props.disabled && !props.loading) {
+    if (props.href) {
+      window.open(props.href, "_blank");
+    }
+    if (props.mailto) window.open(`mailto:${props.mailto}`);
+    emit("click");
+  }
+};
+
+const focus = () => buttonRef.value!.focus();
+
+defineExpose({ focus });
+</script>
+
+<template>
+  <BTooltip v-if="tooltip" hover :text="tooltip" :delay="tooltipDelay" :placement="tooltipPlacement" :trigger-full-width="fullwidth">
+    <component
+      :is="component"
+      ref="buttonRef"
+      :to="routerLinkTo"
+      class="z-0 relative inline-flex items-center justify-center space-x-1 leading-none text-sm border focus:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"
+      :class="buttonClasses"
+      :disabled="disabled || loading"
+      :style="disabledStyle"
+      @click="onClick"
+      @blur="emit('blur')"
+    >
+      <BLoadSpinner v-if="loading" :class="loadSpinnerClass" />
+      <BIcon v-else-if="icon" :name="icon" />
+      <div v-if="label">
+        {{ label }}
+      </div>
+      <BIcon v-if="iconAfter" :name="iconAfter" class="opacity-75" />
+      <NotificationBadge v-if="notification" :inside="variant === 'text' || variant === 'textSubtle'" />
+    </component>
+  </BTooltip>
+  <component
+    :is="component"
+    v-else
+    ref="buttonRef"
+    :to="routerLinkTo"
+    :target="props.linkTarget"
+    class="z-0 relative inline-flex items-center justify-center space-x-1 leading-none text-sm border focus:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"
+    :class="buttonClasses"
+    :disabled="disabled || loading"
+    :style="disabledStyle"
+    @click="onClick"
+    @blur="emit('blur')"
+  >
+    <BLoadSpinner v-if="loading" :class="loadSpinnerClass" />
+    <BIcon v-else-if="icon" :name="icon" />
+    <div v-if="label">
+      {{ label }}
+    </div>
+    <BIcon v-if="iconAfter" :name="iconAfter" />
+    <NotificationBadge v-if="notification" :inside="variant === 'text' || variant === 'textSubtle'" />
+  </component>
+</template>

package/src/components/button/NotificationBadge.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{ inside?: boolean }>();
+</script>
+
+<template>
+  <div
+    class="absolute"
+    :style="{
+      top: inside ? '0.15em' : '-0.3em',
+      right: inside ? '0.15em' : '-0.3em',
+    }"
+  >
+    <div class="w-3 h-3 bg-orange-500 rounded-full border border-white" />
+  </div>
+</template>

package/src/components/button/index.ts

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

package/src/components/button-group/ButtonGroup.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { TButtonGroupOrientation } from "../types";
+import { onMounted, provide, ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    direction?: TButtonGroupOrientation;
+    fullwidth?: boolean;
+  }>(),
+  {
+    direction: "horizontal",
+    fullwidth: false,
+  },
+);
+
+const classes = ref<string>("");
+const buttonGroupRef = ref<HTMLDivElement>();
+
+provide("childOfButtonGroup", true);
+
+/**
+ * We need to update (reapply) the classes whenever a button in the group is clicked,
+ * as its classes from within the button component might be updated and thus the classes applied here will be overwritten
+ */
+const update = () => {
+  const result = [];
+
+  props.fullwidth ? result.push("flex w-full") : result.push("inline-flex");
+
+  if (props.direction === "vertical") {
+    result.push("flex-col items-stretch");
+  }
+  else {
+    result.push("items-center");
+  }
+
+  classes.value = result.join(" ");
+
+  // add classes to immediate children of button group
+  // the buttons inside the group might be wrapped in other elements if tooltip or popper is used
+  if (buttonGroupRef.value) {
+    Array.from(buttonGroupRef.value.children).forEach((child: Element, index: number) => {
+      if (props.direction === "vertical") {
+        child.classList.add("-mt-px");
+        child.classList.add("first:mt-0");
+
+        if (index === 0) {
+          if (child.nodeName === "BUTTON") {
+            child.classList.add("rounded-t-md");
+          }
+          else {
+            child.querySelector("button")?.classList.add("rounded-t-md");
+          }
+        }
+        else if (index === buttonGroupRef.value!.children.length - 1) {
+          if (child.nodeName === "BUTTON") {
+            child.classList.add("rounded-b-md");
+          }
+          else {
+            child.querySelector("button")?.classList.add("rounded-b-md");
+          }
+        }
+      }
+      else {
+        child.classList.add("-ml-px");
+        child.classList.add("first:ml-0");
+
+        // TODO: if child is button, do not query for it
+        if (index === 0) {
+          if (child.nodeName === "BUTTON") {
+            child.classList.add("rounded-l-md");
+          }
+          else {
+            child.querySelector("button")?.classList.add("rounded-l-md");
+          }
+        }
+        else if (index === buttonGroupRef.value!.children.length - 1) {
+          if (child.nodeName === "BUTTON") {
+            child.classList.add("rounded-r-md");
+          }
+          else {
+            child.querySelector("button")?.classList.add("rounded-r-md");
+          }
+        }
+      }
+    });
+  }
+};
+
+onMounted(update);
+</script>
+
+<template>
+  <div ref="buttonGroupRef" :class="classes" @click.stop.prevent="update">
+    <slot />
+  </div>
+</template>

package/src/components/button-group/index.ts

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

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import CircleIndicator from "./CircleIndicator.vue";
+import DefaultIndicator from "./DefaultIndicator.vue";
+
+withDefaults(
+  defineProps<{
+    button?: boolean;
+    label?: string;
+    type?: "default" | "circle";
+    value?: number;
+    disabled?: boolean;
+  }>(),
+  {
+    button: false,
+    type: "default",
+    value: 0,
+    disabled: false,
+  },
+);
+
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <div
+    class="items-center space-x-2"
+    :class="{
+      'flex': !button,
+      'inline-flex border rounded-md h-8 px-3': button,
+      'border-action': value && !disabled,
+      'border-default': !value && !disabled,
+      'border-subtle cursor-default': disabled,
+      'cursor-pointer': !disabled,
+    }"
+    @click.stop.prevent="!disabled && emit('click')"
+  >
+    <DefaultIndicator v-if="type === 'default'" :value="value" :disabled="disabled" />
+    <CircleIndicator v-else :value="value" :disabled="disabled" />
+    <span
+      v-if="label"
+      class="block text-sm leading-tight select-none"
+      :class="{
+        'text-action': button && value,
+        'text-secondary': button && !value && !disabled,
+        'hover:underline': !button && !disabled,
+        'text-tertiary': disabled,
+      }"
+    >
+      {{ label }}
+    </span>
+  </div>
+</template>

package/src/components/checkbox/CircleIndicator.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { BIcon } from "../";
+
+const { value, disabled } = defineProps<{ value: number; disabled: boolean }>();
+
+const icon = computed(() => {
+  if (value) {
+    return value === 1 ? "check" : "dash";
+  }
+  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-action bg-action text-white': !disabled && value,
+      'border-strong bg-tertiary text-white cursor-default': disabled && value,
+      'border-default bg-secondary hover:bg-secondary cursor-pointer': disabled && !value,
+      'border-default bg-primary hover:bg-amber-300 cursor-pointer': !disabled && !value,
+    }"
+  >
+    <BIcon v-if="icon" :name="icon" class="text-white group-hover:text-muted" />
+  </button>
+</template>

package/src/components/checkbox/DefaultIndicator.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ value: number; disabled: 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': value && !disabled,
+      'bg-primary border-default': !value && !disabled,
+      'border-default bg-secondary': disabled && value,
+      'border-subtle bg-tertiary': disabled && !value,
+      'cursor-default': disabled,
+      'hover:border-action focus:border-actionLightActive focus:outline-hidden': !disabled,
+    }"
+  >
+    <svg v-if="value === 1" 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>
+    <div v-if="value === 2" class="w-2 bg-primary" style="height: 2px" />
+  </button>
+</template>

package/src/components/checkbox/index.ts

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