@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/Indicator.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import s from "./Indicator.module.css";
+function Indicator({
+  value,
+  onChange,
+  groups,
+  label = "\u5206\u7C7B\u5BFC\u822A"
+}) {
+  const root = useRef(null);
+  useLayoutEffect(() => {
+    const node = root.current;
+    const measure = () => {
+      const selected = [
+        ...node.querySelectorAll("button[data-value]")
+      ].find((b) => b.dataset.value === value);
+      if (!selected) {
+        node.style.setProperty("--indicator-opacity", "0");
+        return;
+      }
+      node.style.setProperty("--indicator-opacity", "1");
+      node.style.setProperty("--indicator-y", selected.offsetTop + "px");
+      node.style.setProperty(
+        "--indicator-height",
+        selected.offsetHeight + "px"
+      );
+      if (!node.dataset.ready) {
+        node.getBoundingClientRect();
+        node.dataset.ready = "true";
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    node.querySelectorAll("button").forEach((n) => observer.observe(n));
+    return () => observer.disconnect();
+  }, [value, groups]);
+  const enabled = groups.flatMap((g) => g.items).filter((i) => !i.disabled);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: root,
+      className: s.indicator,
+      "aria-label": label,
+      onKeyDown: (e) => {
+        const active = enabled.findIndex(
+          (i) => i.value === e.target.closest("button")?.dataset.value
+        );
+        let next = active;
+        if (e.key === "ArrowDown") next = (active + 1) % enabled.length;
+        else if (e.key === "ArrowUp")
+          next = (active - 1 + enabled.length) % enabled.length;
+        else if (e.key === "Home") next = 0;
+        else if (e.key === "End") next = enabled.length - 1;
+        else return;
+        if (!enabled[next]) return;
+        e.preventDefault();
+        onChange(enabled[next].value);
+        [...root.current.querySelectorAll("button")].find((b) => b.dataset.value === enabled[next].value)?.focus();
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: s.track, "data-indicator-track": true, "aria-hidden": "true" }),
+        groups.map((group) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: s.group,
+            role: "group",
+            "aria-label": group.label,
+            children: [
+              group.label && /* @__PURE__ */ jsx("div", { className: s.groupLabel, children: group.label }),
+              group.items.map((item) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-value": item.value,
+                  disabled: item.disabled,
+                  "aria-current": value === item.value ? "page" : void 0,
+                  tabIndex: value === item.value ? 0 : -1,
+                  onClick: () => onChange(item.value),
+                  children: [
+                    item.icon,
+                    /* @__PURE__ */ jsx("span", { children: item.label })
+                  ]
+                },
+                item.value
+              ))
+            ]
+          },
+          group.id
+        ))
+      ]
+    }
+  );
+}
+export {
+  Indicator
+};

package/components/Indicator.module.css

@@ -0,0 +1,83 @@
+.indicator {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  align-self: start;
+  min-width: 0;
+}
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.groupLabel {
+  font-size: 11px;
+  color: var(--muted);
+  padding: 4px 12px 6px;
+}
+.indicator button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  padding: 10px 12px 10px 16px;
+  min-height: 38px;
+  border-radius: 7px;
+  color: var(--muted);
+  font-size: 12px;
+  transition: color var(--motion-hover);
+}
+.indicator button > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.indicator button:hover:not(:disabled) {
+  color: var(--fg);
+}
+.indicator button[aria-current="page"] {
+  color: var(--navigation-active-color, var(--fg));
+}
+.indicator button:focus-visible {
+  outline-offset: -2px;
+}
+.indicator svg {
+  width: 15px;
+  height: 15px;
+}
+.track {
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: var(--indicator-height, 38px);
+  transform: translateY(var(--indicator-y, 0px));
+  opacity: var(--indicator-opacity, 0);
+  border-radius: 7px;
+  background: var(--selected);
+}
+.track::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 50%;
+  height: 14px;
+  width: 3px;
+  transform: translateY(-50%);
+  border-radius: 3px;
+  background: var(--accent);
+}
+.indicator[data-ready="true"] .track {
+  transition:
+    transform var(--motion-segment) var(--ease),
+    height var(--motion-segment) var(--ease),
+    opacity var(--motion-hover);
+}

package/components/Input.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export declare function Input({ label, error, hint, leading, trailing, ...props }: ComponentPropsWithRef<"input"> & {
+    label?: string;
+    error?: string;
+    hint?: string;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+}): import("react").JSX.Element;

