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

package/dist/alert-dialog.d.ts

@@ -0,0 +1,56 @@
+import type { AlertDialogOptions, AlertDialogTriggerProps } from "@ui-sdk/core/dialog";
+import * as React from "react";
+import { type TriggerPartProps } from "./dialog-parts.js";
+/**
+ * The props of `AlertDialog`.
+ * @stable
+ */
+type AlertDialogProps = AlertDialogOptions & {
+    children?: React.ReactNode;
+};
+/**
+ * A modal dialog that interrupts the user with something important and waits for an answer, like "Delete this
+ * file?".
+ * @stable
+ */
+declare function AlertDialog(props: AlertDialogProps): React.JSX.Element;
+/**
+ * The button that opens the alert dialog. A trigger outside the alert dialog connects through `controller`.
+ * @stable
+ */
+declare function AlertDialogTrigger(props: TriggerPartProps & Pick<AlertDialogTriggerProps, "controller">): React.JSX.Element;
+/**
+ * A dim behind the alert dialog. Pressing it does nothing.
+ * @stable
+ */
+declare const AlertDialogBackdrop: (props: import("./use-primitive.js").PartProps<"div", import("@ui-sdk/core/dialog").DialogBackdropState>) => React.JSX.Element | null;
+/**
+ * The alert dialog itself, with the `alertdialog` role, named by its title. Put the title, the description
+ * and the buttons that answer it inside.
+ * @stable
+ */
+declare const AlertDialogContent: <Payload = unknown>({ initialFocus, finalFocus, keepMounted, container, render, ...props }: import("./dialog-parts.js").ContentPartProps<Payload>) => React.JSX.Element | null;
+/**
+ * The alert dialog's title, which names it. A level 2 heading by default.
+ * @stable
+ */
+declare const AlertDialogTitle: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/dialog").DialogPrimitive, "title", "h2">;
+/**
+ * Describes the alert dialog while it's rendered. A paragraph by default.
+ * @stable
+ */
+declare const AlertDialogDescription: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/dialog").DialogPrimitive, "description", "p">;
+/**
+ * A button that closes the alert dialog, like Cancel or Delete. An `action` runs first, and a Promise it
+ * returns keeps the alert dialog open until it settles.
+ * @stable
+ */
+declare const AlertDialogClose: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/dialog").DialogPrimitive, "close", "button">;
+/**
+ * Shows a trigger's shortcut inside the trigger.
+ * @stable
+ */
+declare const AlertDialogShortcut: (props: import("./dialog-parts.js").ShortcutPartProps) => React.JSX.Element | null;
+export { confirm, createAlertDialogController, createConfirm, } from "@ui-sdk/core/alert-dialog";
+export type { AlertDialogBackdropState, AlertDialogCloseActionDetails, AlertDialogCloseProps, AlertDialogCloseState, AlertDialogContentProps, AlertDialogContentState, AlertDialogController, AlertDialogOpenChangeReason, AlertDialogOptions, AlertDialogPayloadChangeReason, AlertDialogPrimitive, AlertDialogShortcutProps, AlertDialogShortcutState, AlertDialogTriggerProps, AlertDialogTriggerState, ConfirmEntry, ConfirmOptions, } from "@ui-sdk/core/alert-dialog";
+export { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent, AlertDialogDescription, type AlertDialogProps, AlertDialogShortcut, AlertDialogTitle, AlertDialogTrigger, };

package/dist/alert-dialog.js

@@ -0,0 +1,45 @@
+"use client";
+// src/alert-dialog.tsx
+import { alertDialog as alertDialogPrimitive } from "@ui-sdk/core/alert-dialog";
+import "react";
+import { dialogParts } from "./dialog-parts.js";
+import {
+  confirm,
+  createAlertDialogController,
+  createConfirm
+} from "@ui-sdk/core/alert-dialog";
+import { jsx } from "react/jsx-runtime";
+var alertParts = dialogParts(
+  alertDialogPrimitive,
+  "AlertDialog"
+);
+function AlertDialog(props) {
+  return /* @__PURE__ */ jsx(
+    alertParts.Root,
+    {
+      ...props
+    }
+  );
+}
+function AlertDialogTrigger(props) {
+  return /* @__PURE__ */ jsx(alertParts.Trigger, { ...props });
+}
+var AlertDialogBackdrop = alertParts.Backdrop;
+var AlertDialogContent = alertParts.Content;
+var AlertDialogTitle = alertParts.Title;
+var AlertDialogDescription = alertParts.Description;
+var AlertDialogClose = alertParts.Close;
+var AlertDialogShortcut = alertParts.Shortcut;
+export {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogShortcut,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  confirm,
+  createAlertDialogController,
+  createConfirm
+};

package/dist/async-options.d.ts

