@ui-sdk/react 0.0.0-stage → 0.1.0-beta.1

package/dist/drawer.js

@@ -0,0 +1,158 @@
+"use client";
+// src/drawer.tsx
+import {
+  drawer
+} from "@ui-sdk/core/drawer";
+import * as React from "react";
+import {
+  Connected,
+  renderPopup,
+  sheetViewport,
+  useControllerEntry,
+  useOwnContainer,
+  usePopupContainer
+} from "./popup.js";
+import {
+  createParts,
+  HandleScope,
+  renderElement,
+  useHandle,
+  useNearest,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createDrawerController, sheetPhysics } from "@ui-sdk/core/drawer";
+import { jsx } from "react/jsx-runtime";
+var parts = createParts(drawer, {
+  trigger: "button",
+  handle: "button",
+  title: "h2",
+  description: "p",
+  close: "button",
+  outlet: "div"
+});
+var ContainerContext = React.createContext(void 0);
+var TriggerContext = React.createContext(null);
+function Drawer({ children, container, ...options }) {
+  const handle = usePrimitive(drawer, options);
+  useControllerEntry(options.controller, handle);
+  return /* @__PURE__ */ jsx(HandleScope, { handle, children: /* @__PURE__ */ jsx(ContainerContext.Provider, { value: container, children }) });
+}
+function DrawerTrigger({ controller, ...props }) {
+  const {
+    disabled,
+    focusableWhenDisabled,
+    payload: _,
+    shortcut,
+    render,
+    ...rest
+  } = props;
+  const unconnected = () => renderElement(
+    "button",
+    {
+      type: "button",
+      disabled: disabled && !focusableWhenDisabled,
+      "aria-disabled": disabled && focusableWhenDisabled || void 0,
+      ...rest
+    },
+    render,
+    {
+      open: false,
+      disabled: !!disabled
+    }
+  );
+  return /* @__PURE__ */ jsx(TriggerContext.Provider, { value: { shortcut }, children: /* @__PURE__ */ jsx(
+    Connected,
+    {
+      primitive: drawer,
+      controller,
+      fallback: unconnected,
+      children: /* @__PURE__ */ jsx(parts.Trigger, { ...props })
+    }
+  ) });
+}
+function DrawerBackdrop(props) {
+  const target = usePopupContainer(React.useContext(ContainerContext));
+  const element = usePart(drawer, "backdrop", {}, props);
+  return element && renderPopup(element, target);
+}
+function DrawerContent({
+  initialFocus,
+  finalFocus,
+  keepMounted,
+  container,
+  render,
+  ...props
+}) {
+  const handle = useHandle(drawer);
+  const target = usePopupContainer(useOwnContainer(container, ContainerContext));
+  const partProps = {
+    ...props,
+    render: sheetViewport(handle, render)
+  };
+  const element = usePart(
+    handle,
+    "content",
+    { initialFocus, finalFocus, keepMounted },
+    partProps
+  );
+  return element && renderPopup(element, target);
+}
+var DrawerHandle = parts.Handle;
+var DrawerTitle = parts.Title;
+var DrawerDescription = parts.Description;
+var DrawerClose = parts.Close;
+function DrawerShortcut(props) {
+  const trigger = React.useContext(TriggerContext);
+  if (useNearest(drawer)) {
+    return /* @__PURE__ */ jsx(ShortcutPart, { inherited: trigger?.shortcut, ...props });
+  }
+  if (trigger) {
+    return null;
+  }
+  throw new Error("Drawer parts must be used inside <Drawer>.");
+}
+var text = (state) => state.text;
+function ShortcutPart({
+  inherited,
+  shortcut,
+  children = text,
+  ...props
+}) {
+  return usePart(
+    drawer,
+    "shortcut",
+    { shortcut: shortcut ?? inherited },
+    { ...props, children },
+    "span"
+  );
+}
+function DrawerOutlet({
+  controller,
+  ...props
+}) {
+  const { keyframes: _, render, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Connected,
+    {
+      primitive: drawer,
+      controller,
+      fallback: () => renderElement("div", rest, render, { open: false }),
+      children: /* @__PURE__ */ jsx(parts.Outlet, { ...props })
+    }
+  );
+}
+export {
+  Drawer,
+  DrawerBackdrop,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHandle,
+  DrawerOutlet,
+  DrawerShortcut,
+  DrawerTitle,
+  DrawerTrigger,
+  createDrawerController,
+  sheetPhysics
+};

