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

package/dist/command.js

@@ -0,0 +1,233 @@
+"use client";
+// src/command.tsx
+import {
+  command as commandPrimitive
+} from "@ui-sdk/core/command";
+import * as React from "react";
+import { hasChild, Placed, usePlaceContent, usePlacedContent } from "./children.js";
+import { useControllerEntry } from "./controller-target.js";
+import { markSegments, textToMark } from "./list-text.js";
+import {
+  createParts,
+  useAround,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createCommandController } from "@ui-sdk/core/command";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var parts = createParts(commandPrimitive, {
+  input: "input",
+  "item-icon": "span",
+  group: "div",
+  "group-label": "div",
+  separator: "div",
+  status: "div"
+});
+var PageContext = React.createContext(void 0);
+var DataContext = React.createContext(false);
+function useCommand() {
+  return useHandle(commandPrimitive);
+}
+function Command({
+  value,
+  defaultValue,
+  onValueChange,
+  query,
+  defaultQuery,
+  onQueryChange,
+  pages,
+  defaultPages,
+  onPagesChange,
+  onAction,
+  pendingAnnouncement,
+  items,
+  emptyItems,
+  filter,
+  autoHighlight,
+  loop,
+  status,
+  onLoadMore,
+  announcement,
+  controller,
+  debug,
+  children,
+  ...props
+}) {
+  const command = usePrimitive(commandPrimitive, {
+    value,
+    defaultValue,
+    onValueChange,
+    query,
+    defaultQuery,
+    onQueryChange,
+    pages,
+    defaultPages,
+    onPagesChange,
+    onAction,
+    pendingAnnouncement,
+    items,
+    emptyItems,
+    filter,
+    autoHighlight,
+    loop,
+    status,
+    onLoadMore,
+    announcement,
+    controller,
+    debug
+  });
+  useControllerEntry(controller, command);
+  const found = typeof children !== "function" && hasChild(children, CommandList);
+  const [placed, place] = usePlacedContent(
+    typeof children !== "function" && !!items && !found
+  );
+  const own = placed || found;
+  const content = (state) => typeof children === "function" ? /* @__PURE__ */ jsx(Placed, { value: place, children: children(state) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Placed, { value: place, children }),
+    /* @__PURE__ */ jsx(Placed, { value: null, children: items && !own && /* @__PURE__ */ jsx(CommandList, {}) })
+  ] });
+  return usePart(command, "root", {}, { ...props, children: content });
+}
+var CommandInput = parts.Input;
+function CommandList({
+  children,
+  ...props
+}) {
+  usePlaceContent();
+  const command = useCommand();
+  const content = (state) => typeof children === "function" ? children(state) : children ?? (command.state.items ? /* @__PURE__ */ jsx(CommandItems, { items: state.items }) : null);
+  return usePart(command, "list", {}, { ...props, children: content });
+}
+function CommandItem({
+  value,
+  label,
+  keywords,
+  disabled,
+  shortcut,
+  page,
+  index,
+  onSelect,
+  render,
+  ...props
+}) {
+  const command = useCommand();
+  const generated = React.useId();
+  const group = useAround(commandPrimitive, "group")?.id;
+  const inPage = React.useContext(PageContext);
+  const data = React.useContext(DataContext);
+  const key = value ?? generated;
+  const item = {
+    id: key,
+    value: key,
+    label,
+    keywords,
+    disabled,
+    shortcut,
+    page,
+    index,
+    onSelect,
+    group,
+    inPage,
+    data
+  };
+  return usePart(command, "item", item, { ...props, render });
+}
+function CommandItemText({
+  children,
+  ...props
+}) {
+  const item = useAround(commandPrimitive, "item");
+  if (!item) {
+    throw new Error("<CommandItemText> must be used inside <CommandItem>.");
+  }
+  const label = item.label ?? item.value;
+  const part = { id: item.value, text: textToMark(children, label) };
+  const content = typeof children === "function" ? children : (state) => markSegments(state.segments);
+  return usePart(
+    commandPrimitive,
+    "item-text",
+    part,
+    { ...props, children: content },
+    "span"
+  );
+}
+var CommandItemIcon = parts.ItemIcon;
+function CommandShortcut({
+  shortcut,
+  children = text,
+  ...props
+}) {
+  const inherited = useAround(commandPrimitive, "item")?.shortcut;
+  return usePart(
+    commandPrimitive,
+    "shortcut",
+    { shortcut: shortcut ?? inherited },
+    { ...props, children },
+    "span"
+  );
+}
+var text = (state) => state.text;
+function CommandPage({
+  value,
+  children
+}) {
+  const page = () => /* @__PURE__ */ jsx(PageContext.Provider, { value: value ?? null, children });
+  return usePart(commandPrimitive, "page", { value }, { render: page });
+}
+var CommandGroup = parts.Group;
+var CommandGroupLabel = parts.GroupLabel;
+var CommandSeparator = parts.Separator;
+function CommandEmpty({
+  children,
+  ...props
+}) {
+  const content = (state) => typeof children === "function" ? children(state) : state.empty ? children : null;
+  return usePart(commandPrimitive, "empty", {}, { ...props, children: content });
+}
+var CommandStatus = parts.Status;
+function CommandItems({ items }) {
+  return /* @__PURE__ */ jsx(DataContext.Provider, { value: true, children: items.map((entry, index) => {
+    if (typeof entry === "string") {
+      return /* @__PURE__ */ jsx(CommandItem, { value: entry, children: entry }, entry);
+    }
+    if ("type" in entry && entry.type === "separator") {
+      return /* @__PURE__ */ jsx(CommandSeparator, {}, `separator-${index}`);
+    }
+    if ("type" in entry && entry.type === "group") {
+      return /* @__PURE__ */ jsxs(CommandGroup, { children: [
+        entry.label && /* @__PURE__ */ jsx(CommandGroupLabel, { children: entry.label }),
+        /* @__PURE__ */ jsx(CommandItems, { items: entry.items })
+      ] }, `group-${entry.label ?? index}`);
+    }
+    return /* @__PURE__ */ jsx(
+      CommandItem,
+      {
+        value: entry.value,
+        label: entry.label,
+        keywords: entry.keywords,
+        disabled: entry.disabled,
+        shortcut: entry.shortcut,
+        children: entry.label
+      },
+      entry.value
+    );
+  }) });
+}
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandGroupLabel,
+  CommandInput,
+  CommandItem,
+  CommandItemIcon,
+  CommandItemText,
+  CommandItems,
+  CommandList,
+  CommandPage,
+  CommandSeparator,
+  CommandShortcut,
+  CommandStatus,
+  createCommandController
+};

