@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/Steps.js

@@ -0,0 +1,102 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { Check, CircleAlert } from "lucide-react";
+import { Spinner } from "./Spinner.js";
+import s from "./Steps.module.css";
+const statusNames = {
+  waiting: "\u672A\u5F00\u59CB",
+  current: "\u5F53\u524D\u6B65\u9AA4",
+  complete: "\u5DF2\u5B8C\u6210",
+  error: "\u53D1\u751F\u9519\u8BEF",
+  loading: "\u8FDB\u884C\u4E2D"
+};
+function Steps({
+  items,
+  value,
+  onChange,
+  orientation = "horizontal",
+  label = "\u6B65\u9AA4",
+  className = ""
+}) {
+  const current = items.findIndex((item) => item.value === value), id = useId();
+  const [focused, setFocused] = useState(null);
+  useEffect(() => setFocused(null), [value]);
+  const enabled = items.filter((item) => !item.disabled);
+  const tabStop = enabled.find((item) => item.value === focused)?.value ?? enabled.find((item) => item.value === value)?.value ?? enabled[0]?.value;
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: `${s.steps} ${className}`,
+      "aria-label": label,
+      "data-orientation": orientation,
+      onKeyDown: (event) => {
+        if (!onChange || !enabled.length) return;
+        const active = enabled.findIndex(
+          (item) => item.value === event.target.closest(
+            "[data-step-value]"
+          )?.dataset.stepValue
+        );
+        if (active < 0) return;
+        const previous = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp", next = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+        const index = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : event.key === previous ? (active - 1 + enabled.length) % enabled.length : event.key === next ? (active + 1) % enabled.length : -1;
+        if (index < 0) return;
+        event.preventDefault();
+        setFocused(enabled[index].value);
+        [
+          ...event.currentTarget.querySelectorAll(
+            "[data-step-value]"
+          )
+        ].find((node) => node.dataset.stepValue === enabled[index].value)?.focus();
+      },
+      children: items.map((item, index) => {
+        const status = item.status ?? (current < 0 || index > current ? "waiting" : index < current ? "complete" : "current");
+        const descriptionId = `${id}-${index}`;
+        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: s.marker, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: s.mark, children: status === "loading" ? /* @__PURE__ */ jsx(Spinner, { decorative: true }) : status === "complete" ? /* @__PURE__ */ jsx(Check, {}) : status === "error" ? /* @__PURE__ */ jsx(CircleAlert, {}) : item.icon || index + 1 }, status) }),
+          /* @__PURE__ */ jsxs("span", { className: s.copy, children: [
+            /* @__PURE__ */ jsx("span", { className: s.label, children: item.label }),
+            item.description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: s.description, children: item.description })
+          ] })
+        ] });
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: s.item,
+            "data-status": status,
+            "data-disabled": item.disabled || void 0,
+            children: onChange ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: s.control,
+                "data-step-value": item.value,
+                disabled: item.disabled,
+                tabIndex: item.value === tabStop ? 0 : -1,
+                "aria-current": index === current ? "step" : void 0,
+                "aria-label": `${item.label}\uFF0C${statusNames[status]}`,
+                "aria-describedby": item.description ? descriptionId : void 0,
+                onFocus: () => setFocused(item.value),
+                onClick: () => onChange(item.value),
+                children: content
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: s.control,
+                "aria-current": index === current ? "step" : void 0,
+                children: [
+                  content,
+                  /* @__PURE__ */ jsx("span", { className: s.srOnly, children: statusNames[status] })
+                ]
+              }
+            )
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+export {
+  Steps
+};

package/components/Steps.module.css

