@bgord/ui 0.5.1 → 0.5.4

package/dist/components/dialog.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as hooks from "../hooks";
+export type DialogPropsType = hooks.UseToggleReturnType & React.JSX.IntrinsicElements["dialog"];
+export declare function Dialog(props: DialogPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -1 +1,3 @@
 export * from "./button";
+export * from "./dialog";
+export * from "./revalidate-on-focus";

package/dist/components/revalidate-on-focus.d.ts

@@ -0,0 +1 @@
+export declare function RevalidateOnFocus(): null;

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./use-click-outside";
 export * from "./use-client-filter";
 export * from "./use-exit-action";
 export * from "./use-field";
@@ -5,5 +6,6 @@ export * from "./use-focus-shortcut";
 export * from "./use-hover";
 export * from "./use-language-selector";
 export * from "./use-meta-enter-submit";
+export * from "./use-scroll-lock";
 export * from "./use-shortcuts";
 export * from "./use-toggle";

package/dist/hooks/use-click-outside.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare function useClickOutside<T extends HTMLElement>(ref: RefObject<T | null>, handler: (e: MouseEvent | TouchEvent) => void): void;

package/dist/hooks/use-scroll-lock.d.ts

@@ -0,0 +1 @@
+export declare function useScrollLock(enabled?: boolean): void;

package/dist/index.js

@@ -6,6 +6,41 @@ function Button() {
     children: "Click"
   }, undefined, false, undefined, this);
 }
