@blurrow/ui 0.2.0 → 0.2.1

package/dist/useFloatingPanel.d.ts

@@ -0,0 +1,24 @@
+import { RefObject, CSSProperties } from 'react';
+import { Side, Align } from './Floating.js';
+
+interface FloatingPanelOptions {
+    side?: Side;
+    align?: Align;
+    gap?: number;
+    matchWidth?: boolean;
+    /** Called after Escape closes the panel, to hand focus back */
+    onEscape?: () => void;
+}
+declare function useFloatingPanel(anchor: RefObject<HTMLElement | null>, options?: FloatingPanelOptions): {
+    open: boolean;
+    mounted: boolean;
+    entered: boolean;
+    show: () => void;
+    close: () => void;
+    toggle: () => void;
+    side: Side;
+    setFloating: (el: HTMLElement | null) => void;
+    panelStyle: CSSProperties;
+};
+
+export { useFloatingPanel };

package/dist/useFloatingPanel.js

@@ -0,0 +1,89 @@
+"use client";
+
+// ../../components/ui/useFloatingPanel.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ENTER_FROM, LAYER, ORIGIN, useAnchoredPosition } from "./Floating.js";
+function useFloatingPanel(anchor, options = {}) {
+  const { side = "bottom", align = "start", gap = 8, matchWidth = false, onEscape } = options;
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [entered, setEntered] = useState(false);
+  const timer = useRef(null);
+  const escape = useRef(onEscape);
+  useEffect(() => {
+    escape.current = onEscape;
+  });
+  const position = useAnchoredPosition(anchor, { open: mounted, side, align, gap, matchWidth });
+  const { floatingRef } = position;
+  const close = useCallback(() => {
+    setOpen(false);
+    setEntered(false);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setMounted(false), 200);
+  }, []);
+  const show = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    setOpen(true);
+    setMounted(true);
+    requestAnimationFrame(() => requestAnimationFrame(() => setEntered(true)));
+  }, []);
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      const t = e.target;
+      if (anchor.current?.contains(t) || floatingRef.current?.contains(t)) return;
+      close();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close();
+        escape.current?.();
+      }
+    };
+    document.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [open, anchor, floatingRef, close]);
+  const s = position.side;
+  const hidden = {
+    bottom: "inset(-48px -48px 55% -48px)",
+    top: "inset(55% -48px -48px -48px)",
+    left: "inset(-48px -48px -48px 55%)",
+    right: "inset(-48px 55% -48px -48px)"
+  };
+  const panelStyle = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    zIndex: LAYER.floating,
+    background: "var(--panel-bezel)",
+    boxShadow: "var(--overlay-shadow)",
+    transformOrigin: ORIGIN[s],
+    opacity: entered ? 1 : 0,
+    transform: entered ? "none" : `${ENTER_FROM[s]} scale(0.98)`,
+    clipPath: entered ? "inset(-48px -48px -48px -48px)" : hidden[s],
+    transition: entered ? "opacity 180ms ease-out, transform 360ms var(--ease-out-soft), clip-path 360ms var(--ease-out-soft)" : "opacity 160ms ease-in, transform 200ms ease-in, clip-path 200ms ease-in"
+  };
+  return {
+    open,
+    mounted,
+    entered,
+    show,
+    close,
+    toggle: open ? close : show,
+    side: s,
+    setFloating: position.setFloating,
+    panelStyle
+  };
+}
+export {
+  useFloatingPanel
+};
+//# sourceMappingURL=useFloatingPanel.js.map