package/dist/editor-context.d.ts

@@ -0,0 +1,4 @@
+import type { TextEditorAdapter } from "@ui-sdk/core/trigger-menu";
+import * as React from "react";
+declare const EditorContext: React.Context<TextEditorAdapter | undefined>;
+export { EditorContext };

package/dist/editor-context.js

@@ -0,0 +1,9 @@
+"use client";
+// src/editor-context.ts
+import * as React from "react";
+var EditorContext = React.createContext(
+  void 0
+);
+export {
+  EditorContext
+};

package/dist/field-context.d.ts

@@ -0,0 +1,47 @@
+import type { field } from "@ui-sdk/core/field";
+import * as React from "react";
+import { type PartProps, type PrimitiveHandle, type RenderProp } from "./use-primitive.js";
+type FieldContextValue = PrimitiveHandle<typeof field> & {
+    name?: string;
+    disabled?: boolean;
+};
+declare const FieldContext: React.Context<FieldContextValue | null>;
+/**
+ * Controls inside a field take its name and disabled state, and its ids and
+ * validity through the field's control slot. Null outside a field. The control
+ * re-renders when the field changes, like when its label or errors appear.
+ * The control takes the field's id, so the label points at it from the
+ * server's HTML on, unless its own props give one. A control whose component
+ * makes the id it renders, like a select's trigger, passes those props as `own`.
+ * @stable
+ */
+declare function useFieldControl(own?: {
+    id?: string;
+}): {
+    name: string | undefined;
+    disabled: boolean | undefined;
+    props: (props: Record<string, any>) => {
+        "aria-labelledby": any;
+        "data-slot": any;
+    };
+} | null;
+declare function useJoinField(field: FieldContextValue | null, own?: {
+    id?: string;
+}): {
+    name: string | undefined;
+    disabled: boolean | undefined;
+    props: (props: Record<string, any>) => {
+        "aria-labelledby": any;
+        "data-slot": any;
+    };
+} | null;
+declare function ownDescription<Props extends Record<string, any>, Render>(props: Props, render: Render): readonly [Props, Render];
+/**
+ * A control's `render`: its element, with the field's attributes for its
+ * control merged in when it's in a field, and then `after`, like the hidden
+ * native input of a checkbox.
+ */
+declare function controlRender<State>(field: ReturnType<typeof useFieldControl>, tag: string, render?: RenderProp<State>, after?: React.ReactNode): RenderProp<State> | ((props: Record<string, any>, state: State) => React.FunctionComponentElement<React.FragmentProps>) | undefined;
+type ButtonControlProps<State> = Omit<PartProps<"button", State>, "value" | "name" | "form" | "defaultChecked" | "defaultValue" | "onChange" | "onSelect">;
+declare function useFieldControlId(): string | undefined;
+export { type ButtonControlProps, controlRender, FieldContext, type FieldContextValue, ownDescription, useFieldControl, useFieldControlId, useJoinField, };

package/dist/field-context.js

