@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/DisclosureChevron.module.css

@@ -0,0 +1,17 @@
+.chevron {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+  rotate: 0deg;
+  transition:
+    rotate var(--motion-chevron) var(--ease),
+    color var(--motion-hover) var(--ease);
+  flex-shrink: 0;
+}
+.chevron[data-expanded="true"] {
+  rotate: 180deg;
+}

package/components/Divider.d.ts

@@ -0,0 +1,5 @@
+export declare function Divider({ orientation, inset, spacing, }: {
+    orientation?: "horizontal" | "vertical";
+    inset?: number;
+    spacing?: number;
+}): import("react").JSX.Element;

package/components/Divider.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import s from "./Divider.module.css";
+function Divider({
+  orientation = "horizontal",
+  inset = 0,
+  spacing = 0
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": orientation,
+      className: s.divider,
+      "data-orientation": orientation,
+      style: {
+        "--divider-inset": Math.max(0, inset) + "px",
+        "--divider-spacing": Math.max(0, spacing) + "px"
+      }
+    }
+  );
+}
+export {
+  Divider
+};

package/components/Divider.module.css

@@ -0,0 +1,19 @@
+.divider {
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 0;
+}
+.divider[data-orientation="horizontal"] {
+  align-self: stretch;
+  height: 0;
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+  margin: var(--divider-spacing) var(--divider-inset);
+}
+.divider[data-orientation="vertical"] {
+  align-self: stretch;
+  width: 0;
+  border-left: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+  margin: var(--divider-inset) var(--divider-spacing);
+}

package/components/Drawer.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode, type RefObject } from "react";
+export type DrawerPlacement = "left" | "right" | "top" | "bottom";
+export type DrawerProps = {
+    open: boolean;
+    onClose(): void;
+    title: string;
+    description?: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+    placement?: DrawerPlacement;
+    size?: number | string;
+    closable?: boolean;
+    closeOnEscape?: boolean;
+    closeOnBackdrop?: boolean;
+    initialFocus?: RefObject<HTMLElement | null>;
+    className?: string;
+};
+export declare function Drawer({ open: requestedOpen, onClose, title, description, children, footer, placement, size, closable, closeOnEscape, closeOnBackdrop, initialFocus, className, }: DrawerProps): import("react").ReactPortal;