@@ -0,0 +1,22 @@
+import { type AsyncOptionsContext, type AsyncOptionsOptions } from "@ui-sdk/core/async-options";
+/**
+ * Options loaded for what the user types, latest first. Pass `items`, `status`
+ * and `setQuery` (as `onQueryChange`) to a combobox with `filter={false}`.
+ * @stable
+ */
+declare function useAsyncOptions<Item>(load: (query: string, context: AsyncOptionsContext) => Promise<Item[] | {
+    items: Item[];
+    hasMore?: boolean;
+}>, options?: AsyncOptionsOptions): {
+    setQuery: (next: string) => void;
+    reload: () => void;
+    loadMore: () => void;
+    status: import("@ui-sdk/core/async-options").AsyncOptionsStatus;
+    query: string;
+    items: Item[];
+    error: unknown;
+    hasMore: boolean;
+};
+export { createAsyncOptions } from "@ui-sdk/core/async-options";
+export type { AsyncOptions, AsyncOptionsContext, AsyncOptionsOptions, AsyncOptionsState, AsyncOptionsStatus, } from "@ui-sdk/core/async-options";
+export { useAsyncOptions };

package/dist/async-options.js

@@ -0,0 +1,56 @@
+"use client";
+// src/async-options.ts
+import {
+  createAsyncOptions
+} from "@ui-sdk/core/async-options";
+import * as React from "react";
+import { createAsyncOptions as createAsyncOptions2 } from "@ui-sdk/core/async-options";
+function useAsyncOptions(load, options) {
+  const latest = React.useRef(load);
+  React.useLayoutEffect(() => {
+    latest.current = load;
+  });
+  const [{ helper, immediate, initial }] = React.useState(() => {
+    const helper2 = createAsyncOptions(
+      (query, context) => latest.current(query, context),
+      {
+        ...options,
+        immediate: false
+      }
+    );
+    return {
+      helper: helper2,
+      immediate: !!options?.immediate,
+      initial: helper2.getState()
+    };
+  });
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    mounted.current = true;
+    const { status, items } = helper.getState();
+    if (immediate && status === "idle" && !items.length) {
+      helper.reload();
+    }
+    return () => {
+      mounted.current = false;
+      queueMicrotask(() => !mounted.current && helper.cancel());
+    };
+  }, [helper, immediate]);
+  const state = React.useSyncExternalStore(
+    helper.subscribe,
+    helper.getState,
+    helper.getState
+  );
+  return {
+    ...state,
+    // Until it starts, an immediate load shows as loading, so nothing says "no match" first.
+    ...immediate && state === initial && { status: "loading" },
+    setQuery: helper.setQuery,
+    reload: helper.reload,
+    loadMore: helper.loadMore
+  };
+}
+export {
+  createAsyncOptions2 as createAsyncOptions,
+  useAsyncOptions
+};

package/dist/autocomplete.d.ts