+// src/components/dialog.tsx
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
+
+// src/hooks/use-click-outside.ts
+import { useEffect } from "react";
+function useClickOutside(ref, handler) {
+  useEffect(() => {
+    if (typeof document === "undefined")
+      return;
+    function listener(event) {
+      const el = ref.current;
+      if (!el)
+        return;
+      if (el.contains(event.target)) {
+        if (event.target === el) {
+          const { left, right, top, bottom } = el.getBoundingClientRect();
+          const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+          const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+          const isInRect = clientX >= left && clientX <= right && clientY >= top && clientY <= bottom;
+          if (isInRect)
+            return;
+        } else {
+          return;
+        }
+      }
+      handler(event);
+    }
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}
 // src/hooks/use-client-filter.ts
 import { useCallback, useMemo } from "react";
 
@@ -34,7 +69,7 @@ class Field {
 }
 
 // src/hooks/use-field.ts
-import { useEffect, useState } from "react";
+import { useEffect as useEffect2, useState } from "react";
 import { useSearchParams } from "react-router";
 var useFieldStrategyEnum;
 ((useFieldStrategyEnum2) => {
@@ -51,7 +86,7 @@ function useField(config) {
     const candidate = new Field(value2);
     _setCurrentValue(candidate.get());
   };
-  useEffect(() => {
+  useEffect2(() => {
     const current = new Field(currentValue);
     if (strategy === "params" /* params */) {
       if (current.isEmpty()) {
@@ -130,12 +165,12 @@ function useExitAction(options) {
 import { useCallback as useCallback2, useMemo as useMemo3, useRef } from "react";
 
 // src/hooks/use-shortcuts.ts
-import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2 } from "react";
 import { tinykeys } from "tinykeys";
 function useKeyboardShortcuts(config, options) {
   const enabled = options?.enabled ?? true;
   const memoizedConfig = useMemo2(() => config, [JSON.stringify(Object.keys(config))]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!enabled)
       return;
     const unsubscribe = tinykeys(window, memoizedConfig);
@@ -215,7 +250,7 @@ function useHover({
 }
 // src/hooks/use-language-selector.tsx
 import Cookies from "js-cookie";
-import { useCallback as useCallback5, useEffect as useEffect3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4 } from "react";
 import { useRevalidator } from "react-router";
 
 // src/services/translations.tsx
@@ -293,7 +328,7 @@ function useLanguageSelector(supportedLanguages) {
       revalidator.revalidate();
     }
   }, [field.currentValue, field.changed]);
-  useEffect3(() => {
+  useEffect4(() => {
     handleLanguageChange();
   }, [handleLanguageChange]);
   return field;
@@ -309,19 +344,138 @@ function useMetaEnterSubmit() {
   }, []);
   return useMemo4(() => ({ onKeyDown: handleMetaEnterSubmit }), [handleMetaEnterSubmit]);
 }
-// src/services/colorful.ts
-function Colorful(color) {
-  const value = `var(--${color})`;
-  const options = {
-    color: { color: value },
-    background: { background: value }
-  };
-  const style = {
-    color: { style: { color: value } },
-    background: { style: { background: value } }
-  };
-  return { ...options, style };
+// src/hooks/use-scroll-lock.ts
+import { useEffect as useEffect5 } from "react";
+function useScrollLock(enabled = true) {
+  useEffect5(() => {
+    if (typeof document === "undefined")
+      return;
+    const originalOverflow = document.body.style.overflow;
+    if (enabled) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [enabled]);
 }
+// src/components/dialog.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function Dialog(props) {
+  const { toggle: dialog, rest } = extractUseToggle(props);
+  const ref = useRef3(null);
+  useEffect6(() => {
+    if (props.on) {
+      ref.current?.showModal();
+    } else {
+      ref.current?.close();
+    }
+  }, [props.on]);
+  useKeyboardShortcuts({ Escape: dialog.disable });
+  useScrollLock(props.on);
+  useClickOutside(ref, dialog.disable);
+  return /* @__PURE__ */ jsxDEV2("dialog", {
+    ref,
+    tabIndex: 0,
+    "aria-modal": "true",
+    "data-disp": props.on ? "flex" : "none",
+    "data-dir": "column",
+    "data-mx": "auto",
+    "data-p": "5",
+    "data-position": "fixed",
+    "data-z": "2",
+    "data-bg": "neutral-900",
+    "data-br": "xs",
+    "data-backdrop": "stronger",
+    "data-animation": "grow-fade-in",
+    ...rest
+  }, undefined, false, undefined, this);
+}
+// src/components/revalidate-on-focus.tsx
+import { useEffect as useEffect7 } from "react";
+import { useRevalidator as useRevalidator2 } from "react-router";
+function RevalidateOnFocus() {
+  const revalidator = useRevalidator2();
+  useEffect7(() => {
+    const onFocus = () => revalidator.revalidate();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [revalidator]);
+  return null;
+}
+// src/services/auth-guard.ts
+import { redirect } from "react-router";
+
+// src/services/cookies.ts
+class Cookies2 {
+  static extractFrom(request) {
+    return request.headers.get("cookie") ?? "";
+  }
+}
+
+// src/services/auth-guard.ts
+class AuthGuard {
+  API_URL;
+  constructor(BASE_URL) {
+    this.API_URL = `${BASE_URL}/api/auth`;
+  }
+  async getServerSession(request) {
+    const cookie = Cookies2.extractFrom(request);
+    const res = await fetch(`${this.API_URL}/get-session`, {
+      headers: { cookie, accept: "application/json" }
+    });
+    if (!res.ok)
+      return null;
+    const session = await res.json();
+    return session;
+  }
+  async requireSession(request) {
+    const session = await this.getServerSession(request);
+    if (session?.user)
+      return session;
+    throw redirect("/");
+  }
+  async requireNoSession(request, target = "/home") {
+    const session = await this.getServerSession(request);
+    if (session?.user)
+      throw redirect(target);
+  }
+  async removeSession(request, target = "/login") {
+    const cookie = Cookies2.extractFrom(request);
+    const res = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/sign-out`, {
+      method: "POST",
+      headers: { cookie }
+    });
+    const headers = new Headers;
+    res.headers.forEach((value, key) => {
+      if (key.toLowerCase() === "set-cookie")
+        headers.append("set-cookie", value);
+    });
+    throw redirect(target, { headers });
+  }
+}
+// src/services/noop.ts
+function noop() {}
+
+// src/services/copy-to-clipboard.ts
+var defaultOnCopyToClipboardFailure = () => console.warn("Copying to clipboard not supported");
+async function copyToClipboard(options) {
+  const onFailure = options.onFailure ?? defaultOnCopyToClipboardFailure;
+  const onSuccess = options.onSuccess ?? noop;
+  if (!navigator.clipboard)
+    onFailure();
+  try {
+    await navigator.clipboard.writeText(options.text);
+    onSuccess();
+  } catch (error) {
+    onFailure(error);
+  }
+}
+// src/services/credentials.ts
+var Credentials = {
+  email: { inputMode: "email", autoComplete: "email", autoCapitalize: "none", spellCheck: "false" },
+  password: { new: { autoComplete: "new-password" }, current: { autoComplete: "current-password" } }
+};
 // src/services/etag.ts
 class ETag {
   static fromRevision(revision) {
@@ -423,6 +577,7 @@ class WeakETag {
 export {
   useTranslations,
   useToggle,
+  useScrollLock,
   usePluralize,
   useMetaEnterSubmit,
   useLanguageSelector,
@@ -434,18 +589,25 @@ export {
   useField,
   useExitAction,
   useClientFilter,
+  useClickOutside,
   pluralize,
+  noop,
   getSafeWindow,
   extractUseToggle,
   exec,
+  copyToClipboard,
   WeakETag,
   TranslationsContext,
   Rhythm,
+  RevalidateOnFocus,
   LocalFields,
   Form,
   Fields,
   Field,
   ETag,
-  Colorful,
-  Button
+  Dialog,
+  Credentials,
+  Cookies2 as Cookies,
+  Button,
+  AuthGuard
 };

package/dist/services/auth-guard.d.ts

@@ -0,0 +1,9 @@
+import type { createAuthClient } from "better-auth/react";
+export declare class AuthGuard<T extends ReturnType<typeof createAuthClient>["$Infer"]["Session"]> {
+    private readonly API_URL;
+    constructor(BASE_URL: string);
+    getServerSession(request: Request): Promise<T | null>;
+    requireSession(request: Request): Promise<T | null>;
+    requireNoSession(request: Request, target?: string): Promise<void>;
+    removeSession(request: Request, target?: string): Promise<void>;
+}

package/dist/services/cookies.d.ts

@@ -0,0 +1,3 @@
+export declare class Cookies {
+    static extractFrom(request: Request): string;
+}

package/dist/services/copy-to-clipboard.d.ts

@@ -0,0 +1,10 @@
+type CopyToClipboardTextType = string;
+type OnCopyToClipboardFailureType = (error?: unknown) => void;
+type OnCopyToClipboardSuccessType = VoidFunction;
+export type CopyToClipboardOptionsType = {
+    text: CopyToClipboardTextType;
+    onFailure?: OnCopyToClipboardFailureType;
+    onSuccess?: OnCopyToClipboardSuccessType;
+};
+export declare function copyToClipboard(options: CopyToClipboardOptionsType): Promise<void>;
+export {};

package/dist/services/credentials.d.ts

@@ -0,0 +1,9 @@
+type CredentialsType = {
+    email: React.JSX.IntrinsicElements["input"];
+    password: {
+        new: React.JSX.IntrinsicElements["input"];
+        current: React.JSX.IntrinsicElements["input"];
+    };
+};
+export declare const Credentials: CredentialsType;
+export {};

package/dist/services/index.d.ts

@@ -1,10 +1,14 @@
-export * from "./colorful";
+export * from "./auth-guard";
+export * from "./cookies";
+export * from "./copy-to-clipboard";
+export * from "./credentials";
 export * from "./etag";
 export * from "./exec";
 export * from "./field";
 export * from "./fields";
 export * from "./form";
 export * from "./get-safe-window";
+export * from "./noop";
 export * from "./pluralize";
 export * from "./rhythm";
 export * from "./translations";

package/dist/services/noop.d.ts

@@ -0,0 +1 @@
+export declare function noop(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bgord/ui",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "type": "module",
   "exports": {
     ".": {
@@ -12,9 +12,9 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-router": "7.6.3"
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "react-router": "7.7.1"
   },
   "scripts": {
     "build:js": "bun build src/index.ts --format esm --outdir dist --packages external --external react --external react-dom --external react/jsx-runtime --external react-router",
@@ -29,21 +29,22 @@
     "@commitlint/cli": "19.8.1",
     "@commitlint/config-conventional": "19.8.1",
     "@happy-dom/global-registrator": "18.0.1",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.6.4",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/bun": "1.2.18",
+    "@types/bun": "1.2.19",
     "@types/js-cookie": "^3.0.6",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
-    "cspell": "9.1.5",
-    "knip": "5.61.3",
+    "@types/react": "19.1.9",
+    "@types/react-dom": "19.1.7",
+    "cspell": "9.2.0",
+    "knip": "5.62.0",
     "lefthook": "1.12.2",
     "only-allow": "1.2.1",
     "shellcheck": "3.1.0"
   },
   "dependencies": {
+    "better-auth": "1.3.4",
     "js-cookie": "3.0.5",
     "polish-plurals": "1.1.0",
     "tinykeys": "3.0.0"

package/readme.md

@@ -26,7 +26,10 @@ Run the tests
 src/
 ├── components
 │   ├── button.tsx
+│   ├── dialog.tsx
+│   └── revalidate-on-focus.tsx
 ├── hooks
+│   ├── use-click-outside.ts
 │   ├── use-client-filter.ts
 │   ├── use-exit-action.ts
 │   ├── use-field.ts
@@ -34,16 +37,21 @@ src/
 │   ├── use-hover.ts
 │   ├── use-language-selector.tsx
 │   ├── use-meta-enter-submit.tsx
+│   ├── use-scroll-lock.ts
 │   ├── use-shortcuts.ts
 │   └── use-toggle.ts
 └── services
-    ├── colorful.ts
+    ├── auth-guard.ts
+    ├── cookies.ts
+    ├── copy-to-clipboard.ts
+    ├── credentials.ts
     ├── etag.ts
     ├── exec.ts
     ├── field.ts
     ├── fields.ts
     ├── form.ts
     ├── get-safe-window.ts
+    ├── noop.ts
     ├── pluralize.ts
     ├── rhythm.ts
     ├── translations.tsx