package/components/Drawer.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { IconButton } from "./IconButton.js";
+import { FieldContext } from "./field.js";
+import { useModalScrollLock } from "./useModalScrollLock.js";
+import { cancelMotion, surfaceMotion } from "./motion.js";
+import s from "./Drawer.module.css";
+import {
+  SurfacePortalContext,
+  useSurfaceHost,
+  useSurfacePortal
+} from "./surfacePortal.js";
+const offsets = {
+  left: "-100% 0",
+  right: "100% 0",
+  top: "0 -100%",
+  bottom: "0 100%"
+};
+function Drawer({
+  open: requestedOpen,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  placement = "right",
+  size = 420,
+  closable = true,
+  closeOnEscape = true,
+  closeOnBackdrop = true,
+  initialFocus,
+  className = ""
+}) {
+  const owner = useSurfacePortal(), open = requestedOpen && owner?.active !== false;
+  const { ref, host, setRef } = useSurfaceHost();
+  const previousFocus = useRef(null), opened = useRef(open), backdropDown = useRef(false), titleId = useId(), descriptionId = useId();
+  const [closing, setClosing] = useState(false);
+  useModalScrollLock(open || closing);
+  opened.current = open;
+  useEffect(() => {
+    if (requestedOpen && owner?.active === false) onClose();
+  }, [requestedOpen, owner?.active, onClose]);
+  useEffect(() => {
+    const node = ref.current;
+    return () => {
+      cancelMotion(node);
+      if (node.open) node.close();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (open) {
+      node.inert = false;
+      setClosing(false);
+      const justOpened = !node.open;
+      const body = node.querySelector("[data-drawer-body]");
+      if (justOpened) {
+        previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        node.showModal();
+        if (body) body.scrollTop = 0;
+      }
+      if (justOpened || !node.contains(document.activeElement)) {
+        const requested = initialFocus?.current;
+        const target = requested && node.contains(requested) ? requested : node.querySelector("[data-autofocus]") || body?.querySelector(
+          'input:not([disabled]):not([readonly]):not([type="hidden"]):not([type="file"]),textarea:not([disabled]):not([readonly]),[role="combobox"]:not([disabled]),button:not([disabled]),a[href]'
+        ) || node.querySelector("button:not([disabled])") || node;
+        target.focus({ preventScroll: true });
+      }
+      void surfaceMotion(node, "enter", offsets[placement], "--motion-panel");
+      return;
+    }
+    if (!node.open) return;
+    node.inert = true;
+    setClosing(true);
+    void surfaceMotion(node, "exit", offsets[placement]).then((done) => {
+      if (!done || opened.current) return;
+      node.close();
+      const focus = previousFocus.current;
+      const modal = [
+        ...document.querySelectorAll("dialog:modal")
+      ].at(-1);
+      if (focus?.isConnected && (!modal || modal.contains(focus)))
+        focus.focus({ preventScroll: true });
+      setClosing(false);
+    });
+  }, [open, placement, initialFocus]);
+  const outside = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return event.target === event.currentTarget && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
+  };
+  const length = typeof size === "number" ? `${Number.isFinite(size) ? Math.max(180, size) : 420}px` : size;
+  return createPortal(
+    /* @__PURE__ */ jsx(SurfacePortalContext, { value: { host, active: open }, children: /* @__PURE__ */ jsx(FieldContext, { value: null, children: /* @__PURE__ */ jsxs(
+      "dialog",
+      {
+        ref: setRef,
+        tabIndex: -1,
+        "aria-labelledby": titleId,
+        "aria-describedby": description != null ? descriptionId : void 0,
+        "data-placement": placement,
+        className: `${s.drawer} ${closing ? s.closing : ""} ${className}`,
+        style: { "--drawer-size": length },
+        onCancel: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (closeOnEscape && !closing) onClose();
+        },
+        onPointerDown: (event) => {
+          backdropDown.current = event.button === 0 && outside(event);
+        },
+        onPointerUp: (event) => {
+          if (backdropDown.current && outside(event) && closeOnBackdrop && !closing)
+            onClose();
+          backdropDown.current = false;
+        },
+        onPointerCancel: () => {
+          backdropDown.current = false;
+        },
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: s.header, children: [
+            /* @__PURE__ */ jsxs("div", { className: s.heading, children: [
+              /* @__PURE__ */ jsx("h2", { id: titleId, children: title }),
+              description != null && /* @__PURE__ */ jsx("div", { id: descriptionId, className: s.description, children: description })
+            ] }),
+            closable && /* @__PURE__ */ jsx(IconButton, { label: "\u5173\u95ED\u62BD\u5C49", onClick: onClose, children: /* @__PURE__ */ jsx(X, {}) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: s.body, "data-drawer-body": true, children }),
+          footer && /* @__PURE__ */ jsx("footer", { className: s.footer, children: footer })
+        ]
+      }
+    ) }) }),
+    document.body
+  );
+}
+export {
+  Drawer
+};

package/components/Drawer.module.css

