@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/Input.js

@@ -0,0 +1,29 @@
+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,
+  ...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 ? /* @__PURE__ */ jsxs("div", { className: s.withIcon, children: [
+    /* @__PURE__ */ jsx("span", { className: s.leading, children: leading }),
+    control
+  ] }) : control;
+  return field.wrapped ? content : /* @__PURE__ */ jsx(FormField, { ...field, children: content });
+}
+export {
+  Input
+};

package/components/Input.module.css

@@ -0,0 +1,23 @@
+.input {
+  composes: surface from "./Control.module.css";
+  width: 100%;
+  padding: 6px 10px;
+}
+.withIcon {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+.withIcon .input {
+  padding-left: 38px;
+}
+.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,5 @@
+export declare function LoadingState({ variant, label, progress, }: {
+    variant?: "spinner" | "dots" | "skeleton" | "progress";
+    label?: string;
+    progress?: number;
+}): import("react").JSX.Element;

package/components/LoadingState.js

@@ -0,0 +1,29 @@
+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
+}) {
+  if (variant === "skeleton") return /* @__PURE__ */ jsx(SkeletonRows, { label });
+  return /* @__PURE__ */ jsxs("div", { className: s.loading, role: "status", "aria-label": label, children: [
+    variant === "progress" ? /* @__PURE__ */ jsx(Progress, { value: progress ?? 0, label }) : /* @__PURE__ */ jsx(
+      Spinner,
+      {
+        size: 24,
+        variant: variant === "dots" ? "dots" : "ring",
+        decorative: true
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { children: [
+      label,
+      variant === "progress" && progress !== void 0 ? " " + Math.round(progress) + "%" : ""
+    ] })
+  ] });
+}
+export {
+  LoadingState
+};

package/components/LoadingState.module.css

@@ -0,0 +1,14 @@
+.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%);
+}

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,14 @@
+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;
+    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, selected, active, disabled, selection, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;

package/components/MenuItem.js

@@ -0,0 +1,49 @@
+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,
+  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 }),
+    /* @__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
+};

package/components/MenuItem.module.css

@@ -0,0 +1,163 @@
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--menu-item-gap);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--menu-item-height);
+  margin: 0;
+  padding: max(
+      4px,
+      calc((var(--menu-item-height) - var(--menu-item-line-height)) / 2)
+    )
+    var(--menu-item-padding-x);
+  border: 0;
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: var(--fg);
+  text-align: left;
+  font-family: var(--ui-font);
+  font-size: var(--menu-item-font-size);
+  font-weight: 400;
+  line-height: var(--menu-item-line-height);
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color var(--motion-hover),
+    color var(--motion-hover);
+}
+.item + .item {
+  margin-top: var(--menu-item-spacing);
+}
+@media (pointer: coarse) {
+  .item {
+    min-height: 44px;
+  }
+}
+.item[data-selected="true"] {
+  background: var(--selected);
+}
+.item:where(:not(:disabled):not([aria-disabled="true"])):is(
+    :hover,
+    :focus-visible,
+    [data-active="true"],
+    [aria-expanded="true"]
+  ) {
+  background: var(--hover);
+}
+.item[data-selected="true"]:where(
+    :not(:disabled):not([aria-disabled="true"])
+  ):is(:hover, :focus-visible, [data-active="true"]) {
+  background: color-mix(in srgb, var(--selected) 75%, var(--hover));
+}
+.item:where(:not(:disabled):not([aria-disabled="true"])):active {
+  background: var(--selected);
+}
+.item:disabled,
+.item[aria-disabled="true"] {
+  opacity: var(--menu-disabled-opacity);
+  cursor: not-allowed;
+}
+.item[data-tone="danger"] {
+  color: var(--danger);
+}
+.leading,
+.trailing {
+  display: grid;
+  place-items: center;
+  flex: 0 0 var(--menu-item-icon-size);
+  width: var(--menu-item-icon-size);
+  height: var(--menu-item-icon-size);
+}
+.leading {
+  color: inherit;
+  opacity: 0.8;
+}
+.leading svg,
+.trailing > svg {
+  width: var(--menu-item-icon-size);
+  height: var(--menu-item-icon-size);
+  stroke-width: 1.65;
+}
+.copy {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.description {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 14px;
+  color: var(--muted);
+}
+.shortcut {
+  flex-shrink: 0;
+  margin-left: auto;
+  font-family: var(--ui-font);
+  font-size: var(--menu-shortcut-font-size);
+  font-weight: 400;
+  line-height: var(--menu-shortcut-line-height);
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.check {
+  color: var(--accent);
+}
+.checkbox,
+.radio {
+  display: grid;
+  place-items: center;
+  width: var(--menu-item-icon-size);
+  height: var(--menu-item-icon-size);
+  border: 1px solid color-mix(in srgb, var(--fg) 25%, var(--surface));
+  background: var(--field);
+  transition:
+    background var(--motion-hover),
+    border-color var(--motion-hover);
+}
+.checkbox {
+  border-radius: 4px;
+}
+.checkbox[data-checked="true"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+.checkbox svg {
+  width: 12px;
+  height: 12px;
+  stroke-width: 2;
+}
+.radio {
+  border-radius: 50%;
+}
+.radio i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  transform: scale(0);
+  transition: transform var(--motion-press) var(--ease);
+}
+.radio[data-checked="true"] {
+  border-color: var(--accent);
+}
+.radio[data-checked="true"] i {
+  transform: scale(1);
+}
+
+.item:focus-visible {
+  outline: none;
+}

package/components/MenuItemContent.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type MenuItemContentProps = {
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    reserveIcon?: boolean;
+};
+export declare function MenuItemContent({ label, description, icon, reserveIcon, }: MenuItemContentProps): import("react").JSX.Element;

package/components/MenuItemContent.js

@@ -0,0 +1,19 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import s from "./MenuItem.module.css";
+function MenuItemContent({
+  label,
+  description,
+  icon,
+  reserveIcon = false
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (icon || reserveIcon) && /* @__PURE__ */ jsx("span", { className: s.leading, "data-menu-icon": true, "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: s.copy, children: [
+      /* @__PURE__ */ jsx("span", { className: s.label, "data-menu-label": true, children: label }),
+      description && /* @__PURE__ */ jsx("span", { className: s.description, children: description })
+    ] })
+  ] });
+}
+export {
+  MenuItemContent
+};