package/components/Input.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormField } from "./FormField.js";
+import { fieldInputProps, useFieldControl } from "./field.js";
+import s from "./Input.module.css";
+function Input({
+  label,
+  error,
+  hint,
+  leading,
+  trailing,
+  ...props
+}) {
+  const field = useFieldControl({ ...props, label, error, hint });
+  const control = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      ...fieldInputProps(field),
+      className: [s.input, props.className].filter(Boolean).join(" ")
+    }
+  );
+  const content = leading || trailing ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${s.withIcon} ${leading ? s.hasLeading : ""} ${trailing ? s.hasTrailing : ""}`,
+      children: [
+        leading && /* @__PURE__ */ jsx("span", { className: s.leading, children: leading }),
+        control,
+        trailing && /* @__PURE__ */ jsx("span", { className: s.trailing, children: trailing })
+      ]
+    }
+  ) : control;
+  return field.wrapped ? content : /* @__PURE__ */ jsx(FormField, { ...field, children: content });
+}
+export {
+  Input
+};

package/components/Input.module.css

@@ -0,0 +1,40 @@
+.input {
+  composes: surface from "./Control.module.css";
+  width: 100%;
+  padding: 6px 10px;
+}
+.withIcon {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+.hasLeading .input {
+  padding-left: 38px;
+}
+.hasTrailing .input {
+  padding-right: 36px;
+}
+.trailing {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: var(--muted);
+  pointer-events: none;
+}
+.trailing > svg {
+  width: 16px;
+  height: 16px;
+}
+.leading {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: var(--muted);
+  pointer-events: none;
+}

package/components/LoadingOverlay.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export declare function LoadingOverlay({ active, children, label, }: {
+    active: boolean;
+    children: ReactNode;
+    label?: string;
+}): import("react").JSX.Element;

package/components/LoadingOverlay.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LoadingState } from "./LoadingState.js";
+import s from "./LoadingOverlay.module.css";
+function LoadingOverlay({
+  active,
+  children,
+  label = "\u6B63\u5728\u5904\u7406"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: s.host, "aria-busy": active, children: [
+    /* @__PURE__ */ jsx("div", { inert: active, children }),
+    /* @__PURE__ */ jsx("div", { className: s.overlay, "data-active": active, "aria-hidden": !active, children: /* @__PURE__ */ jsx(LoadingState, { label }) })
+  ] });
+}
+export {
+  LoadingOverlay
+};

package/components/LoadingOverlay.module.css

@@ -0,0 +1,22 @@
+.host {
+  position: relative;
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--surface) 88%, transparent);
+  backdrop-filter: blur(2px);
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity var(--popup-enter),
+    visibility var(--popup-enter);
+}
+.overlay[data-active="true"] {
+  opacity: 1;
+  visibility: visible;
+}

package/components/LoadingState.d.ts

@@ -0,0 +1,7 @@
+export declare function LoadingState({ variant, label, progress, showLabel, fullPage, }: {
+    variant?: "spinner" | "dots" | "skeleton" | "progress";
+    label?: string;
+    progress?: number;
+    showLabel?: boolean;
+    fullPage?: boolean;
+}): import("react").JSX.Element;

package/components/LoadingState.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spinner } from "./Spinner.js";
+import { SkeletonRows } from "./SkeletonRows.js";
+import { Progress } from "./Progress.js";
+import s from "./LoadingState.module.css";
+function LoadingState({
+  variant = "spinner",
+  label = "\u6B63\u5728\u52A0\u8F7D",
+  progress,
+  showLabel = true,
+  fullPage = false
+}) {
+  if (variant === "skeleton") return /* @__PURE__ */ jsx(SkeletonRows, { label });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.loading,
+      role: "status",
+      "aria-label": label,
+      "data-full-page": fullPage || void 0,
+      children: [
+        variant === "progress" ? /* @__PURE__ */ jsx(Progress, { value: progress ?? 0, label }) : /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size: 24,
+            variant: variant === "dots" ? "dots" : "ring",
+            decorative: true
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsxs("span", { children: [
+          label,
+          variant === "progress" && progress !== void 0 ? " " + Math.round(progress) + "%" : ""
+        ] })
+      ]
+    }
+  );
+}
+export {
+  LoadingState
+};

package/components/LoadingState.module.css

@@ -0,0 +1,17 @@
+.loading {
+  display: flex;
+  min-height: 160px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 14px;
+  padding: 22px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.loading > div {
+  width: min(260px, 100%);
+}
+.loading[data-full-page="true"] {
+  min-height: calc(100dvh - 200px);
+}

package/components/Menu.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export declare function Menu({ label, items, }: {
+    label: string;
+    items: {
+        label: string;
+        icon?: ReactNode;
+        danger?: boolean;
+        disabled?: boolean;
+        action: () => void;
+    }[];
+}): import("react").JSX.Element;

package/components/Menu.js

@@ -0,0 +1,82 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { Button } from "./Button.js";
+import { MenuItem } from "./MenuItem.js";
+import { Popover } from "./Popover.js";
+import { usePopover } from "./usePopover.js";
+function Menu({
+  label,
+  items
+}) {
+  const pop = usePopover(), id = useId();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: pop.anchor,
+        "aria-haspopup": "menu",
+        "aria-expanded": pop.open,
+        "aria-controls": id,
+        onClick: pop.toggle,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            pop.show();
+          }
+        },
+        children: [
+          label,
+          /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id,
+        label,
+        role: "menu",
+        open: pop.open,
+        anchor: pop.anchor,
+        onClose: pop.close,
+        onKeyDown: (event) => {
+          const buttons = Array.from(
+            event.currentTarget.querySelectorAll(
+              '[role="menuitem"]:not(:disabled)'
+            )
+          );
+          if (!buttons.length) return;
+          const current = buttons.indexOf(
+            document.activeElement
+          );
+          const next = event.key === "ArrowDown" ? (current + 1) % buttons.length : event.key === "ArrowUp" ? (current - 1 + buttons.length) % buttons.length : event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : -1;
+          if (next >= 0) {
+            event.preventDefault();
+            buttons[next].focus();
+          }
+          if (event.key === "Tab") pop.close();
+        },
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            role: "menuitem",
+            label: item.label,
+            icon: item.icon,
+            reserveIcon: items.some((entry) => !!entry.icon),
+            disabled: item.disabled,
+            tone: item.danger ? "danger" : "default",
+            onClick: () => {
+              pop.closeAndFocus();
+              item.action();
+            }
+          },
+          item.label
+        ))
+      }
+    )
+  ] });
+}
+export {
+  Menu
+};

package/components/MenuItem.d.ts

@@ -0,0 +1,15 @@
+import { type MenuItemContentProps } from "./MenuItemContent";
+import type { HTMLAttributes, ReactNode } from "react";
+export type MenuItemProps = Omit<HTMLAttributes<HTMLElement>, "children" | "prefix"> & MenuItemContentProps & {
+    as?: "button" | "div";
+    prefix?: ReactNode;
+    shortcut?: string;
+    trailing?: ReactNode;
+    meta?: ReactNode;
+    selected?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    selection?: "check" | "checkbox" | "radio";
+    tone?: "default" | "danger";
+};
+export declare function MenuItem({ as, prefix, label, description, icon, reserveIcon, shortcut, trailing, meta, selected, active, disabled, selection, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;

package/components/MenuItem.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MenuItemContent } from "./MenuItemContent.js";
+import { Check } from "lucide-react";
+import s from "./MenuItem.module.css";
+function MenuItem({
+  as = "button",
+  prefix,
+  label,
+  description,
+  icon,
+  reserveIcon = false,
+  shortcut,
+  trailing,
+  meta,
+  selected = false,
+  active = false,
+  disabled = false,
+  selection,
+  tone,
+  className = "",
+  ...props
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    prefix,
+    /* @__PURE__ */ jsx(
+      MenuItemContent,
+      {
+        label,
+        description,
+        icon,
+        reserveIcon
+      }
+    ),
+    shortcut && /* @__PURE__ */ jsx("kbd", { className: s.shortcut, children: shortcut }),
+    meta && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: meta }),
+    /* @__PURE__ */ jsx("span", { className: s.trailing, "data-menu-trailing": true, "aria-hidden": "true", children: trailing || (selection === "checkbox" ? /* @__PURE__ */ jsx("span", { className: s.checkbox, "data-checked": selected, children: selected && /* @__PURE__ */ jsx(Check, {}) }) : selection === "radio" ? /* @__PURE__ */ jsx("span", { className: s.radio, "data-checked": selected, children: /* @__PURE__ */ jsx("i", {}) }) : selection === "check" && selected ? /* @__PURE__ */ jsx(Check, { className: s.check }) : null) })
+  ] });
+  const common = {
+    ...props,
+    className: s.item + " " + className,
+    "data-menu-item": "",
+    "data-selected": selected,
+    "data-active": active,
+    "data-tone": tone,
+    "aria-disabled": disabled || void 0
+  };
+  return as === "div" ? /* @__PURE__ */ jsx("div", { ...common, children: content }) : /* @__PURE__ */ jsx("button", { type: "button", ...common, disabled, children: content });
+}
+export {
+  MenuItem
+};