@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/ResizablePanel.module.css

@@ -0,0 +1,101 @@
+.group {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  grid-template-columns: minmax(0, var(--panel-first)) 8px minmax(
+      0,
+      var(--panel-second)
+    );
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+  transition:
+    grid-template-columns var(--motion-panel) var(--ease),
+    grid-template-rows var(--motion-panel) var(--ease);
+}
+.group[data-direction="vertical"] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, var(--panel-first)) 8px minmax(
+      0,
+      var(--panel-second)
+    );
+}
+.group[data-resizing="true"] {
+  transition: none;
+}
+.pane {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.pane[data-collapsed="true"] {
+  visibility: hidden;
+}
+.handle {
+  position: relative;
+  cursor: col-resize;
+  touch-action: none;
+  outline: none;
+}
+.handle:focus-visible {
+  outline: none;
+}
+.handle::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(50% - 0.5px);
+  width: var(--separator-width);
+  background: var(--separator-color);
+  transition: background var(--motion-hover);
+}
+.handle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 3px;
+  height: 28px;
+  border-radius: 3px;
+  background: var(--muted);
+  opacity: 0;
+  transition: opacity var(--motion-hover);
+}
+.handle:hover:not([aria-disabled="true"])::after,
+.handle:focus-visible::after,
+.group[data-resizing="true"] > .handle::after {
+  opacity: 1;
+}
+.handle:focus-visible::before,
+.group[data-resizing="true"] > .handle::before {
+  background: var(--accent);
+}
+.handle[aria-disabled="true"] {
+  cursor: default;
+}
+.group[data-direction="vertical"] > .handle {
+  cursor: row-resize;
+}
+.group[data-direction="vertical"] > .handle[aria-disabled="true"] {
+  cursor: default;
+}
+.group[data-direction="vertical"] > .handle::before {
+  left: 0;
+  right: 0;
+  top: calc(50% - 0.5px);
+  bottom: auto;
+  height: var(--separator-width);
+  width: auto;
+}
+.group[data-direction="vertical"] > .handle::after {
+  width: 28px;
+  height: 3px;
+}
+.help {
+  composes: visuallyHidden from "./Accessibility.module.css";
+}

package/components/SearchField.d.ts

@@ -0,0 +1,11 @@
+import { type InputHTMLAttributes } from "react";
+export declare function SearchField({ value, onChange, label, placeholder, className, clearable, loading, onSearch, onKeyDown, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onSearch"> & {
+    value: string;
+    onChange(value: string): void;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    clearable?: boolean;
+    loading?: boolean;
+    onSearch?(value: string): void;
+}): import("react").JSX.Element;

package/components/SearchField.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Spinner } from "./Spinner.js";
+import { Search, X } from "lucide-react";
+import s from "./SearchField.module.css";
+function SearchField({
+  value,
+  onChange,
+  label = "\u641C\u7D22",
+  placeholder = "\u641C\u7D22\u2026",
+  className = "",
+  clearable = true,
+  loading = false,
+  onSearch,
+  onKeyDown,
+  ...props
+}) {
+  const input = useRef(null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-disabled": props.disabled,
+      "aria-busy": loading || void 0,
+      className: `${s.search} ${className}`,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : /* @__PURE__ */ jsx(Search, {}),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            ref: input,
+            type: "search",
+            "aria-label": label,
+            placeholder,
+            value,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: (e) => {
+              onKeyDown?.(e);
+              if (e.defaultPrevented) return;
+              if (e.key === "Enter") onSearch?.(value);
+              if (e.key === "Escape" && value && clearable && !props.readOnly) {
+                e.stopPropagation();
+                onChange("");
+              }
+            }
+          }
+        ),
+        value && clearable && !props.disabled && !props.readOnly && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `\u6E05\u9664${label}`,
+            onClick: () => {
+              onChange("");
+              input.current?.focus();
+            },
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SearchField
+};

package/components/SearchField.module.css