package/dist/useFloatingPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/useFloatingPanel.ts"],"sourcesContent":["\"use client\";\n\nimport { CSSProperties, RefObject, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Align, ENTER_FROM, LAYER, ORIGIN, Side, useAnchoredPosition } from \"./Floating\";\n\ninterface FloatingPanelOptions {\n  side?: Side;\n  align?: Align;\n  gap?: number;\n  matchWidth?: boolean;\n  /** Called after Escape closes the panel, to hand focus back */\n  onEscape?: () => void;\n}\n\n/* The open/close choreography every field-anchored panel shares (select,\n   date picker, colour picker, combobox): the panel is portalled to the\n   body and pinned next to its anchor, stays mounted while it folds away,\n   unfolds only once painted, and a click outside or Escape puts it back.\n   Render the panel inside <Portal> with ref={setFloating} and\n   style={panelStyle}.                                                 */\nexport function useFloatingPanel(anchor: RefObject<HTMLElement | null>, options: FloatingPanelOptions = {}) {\n  const { side = \"bottom\", align = \"start\", gap = 8, matchWidth = false, onEscape } = options;\n  const [open, setOpen] = useState(false);\n  const [mounted, setMounted] = useState(false);\n  const [entered, setEntered] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const escape = useRef(onEscape);\n  useEffect(() => {\n    escape.current = onEscape;\n  });\n\n  const position = useAnchoredPosition(anchor, { open: mounted, side, align, gap, matchWidth });\n  const { floatingRef } = position;\n\n  const close = useCallback(() => {\n    setOpen(false);\n    setEntered(false);\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => setMounted(false), 200);\n  }, []);\n\n  const show = useCallback(() => {\n    if (timer.current) clearTimeout(timer.current);\n    setOpen(true);\n    setMounted(true);\n    requestAnimationFrame(() => requestAnimationFrame(() => setEntered(true)));\n  }, []);\n\n  useEffect(() => () => {\n    if (timer.current) clearTimeout(timer.current);\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n    const onDown = (e: PointerEvent) => {\n      const t = e.target as Node;\n      if (anchor.current?.contains(t) || floatingRef.current?.contains(t)) return;\n      close();\n    };\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        close();\n        escape.current?.();\n      }\n    };\n    document.addEventListener(\"pointerdown\", onDown);\n    document.addEventListener(\"keydown\", onKey, true);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onDown);\n      document.removeEventListener(\"keydown\", onKey, true);\n    };\n  }, [open, anchor, floatingRef, close]);\n\n  /* Unfolds out of the field: a clip reveals it from the anchor's side\n     while it fades and settles. The clip reaches past the panel so its\n     shadow is never cut off.                                          */\n  const s = position.side;\n  const hidden: Record<Side, string> = {\n    bottom: \"inset(-48px -48px 55% -48px)\",\n    top: \"inset(55% -48px -48px -48px)\",\n    left: \"inset(-48px -48px -48px 55%)\",\n    right: \"inset(-48px 55% -48px -48px)\",\n  };\n  const panelStyle: CSSProperties = {\n    position: \"fixed\",\n    top: 0,\n    left: 0,\n    zIndex: LAYER.floating,\n    background: \"var(--panel-bezel)\",\n    boxShadow: \"var(--overlay-shadow)\",\n    transformOrigin: ORIGIN[s],\n    opacity: entered ? 1 : 0,\n    transform: entered ? \"none\" : `${ENTER_FROM[s]} scale(0.98)`,\n    clipPath: entered ? \"inset(-48px -48px -48px -48px)\" : hidden[s],\n    transition: entered\n      ? \"opacity 180ms ease-out, transform 360ms var(--ease-out-soft), clip-path 360ms var(--ease-out-soft)\"\n      : \"opacity 160ms ease-in, transform 200ms ease-in, clip-path 200ms ease-in\",\n  };\n\n  return {\n    open,\n    mounted,\n    entered,\n    show,\n    close,\n    toggle: open ? close : show,\n    side: s,\n    setFloating: position.setFloating,\n    panelStyle,\n  };\n}\n"],"mappings":";;;AAEA,SAAmC,aAAa,WAAW,QAAQ,gBAAgB;AACnF,SAAgB,YAAY,OAAO,QAAc,2BAA2B;AAiBrE,SAAS,iBAAiB,QAAuC,UAAgC,CAAC,GAAG;AAC1G,QAAM,EAAE,OAAO,UAAU,QAAQ,SAAS,MAAM,GAAG,aAAa,OAAO,SAAS,IAAI;AACpF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,QAAQ,OAA6C,IAAI;AAC/D,QAAM,SAAS,OAAO,QAAQ;AAC9B,YAAU,MAAM;AACd,WAAO,UAAU;AAAA,EACnB,CAAC;AAED,QAAM,WAAW,oBAAoB,QAAQ,EAAE,MAAM,SAAS,MAAM,OAAO,KAAK,WAAW,CAAC;AAC5F,QAAM,EAAE,YAAY,IAAI;AAExB,QAAM,QAAQ,YAAY,MAAM;AAC9B,YAAQ,KAAK;AACb,eAAW,KAAK;AAChB,QAAI,MAAM,QAAS,cAAa,MAAM,OAAO;AAC7C,UAAM,UAAU,WAAW,MAAM,WAAW,KAAK,GAAG,GAAG;AAAA,EACzD,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,YAAY,MAAM;AAC7B,QAAI,MAAM,QAAS,cAAa,MAAM,OAAO;AAC7C,YAAQ,IAAI;AACZ,eAAW,IAAI;AACf,0BAAsB,MAAM,sBAAsB,MAAM,WAAW,IAAI,CAAC,CAAC;AAAA,EAC3E,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM,MAAM;AACpB,QAAI,MAAM,QAAS,cAAa,MAAM,OAAO;AAAA,EAC/C,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,CAAC,MAAoB;AAClC,YAAM,IAAI,EAAE;AACZ,UAAI,OAAO,SAAS,SAAS,CAAC,KAAK,YAAY,SAAS,SAAS,CAAC,EAAG;AACrE,YAAM;AAAA,IACR;AACA,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,gBAAgB;AAClB,cAAM;AACN,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AACA,aAAS,iBAAiB,eAAe,MAAM;AAC/C,aAAS,iBAAiB,WAAW,OAAO,IAAI;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,eAAe,MAAM;AAClD,eAAS,oBAAoB,WAAW,OAAO,IAAI;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,aAAa,KAAK,CAAC;AAKrC,QAAM,IAAI,SAAS;AACnB,QAAM,SAA+B;AAAA,IACnC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACA,QAAM,aAA4B;AAAA,IAChC,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,MAAM;AAAA,IACd,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,iBAAiB,OAAO,CAAC;AAAA,IACzB,SAAS,UAAU,IAAI;AAAA,IACvB,WAAW,UAAU,SAAS,GAAG,WAAW,CAAC,CAAC;AAAA,IAC9C,UAAU,UAAU,mCAAmC,OAAO,CAAC;AAAA,IAC/D,YAAY,UACR,uGACA;AAAA,EACN;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,OAAO,QAAQ;AAAA,IACvB,MAAM;AAAA,IACN,aAAa,SAAS;AAAA,IACtB;AAAA,EACF;AACF;","names":[]}

