@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/Popover.js

@@ -0,0 +1,156 @@
+import { jsx } from "react/jsx-runtime";
+import { FieldContext } from "./field.js";
+import {
+  useLayoutEffect,
+  useRef,
+  useEffect
+} from "react";
+import { createPortal } from "react-dom";
+import { menuSurfaceMotion, cancelMotion } from "./motion.js";
+import s from "./Popover.module.css";
+import { useSurfacePortal } from "./surfacePortal.js";
+function Popover({
+  open: requestedOpen,
+  onClose,
+  anchor,
+  children,
+  width = 230,
+  label,
+  role = "dialog",
+  id,
+  onKeyDown,
+  descriptionId,
+  autoFocus = true,
+  matchAnchorWidth = false,
+  className = ""
+}) {
+  const owner = useSurfacePortal(), portalHost = owner?.host || document.body, open = requestedOpen && owner?.active !== false;
+  const ref = useRef(null), close = useRef(onClose);
+  close.current = onClose;
+  const opened = useRef(open);
+  opened.current = open;
+  useEffect(() => {
+    if (requestedOpen && owner?.active === false) close.current();
+  }, [requestedOpen, owner?.active]);
+  useEffect(() => {
+    const node = ref.current;
+    return () => cancelMotion(node);
+  }, [portalHost]);
+  useLayoutEffect(() => {
+    const surface = ref.current, trigger = anchor.current;
+    if (!open) {
+      if (!surface.matches(":popover-open")) return;
+      surface.inert = true;
+      surface.setAttribute("aria-hidden", "true");
+      void menuSurfaceMotion(
+        surface,
+        "exit",
+        surface.dataset.side === "top" ? "top" : "bottom"
+      ).then((done) => {
+        if (done && !opened.current && surface.matches(":popover-open"))
+          surface.hidePopover();
+      });
+      return;
+    }
+    if (!trigger) return;
+    surface.inert = false;
+    surface.removeAttribute("aria-hidden");
+    const position = () => {
+      if (!trigger.isConnected) {
+        close.current();
+        return;
+      }
+      const viewport = window.visualViewport;
+      const viewportTop = viewport?.offsetTop ?? 0;
+      const viewportLeft = viewport?.offsetLeft ?? 0;
+      const viewportWidth = viewport?.width ?? innerWidth;
+      const viewportBottom = viewportTop + (viewport?.height ?? innerHeight);
+      const rect = trigger.getBoundingClientRect(), available = Math.max(0, viewportBottom - viewportTop - 24);
+      surface.style.maxHeight = available + "px";
+      const actualWidth = Math.min(
+        matchAnchorWidth ? rect.width : width,
+        Math.max(0, viewportWidth - 24)
+      );
+      surface.style.width = actualWidth + "px";
+      const height = Math.min(surface.scrollHeight + 2, available);
+      surface.style.left = Math.max(
+        viewportLeft + 12,
+        Math.min(rect.left, viewportLeft + viewportWidth - actualWidth - 12)
+      ) + "px";
+      const below = viewportBottom - rect.bottom - 10;
+      surface.dataset.side = below >= height || rect.top - viewportTop < height ? "bottom" : "top";
+      const top = surface.dataset.side === "bottom" ? rect.bottom + 6 : rect.top - height - 6;
+      surface.style.top = Math.max(
+        viewportTop + 12,
+        Math.min(top, viewportBottom - height - 12)
+      ) + "px";
+    };
+    if (!surface.matches(":popover-open")) surface.showPopover();
+    position();
+    void menuSurfaceMotion(
+      surface,
+      "enter",
+      surface.dataset.side === "top" ? "top" : "bottom"
+    );
+    if (autoFocus && role !== "listbox")
+      (surface.querySelector("[data-autofocus]") || surface.querySelector(
+        'input:not([disabled]),button:not([disabled]),[tabindex="0"]'
+      ))?.focus({ preventScroll: true });
+    const observer = new ResizeObserver(position);
+    observer.observe(surface);
+    observer.observe(trigger);
+    const pointer = (event) => {
+      if (!surface.contains(event.target) && !trigger.contains(event.target))
+        close.current();
+    };
+    const focus = (event) => {
+      if (!surface.contains(event.target) && !trigger.contains(event.target))
+        close.current();
+    };
+    const key = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        close.current();
+        trigger.focus();
+      }
+    };
+    document.addEventListener("pointerdown", pointer, true);
+    document.addEventListener("keydown", key, true);
+    document.addEventListener("focusin", focus, true);
+    window.addEventListener("resize", position);
+    window.addEventListener("scroll", position, true);
+    window.visualViewport?.addEventListener("resize", position);
+    window.visualViewport?.addEventListener("scroll", position);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("pointerdown", pointer, true);
+      document.removeEventListener("keydown", key, true);
+      document.removeEventListener("focusin", focus, true);
+      window.removeEventListener("resize", position);
+      window.removeEventListener("scroll", position, true);
+      window.visualViewport?.removeEventListener("resize", position);
+      window.visualViewport?.removeEventListener("scroll", position);
+    };
+  }, [open, anchor, width, role, portalHost, autoFocus, matchAnchorWidth]);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id,
+        popover: "manual",
+        role,
+        "aria-label": label,
+        "aria-describedby": descriptionId,
+        onKeyDown,
+        className: s.popover + " " + className,
+        children: /* @__PURE__ */ jsx(FieldContext, { value: null, children })
+      }
+    ),
+    portalHost
+  );
+}
+export {
+  Popover
+};

package/components/Popover.module.css