@@ -0,0 +1,109 @@
+.drawer {
+  position: fixed;
+  inset: 0 0 0 auto;
+  width: min(var(--drawer-size), 100vw);
+  height: 100dvh;
+  max-width: 100vw;
+  max-height: 100dvh;
+  margin: 0;
+  padding: 0;
+  color: var(--fg);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius) 0 0 var(--radius);
+  box-shadow: var(--shadow-dialog);
+  overflow: hidden;
+  outline: none;
+}
+.drawer[open] {
+  display: flex;
+  flex-direction: column;
+}
+.drawer[data-placement="left"] {
+  inset: 0 auto 0 0;
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+.drawer[data-placement="top"],
+.drawer[data-placement="bottom"] {
+  width: 100vw;
+  height: min(var(--drawer-size), 100dvh);
+}
+.drawer[data-placement="top"] {
+  inset: 0 0 auto;
+  border-radius: 0 0 var(--radius) var(--radius);
+}
+.drawer[data-placement="bottom"] {
+  inset: auto 0 0;
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+.drawer::backdrop {
+  background: var(--overlay);
+  backdrop-filter: blur(3px);
+  animation: fade-in var(--popup-enter) var(--ease);
+  transition:
+    background var(--popup-exit),
+    backdrop-filter var(--popup-exit);
+}
+.closing {
+  pointer-events: none;
+}
+.closing::backdrop {
+  background: transparent;
+  backdrop-filter: blur(0);
+}
+.header {
+  display: flex;
+  flex: none;
+  align-items: flex-start;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 20px 22px;
+  border-bottom: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.heading {
+  min-width: 0;
+  padding-top: 4px;
+}
+.heading h2 {
+  font-size: 16px;
+  font-weight: 550;
+  overflow-wrap: anywhere;
+}
+.description {
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+.body {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 22px;
+}
+.footer {
+  flex: none;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 14px 22px;
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+  background: var(--canvas);
+}
+@media (max-width: 600px) {
+  .header {
+    padding: 16px;
+  }
+  .body {
+    padding: 16px;
+  }
+  .footer {
+    padding: 12px 16px;
+  }
+}

package/components/EmojiPicker.d.ts

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

package/components/EmojiPicker.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { CharacterPicker } from "./CharacterPicker.js";
+import { useCharacterCatalog } from "./characterCatalog.js";
+function EmojiPicker(props) {
+  const { retry, ...catalog } = useCharacterCatalog("emoji");
+  return /* @__PURE__ */ jsx(
+    CharacterPicker,
+    {
+      ...props,
+      ...catalog,
+      onRetry: retry,
+      label: props.label || "Emoji",
+      emoji: true
+    }
+  );
+}
+export {
+  EmojiPicker
+};

package/components/EmptyState.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export declare function EmptyState({ icon, title, description, children, action, }: {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    children?: ReactNode;
+    action?: ReactNode;
+}): import("react").JSX.Element;

package/components/EmptyState.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Inbox } from "lucide-react";
+import s from "./EmptyState.module.css";
+function EmptyState({
+  icon = /* @__PURE__ */ jsx(Inbox, { size: 26 }),
+  title,
+  description,
+  children,
+  action
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: s.empty, children: [
+    /* @__PURE__ */ jsx("span", { className: s.emptyIcon, children: icon }),
+    /* @__PURE__ */ jsx("h2", { children: title }),
+    description && /* @__PURE__ */ jsx("p", { children: description }),
+    children || action
+  ] });
+}
+export {
+  EmptyState
+};

package/components/EmptyState.module.css

@@ -0,0 +1,30 @@
+.empty {
+  min-height: 270px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 12px;
+  padding: 30px;
+}
+.empty p {
+  color: var(--muted);
+  max-width: 300px;
+  font-size: 12px;
+}
+.emptyIcon {
+  display: grid;
+  place-items: center;
+  width: 50px;
+  height: 50px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--soft);
+  color: var(--muted);
+  margin-bottom: 6px;
+}
+.emptyIcon svg {
+  width: 23px;
+  height: 23px;
+}

package/components/FieldLabel.d.ts

@@ -0,0 +1,8 @@
+export declare function FieldLabel({ label, htmlFor, required, indicator, optional, as, }: {
+    label: string;
+    htmlFor?: string;
+    required?: boolean;
+    indicator?: "asterisk" | "text" | "none";
+    optional?: boolean;
+    as?: "label" | "span";
+}): import("react").JSX.Element;

package/components/FieldLabel.js

@@ -0,0 +1,20 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import s from "./FormField.module.css";
+function FieldLabel({
+  label,
+  htmlFor,
+  required = false,
+  indicator = "asterisk",
+  optional = false,
+  as = "label"
+}) {
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    required && indicator !== "none" && /* @__PURE__ */ jsx("span", { className: s.required, "aria-hidden": "true", title: "\u5FC5\u586B", children: indicator === "text" ? "\u5FC5\u586B" : "*" }),
+    !required && optional && /* @__PURE__ */ jsx("span", { className: s.optional, children: "\u53EF\u9009" })
+  ] });
+  return as === "span" ? /* @__PURE__ */ jsx("span", { className: s.label, children }) : /* @__PURE__ */ jsx("label", { htmlFor, className: s.label, children });
+}
+export {
+  FieldLabel
+};