package/dist/useModalBehavior.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+
+interface ModalBehaviorOptions {
+    /** The dialog is logically open */
+    open: boolean;
+    /** The dialog is mounted and painted — focus can move into it */
+    ready: boolean;
+    ref: RefObject<HTMLElement | null>;
+    onClose: () => void;
+    /** Element to focus on open; defaults to the first focusable */
+    initialFocus?: RefObject<HTMLElement | null>;
+}
+declare function useModalBehavior({ open, ready, ref, onClose, initialFocus }: ModalBehaviorOptions): void;
+
+export { useModalBehavior };

package/dist/useModalBehavior.js

@@ -0,0 +1,57 @@
+"use client";
+
+// ../../components/ui/useModalBehavior.ts
+import { useEffect } from "react";
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useModalBehavior({ open, ready, ref, onClose, initialFocus }) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open || !ready) return;
+    const el = ref.current;
+    if (!el) return;
+    const opener = document.activeElement;
+    const target = initialFocus?.current ?? el.querySelector(FOCUSABLE);
+    target?.focus();
+    const trap = (e) => {
+      if (e.key !== "Tab") return;
+      const focusable = el.querySelectorAll(FOCUSABLE);
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    el.addEventListener("keydown", trap);
+    return () => {
+      el.removeEventListener("keydown", trap);
+      opener?.focus?.();
+    };
+  }, [open, ready, ref, initialFocus]);
+}
+export {
+  useModalBehavior
+};
+//# sourceMappingURL=useModalBehavior.js.map

