@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/ContextMenu.module.css

@@ -0,0 +1,42 @@
+.host {
+  min-width: 0;
+}
+.root {
+  position: fixed;
+  inset: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--fg);
+  overflow: visible;
+  pointer-events: none;
+}
+.root::backdrop {
+  background: transparent;
+  pointer-events: none;
+}
+.panel {
+  position: fixed;
+  pointer-events: auto;
+  width: 236px;
+  max-width: calc(100vw - 16px);
+  max-height: calc(100vh - 16px);
+  overflow: auto;
+  padding: 5px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+.error {
+  padding: 8px;
+  color: var(--danger);
+  font-size: 12px;
+}
+
+.panel[inert] {
+  pointer-events: none;
+}

package/components/ContextMenuPanel.d.ts

@@ -0,0 +1,22 @@
+import { type KeyboardEvent } from "react";
+import type { ContextMenuItem, MenuAction } from "./menuTypes";
+export declare function ContextMenuPanel({ open, onExited, onPanelEnter, onReady, items, level, point, anchor, activeId, busy, error, onHover, onChoose, onKey, onScroll, }: {
+    open: boolean;
+    onExited(): void;
+    onPanelEnter(): void;
+    onReady(node: HTMLDivElement): void;
+    items: ContextMenuItem[];
+    level: number;
+    point: {
+        x: number;
+        y: number;
+    };
+    anchor?: HTMLElement;
+    activeId?: string;
+    busy?: string;
+    error?: string;
+    onHover(item: MenuAction, index: number): void;
+    onChoose(item: MenuAction, index: number): void;
+    onKey(event: KeyboardEvent<HTMLDivElement>, level: number): void;
+    onScroll(): void;
+}): import("react").JSX.Element;

package/components/ContextMenuPanel.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MenuItem } from "./MenuItem.js";
+import { menuSurfaceMotion, cancelMotion } from "./motion.js";
+import { useLayoutEffect, useRef } from "react";
+import { ChevronRight } from "lucide-react";
+import { Spinner } from "./Spinner.js";
+import { Divider } from "./Divider.js";
+import s from "./ContextMenu.module.css";
+function ContextMenuPanel({
+  open,
+  onExited,
+  onPanelEnter,
+  onReady,
+  items,
+  level,
+  point,
+  anchor,
+  activeId,
+  busy,
+  error,
+  onHover,
+  onChoose,
+  onKey,
+  onScroll
+}) {
+  const reserveIcon = items.some(
+    (item) => item.type !== "separator" && !!item.icon
+  );
+  const ref = useRef(null), opened = useRef(open), exited = useRef(onExited), reposition = useRef(() => {
+  }), ready = useRef(onReady);
+  ready.current = onReady;
+  opened.current = open;
+  exited.current = onExited;
+  useLayoutEffect(() => {
+    const node = ref.current;
+    const position = () => {
+      const rect = node.getBoundingClientRect(), parent = anchor?.getBoundingClientRect();
+      let side = anchor?.closest("[data-menu-level]")?.dataset.side || "right";
+      let x = point.x, y = point.y;
+      if (parent) {
+        x = side === "left" ? parent.left - rect.width - 4 : parent.right + 4;
+        y = parent.top - 5;
+        if (side === "right" && x + rect.width > innerWidth - 8) {
+          side = "left";
+          x = parent.left - rect.width - 4;
+        } else if (side === "left" && x < 8) {
+          side = "right";
+          x = parent.right + 4;
+        }
+      } else {
+        const left = Math.max(8, Math.min(x, innerWidth - rect.width - 8));
+        side = left > innerWidth - left - rect.width ? "left" : "right";
+      }
+      node.dataset.side = side;
+      node.dataset.motionSide = anchor ? side : y > innerHeight - rect.height - 8 ? "top" : "bottom";
+      node.style.left = Math.max(8, Math.min(x, innerWidth - rect.width - 8)) + "px";
+      node.style.top = Math.max(8, Math.min(y, innerHeight - rect.height - 8)) + "px";
+      node.style.visibility = "visible";
+      ready.current(node);
+    };
+    reposition.current = position;
+    position();
+    const frame = requestAnimationFrame(() => {
+      position();
+    });
+    const observer = new ResizeObserver(position);
+    observer.observe(node);
+    window.addEventListener("resize", position);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", position);
+    };
+  }, [anchor, point, level]);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    node.inert = !open;
+    if (open) ready.current(node);
+    if (!open) node.setAttribute("aria-hidden", "true");
+    else node.removeAttribute("aria-hidden");
+    const frame = requestAnimationFrame(() => {
+      if (!open && !node.dataset.motionPhase) {
+        exited.current();
+        return;
+      }
+      const side = node.dataset.motionSide || "bottom";
+      void menuSurfaceMotion(node, open ? "enter" : "exit", side).then(
+        (done) => {
+          if (done && !open && !opened.current) exited.current();
+          else if (done && open && opened.current) reposition.current();
+        }
+      );
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open, point]);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    return () => cancelMotion(node);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "menu",
+      "aria-busy": !!busy,
+      "aria-label": level ? "\u5B50\u83DC\u5355 " + level : "\u53F3\u952E\u83DC\u5355",
+      "data-menu-level": level,
+      "data-menu-state": open ? "open" : "closing",
+      onPointerEnter: onPanelEnter,
+      className: s.panel,
+      style: {
+        visibility: "hidden",
+        opacity: 0,
+        zIndex: level * 2 + (open ? 2 : 1)
+      },
+      onKeyDown: (e) => onKey(e, level),
+      onScroll,
+      children: [
+        items.map(
+          (item, index) => item.type === "separator" ? /* @__PURE__ */ jsx(Divider, { spacing: 4 }, item.id) : /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              reserveIcon,
+              label: item.label,
+              description: item.description,
+              icon: busy === item.id && reserveIcon ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : item.icon,
+              shortcut: item.shortcut,
+              selected: !!item.checked,
+              selection: item.type === "checkbox" ? "checkbox" : item.type === "radio" ? "radio" : void 0,
+              trailing: !reserveIcon && busy === item.id ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : item.children?.length ? /* @__PURE__ */ jsx(ChevronRight, {}) : void 0,
+              tone: item.tone,
+              role: item.type === "checkbox" ? "menuitemcheckbox" : item.type === "radio" ? "menuitemradio" : "menuitem",
+              "aria-checked": item.type === "checkbox" || item.type === "radio" ? !!item.checked : void 0,
+              "aria-haspopup": item.children?.length ? "menu" : void 0,
+              "aria-expanded": item.children?.length ? activeId === item.id : void 0,
+              disabled: item.disabled || !!busy,
+              "data-menu-index": index,
+              "data-menu-id": item.id,
+              "data-tone": item.tone,
+              className: item.className,
+              style: { color: item.color, ...item.style },
+              onPointerMove: () => onHover(item, index),
+              onClick: () => onChoose(item, index)
+            },
+            item.id
+          )
+        ),
+        error && level === 0 && /* @__PURE__ */ jsx("p", { role: "alert", className: s.error, children: error })
+      ]
+    }
+  );
+}
+export {
+  ContextMenuPanel
+};