@@ -0,0 +1,37 @@
+.search {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 8px;
+  padding: 0 10px;
+}
+
+.search > svg {
+  color: var(--muted);
+  width: 15px;
+  height: 15px;
+}
+.search input {
+  width: 100%;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  font-size: inherit;
+}
+.search input::-webkit-search-cancel-button {
+  display: none;
+}
+.search button {
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  padding: 1px;
+  display: grid;
+  place-items: center;
+}
+.search button svg {
+  width: 13px;
+  height: 13px;
+}

package/components/Section.d.ts

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

package/components/Section.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./Section.module.css";
+function Section({
+  title,
+  children,
+  aside
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: s.section, children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("h2", { children: title }),
+      aside
+    ] }),
+    children
+  ] });
+}
+export {
+  Section
+};

package/components/Section.module.css

@@ -0,0 +1,14 @@
+.section {
+  margin-bottom: 27px;
+  min-width: 0;
+}
+.section > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 13px;
+}
+.section > header h2 {
+  font-size: 13px;
+  font-weight: 500;
+}

package/components/Segmented.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export declare function Segmented<T extends string>({ value, onChange, options, label, }: {
+    value: T;
+    onChange(value: T): void;
+    options: {
+        value: T;
+        label: ReactNode;
+        disabled?: boolean;
+    }[];
+    label: string;
+}): import("react").JSX.Element;

package/components/Segmented.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import s from "./Segmented.module.css";
+function Segmented({
+  value,
+  onChange,
+  options,
+  label
+}) {
+  const root = useRef(null), buttons = useRef(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const group = root.current;
+    const measure = () => {
+      const selected = buttons.current.get(value);
+      group.style.setProperty("--segment-opacity", selected ? "1" : "0");
+      if (!selected) return;
+      if (selected.offsetLeft < group.scrollLeft)
+        group.scrollLeft = selected.offsetLeft;
+      else if (selected.offsetLeft + selected.offsetWidth > group.scrollLeft + group.clientWidth)
+        group.scrollLeft = selected.offsetLeft + selected.offsetWidth - group.clientWidth;
+      group.style.setProperty("--segment-x", selected.offsetLeft + "px");
+      group.style.setProperty("--segment-y", selected.offsetTop + "px");
+      group.style.setProperty("--segment-width", selected.offsetWidth + "px");
+      group.style.setProperty("--segment-height", selected.offsetHeight + "px");
+      if (!group.dataset.ready) {
+        group.getBoundingClientRect();
+        group.dataset.ready = "true";
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(group);
+    buttons.current.forEach((button) => observer.observe(button));
+    return () => observer.disconnect();
+  }, [value, options]);
+  const keyboard = (event, current) => {
+    const enabled = options.filter((option) => !option.disabled);
+    const index = enabled.findIndex(
+      (option) => option.value === options[current].value
+    );
+    let target = index;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown")
+      target = (index + 1) % enabled.length;
+    else if (event.key === "ArrowLeft" || event.key === "ArrowUp")
+      target = (index - 1 + enabled.length) % enabled.length;
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = enabled.length - 1;
+    else return;
+    if (!enabled.length) return;
+    event.preventDefault();
+    onChange(enabled[target].value);
+    buttons.current.get(enabled[target].value)?.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: root, className: s.segmented, role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("span", { className: s.indicator, "aria-hidden": "true", "data-segment-indicator": true }),
+    options.map((option, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ref: (node) => {
+          if (node) buttons.current.set(option.value, node);
+          else buttons.current.delete(option.value);
+        },
+        "aria-pressed": 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,
+        onKeyDown: (event) => keyboard(event, index),
+        onClick: () => onChange(option.value),
+        children: option.label
+      },
+      option.value
+    ))
+  ] });
+}
+export {
+  Segmented
+};

package/components/Segmented.module.css