@@ -0,0 +1,176 @@
+.steps {
+  list-style: none;
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  gap: 0;
+}
+.item {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  padding-right: 20px;
+  isolation: isolate;
+}
+.item:last-child {
+  padding-right: 0;
+}
+.item:not(:last-child)::before,
+.item:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  left: 34px;
+  right: 8px;
+  top: 12px;
+  height: var(--separator-width);
+  background: var(--separator-color);
+  z-index: -1;
+}
+.item:not(:last-child)::after {
+  background: var(--accent);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition:
+    transform var(--motion-segment) var(--ease),
+    background var(--motion-hover);
+}
+.item[data-status="complete"]::after {
+  transform: scaleX(1);
+}
+.control {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 9px;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: max(4px, calc(var(--radius) - 3px));
+  background: transparent;
+  color: var(--muted);
+  text-align: left;
+  font-size: 12px;
+}
+.marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex: none;
+  border: 1px solid var(--line);
+  border-radius: 50%;
+  color: var(--muted);
+  background: var(--surface);
+  transition:
+    color var(--motion-hover),
+    background var(--motion-hover),
+    border-color var(--motion-hover),
+    box-shadow var(--motion-hover);
+}
+.mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: mark-in var(--motion-segment) var(--ease);
+}
+.mark > svg {
+  width: 15px;
+  height: 15px;
+}
+.copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+.label {
+  color: var(--fg);
+  transition: color var(--motion-hover);
+}
+.description {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 18px;
+}
+.item[data-status="current"] .marker,
+.item[data-status="loading"] .marker {
+  color: var(--on-accent);
+  background: var(--accent);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent);
+}
+.item[data-status="complete"] .marker {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--surface));
+}
+.item[data-status="error"] .marker {
+  color: var(--danger);
+  border-color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
+}
+.item[data-status="error"] .label {
+  color: var(--danger);
+}
+.control:is(button):hover:not(:disabled) .marker {
+  border-color: var(--accent);
+}
+.control:is(button):hover:not(:disabled) .label {
+  color: var(--accent);
+}
+.control:focus-visible {
+  outline-offset: 5px;
+}
+.item[data-disabled="true"] .control {
+  opacity: 0.42;
+}
+.steps[data-orientation="vertical"] {
+  flex-direction: column;
+}
+.steps[data-orientation="vertical"] .item {
+  padding: 0 0 24px;
+}
+.steps[data-orientation="vertical"] .item:last-child {
+  padding-bottom: 0;
+}
+.steps[data-orientation="vertical"] .control {
+  flex-direction: row;
+  gap: 12px;
+}
+.steps[data-orientation="vertical"] .copy {
+  padding-top: 3px;
+}
+.steps[data-orientation="vertical"] .item:not(:last-child)::before,
+.steps[data-orientation="vertical"] .item:not(:last-child)::after {
+  left: 12px;
+  right: auto;
+  top: 34px;
+  bottom: 8px;
+  width: var(--separator-width);
+  height: auto;
+}
+.steps[data-orientation="vertical"] .item:not(:last-child)::after {
+  transform: scaleY(0);
+  transform-origin: top;
+}
+.steps[data-orientation="vertical"] .item[data-status="complete"]::after {
+  transform: scaleY(1);
+}
+.srOnly {
+  composes: visuallyHidden from "./Accessibility.module.css";
+}
+@keyframes mark-in {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/components/Switch.d.ts

@@ -0,0 +1,6 @@
+export declare function Switch({ checked, onChange, label, disabled, }: {
+    checked: boolean;
+    onChange(value: boolean): void;
+    label: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/components/Switch.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import s from "./Switch.module.css";
+function Switch({
+  checked,
+  onChange,
+  label,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-label": label,
+      "aria-checked": checked,
+      disabled,
+      className: s.switch,
+      onClick: () => onChange(!checked),
+      children: /* @__PURE__ */ jsx("span", {})
+    }
+  );
+}
+export {
+  Switch
+};

package/components/Switch.module.css

@@ -0,0 +1,59 @@
+.switch {
+  position: relative;
+  width: 36px;
+  height: 22px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--fg) 25%, var(--surface));
+  border-radius: 999px;
+  background: var(--field);
+  transition:
+    background-color var(--motion-panel) var(--ease),
+    border-color var(--motion-panel) var(--ease),
+    box-shadow var(--motion-hover);
+}
+.switch span {
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--muted);
+  transition:
+    transform var(--motion-panel) var(--ease),
+    width var(--motion-press) var(--ease),
+    background-color var(--motion-panel);
+}
+.switch:hover:not(:disabled) {
+  background: var(--hover);
+  border-color: var(--muted);
+}
+.switch[aria-checked="true"] {
+  background: var(--switch-on, var(--accent));
+  border-color: var(--switch-on, var(--accent));
+}
+.switch[aria-checked="true"]:hover:not(:disabled) {
+  background: var(
+    --switch-on-hover,
+    color-mix(in srgb, var(--accent) 88%, var(--fg))
+  );
+  border-color: var(--switch-on, var(--accent));
+}
+.switch[aria-checked="true"] span {
+  transform: translateX(14px);
+  background: var(--switch-thumb-on, var(--on-accent));
+}
+.switch:active:not(:disabled) span {
+  width: 17px;
+}
+.switch[aria-checked="true"]:active:not(:disabled) span {
+  transform: translateX(11px);
+}
+.switch:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
+}
+.switch:disabled {
+  opacity: 0.4;
+}