@@ -0,0 +1,102 @@
+import { type AutocompleteContentProps, type AutocompleteContentState, type AutocompleteEmptyState, type AutocompleteInputState, type AutocompleteItemProps, type AutocompleteItemState, type AutocompleteItemTextState, type AutocompleteOptions, type ListData } from "@ui-sdk/core/autocomplete";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+type Clashing = "value" | "defaultValue" | "onChange" | "onSelect" | "onSubmit";
+/**
+ * The props of `Autocomplete`.
+ * @stable
+ */
+type AutocompleteProps = AutocompleteOptions & {
+    children?: React.ReactNode;
+};
+/**
+ * A text field that suggests as you type. The text is the value. Renders no element of its own.
+ * @stable
+ */
+declare function Autocomplete({ children, container, ...options }: AutocompleteProps): React.JSX.Element;
+/**
+ * A visible label for the field.
+ * @stable
+ */
+declare const AutocompleteLabel: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "label", "label">;
+/**
+ * The text field. It's the form control, so the text submits under the autocomplete's `name`.
+ * @stable
+ */
+declare function AutocompleteInput({ render, ...props }: Omit<PartProps<"input", AutocompleteInputState>, "value" | "defaultValue" | "children" | "readOnly">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+/**
+ * A button that opens and closes the suggestions, out of the tab order.
+ * @stable
+ */
+declare const AutocompleteTrigger: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "trigger", "button">;
+/**
+ * A button that empties the field. Shown while there's text to clear. Name it with `aria-label`.
+ * @stable
+ */
+declare const AutocompleteClear: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "clear", "button">;
+/**
+ * The popup that holds the suggestions, positioned against the field.
+ * @stable
+ */
+declare function AutocompleteContent({ side, align, sideOffset, alignOffset, collisionPadding, arrowPadding, anchor, keepMounted, container, render, children, ...props }: PartProps<"div", AutocompleteContentState> & AutocompleteContentProps): React.JSX.Element | null;
+/**
+ * The listbox. Without children, it renders the autocomplete's `items`, filtered.
+ * @stable
+ */
+declare function AutocompleteList({ children, ...props }: PartProps<"div", AutocompleteContentState>): React.JSX.Element | null;
+/**
+ * A suggestion. Choosing it fills the field in with its text.
+ * @stable
+ */
+declare const AutocompleteItem: (props: Omit<PartProps<"div", AutocompleteItemState>, Clashing> & AutocompleteItemProps) => React.ReactNode;
+/**
+ * The suggestion's text, with the part the field's text matched in `<mark>`. Without string content, it shows the suggestion's label.
+ * @stable
+ */
+declare function AutocompleteItemText({ children, ...props }: PartProps<"span", AutocompleteItemTextState>): React.JSX.Element | null;
+/**
+ * An icon inside a suggestion. Screen readers, typeahead and filtering skip it, and `mirror` flips
+ * it in right-to-left text.
+ * @stable
+ */
+declare const AutocompleteItemIcon: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "item-icon", "span">;
+/**
+ * A group of items, named by its `AutocompleteGroupLabel`, and hidden while none of its items shows.
+ * @stable
+ */
+declare const AutocompleteGroup: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "group", "div">;
+/**
+ * The group's heading, which names the group.
+ * @stable
+ */
+declare const AutocompleteGroupLabel: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "group-label", "div">;
+/**
+ * A line between items or groups, hidden from screen readers.
+ * @stable
+ */
+declare const AutocompleteSeparator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "separator", "div">;
+/**
+ * Shown while no suggestion matches. Its message is announced when it appears.
+ * @stable
+ */
+declare function AutocompleteEmpty({ children, ...props }: PartProps<"div", AutocompleteEmptyState>): React.JSX.Element | null;
+/**
+ * A polite live region for loading and result counts. Its content is yours, usually a function of its state.
+ * @stable
+ */
+declare const AutocompleteStatus: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "status", "div">;
+/**
+ * An arrow on the popup's edge that points at the field.
+ * @stable
+ */
+declare const AutocompleteArrow: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/autocomplete").AutocompletePrimitive, "arrow", "div">;
+/**
+ * Renders data suggestions. Used by data autocompletes, and available for custom layouts.
+ * @stable
+ */
+declare function AutocompleteItems({ items }: {
+    items: ListData<string>;
+}): React.JSX.Element;
+export { createAutocompleteController } from "@ui-sdk/core/autocomplete";
+export type { AutocompleteApi, AutocompleteArrowState, AutocompleteChangeOptions, AutocompleteClearProps, AutocompleteClearState, AutocompleteContentProps, AutocompleteContentState, AutocompleteController, AutocompleteDismissReason, AutocompleteEmptyState, AutocompleteInputState, AutocompleteItemIconProps, AutocompleteItemIconState, AutocompleteItemProps, AutocompleteItemState, AutocompleteItemTextState, AutocompleteOpenChangeReason, AutocompleteOptions, AutocompletePrimitive, AutocompleteStatusState, AutocompleteSubmitDetails, AutocompleteTriggerState, AutocompleteValueChangeReason, ListAnnouncement, ListData, ListFilter, ListGroup, ListHighlightDetails, ListItem, ListSeparator, MatchSegment, SearchFilter, } from "@ui-sdk/core/autocomplete";
+export { Autocomplete, AutocompleteArrow, AutocompleteClear, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteItemIcon, AutocompleteItems, AutocompleteItemText, AutocompleteLabel, AutocompleteList, type AutocompleteProps, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, };

package/dist/autocomplete.js

@@ -0,0 +1,195 @@
+"use client";
+// src/autocomplete.tsx
+import {
+  autocomplete as autocompletePrimitive
+} from "@ui-sdk/core/autocomplete";
+import * as React from "react";
+import { hasChild, Placed, usePlaceContent, usePlacedContent } from "./children.js";
+import { controlRender, useFieldControl } from "./field-context.js";
+import { markSegments, textToMark } from "./list-text.js";
+import {
+  renderPopup,
+  SheetHeaderContext,
+  inSheetHeader,
+  sheetHeader,
+  sheetViewport,
+  useControllerEntry,
+  useOwnContainer,
+  usePopupContainer
+} from "./popup.js";
+import { ListItems } from "./list-items.js";
+import {
+  createParts,
+  HandleScope,
+  useAround,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createAutocompleteController } from "@ui-sdk/core/autocomplete";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var parts = createParts(autocompletePrimitive, {
+  label: "label",
+  trigger: "button",
+  clear: "button",
+  item: "div",
+  "item-icon": "span",
+  group: "div",
+  "group-label": "div",
+  separator: "div",
+  status: "div",
+  arrow: "div"
+});
+var ContainerContext = React.createContext(void 0);
+function useAutocomplete() {
+  return useHandle(autocompletePrimitive);
+}
+function Autocomplete({ children, container, ...options }) {
+  const field = useFieldControl();
+  const autocomplete = usePrimitive(autocompletePrimitive, {
+    ...options,
+    name: options.name ?? field?.name,
+    disabled: options.disabled || field?.disabled
+  });
+  useControllerEntry(options.controller, autocomplete);
+  const header = React.useState(null);
+  const found = hasChild(children, AutocompleteContent);
+  const [placed, place] = usePlacedContent(!!options.items && !found);
+  const own = placed || found;
+  return /* @__PURE__ */ jsx(HandleScope, { handle: autocomplete, children: /* @__PURE__ */ jsx(ContainerContext.Provider, { value: container, children: /* @__PURE__ */ jsxs(SheetHeaderContext.Provider, { value: header, children: [
+    /* @__PURE__ */ jsx(Placed, { value: place, children }),
+    /* @__PURE__ */ jsx(Placed, { value: null, children: options.items && !own && /* @__PURE__ */ jsx(AutocompleteContent, {}) })
+  ] }) }) });
+}
+var AutocompleteLabel = parts.Label;
+function AutocompleteInput({
+  render,
+  ...props
+}) {
+  const [header] = React.useContext(SheetHeaderContext);
+  const element = {
+    ...props,
+    render: controlRender(useFieldControl(props), "input", render)
+  };
+  const input = usePart(autocompletePrimitive, "input", {}, element, "input");
+  return input && inSheetHeader(input, header);
+}
+var AutocompleteTrigger = parts.Trigger;
+var AutocompleteClear = parts.Clear;
+function AutocompleteContent({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  arrowPadding,
+  anchor,
+  keepMounted,
+  container,
+  render,
+  children,
+  ...props
+}) {
+  usePlaceContent();
+  const autocomplete = useAutocomplete();
+  const target = usePopupContainer(useOwnContainer(container, ContainerContext));
+  const content = {
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    arrowPadding,
+    anchor,
+    keepMounted
+  };
+  const [, setHeader] = React.useContext(SheetHeaderContext);
+  const body = (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    sheetHeader(autocomplete, setHeader),
+    typeof children === "function" ? children(state) : children ?? (state.items && autocomplete.state.items && /* @__PURE__ */ jsx(AutocompleteList, {}))
+  ] });
+  const element = usePart(autocomplete, "content", content, {
+    ...props,
+    children: body,
+    render: sheetViewport(autocomplete, render)
+  });
+  return element && renderPopup(element, target);
+}
+function AutocompleteList({
+  children = listItems,
+  ...props
+}) {
+  return usePart(autocompletePrimitive, "list", {}, { ...props, children });
+}
+var listItems = (state) => /* @__PURE__ */ jsx(AutocompleteItems, { items: state.items });
+var AutocompleteItem = parts.Item;
+function AutocompleteItemText({
+  children,
+  ...props
+}) {
+  const item = useAround(autocompletePrimitive, "item");
+  if (!item) {
+    throw new Error(
+      "<AutocompleteItemText> must be used inside <AutocompleteItem>."
+    );
+  }
+  const part = {
+    id: item.value,
+    text: textToMark(children, item.label ?? item.value)
+  };
+  const content = typeof children === "function" ? children : (state) => markSegments(state.segments);
+  return usePart(
+    autocompletePrimitive,
+    "item-text",
+    part,
+    { ...props, children: content },
+    "span"
+  );
+}
+var AutocompleteItemIcon = parts.ItemIcon;
+var AutocompleteGroup = parts.Group;
+var AutocompleteGroupLabel = parts.GroupLabel;
+var AutocompleteSeparator = parts.Separator;
+function AutocompleteEmpty({
+  children,
+  ...props
+}) {
+  const content = (state) => typeof children === "function" ? children(state) : state.empty ? children : null;
+  return usePart(
+    autocompletePrimitive,
+    "empty",
+    {},
+    { ...props, children: content }
+  );
+}
+var AutocompleteStatus = parts.Status;
+var AutocompleteArrow = parts.Arrow;
+function AutocompleteItems({ items }) {
+  return /* @__PURE__ */ jsx(ListItems, { items, parts: listParts, keyOf: String });
+}
+var listParts = {
+  Item: AutocompleteItem,
+  Group: AutocompleteGroup,
+  GroupLabel: AutocompleteGroupLabel,
+  Separator: AutocompleteSeparator
+};
+export {
+  Autocomplete,
+  AutocompleteArrow,
+  AutocompleteClear,
+  AutocompleteContent,
+  AutocompleteEmpty,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteItemIcon,
+  AutocompleteItemText,
+  AutocompleteItems,
+  AutocompleteLabel,
+  AutocompleteList,
+  AutocompleteSeparator,
+  AutocompleteStatus,
+  AutocompleteTrigger,
+  createAutocompleteController
+};