@firstnoodle-ui/bui 0.0.28 → 0.0.29

package/src/main.css

@@ -1,140 +0,0 @@
-@import "tailwindcss";
-
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
-
-body {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  display: flex;
-  height: 100vh;
-}
-
-@layer base {
-  h1 {
-    @apply text-2xl font-bold;
-  }
-  h2 {
-    @apply text-xl font-bold;
-  }
-  h3 {
-    @apply text-lg font-bold;
-  }
-  h4 {
-    @apply text-base font-bold;
-  }
-  h5 {
-    @apply text-sm font-bold;
-  }
-
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Shared in both themes */
-  :root {
-    --color-action: var(--color-blue-500);
-    --color-action-hover: var(--color-blue-600);
-    --color-action-active: var(--color-blue-700);
-    --color-destructive: var(--color-red-500);
-    --color-destructive-hover: var(--color-red-600);
-    --color-destructive-active: var(--color-red-700);
-  }
-
-  [data-theme="light"] {
-    --color-bg-primary: var(--color-white);
-    --color-bg-secondary: var(--color-stone-100);
-    --color-bg-tertiary: var(--color-stone-200);
-
-    --color-border-weak: var(--color-stone-200);
-    --color-border-default: var(--color-stone-300);
-    --color-border-strong: var(--color-stone-400);
-
-    --color-text-primary: var(--color-slate-900);
-    --color-text-secondary: var(--color-slate-700);
-    --color-text-tertiary: var(--color-slate-500);
-    --color-text-muted: var(--color-slate-300);
-  }
-  [data-theme="dark"] {
-    --color-bg-primary: #212121;
-    --color-bg-secondary: var(--color-neutral-800);
-    --color-bg-tertiary: #333333;
-
-    --color-border-weak: var(--color-neutral-800);
-    --color-border-default: var(--color-neutral-700);
-    --color-border-strong: var(--color-neutral-600);
-
-    --color-text-primary: var(--color-stone-100);
-    --color-text-secondary: var(--color-stone-300);
-    --color-text-tertiary: var(--color-stone-400);
-    --color-text-muted: var(--color-stone-500);
-  }
-}
-
-/* @utility content-auto {
-  content-visibility: auto;
-} */
-
-@utility bg-primary {
-  background-color: var(--color-bg-primary);
-}
-@utility bg-secondary {
-  background-color: var(--color-bg-secondary);
-}
-@utility bg-tertiary {
-  background-color: var(--color-bg-tertiary);
-}
-@utility bg-action {
-  background-color: var(--color-action);
-}
-@utility bg-action-hover {
-  background-color: var(--color-action-hover);
-}
-@utility bg-action-active {
-  background-color: var(--color-action-active);
-}
-
-@utility border-weak {
-  border-color: var(--color-border-weak);
-}
-@utility border-default {
-  border-color: var(--color-border-default);
-}
-@utility border-strong {
-  border-color: var(--color-border-strong);
-}
-@utility border-action {
-  border-color: var(--color-action);
-}
-@utility border-action-hover {
-  border-color: var(--color-action-hover);
-}
-@utility border-action-active {
-  border-color: var(--color-action-active);
-}
-
-@utility text-primary {
-  color: var(--color-text-primary);
-}
-@utility text-secondary {
-  color: var(--color-text-secondary);
-}
-@utility text-tertiary {
-  color: var(--color-text-tertiary);
-}
-@utility text-muted {
-  color: var(--color-text-muted);
-}
-@utility text-action {
-  color: var(--color-action);
-}

package/src/utils/array.ts

@@ -1,11 +0,0 @@
-/**
- * Modulo function that works with negative numbers as well
- */
-export const loopRange = (index: number, length: number): number => {
-  return ((index % length) + length) % length;
-};
-
-export const range = (start: number, end: number): number[] => {
-  const length = end - start + 1;
-  return Array.from({ length }, (_, i) => start + i);
-};

package/src/utils/capitalizeFirstLetter.ts

@@ -1,4 +0,0 @@
-export function capitalizeFirstLetter(str: string): string {
-  if (!str) return str;
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}

package/src/utils/clamp.ts

@@ -1,9 +0,0 @@
-// export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
-
-// needs an object as param to have optional min and max
-export const clamp = (value: number, min: number | null, max: number | null) => {
-  if (min !== null && max !== null) return Math.min(Math.max(value, min), max);
-  if (min === null && max !== null) return Math.max(value, max);
-  if (min !== null && max === null) return Math.min(value, min);
-  return value;
-};

package/src/utils/debounce.ts

@@ -1,8 +0,0 @@
-// eslint-disable-next-line ts/no-unsafe-function-type
-export const debounce = (fn: Function, timeout: number = 300) => {
-  let timer: ReturnType<typeof setTimeout>;
-  return (...args: any[]) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => fn.apply(this, args), timeout);
-  };
-};

package/src/utils/index.ts

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

package/src/utils/scrollIntoView.ts

@@ -1,25 +0,0 @@
-export const scrollIntoView = (container: HTMLElement, selected: HTMLElement): void => {
-  if (!selected) {
-    container.scrollTop = 0;
-    return;
-  }
-
-  const offsetParents = [];
-  let pointer = selected.offsetParent as HTMLElement;
-  while (pointer && container !== pointer && container.contains(pointer)) {
-    offsetParents.push(pointer);
-    pointer = pointer.offsetParent as HTMLElement;
-  }
-
-  const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
-  const bottom = top + selected.offsetHeight;
-  const viewRectTop = container.scrollTop;
-  const viewRectBottom = viewRectTop + container.clientHeight;
-
-  if (top < viewRectTop) {
-    container.scrollTop = top;
-  }
-  else if (bottom > viewRectBottom) {
-    container.scrollTop = bottom - container.clientHeight;
-  }
-};

package/src/utils/scrollbarWidth.ts

@@ -1,27 +0,0 @@
-let width: number | undefined;
-
-export const scrollbarWidth = (): number => {
-  if (scrollbarWidth !== undefined)
-    return <number>width;
-
-  const outer = document.createElement("div");
-  outer.className = "el-scrollbar__wrap";
-  outer.style.visibility = "hidden";
-  outer.style.width = "100px";
-  outer.style.position = "absolute";
-  outer.style.top = "-9999px";
-  document.body.appendChild(outer);
-
-  const widthNoScroll = outer.offsetWidth;
-  outer.style.overflow = "scroll";
-
-  const inner = document.createElement("div");
-  inner.style.width = "100%";
-  outer.appendChild(inner);
-
-  const widthWithScroll = inner.offsetWidth;
-  outer.parentNode?.removeChild(outer);
-  width = widthNoScroll - widthWithScroll;
-
-  return width;
-};