@robert-stackflow/oneui 0.0.0-stage → 0.1.0

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,56 @@
+.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(--accent);
+  border-color: var(--accent);
+}
+.switch[aria-checked="true"]:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 88%, var(--fg));
+  border-color: var(--accent);
+}
+.switch[aria-checked="true"] span {
+  transform: translateX(14px);
+  background: 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,12 @@
+import type { ReactNode } from "react";
+export interface Column<T> {
+    key: string;
+    title: ReactNode;
+    render: (row: T) => ReactNode;
+}
+export declare function Table<T>({ columns, rows, rowKey, label, }: {
+    columns: Column<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    label: string;
+}): import("react").JSX.Element;

package/components/Table.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./Table.module.css";
+function Table({
+  columns,
+  rows,
+  rowKey,
+  label
+}) {
+  return /* @__PURE__ */ jsx("div", { className: s.scroll, role: "region", "aria-label": label, tabIndex: 0, children: /* @__PURE__ */ jsxs("table", { className: s.table, 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", children: c.title }, c.key)) }) }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      rows.map((r) => /* @__PURE__ */ jsx("tr", { children: columns.map((c) => /* @__PURE__ */ jsx("td", { 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;
+}

package/components/TableColumnFilter.d.ts

@@ -0,0 +1,6 @@
+export declare function TableColumnFilter({ label, options, value, onChange, }: {
+    label: string;
+    options: string[];
+    value: string[];
+    onChange(value: string[]): void;
+}): import("react").JSX.Element;

package/components/TableColumnFilter.js

@@ -0,0 +1,76 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ListFilter } from "lucide-react";
+import { Popover } from "./Popover.js";
+import { MenuItem } from "./MenuItem.js";
+import { Button } from "./Button.js";
+import { usePopover } from "./usePopover.js";
+import { moveMenuFocus } from "./menuFocus.js";
+import s from "./DataTable.module.css";
+function TableColumnFilter({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  const pop = usePopover(), list = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ref: pop.anchor,
+        className: s.filter,
+        "aria-label": "\u7B5B\u9009" + label,
+        "aria-expanded": pop.open,
+        "aria-haspopup": "dialog",
+        "data-active": value.length > 0,
+        onClick: pop.toggle,
+        children: /* @__PURE__ */ jsx(ListFilter, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        label: label + "\u7B5B\u9009",
+        width: 210,
+        onKeyDown: (event) => moveMenuFocus(event, list.current),
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: list, className: s.filterPanel, children: options.map((option) => {
+            const checked = value.includes(option);
+            return /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                role: "checkbox",
+                "aria-checked": checked,
+                label: option,
+                selected: checked,
+                selection: "checkbox",
+                onClick: () => onChange(
+                  checked ? value.filter((item) => item !== option) : [...value, option]
+                )
+              },
+              option
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: s.filterReset, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              variant: "ghost",
+              disabled: !value.length,
+              onClick: () => onChange([]),
+              children: "\u91CD\u7F6E\u7B5B\u9009"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TableColumnFilter
+};

package/components/TableColumnVisibility.d.ts

@@ -0,0 +1,11 @@
+export type TableVisibilityColumn = {
+    key: string;
+    label: string;
+    hideable?: boolean;
+};
+export declare function TableColumnVisibility({ columns, value, onChange, label, }: {
+    columns: TableVisibilityColumn[];
+    value: string[];
+    onChange(keys: string[]): void;
+    label?: string;
+}): import("react").JSX.Element;