package/components/SymbolPicker.d.ts

@@ -0,0 +1,6 @@
+export declare function SymbolPicker(props: {
+    value: string;
+    onChange(value: string): void;
+    label?: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/components/SymbolPicker.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { CharacterPicker } from "./CharacterPicker.js";
+import { useCharacterCatalog } from "./characterCatalog.js";
+function SymbolPicker(props) {
+  const { retry, ...catalog } = useCharacterCatalog("symbols");
+  return /* @__PURE__ */ jsx(
+    CharacterPicker,
+    {
+      ...props,
+      ...catalog,
+      onRetry: retry,
+      label: props.label || "\u7B26\u53F7"
+    }
+  );
+}
+export {
+  SymbolPicker
+};

package/components/Tab.module.css

@@ -0,0 +1,145 @@
+.viewport {
+  overflow: auto;
+  min-width: 0;
+  max-width: 100%;
+}
+.tabs {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  width: max-content;
+  min-width: 100%;
+  isolation: isolate;
+}
+.tabs button {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  white-space: nowrap;
+  border: 0;
+  background: transparent;
+  min-height: 34px;
+  padding: 7px 12px;
+  font-size: 12px;
+  color: var(--muted);
+  border-radius: 6px;
+  transition:
+    color var(--motion-hover),
+    background var(--motion-hover);
+}
+.tabs button:hover:not(:disabled) {
+  color: var(--fg);
+}
+.tabs button[aria-selected="true"] {
+  color: var(--fg);
+}
+.tabs button:focus-visible {
+  outline-offset: -2px;
+}
+.indicator {
+  position: absolute;
+  z-index: 0;
+  pointer-events: none;
+  opacity: var(--tab-opacity, 0);
+  left: 0;
+  top: 0;
+  transform: translate(var(--tab-x, 0px), var(--tab-y, 0px));
+  width: var(--tab-width, 0px);
+  height: var(--tab-height, 0px);
+  background: var(--selected);
+  border-radius: 6px;
+}
+.tabs[data-ready="true"] .indicator {
+  transition:
+    transform var(--motion-segment) var(--ease),
+    width var(--motion-segment) var(--ease),
+    height var(--motion-segment) var(--ease),
+    opacity var(--motion-hover);
+}
+.viewport[data-orientation="vertical"] {
+  width: 112px;
+  flex: 0 0 112px;
+}
+.viewport[data-orientation="vertical"] .tabs {
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+.viewport[data-orientation="vertical"] button {
+  justify-content: flex-start;
+  padding: 7px 9px;
+  min-height: 34px;
+}
+.underlined {
+  gap: 16px;
+  border-bottom: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.underlined button {
+  padding: 9px 2px;
+  border-radius: 0;
+}
+.underlined .indicator {
+  top: auto;
+  bottom: -1px;
+  height: 2px;
+  transform: translateX(var(--tab-x, 0px));
+  background: var(--accent);
+  border-radius: 2px;
+}
+.underlined button[aria-selected="true"] {
+  color: var(--accent);
+}
+@media (max-width: 450px) {
+  .viewport[data-orientation="vertical"] {
+    width: 94px;
+    flex-basis: 94px;
+  }
+}
+
+.blocked button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--hover) 55%, transparent);
+}
+.underlined button:hover:not(:disabled) {
+  background: transparent;
+  color: var(--accent);
+}
+.tabs button {
+  min-height: var(--tab-height-min);
+  font-size: var(--field-font-size);
+  cursor: pointer;
+}
+.blocked {
+  width: var(--blocked-width);
+  min-width: var(--blocked-min-width);
+  padding: var(--blocked-padding);
+  border: var(--blocked-border);
+  background: var(--blocked-background);
+  border-radius: var(--blocked-radius);
+}
+.blocked .indicator {
+  background: var(--blocked-selected);
+  box-shadow: var(--blocked-shadow);
+}
+.blocked button {
+  min-height: var(--blocked-height);
+  padding: var(--blocked-button-padding);
+}
+.blocked button[aria-selected="true"] {
+  color: var(--tab-selected-color);
+}
+.tabs button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.viewport[data-orientation="vertical"] {
+  width: var(--vertical-tab-width);
+  flex-basis: var(--vertical-tab-width);
+}
+.viewport[data-orientation="vertical"] .blocked {
+  width: 100%;
+}

package/components/TabList.d.ts

@@ -0,0 +1,11 @@
+import { type TabOption } from "./useTabIndicator";
+export type TabListProps<T extends string> = {
+    value: T;
+    onChange(value: T): void;
+    options: TabOption<T>[];
+    label: string;
+    orientation?: "horizontal" | "vertical";
+};
+export declare function TabList<T extends string>({ value, onChange, options, label, orientation, variant, }: TabListProps<T> & {
+    variant: "blocked" | "underlined";
+}): import("react").JSX.Element;

package/components/TabList.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTabIndicator } from "./useTabIndicator.js";
+import s from "./Tab.module.css";
+function TabList({
+  value,
+  onChange,
+  options,
+  label,
+  orientation = "horizontal",
+  variant
+}) {
+  const { root, onKeyDown } = useTabIndicator(
+    value,
+    options,
+    onChange,
+    orientation
+  );
+  return /* @__PURE__ */ jsx("div", { className: s.viewport, "data-orientation": orientation, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: `${s.tabs} ${s[variant]}`,
+      role: "tablist",
+      "aria-label": label,
+      "aria-orientation": orientation,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: s.indicator, "aria-hidden": "true" }),
+        options.map((option) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "data-value": option.value,
+            id: option.id,
+            "aria-controls": option.panelId,
+            "aria-selected": value === option.value,
+            disabled: option.disabled,
+            tabIndex: (options.some((item) => item.value === value && !item.disabled) ? value === option.value : option === options.find((item) => !item.disabled)) ? 0 : -1,
+            onClick: () => onChange(option.value),
+            children: option.label
+          },
+          option.value
+        ))
+      ]
+    }
+  ) });
+}
+export {
+  TabList
+};