@@ -0,0 +1,19 @@
+.popover {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 5px;
+  color: var(--fg);
+  background: var(--popup-background);
+  border: 1px solid var(--popup-border);
+  border-radius: var(--popup-radius);
+  box-shadow: var(--popup-shadow);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.popover[inert] {
+  pointer-events: none;
+}
+.popover:not(:popover-open) {
+  display: none;
+}

package/components/Progress.d.ts

@@ -0,0 +1,5 @@
+export declare function Progress({ value, label, tone, }: {
+    value?: number;
+    label: string;
+    tone?: "default" | "success" | "error";
+}): import("react").JSX.Element;

package/components/Progress.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import s from "./Progress.module.css";
+function Progress({
+  value,
+  label,
+  tone = "default"
+}) {
+  const amount = value === void 0 ? void 0 : Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: s.progress,
+      "data-indeterminate": amount === void 0,
+      "data-tone": tone,
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuenow": amount,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: amount === void 0 ? void 0 : { width: amount + "%" }
+        }
+      )
+    }
+  );
+}
+export {
+  Progress
+};

package/components/Progress.module.css

@@ -0,0 +1,33 @@
+.progress {
+  height: 5px;
+  width: 100%;
+  background: var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.progress span {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  border-radius: inherit;
+  transition: width var(--motion-panel) var(--ease);
+}
+
+.progress[data-indeterminate="true"] > span {
+  width: 35%;
+  animation: progress-travel 1.25s ease-in-out infinite;
+}
+.progress[data-tone="success"] > span {
+  background: var(--success);
+}
+.progress[data-tone="error"] > span {
+  background: var(--danger);
+}
+@keyframes progress-travel {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(290%);
+  }
+}

package/components/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import { type FieldOptions } from "./field";
+export declare function RadioGroup({ label, value, onChange, options, disabled, required, name: providedName, orientation, ...optionsProps }: FieldOptions & {
+    label: string;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    orientation?: "horizontal" | "vertical";
+    value: string;
+    onChange(value: string): void;
+    options: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+}): import("react").JSX.Element;

package/components/RadioGroup.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FieldLabel } from "./FieldLabel.js";
+import { useFieldControl } from "./field.js";
+import { useId } from "react";
+import s from "./RadioGroup.module.css";
+function RadioGroup({
+  label,
+  value,
+  onChange,
+  options,
+  disabled,
+  required,
+  name: providedName,
+  orientation = "horizontal",
+  ...optionsProps
+}) {
+  const generated = useId(), field = useFieldControl({
+    ...optionsProps,
+    label,
+    name: providedName,
+    disabled,
+    required
+  }), name = field.name || generated;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: s.group,
+      disabled: field.disabled,
+      id: field.id,
+      "aria-invalid": field.invalid,
+      "aria-describedby": field.descriptionId,
+      "data-orientation": orientation,
+      children: [
+        /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            as: "span",
+            label,
+            required: !field.wrapped && field.required
+          }
+        ) }),
+        options.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            "data-disabled": field.disabled || option.disabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  value: option.value,
+                  name,
+                  required: field.required,
+                  checked: value === option.value,
+                  disabled: field.disabled || option.disabled,
+                  onChange: () => {
+                    if (!field.readOnly) onChange(option.value);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: s.mark, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: option.label })
+            ]
+          },
+          option.value
+        ))
+      ]
+    }
+  );
+}
+export {
+  RadioGroup
+};

package/components/RadioGroup.module.css

@@ -0,0 +1,87 @@
+.group {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 20px;
+}
+.group legend {
+  padding: 0;
+  margin-bottom: 10px;
+  font-size: 12px;
+}
+.group label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+.group input[type="radio"] {
+  position: absolute;
+  left: 0;
+  margin: 0;
+  width: 18px;
+  height: 18px;
+  opacity: 0;
+}
+.mark {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid color-mix(in srgb, var(--fg) 25%, var(--surface));
+  border-radius: 50%;
+  background: var(--field);
+  pointer-events: none;
+  transition:
+    border-color var(--motion-hover),
+    box-shadow var(--motion-hover),
+    transform var(--motion-press);
+}
+.mark::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent-fill, var(--accent));
+  transform: scale(0.25);
+  opacity: 0;
+  transition:
+    transform var(--motion-panel) var(--ease),
+    opacity var(--motion-hover);
+}
+.group input:checked + .mark {
+  border-color: var(--accent-fill, var(--accent));
+}
+.group input:checked + .mark::after {
+  transform: scale(1);
+  opacity: 1;
+}
+.group label:hover input:not(:disabled) + .mark {
+  border-color: var(--muted);
+}
+.group label:active input:not(:disabled) + .mark {
+  transform: scale(0.92);
+}
+.group input:focus-visible + .mark {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
+  border-color: var(--accent);
+}
+.group label[data-disabled="true"] {
+  cursor: not-allowed;
+}
+.group input:disabled ~ span {
+  opacity: 0.4;
+}
+
+.group[data-orientation="vertical"] {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.group[aria-invalid="true"] .mark {
+  border-color: var(--danger);
+}

package/components/RangeSlider.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import { type FieldOptions } from "./field";
+import { type RangeValue } from "./rangeMath";
+export type RangeSliderProps = FieldOptions & {
+    label: string;
+    value: RangeValue;
+    onChange(value: RangeValue): void;
+    onChangeEnd?(value: RangeValue): void;
+    min?: number;
+    max?: number;
+    step?: number;
+    minDistance?: number;
+    lowerLabel?: string;
+    upperLabel?: string;
+    formatValue?(value: number): string;
+    marks?: (number | {
+        value: number;
+        label?: ReactNode;
+    })[];
+    tooltip?: boolean;
+};
+export declare function RangeSlider({ label, value, onChange, onChangeEnd, min, max, step, minDistance, lowerLabel, upperLabel, formatValue, marks, tooltip, ...options }: RangeSliderProps): import("react").JSX.Element;