@@ -0,0 +1,87 @@
+"use client";
+// src/field-context.ts
+import { fieldControlId, madeLabel, renderVersion } from "@ui-sdk/core/renderer";
+import * as React from "react";
+import {
+  renderElement,
+  slotIn
+} from "./use-primitive.js";
+var FieldContext = React.createContext(null);
+var noop = () => () => {
+};
+var zero = () => 0;
+function useFieldControl(own) {
+  return useJoinField(React.useContext(FieldContext), own);
+}
+function useJoinField(field, own) {
+  const version = field ? () => renderVersion(field.instance) : zero;
+  React.useSyncExternalStore(
+    field ? field.instance.subscribe : noop,
+    version,
+    version
+  );
+  if (!field) {
+    return null;
+  }
+  return {
+    name: field.name,
+    disabled: field.disabled,
+    // Merges the field's attributes for its control into the control's props,
+    // keeping the control's own description ahead of the field's. The field
+    // decides the id.
+    props: (props) => {
+      const label = props["aria-labelledby"];
+      const merged = slotIn(
+        field,
+        "control",
+        { id: (own ?? props).id, describedBy: props["aria-describedby"] },
+        {
+          ...props,
+          id: void 0,
+          "aria-labelledby": madeLabel(label) ? void 0 : label
+        }
+      );
+      return {
+        ...merged,
+        "aria-labelledby": merged["aria-labelledby"] ?? label,
+        "data-slot": props["data-slot"]
+      };
+    }
+  };
+}
+function ownDescription(props, render) {
+  const own = React.isValidElement(render) ? render.props["aria-describedby"] : void 0;
+  if (own === void 0 || !React.isValidElement(render)) {
+    return [props, render];
+  }
+  const element = React.cloneElement(render, {
+    "aria-describedby": void 0
+  });
+  return [{ ...props, "aria-describedby": own }, element];
+}
+function controlRender(field, tag, render, after) {
+  if (!field && !after) {
+    return render;
+  }
+  return (props, state) => {
+    const [own, element] = field ? ownDescription(props, render) : [props, render];
+    return React.createElement(
+      React.Fragment,
+      null,
+      renderElement(tag, field ? field.props(own) : own, element, state),
+      after
+    );
+  };
+}
+function useFieldControlId() {
+  const field = React.useContext(FieldContext);
+  return field ? fieldControlId(field.api.id) : void 0;
+}
+export {
+  FieldContext,
+  controlRender,
+  ownDescription,
+  useFieldControl,
+  useFieldControlId,
+  useJoinField
+};

package/dist/field.d.ts

@@ -0,0 +1,49 @@
+import { type FieldDescriptionState, type FieldErrorProps, type FieldErrorState, type FieldOptions, type FieldSetOptions, type FieldSetState, type FieldState } from "@ui-sdk/core/field";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * Ties a form control to its label, description and error messages.
+ * @stable
+ */
+declare function Field({ name, disabled, invalid, debug, ...props }: FieldOptions & PartProps<"div", FieldState>): React.JSX.Element;
+/**
+ * The field's label, which names its control. Outside a Field it's a plain
+ * <label>, which labels the control inside it, like a card around a whole Field.
+ * @stable
+ */
+declare function FieldLabel(props: PartProps<"label", FieldState>): React.JSX.Element;
+/**
+ * Describes its Field. Right inside a FieldSet, outside any Field, it describes
+ * the group, so screen readers say it as focus enters the group.
+ * @stable
+ */
+declare function FieldDescription(props: PartProps<"p", FieldDescriptionState>): React.JSX.Element;
+/**
+ * Shows while the field shows as invalid. Without children, it shows the
+ * browser's message for the current problem.
+ * @stable
+ */
+declare function FieldError({ match, children, ...props }: PartProps<"div", FieldErrorState> & FieldErrorProps): React.JSX.Element | null;
+/**
+ * A native control: an <input> by default, or anything through `render`.
+ * @stable
+ */
+declare function FieldControl({ name, render, ...rest }: PartProps<"input", FieldState>): React.JSX.Element;
+/**
+ * A native <fieldset>, so `disabled` disables every control inside it.
+ * @stable
+ */
+declare function FieldSet({ disabled, debug, ...props }: FieldSetOptions & Omit<PartProps<"fieldset", FieldSetState>, "disabled">): React.JSX.Element;
+/**
+ * Names the field set. Keep it the set's first child, where a <legend> names it natively.
+ * @stable
+ */
+declare function FieldLegend(props: PartProps<"legend", FieldSetState>): React.JSX.Element | null;
+/**
+ * Lays fields out. It has no role: a FieldSet is what names and disables a group.
+ * @stable
+ */
+declare function FieldGroup(props: PartProps<"div">): React.JSX.Element | null;
+export { Field, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSet, };
+export type { FieldApi, FieldDescriptionState, FieldErrorProps, FieldErrorState, FieldGroupPrimitive, FieldOptions, FieldPrimitive, FieldSetOptions, FieldSetPrimitive, FieldSetState, FieldState, ValidityKey, } from "@ui-sdk/core/field";
+export { useFieldControl } from "./field-context.js";

