@firstnoodle-ui/bui 0.0.27 → 0.0.28

package/src/main.css

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

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

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

package/src/utils/clamp.ts

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

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

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

package/src/utils/scrollIntoView.ts

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

@@ -0,0 +1,27 @@
+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;
+};