@@ -0,0 +1,82 @@
+.segmented {
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  width: max-content;
+  align-self: flex-start;
+  gap: 3px;
+  padding: 3px;
+  background: var(--soft);
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius) - 2px);
+}
+.indicator {
+  opacity: var(--segment-opacity, 0);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: var(--segment-width, 0px);
+  height: var(--segment-height, 0px);
+  transform: translate(var(--segment-x, 0px), var(--segment-y, 0px));
+  border-radius: calc(var(--radius) - 5px);
+  background: var(--surface);
+  box-shadow: 0 1px 3px #0000000d;
+  pointer-events: none;
+  z-index: 0;
+}
+.segmented[data-ready="true"] .indicator {
+  transition:
+    transform var(--motion-segment) var(--ease),
+    width var(--motion-segment) var(--ease),
+    height var(--motion-segment) var(--ease);
+}
+.segmented button {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 26px;
+  border: 0;
+  padding: 4px 12px;
+  border-radius: calc(var(--radius) - 5px);
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  transition:
+    color var(--motion-hover) var(--ease),
+    scale var(--motion-press) var(--ease);
+}
+.segmented button[aria-pressed="true"] {
+  color: var(--fg);
+}
+.segmented button:active:not(:disabled) {
+  scale: 0.97;
+}
+.segmented {
+  max-width: 100%;
+  overflow: auto;
+  border-radius: var(--segment-radius);
+  background: var(--segment-background);
+}
+.segmented button {
+  min-height: var(--segment-height-min);
+  font-size: var(--field-font-size);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.segmented button[aria-pressed="true"] {
+  color: var(--segment-selected-color);
+}
+.segmented button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.segmented button svg {
+  width: 16px;
+  height: 16px;
+}
+.segmented button:focus-visible {
+  outline-offset: -2px;
+}

package/components/Select.d.ts

@@ -0,0 +1,11 @@
+import { type FieldOptions } from "./field";
+import type { SelectOption } from "./types";
+export declare function Select({ value, onChange, options, label, disabled, id: controlId, name, required, readOnly, error, hint, placeholder, emptyText, ...aria }: FieldOptions & {
+    value: string;
+    onChange(value: string): void;
+    options: SelectOption[];
+    label: string;
+    disabled?: boolean;
+    placeholder?: string;
+    emptyText?: string;
+}): import("react").JSX.Element;

package/components/Select.js

@@ -0,0 +1,171 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import { MenuItem } from "./MenuItem.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { usePopover } from "./usePopover.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { Popover } from "./Popover.js";
+import s from "./Select.module.css";
+function Select({
+  value,
+  onChange,
+  options,
+  label,
+  disabled,
+  id: controlId,
+  name,
+  required,
+  readOnly,
+  error,
+  hint,
+  placeholder = "\u8BF7\u9009\u62E9",
+  emptyText = "\u6CA1\u6709\u53EF\u7528\u9009\u9879",
+  ...aria
+}) {
+  const field = useFieldControl({
+    id: controlId,
+    name,
+    label,
+    disabled,
+    required,
+    readOnly,
+    error,
+    hint,
+    ...aria
+  });
+  const pop = usePopover(field.disabled || field.readOnly), ref = pop.anchor, open = pop.open, [active, setActive] = useState(0), id = useId();
+  const reserveIcon = options.some((option) => !!option.icon);
+  const selected = options.findIndex((v) => v.value === value);
+  const show = () => {
+    setActive(
+      selected >= 0 && !options[selected]?.disabled ? selected : options.findIndex((option) => !option.disabled)
+    );
+    pop.show();
+  };
+  const choose = (index) => {
+    if (!field.disabled && !field.readOnly && options[index] && !options[index].disabled) {
+      onChange(options[index].value);
+      pop.closeAndFocus();
+    }
+  };
+  const move = (delta) => {
+    for (let offset = 1; offset <= options.length; offset++) {
+      const next = (active + delta * offset + options.length * 2) % options.length;
+      if (!options[next].disabled) {
+        setActive(next);
+        return;
+      }
+    }
+  };
+  const typeahead = useRef(""), typeTimer = useRef(void 0);
+  useEffect(() => () => clearTimeout(typeTimer.current), []);
+  useEffect(() => {
+    if (open)
+      document.getElementById(`${id}-${active}`)?.scrollIntoView({ block: "nearest" });
+  }, [open, active, id]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        ...fieldTriggerProps(field),
+        icon: options[selected]?.icon,
+        expanded: open,
+        ref,
+        "aria-controls": id,
+        "aria-haspopup": "listbox",
+        "aria-activedescendant": open && active >= 0 ? `${id}-${active}` : void 0,
+        onClick: () => {
+          if (!field.readOnly) open ? pop.close() : show();
+        },
+        onKeyDown: (event) => {
+          if (field.readOnly) return;
+          if (event.key === "Tab") {
+            pop.close();
+          } else if (["ArrowDown", "ArrowUp", "Home", "End", "Enter", " "].includes(
+            event.key
+          )) {
+            event.preventDefault();
+            if (!open) {
+              show();
+              return;
+            }
+            if (event.key === "ArrowDown") move(1);
+            else if (event.key === "ArrowUp") move(-1);
+            else if (event.key === "Home")
+              setActive(options.findIndex((v) => !v.disabled));
+            else if (event.key === "End")
+              setActive(options.findLastIndex((v) => !v.disabled));
+            else choose(active);
+          } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+            typeahead.current += event.key.toLowerCase();
+            clearTimeout(typeTimer.current);
+            typeTimer.current = setTimeout(() => {
+              typeahead.current = "";
+            }, 500);
+            const index = options.findIndex(
+              (option) => !option.disabled && option.label.toLowerCase().startsWith(typeahead.current)
+            );
+            if (index >= 0) {
+              setActive(index);
+              pop.show();
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsx("span", { children: options[selected]?.label || placeholder })
+      }
+    ),
+    field.name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value,
+        disabled: field.disabled
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        id,
+        open,
+        onClose: pop.close,
+        anchor: ref,
+        width: Math.max(
+          options.some((option) => option.description || option.shortcut) ? 280 : 200,
+          ref.current?.offsetWidth || 0
+        ),
+        label,
+        role: "listbox",
+        children: [
+          !options.length && /* @__PURE__ */ jsx("p", { className: s.empty, children: emptyText }),
+          options.map((option, index) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              as: "div",
+              label: option.label,
+              description: option.description,
+              icon: option.icon,
+              reserveIcon,
+              shortcut: option.shortcut,
+              selected: value === option.value,
+              active: active === index,
+              disabled: option.disabled,
+              selection: "check",
+              id: `${id}-${index}`,
+              role: "option",
+              "aria-selected": value === option.value,
+              "aria-disabled": option.disabled || void 0,
+              onPointerMove: () => !option.disabled && setActive(index),
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => choose(index)
+            },
+            option.value
+          ))
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Select
+};

package/components/Select.module.css

@@ -0,0 +1,21 @@
+.select {
+  composes: surface from "./Control.module.css";
+  min-width: min(168px, 100%);
+  width: var(--select-width);
+  max-width: 100%;
+  padding: 5px 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  text-align: left;
+}
+
+.select svg {
+  color: var(--muted);
+}
+.empty {
+  padding: 14px 10px;
+  color: var(--muted);
+  font-size: 12px;
+}

package/components/SelectOptionContent.d.ts

@@ -0,0 +1,5 @@
+import type { SelectOption } from "./types";
+export declare function SelectOptionContent({ option, reserveIcon, }: {
+    option: SelectOption;
+    reserveIcon?: boolean;
+}): import("react").JSX.Element;

package/components/SelectOptionContent.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { MenuItemContent } from "./MenuItemContent.js";
+import s from "./SelectOptionContent.module.css";
+function SelectOptionContent({
+  option,
+  reserveIcon = false
+}) {
+  return /* @__PURE__ */ jsx("span", { className: s.content, children: /* @__PURE__ */ jsx(
+    MenuItemContent,
+    {
+      label: option.label,
+      description: option.description,
+      icon: option.icon,
+      reserveIcon
+    }
+  ) });
+}
+export {
+  SelectOptionContent
+};

package/components/SelectOptionContent.module.css

@@ -0,0 +1,7 @@
+.content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--menu-item-gap);
+  min-width: 0;
+  flex: 1;
+}

package/components/SelectTrigger.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export declare function SelectTrigger({ expanded, children, icon, className, ...props }: ComponentPropsWithRef<"button"> & {
+    expanded: boolean;
+    icon?: ReactNode;
+}): import("react").JSX.Element;