package/dist/useModalBehavior.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/useModalBehavior.ts"],"sourcesContent":["\"use client\";\n\nimport { RefObject, useEffect } from \"react\";\n\ninterface ModalBehaviorOptions {\n  /** The dialog is logically open */\n  open: boolean;\n  /** The dialog is mounted and painted — focus can move into it */\n  ready: boolean;\n  ref: RefObject<HTMLElement | null>;\n  onClose: () => void;\n  /** Element to focus on open; defaults to the first focusable */\n  initialFocus?: RefObject<HTMLElement | null>;\n}\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/* Everything a modal surface owes the person using it: Escape closes,\n   focus is trapped inside, the page behind doesn't scroll, and focus\n   returns to whatever opened it.                                     */\nexport function useModalBehavior({ open, ready, ref, onClose, initialFocus }: ModalBehaviorOptions) {\n  // Escape\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, onClose]);\n\n  // Scroll lock\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // Focus trap + restore\n  useEffect(() => {\n    if (!open || !ready) return;\n    const el = ref.current;\n    if (!el) return;\n\n    const opener = document.activeElement as HTMLElement | null;\n    const target = initialFocus?.current ?? el.querySelector<HTMLElement>(FOCUSABLE);\n    target?.focus();\n\n    const trap = (e: KeyboardEvent) => {\n      if (e.key !== \"Tab\") return;\n      const focusable = el.querySelectorAll<HTMLElement>(FOCUSABLE);\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey && document.activeElement === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && document.activeElement === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    el.addEventListener(\"keydown\", trap);\n    return () => {\n      el.removeEventListener(\"keydown\", trap);\n      opener?.focus?.();\n    };\n  }, [open, ready, ref, initialFocus]);\n}\n"],"mappings":";;;AAEA,SAAoB,iBAAiB;AAarC,IAAM,YACJ;AAKK,SAAS,iBAAiB,EAAE,MAAM,OAAO,KAAK,SAAS,aAAa,GAAyB;AAElG,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,gBAAgB;AAClB,gBAAQ;AAAA,MACV;AAAA,IACF;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,MAAM,OAAO,CAAC;AAGlB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,SAAS,KAAK,MAAM;AACjC,aAAS,KAAK,MAAM,WAAW;AAC/B,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,MAAO;AACrB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAET,UAAM,SAAS,SAAS;AACxB,UAAM,SAAS,cAAc,WAAW,GAAG,cAA2B,SAAS;AAC/E,YAAQ,MAAM;AAEd,UAAM,OAAO,CAAC,MAAqB;AACjC,UAAI,EAAE,QAAQ,MAAO;AACrB,YAAM,YAAY,GAAG,iBAA8B,SAAS;AAC5D,UAAI,UAAU,WAAW,EAAG;AAC5B,YAAM,QAAQ,UAAU,CAAC;AACzB,YAAM,OAAO,UAAU,UAAU,SAAS,CAAC;AAC3C,UAAI,EAAE,YAAY,SAAS,kBAAkB,OAAO;AAClD,UAAE,eAAe;AACjB,aAAK,MAAM;AAAA,MACb,WAAW,CAAC,EAAE,YAAY,SAAS,kBAAkB,MAAM;AACzD,UAAE,eAAe;AACjB,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAEA,OAAG,iBAAiB,WAAW,IAAI;AACnC,WAAO,MAAM;AACX,SAAG,oBAAoB,WAAW,IAAI;AACtC,cAAQ,QAAQ;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,KAAK,YAAY,CAAC;AACrC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blurrow/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "tactile react components: buttons you want to press, fields you want to fill in. comes with a cli: npx @blurrow/ui init",
   "license": "MIT",
   "author": "manyports (https://manyports.com)",