package/dist/field.js

@@ -0,0 +1,169 @@
+"use client";
+// src/field.tsx
+import {
+  fieldGroup,
+  field as fieldPrimitive,
+  fieldSet
+} from "@ui-sdk/core/field";
+import {
+  checkFieldOutside,
+  fieldOutsideAttrs,
+  fieldOutsideErrorShown,
+  fieldOutsideState
+} from "@ui-sdk/core/renderer";
+import * as React from "react";
+import { FieldContext, ownDescription } from "./field-context.js";
+import {
+  extendHandle,
+  mergeProps,
+  renderElement,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { useFieldControl } from "./field-context.js";
+import { jsx } from "react/jsx-runtime";
+var DescribedContext = React.createContext(null);
+var outsideRefs = {
+  label: (el) => checkFieldOutside(
+    el,
+    "label",
+    "Put the control inside it, or point its `htmlFor` at the control."
+  ),
+  control: (el) => checkFieldOutside(el, "control")
+};
+function outside(slot, tag, { render, ...props }) {
+  const ref = outsideRefs[slot];
+  return renderElement(
+    tag,
+    mergeProps(fieldOutsideAttrs(slot), props, { ref }),
+    render,
+    fieldOutsideState
+  );
+}
+function InField({
+  field,
+  slot,
+  part,
+  props,
+  tag
+}) {
+  return usePart(field, slot, part, props, tag);
+}
+function Field({
+  name,
+  disabled,
+  invalid,
+  debug,
+  ...props
+}) {
+  const field = usePrimitive(fieldPrimitive, { name, disabled, invalid, debug });
+  const context = React.useMemo(
+    () => extendHandle(field, { name, disabled }),
+    [field, name, disabled]
+  );
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: context, children: /* @__PURE__ */ jsx(DescribedContext.Provider, { value: field, children: usePart(field, "root", {}, props, "div") }) });
+}
+function FieldLabel(props) {
+  const field = React.useContext(FieldContext);
+  if (!field) {
+    return outside("label", "label", props);
+  }
+  return /* @__PURE__ */ jsx(
+    InField,
+    {
+      field,
+      slot: "label",
+      part: { id: props.id },
+      props,
+      tag: "label"
+    }
+  );
+}
+function FieldDescription(props) {
+  const described = React.useContext(DescribedContext);
+  if (!described) {
+    return outside("description", "p", props);
+  }
+  const owner = described;
+  return /* @__PURE__ */ jsx(
+    InField,
+    {
+      field: owner,
+      slot: "description",
+      part: { id: props.id },
+      props,
+      tag: "p"
+    }
+  );
+}
+function FieldError({
+  match,
+  children = message,
+  ...props
+}) {
+  const field = React.useContext(FieldContext);
+  const made = React.useId();
+  if (!field) {
+    return fieldOutsideErrorShown({ match }) ? outside("error", "div", { ...props, children }) : null;
+  }
+  const id = props.id ?? (match === void 0 ? void 0 : made);
+  return /* @__PURE__ */ jsx(
+    InField,
+    {
+      field,
+      slot: "error",
+      part: { id, match },
+      props: { ...props, children },
+      tag: "div"
+    }
+  );
+}
+var message = (state) => state.message;
+function FieldControl({
+  name,
+  render,
+  ...rest
+}) {
+  const field = React.useContext(FieldContext);
+  if (!field) {
+    return outside("control", "input", { ...rest, name, render });
+  }
+  const [props, element] = ownDescription(rest, render);
+  const control = { id: props.id, describedBy: props["aria-describedby"] };
+  const user = { ...props, render: element, name: name ?? field.name };
+  return /* @__PURE__ */ jsx(
+    InField,
+    {
+      field,
+      slot: "control",
+      part: control,
+      props: user,
+      tag: "input"
+    }
+  );
+}
+function FieldSet({
+  disabled,
+  debug,
+  ...props
+}) {
+  const set = usePrimitive(fieldSet, { disabled, debug });
+  return /* @__PURE__ */ jsx(DescribedContext.Provider, { value: set, children: usePart(set, "set", {}, props, "fieldset") });
+}
+function FieldLegend(props) {
+  return usePart(fieldSet, "legend", { id: props.id }, props, "legend");
+}
+function FieldGroup(props) {
+  return usePart(usePrimitive(fieldGroup, {}), "group", {}, props, "div");
+}
+export {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  useFieldControl
+};