package/components/Table.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode, HTMLAttributes, CSSProperties } from "react";
+export interface Column<T> {
+    key: string;
+    title: ReactNode;
+    render: (row: T) => ReactNode;
+    align?: "left" | "center" | "right";
+    width?: CSSProperties["width"];
+}
+export declare function Table<T>({ columns, rows, rowKey, label, role, rowAttributes, }: {
+    columns: Column<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    label: string;
+    role?: "table" | "treegrid";
+    rowAttributes?(row: T): HTMLAttributes<HTMLTableRowElement>;
+}): import("react").JSX.Element;

package/components/Table.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./Table.module.css";
+function Table({
+  columns,
+  rows,
+  rowKey,
+  label,
+  role,
+  rowAttributes
+}) {
+  return /* @__PURE__ */ jsx("div", { className: s.scroll, role: "region", "aria-label": label, tabIndex: 0, children: /* @__PURE__ */ jsxs("table", { className: s.table, role, children: [
+    /* @__PURE__ */ jsx("caption", { className: s.caption, children: label }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((c) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        style: { textAlign: c.align, width: c.width },
+        children: c.title
+      },
+      c.key
+    )) }) }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      rows.map((r) => /* @__PURE__ */ jsx("tr", { ...rowAttributes?.(r), children: columns.map((c) => /* @__PURE__ */ jsx("td", { style: { textAlign: c.align }, children: c.render(r) }, c.key)) }, rowKey(r))),
+      rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: s.empty, children: "\u6682\u65E0\u7ED3\u679C" }) })
+    ] })
+  ] }) });
+}
+export {
+  Table
+};

package/components/Table.module.css

@@ -0,0 +1,48 @@
+.scroll {
+  overflow-x: auto;
+  border-radius: var(--radius);
+  max-width: 100%;
+}
+.table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 13px;
+  text-align: left;
+  white-space: nowrap;
+}
+.table th {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 500;
+  background: var(--canvas);
+  padding: 12px 16px;
+}
+.table td {
+  padding: 15px 16px;
+  border-bottom: 1px solid var(--line);
+}
+.table tbody tr:last-child td {
+  border-bottom: 0;
+}
+.table tbody tr {
+  transition: background var(--motion-hover);
+}
+.table tbody tr:hover {
+  background: var(--hover);
+}
+.empty {
+  text-align: center;
+  height: 150px;
+  color: var(--muted);
+}
+.caption {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}