package/components/FieldMessages.d.ts

@@ -0,0 +1,5 @@
+export declare function FieldMessages({ id, hint, error, }: {
+    id: string;
+    hint?: string;
+    error?: string;
+}): import("react").JSX.Element;

package/components/FieldMessages.js

@@ -0,0 +1,15 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import s from "./FormField.module.css";
+function FieldMessages({
+  id,
+  hint,
+  error
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hint && /* @__PURE__ */ jsx("p", { id: id + "-hint", className: s.hint, children: hint }),
+    error && /* @__PURE__ */ jsx("p", { id: id + "-error", className: s.error, role: "alert", children: error })
+  ] });
+}
+export {
+  FieldMessages
+};

package/components/FileDropOverlay.d.ts

@@ -0,0 +1,5 @@
+export declare function FileDropOverlay({ active, title, description, }: {
+    active: boolean;
+    title?: string;
+    description?: string;
+}): import("react").JSX.Element;

package/components/FileDropOverlay.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FolderOpen } from "lucide-react";
+import s from "./FileDropOverlay.module.css";
+function FileDropOverlay({
+  active,
+  title = "\u6DFB\u52A0\u6587\u4EF6",
+  description = "\u677E\u5F00\u4EE5\u6DFB\u52A0\u6587\u4EF6\u6216\u6587\u4EF6\u5939"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: s.overlay,
+      "data-active": active,
+      "aria-hidden": !active,
+      role: "status",
+      children: /* @__PURE__ */ jsxs("div", { className: s.card, children: [
+        /* @__PURE__ */ jsx("span", { className: s.icon, children: /* @__PURE__ */ jsx(FolderOpen, {}) }),
+        /* @__PURE__ */ jsx("strong", { children: title }),
+        /* @__PURE__ */ jsx("span", { children: description })
+      ] })
+    }
+  );
+}
+export {
+  FileDropOverlay
+};

package/components/FileDropOverlay.module.css

@@ -0,0 +1,55 @@
+.overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 6;
+  padding: 12px;
+  border-radius: inherit;
+  background: var(--surface);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--popup-enter) var(--ease),
+    visibility var(--popup-enter);
+}
+.overlay[data-active="true"] {
+  opacity: 1;
+  visibility: visible;
+}
+.card {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  border: 1px dashed color-mix(in srgb, var(--fg) 28%, var(--surface));
+  border-radius: var(--radius);
+  transform: scale(0.985);
+  transition: transform var(--motion-panel) var(--ease);
+}
+.overlay[data-active="true"] .card {
+  transform: scale(1);
+}
+.icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: var(--soft);
+  color: var(--muted);
+}
+.icon svg {
+  width: 28px;
+  height: 28px;
+}
+.card strong {
+  font-size: 15px;
+  font-weight: 550;
+}
+.card > span:last-child {
+  font-size: 12px;
+  color: var(--muted);
+}

package/components/FileDropZone.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import { type FileConstraints, type FileRejection, type FileSelectionResult } from "./fileSelection";
+export type FileDropZoneProps = FileConstraints & {
+    children: ReactNode;
+    onFiles(files: File[]): void;
+    onReject?(rejections: FileRejection[]): void;
+    onValidation?(result: FileSelectionResult): void;
+    title?: string;
+    description?: string;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+    showErrors?: boolean;
+};
+export declare function FileDropZone({ children, onFiles, title, description, disabled, label, className, onReject, onValidation, showErrors, ...constraints }: FileDropZoneProps): import("react").JSX.Element;