package/dist/file-input.d.ts

@@ -0,0 +1,46 @@
+import { type FileInputItemProps, type FileInputItemRemoveState, type FileInputItemState, type FileInputOptions, type FileInputState, type FileInputTriggerProps } from "@ui-sdk/core/file-input";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+type DivProps<State> = Omit<PartProps<"div", State>, "defaultValue" | "onChange" | "onSelect" | "onDrop">;
+type ButtonProps<State> = Omit<PartProps<"button", State>, "name" | "form" | "value" | "onSelect">;
+/**
+ * The root: it holds the files, and renders the hidden file input that opens
+ * the picker and that a form submits.
+ * @stable
+ */
+declare function FileInput({ value, defaultValue, onValueChange, onReject, accept, multiple, directory, capture, maxFiles, maxSize, minSize, validate, name, form, required, disabled, announcement, controller, debug, children, ...props }: FileInputOptions & DivProps<FileInputState>): React.JSX.Element | null;
+/**
+ * Opens the file picker. Inside a Field, the field's label names it with the
+ * button's own text. Outside the file input, it connects through `controller`.
+ * @stable
+ */
+declare function FileInputTrigger({ controller, render, ...props }: ButtonProps<FileInputState> & FileInputTriggerProps): React.JSX.Element;
+/**
+ * Takes dropped and pasted files. Put the trigger inside it, which is how
+ * keyboard and screen reader users choose files.
+ * @stable
+ */
+declare const FileInputDropzone: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/file-input").FileInputPrimitive, "dropzone", "div">;
+/**
+ * The files, as a list. Its children render once for each file, so put a
+ * FileInputItem in it.
+ * @stable
+ */
+declare function FileInputList({ children, ...props }: Omit<DivProps<FileInputState>, "children"> & {
+    children?: React.ReactNode;
+}): React.JSX.Element | null;
+/**
+ * One file. Its render state has the file, for its name, size and preview.
+ * Arrow keys move between items, and Backspace or Delete removes the focused one.
+ * @stable
+ */
+declare function FileInputItem({ file: own, ...props }: DivProps<FileInputItemState> & Partial<FileInputItemProps>): React.JSX.Element;
+/**
+ * Removes its item's file, or the `file` it's given. It's named "Remove <file
+ * name>" unless you name it.
+ * @stable
+ */
+declare function FileInputItemRemove({ file: own, ...props }: ButtonProps<FileInputItemRemoveState> & Partial<FileInputItemProps>): React.JSX.Element | null;
+export { createFileInputController, formatFileSize, relativePath, } from "@ui-sdk/core/file-input";
+export type { FileInputApi, FileInputChange, FileInputChangeOptions, FileInputController, FileInputDropzoneProps, FileInputDropzoneState, FileInputDropzoneTarget, FileInputItemProps, FileInputItemRemoveState, FileInputItemState, FileInputOptions, FileInputPasteTarget, FileInputPrimitive, FileInputState, FileInputTriggerProps, FileInputValueChangeDetails, FileInputValueChangeReason, FileLike, FileRejection, FileRejectionReason, FileRules, } from "@ui-sdk/core/file-input";
+export { FileInput, FileInputDropzone, FileInputItem, FileInputItemRemove, FileInputList, FileInputTrigger, };