package/components/ContributionCalendar.d.ts

@@ -0,0 +1,18 @@
+import { type ContributionDay } from "./contribution";
+export declare function ContributionCalendar({ data, year, startDate, endDate, weekStartsOn, value, onChange, label, unit, locale, color, emptyMode, allowFuture, today, thresholds, }: {
+    data: ContributionDay[];
+    year?: number;
+    startDate?: string;
+    endDate?: string;
+    weekStartsOn?: 0 | 1;
+    value?: string;
+    onChange?(date: string): void;
+    label?: string;
+    unit?: string;
+    locale?: string;
+    color?: string;
+    emptyMode?: "zero" | "missing";
+    allowFuture?: boolean;
+    today?: string;
+    thresholds?: [number, number, number, number];
+}): import("react").JSX.Element;

package/components/ContributionCalendar.js

@@ -0,0 +1,201 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ContributionCell } from "./ContributionCell.js";
+import {
+  buildContributionCalendar,
+  parseCalendarDay
+} from "./contribution.js";
+import s from "./ContributionCalendar.module.css";
+function ContributionCalendar({
+  data,
+  year = (/* @__PURE__ */ new Date()).getFullYear(),
+  startDate,
+  endDate,
+  weekStartsOn = 1,
+  value,
+  onChange,
+  label = "\u6D3B\u52A8\u8BB0\u5F55",
+  unit = "\u6B21\u6D3B\u52A8",
+  locale = "zh-CN",
+  color = "var(--success)",
+  emptyMode = "zero",
+  allowFuture = false,
+  today,
+  thresholds
+}) {
+  const current = /* @__PURE__ */ new Date(), todayKey = today || [
+    current.getFullYear(),
+    String(current.getMonth() + 1).padStart(2, "0"),
+    String(current.getDate()).padStart(2, "0")
+  ].join("-");
+  const model = useMemo(
+    () => buildContributionCalendar({
+      data,
+      year,
+      startDate,
+      endDate,
+      weekStartsOn,
+      today: todayKey,
+      allowFuture,
+      thresholds
+    }),
+    [
+      data,
+      year,
+      startDate,
+      endDate,
+      weekStartsOn,
+      todayKey,
+      allowFuture,
+      thresholds
+    ]
+  );
+  const root = useRef(null), [focused, setFocused] = useState(), active = model.dates.some((day) => day.date === focused) ? focused : model.dates.some((day) => day.date === value) ? value : model.dates.some((day) => day.date === todayKey) ? todayKey : model.dates[0]?.date;
+  const formatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      timeZone: "UTC"
+    }),
+    [locale]
+  ), numbers = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const choose = useCallback((date) => onChange?.(date), [onChange]);
+  const move = useCallback(
+    (event, day) => {
+      let nextIndex;
+      if (event.key === "ArrowUp" && day.row === 0 || event.key === "ArrowDown" && day.row === 6 || event.key === "ArrowLeft" && day.column === 0 || event.key === "ArrowRight" && day.column === model.weeks - 1) {
+        event.preventDefault();
+        return;
+      }
+      const offset = {
+        ArrowUp: -1,
+        ArrowDown: 1,
+        ArrowLeft: -7,
+        ArrowRight: 7
+      }[event.key];
+      if (offset !== void 0) nextIndex = day.index + offset;
+      else if (event.key === "Home")
+        nextIndex = event.ctrlKey ? model.dates[0]?.index : model.dates.find((item) => item.row === day.row)?.index;
+      else if (event.key === "End")
+        nextIndex = event.ctrlKey ? model.dates.at(-1)?.index : model.dates.findLast((item) => item.row === day.row)?.index;
+      if (nextIndex === void 0) return;
+      event.preventDefault();
+      const date = model.cells[nextIndex];
+      if (!date || date.outside) return;
+      setFocused(date.date);
+      const node = root.current?.querySelector(
+        '[data-date="' + date.date + '"]'
+      );
+      node?.focus({ preventScroll: true });
+      node?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "instant"
+      });
+    },
+    [model]
+  );
+  if (!model.valid) return /* @__PURE__ */ jsx("p", { role: "alert", children: "\u65E5\u671F\u8303\u56F4\u65E0\u6548\u3002" });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.calendar,
+      style: { "--calendar-color": color },
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: s.header, children: [
+          /* @__PURE__ */ jsx("h3", { children: label }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            numbers.format(model.total),
+            " ",
+            unit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: s.scroll, ref: root, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: s.months,
+              style: {
+                gridTemplateColumns: "28px repeat(" + model.weeks + ",var(--calendar-cell))"
+              },
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("span", {}),
+                model.months.map((month) => /* @__PURE__ */ jsxs("span", { style: { gridColumn: month.column + 2 }, children: [
+                  month.month,
+                  "\u6708"
+                ] }, month.key))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "grid",
+              "aria-label": label,
+              "aria-rowcount": 7,
+              "aria-colcount": model.weeks,
+              children: Array.from({ length: 7 }, (_, row) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "row",
+                  className: s.row,
+                  style: {
+                    gridTemplateColumns: "28px repeat(" + model.weeks + ",var(--calendar-cell))"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: s.weekday, role: "rowheader", children: ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"][(row + weekStartsOn) % 7] }),
+                    Array.from({ length: model.weeks }, (_2, column) => {
+                      const day = model.cells[column * 7 + row];
+                      const text = formatter.format(parseCalendarDay(day.date)) + (day.future ? "\uFF0C\u672A\u6765\u65E5\u671F" : emptyMode === "missing" && day.missing ? "\uFF0C\u6682\u65E0\u6570\u636E" : "\uFF0C" + numbers.format(day.count) + " " + unit);
+                      return /* @__PURE__ */ jsx(
+                        ContributionCell,
+                        {
+                          day,
+                          label: text,
+                          selected: value === day.date,
+                          tabIndex: active === day.date ? 0 : -1,
+                          missing: emptyMode === "missing" && day.missing && !day.future,
+                          onSelect: choose,
+                          onFocus: setFocused,
+                          onKeyDown: move
+                        },
+                        day.date
+                      );
+                    })
+                  ]
+                },
+                row
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: s.footer, children: [
+          value && /* @__PURE__ */ jsx("span", { children: value }),
+          /* @__PURE__ */ jsxs("div", { className: s.legend, "aria-label": "\u6D3B\u52A8\u6B21\u6570\u7531\u5C11\u5230\u591A", children: [
+            /* @__PURE__ */ jsx("span", { children: "\u5C11" }),
+            [0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx(
+              "i",
+              {
+                className: s.day,
+                "data-level": level,
+                "aria-hidden": "true"
+              },
+              level
+            )),
+            /* @__PURE__ */ jsx("span", { children: "\u591A" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ContributionCalendar
+};

package/components/ContributionCalendar.module.css

@@ -0,0 +1,114 @@
+.calendar {
+  --calendar-cell: 13px;
+  --calendar-gap: 3px;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 20px;
+  background: var(--surface);
+}
+.header,
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+.header {
+  margin-bottom: 16px;
+}
+.header > span,
+.footer {
+  font-size: 11px;
+  color: var(--muted);
+}
+.scroll {
+  overflow: auto;
+  padding: 3px 2px 6px;
+}
+.months,
+.row {
+  display: grid;
+  column-gap: var(--calendar-gap);
+  width: max-content;
+  align-items: center;
+}
+.months {
+  height: 22px;
+  font-size: 10px;
+  color: var(--muted);
+}
+.months > span {
+  white-space: nowrap;
+}
+.row {
+  height: calc(var(--calendar-cell) + var(--calendar-gap));
+}
+.weekday {
+  font-size: 10px;
+  color: var(--muted);
+}
+.day,
+.pad {
+  width: var(--calendar-cell);
+  height: var(--calendar-cell);
+}
+.day {
+  display: block;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--fg) 8%, var(--surface));
+  transition:
+    transform var(--motion-press),
+    box-shadow var(--motion-hover);
+}
+.day[data-level="1"] {
+  background: color-mix(in srgb, var(--calendar-color) 25%, var(--surface));
+}
+.day[data-level="2"] {
+  background: color-mix(in srgb, var(--calendar-color) 45%, var(--surface));
+}
+.day[data-level="3"] {
+  background: color-mix(in srgb, var(--calendar-color) 70%, var(--surface));
+}
+.day[data-level="4"] {
+  background: var(--calendar-color);
+}
+.day[data-future="true"] {
+  opacity: 0.3;
+  cursor: default;
+}
+.day[data-missing="true"] {
+  background: repeating-linear-gradient(
+    135deg,
+    transparent,
+    transparent 2px,
+    color-mix(in srgb, var(--fg) 12%, var(--surface)) 2px,
+    color-mix(in srgb, var(--fg) 12%, var(--surface)) 3px
+  );
+}
+.day:hover:not([data-future="true"]) {
+  transform: scale(1.12);
+}
+.day:focus-visible,
+.day[aria-selected="true"] {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+.footer {
+  margin-top: 12px;
+  min-height: 18px;
+}
+.legend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+.legend > span {
+  margin: 0 3px;
+}
+.legend .day {
+  cursor: default;
+}

package/components/ContributionCell.d.ts

@@ -0,0 +1,11 @@
+import type { ContributionCellData } from "./contribution";
+export declare const ContributionCell: import("react").MemoExoticComponent<({ day, label, selected, tabIndex, missing, onSelect, onFocus, onKeyDown, }: {
+    day: ContributionCellData;
+    label: string;
+    selected: boolean;
+    tabIndex: number;
+    missing: boolean;
+    onSelect(date: string): void;
+    onFocus(date: string): void;
+    onKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, day: ContributionCellData): void;
+}) => import("react").JSX.Element>;

package/components/ContributionCell.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Tooltip } from "./Tooltip.js";
+import s from "./ContributionCalendar.module.css";
+const ContributionCell = memo(function ContributionCell2({
+  day,
+  label,
+  selected,
+  tabIndex,
+  missing,
+  onSelect,
+  onFocus,
+  onKeyDown
+}) {
+  if (day.outside)
+    return /* @__PURE__ */ jsx("span", { className: s.pad, role: "gridcell", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "gridcell",
+      "aria-label": label,
+      "aria-selected": selected,
+      "aria-disabled": day.future || void 0,
+      "data-date": day.date,
+      "data-level": day.level,
+      "data-future": day.future,
+      "data-missing": missing,
+      className: s.day,
+      tabIndex,
+      onClick: () => {
+        if (!day.future) onSelect(day.date);
+      },
+      onFocus: () => onFocus(day.date),
+      onKeyDown: (event) => onKeyDown(event, day)
+    }
+  ) });
+});
+export {
+  ContributionCell
+};

package/components/Control.module.css

@@ -0,0 +1,86 @@
+.surface {
+  height: var(--control-height);
+  min-width: 0;
+  border: 1px solid var(--control-border, var(--line));
+  border-radius: var(--field-radius);
+  background: var(--field);
+  color: var(--fg);
+  font-size: var(--field-font-size);
+  line-height: var(--field-line-height);
+  outline: none;
+  transition:
+    border-color var(--motion-hover),
+    box-shadow var(--motion-hover),
+    background-color var(--motion-hover);
+}
+.surface:hover:where(
+    :not(
+        :disabled,
+        [data-disabled="true"],
+        [aria-disabled="true"],
+        [readonly],
+        [aria-readonly="true"],
+        [data-readonly="true"],
+        [data-disabled="true"] *,
+        [aria-disabled="true"] *,
+        [data-readonly="true"] *,
+        fieldset:disabled *,
+        :has(input:disabled, textarea:disabled)
+      )
+  ) {
+  border-color: var(
+    --field-hover-border,
+    color-mix(in srgb, var(--fg) var(--field-hover-strength), var(--surface))
+  );
+}
+.surface[data-focus="true"],
+.surface:focus,
+.surface:focus-visible,
+.surface:focus-within,
+.surface[aria-expanded="true"] {
+  outline: none;
+  border-color: var(--field-focus-border);
+  box-shadow: 0 0 0 var(--field-focus-width)
+    color-mix(in srgb, var(--accent) var(--field-focus-strength), transparent);
+}
+.surface[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+.surface[aria-invalid="true"][data-focus="true"],
+.surface[aria-invalid="true"]:focus-within {
+  box-shadow: 0 0 0 var(--field-focus-width)
+    color-mix(in srgb, var(--danger) var(--field-focus-strength), transparent);
+}
+.surface:disabled,
+.surface[data-disabled="true"] {
+  opacity: var(--field-disabled-opacity);
+  cursor: not-allowed;
+}
+.surface[data-disabled="true"] input:disabled {
+  opacity: 1;
+}
+.surface input {
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+.surface input:focus-visible {
+  outline: none;
+}
+.surface::placeholder,
+.surface input::placeholder {
+  color: var(--placeholder);
+  opacity: 1;
+}
+.surface[readonly],
+.surface[aria-readonly="true"],
+.surface:has(input[readonly]) {
+  background: var(--field-readonly);
+}
+@media (max-width: 600px) {
+  .surface:has(input),
+  .surface:is(input, textarea) {
+    font-size: 16px;
+  }
+}