package/dist/controller-target.d.ts

@@ -0,0 +1,3 @@
+declare function useControllerTarget<T>(controller: object | undefined, nearest: T | undefined): T | undefined;
+declare function useControllerEntry(controller: object | undefined, value: unknown): void;
+export { useControllerEntry, useControllerTarget };

package/dist/controller-target.js

@@ -0,0 +1,59 @@
+"use client";
+// src/controller-target.ts
+import * as React from "react";
+var controlled = /* @__PURE__ */ new WeakMap();
+function controlledEntry(controller) {
+  let entry = controlled.get(controller);
+  if (!entry) {
+    controlled.set(
+      controller,
+      entry = { value: void 0, listeners: /* @__PURE__ */ new Set() }
+    );
+  }
+  return entry;
+}
+var noController = () => () => {
+};
+function useControllerTarget(controller, nearest) {
+  const subscribe = React.useCallback(
+    (listener) => {
+      if (!controller) {
+        return () => {
+        };
+      }
+      const { listeners } = controlledEntry(controller);
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    [controller]
+  );
+  const read = () => controller ? controlled.get(controller)?.value : void 0;
+  return React.useSyncExternalStore(
+    controller ? subscribe : noController,
+    read,
+    () => void 0
+  ) ?? nearest;
+}
+function useControllerEntry(controller, value) {
+  React.useLayoutEffect(() => {
+    if (!controller) {
+      return;
+    }
+    const entry = controlledEntry(controller);
+    entry.value = value;
+    entry.listeners.forEach((listener) => listener());
+    return () => {
+      if (entry.value !== value) {
+        return;
+      }
+      entry.value = void 0;
+      entry.listeners.forEach((listener) => listener());
+    };
+  }, [controller, value]);
+}
+export {
+  useControllerEntry,
+  useControllerTarget
+};

package/dist/date-input.d.ts

@@ -0,0 +1,19 @@
+import { type DateInputOptions } from "@ui-sdk/core/date-input";
+import { type RootProps, type SegmentProps } from "./segmented-input.js";
+/**
+ * The root: a group of segments the locale orders, like month, day and year,
+ * and the hidden input the ISO value submits with. Without children it renders
+ * every segment; its children can be a function of its state that renders
+ * `state.segments`.
+ * @stable
+ */
+declare function DateInput({ value, defaultValue, onValueChange, granularity, hourCycle, min, max, unavailable, locale, disabled, readOnly, required, name, form, controller, debug, ...props }: DateInputOptions & RootProps): import("react").JSX.Element | null;
+/**
+ * A segment, like the month: an input arrow keys step and digits fill, named
+ * by its unit. The text between segments renders as a span.
+ * @stable
+ */
+declare function DateInputSegment(props: SegmentProps): import("react").JSX.Element | null;
+export { createDateInputController } from "@ui-sdk/core/date-input";
+export type { DateInputApi, DateInputChangeOptions, DateInputController, DateInputGranularity, DateInputOptions, DateInputPrimitive, DateInputSegmentData, DateInputSegmentProps, DateInputSegmentState, DateInputSegmentType, DateInputState, DateInputValueChangeReason, DateMatcher, DateMatchers, HourCycle, } from "@ui-sdk/core/date-input";
+export { DateInput, DateInputSegment };

package/dist/date-input.js

@@ -0,0 +1,58 @@
+"use client";
+// src/date-input.tsx
+import { dateInput } from "@ui-sdk/core/date-input";
+import { useFieldControl } from "./field-context.js";
+import {
+  useSegmentedRoot,
+  useSegment
+} from "./segmented-input.js";
+import { usePrimitive } from "./use-primitive.js";
+import { createDateInputController } from "@ui-sdk/core/date-input";
+function DateInput({
+  value,
+  defaultValue,
+  onValueChange,
+  granularity,
+  hourCycle,
+  min,
+  max,
+  unavailable,
+  locale,
+  disabled,
+  readOnly,
+  required,
+  name,
+  form,
+  controller,
+  debug,
+  ...props
+}) {
+  const field = useFieldControl();
+  const instance = usePrimitive(dateInput, {
+    value,
+    defaultValue,
+    onValueChange,
+    granularity,
+    hourCycle,
+    min,
+    max,
+    unavailable,
+    locale,
+    disabled: disabled || field?.disabled,
+    readOnly,
+    required,
+    name: name ?? field?.name,
+    form,
+    controller,
+    debug
+  });
+  return useSegmentedRoot(dateInput, instance, field, props, DateInputSegment);
+}
+function DateInputSegment(props) {
+  return useSegment(dateInput, props);
+}
+export {
+  DateInput,
+  DateInputSegment,
+  createDateInputController
+};

package/dist/date-picker.d.ts

@@ -0,0 +1,47 @@
+import { type DatePickerContentProps, type DatePickerContentState, type DatePickerHintState, type DatePickerInputProps, type DatePickerInputState, type DatePickerOptions, type DatePickerPresetState, type DatePickerState, type DatePickerTriggerState, type DatePickerValue } from "@ui-sdk/core/date-picker";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * The root, and the hidden inputs that submit ISO dates. Without children it
+ * renders an input, or two in range mode, the trigger and the popup.
+ * @stable
+ */
+declare function DatePicker({ mode, value, defaultValue, onValueChange, month, defaultMonth, onMonthChange, open, defaultOpen, onOpenChange, onOpenChangeComplete, closeOnSelect, presentation, dismissible, onDismissAttempt, min, max, unavailable, disabled, readOnly, months, pageBy, locale, weekStartsOn, weekdayFormat, monthFormat, fixedWeeks, showOutsideDays, today, timeZone, minDays, maxDays, allowUnavailable, name, startName, endName, form, required, container, controller, debug, children, ...props }: DatePickerOptions & Omit<PartProps<"div", DatePickerState>, "defaultValue" | "onChange">): React.JSX.Element;
+/**
+ * A text input that reads a date typed in the page's language on Enter or
+ * blur. `end` makes it a range's end.
+ * @stable
+ */
+declare function DatePickerInput({ end, render, ...props }: Omit<PartProps<"input", DatePickerInputState>, "value" | "defaultValue" | "children" | "readOnly"> & DatePickerInputProps): React.JSX.Element | null;
+/**
+ * Opens the calendar. Named "Choose date" and the date chosen; pass `aria-label` in another language.
+ * @stable
+ */
+declare function DatePickerTrigger({ children, ...props }: Omit<PartProps<"button", DatePickerTriggerState>, "value" | "defaultValue" | "onChange">): React.JSX.Element | null;
+/**
+ * The popup. Without children it renders Previous, the heading, Next and a
+ * grid for each month; every Calendar part works inside it.
+ * @stable
+ */
+declare function DatePickerContent({ side, align, sideOffset, alignOffset, collisionPadding, arrowPadding, anchor, finalFocus, keepMounted, container, render, children, ...props }: PartProps<"div", DatePickerContentState> & DatePickerContentProps): React.JSX.Element | null;
+/**
+ * The format to type, like "MM/DD/YYYY". The inputs are described by it.
+ * @stable
+ */
+declare function DatePickerHint({ children, ...props }: PartProps<"span", DatePickerHintState>): React.JSX.Element | null;
+/**
+ * Clears the value and focuses the input.
+ * @stable
+ */
+declare const DatePickerClear: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/date-picker").DatePickerPrimitive, "clear", "button">;
+/**
+ * Selects the value it holds, like the last 7 days.
+ * @stable
+ */
+declare function DatePickerPreset({ value, ...props }: Omit<PartProps<"button", DatePickerPresetState>, "value" | "defaultValue" | "onChange"> & {
+    value: DatePickerValue;
+}): React.JSX.Element | null;
+export { CalendarDay, CalendarGrid, CalendarHeading, CalendarMonthSelect, CalendarNext, CalendarPrevious, CalendarWeekday, CalendarWeekdays, CalendarWeeks, CalendarYearSelect, } from "./calendar.js";
+export { createDatePickerController } from "@ui-sdk/core/date-picker";
+export type { CalendarDayState, CalendarGridCell, CalendarGridState, CalendarHeadingState, CalendarSelectOption, CalendarSelectState, CalendarStepState, CalendarWeekdayState, DateMatcher, DateMatchers, DatePickerApi, DatePickerChangeOptions, DatePickerClearState, DatePickerContentProps, DatePickerContentState, DatePickerController, DatePickerDismissReason, DatePickerHintState, DatePickerInputProps, DatePickerInputState, DatePickerMode, DatePickerMonthChangeReason, DatePickerOpenChangeReason, DatePickerOptions, DatePickerPresetProps, DatePickerPresetState, DatePickerPrimitive, DatePickerState, DatePickerTriggerState, DatePickerValue, DatePickerValueChangeReason, ISOMonth, } from "@ui-sdk/core/date-picker";
+export { DatePicker, DatePickerClear, DatePickerContent, DatePickerHint, DatePickerInput, DatePickerPreset, DatePickerTrigger, };