package/components/MultiSelect.d.ts

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

package/components/MultiSelect.js

@@ -0,0 +1,161 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { moveMenuFocus } from "./menuFocus.js";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import { MenuItem } from "./MenuItem.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { Search } from "lucide-react";
+import { Popover } from "./Popover.js";
+import { usePopover } from "./usePopover.js";
+import { Button } from "./Button.js";
+import s from "./MultiSelect.module.css";
+function MultiSelect({
+  value,
+  onChange,
+  options,
+  label,
+  disabled,
+  readOnly,
+  required,
+  name,
+  id: controlId,
+  error,
+  hint,
+  maxSelected = Infinity,
+  clearable = true,
+  placeholder = "\u8BF7\u9009\u62E9",
+  ...aria
+}) {
+  const field = useFieldControl({
+    id: controlId,
+    name,
+    label,
+    disabled,
+    readOnly,
+    required,
+    error,
+    hint,
+    ...aria
+  });
+  const pop = usePopover(field.disabled || field.readOnly), [query, setQuery] = useState(""), list = useRef(null), search = useRef(null), id = useId();
+  const reserveIcon = options.some((option) => !!option.icon);
+  const filtered = options.filter(
+    (item) => item.label.toLowerCase().includes(query.toLowerCase())
+  );
+  const toggle = (option) => {
+    if (!field.disabled && !field.readOnly && !option.disabled && (value.includes(option.value) || value.length < maxSelected))
+      onChange(
+        value.includes(option.value) ? value.filter((v) => v !== option.value) : [...value, option.value]
+      );
+  };
+  useEffect(() => {
+    if (pop.open) {
+      setQuery("");
+      search.current?.focus();
+    }
+  }, [pop.open]);
+  const summary = value.length ? options.filter((item) => value.includes(item.value)).map((item) => item.label).slice(0, 2).join("\u3001") + (value.length > 2 ? ` +${value.length - 2}` : "") : placeholder;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        ...fieldTriggerProps(field),
+        expanded: pop.open,
+        ref: pop.anchor,
+        className: s.multiTrigger,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        onClick: pop.toggle,
+        children: /* @__PURE__ */ jsx("span", { children: summary })
+      }
+    ),
+    field.name && value.map((value2) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value: value2,
+        disabled: field.disabled
+      },
+      value2
+    )),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        id,
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        label,
+        width: 270,
+        onKeyDown: (event) => moveMenuFocus(event, list.current),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: s.multiSearch, children: [
+            /* @__PURE__ */ jsx(Search, {}),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: search,
+                "aria-label": `\u641C\u7D22${label}`,
+                placeholder: "\u641C\u7D22\u9009\u9879\u2026",
+                value: query,
+                onChange: (e) => setQuery(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: list,
+              className: s.multiList,
+              role: "listbox",
+              "aria-label": label,
+              "aria-multiselectable": "true",
+              children: [
+                filtered.map((option) => /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    label: option.label,
+                    description: option.description,
+                    icon: option.icon,
+                    reserveIcon,
+                    shortcut: option.shortcut,
+                    selected: value.includes(option.value),
+                    selection: "checkbox",
+                    role: "option",
+                    "aria-selected": value.includes(option.value),
+                    disabled: option.disabled || !value.includes(option.value) && value.length >= maxSelected,
+                    onClick: () => toggle(option)
+                  },
+                  option.value
+                )),
+                !filtered.length && /* @__PURE__ */ jsx("p", { className: s.noResults, children: "\u6CA1\u6709\u5339\u914D\u7684\u9009\u9879" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("footer", { className: s.multiFooter, children: [
+            clearable && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "small",
+                disabled: !value.length,
+                onClick: () => onChange([]),
+                children: "\u6E05\u7A7A"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { children: [
+              value.length,
+              Number.isFinite(maxSelected) ? " / " + maxSelected : "",
+              " \u9879"
+            ] }),
+            /* @__PURE__ */ jsx(Button, { size: "small", onClick: pop.closeAndFocus, children: "\u5B8C\u6210" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  MultiSelect
+};