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

package/dist/number-input.js

@@ -0,0 +1,185 @@
+"use client";
+// src/number-input.tsx
+import {
+  numberInput as numberInputPrimitive
+} from "@ui-sdk/core/number-input";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useControllerEntry, useControllerTarget } from "./controller-target.js";
+import {
+  ownDescription,
+  useFieldControl,
+  useFieldControlId
+} from "./field-context.js";
+import {
+  createParts,
+  extendHandle,
+  renderElement,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createNumberInputController } from "@ui-sdk/core/number-input";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var parts = createParts(numberInputPrimitive, {
+  group: "div",
+  increment: "button",
+  decrement: "button"
+});
+var NumberInputContext = React.createContext(
+  null
+);
+function useNumberInput(part) {
+  const context = React.useContext(NumberInputContext);
+  if (!context) {
+    throw new Error(`${part} must be used inside <NumberInput>.`);
+  }
+  return context;
+}
+function NumberInput({
+  value,
+  defaultValue,
+  onValueChange,
+  onValueCommit,
+  min,
+  max,
+  step,
+  largeStep,
+  smallStep,
+  format,
+  locale,
+  wheel,
+  disabled,
+  readOnly,
+  required,
+  name,
+  form,
+  controller,
+  debug,
+  children,
+  ...props
+}) {
+  const field = useFieldControl();
+  const controlId = useFieldControlId();
+  const numberInput = usePrimitive(numberInputPrimitive, {
+    value,
+    defaultValue,
+    onValueChange,
+    onValueCommit,
+    min,
+    max,
+    step,
+    largeStep,
+    smallStep,
+    format,
+    locale,
+    wheel,
+    disabled: disabled || field?.disabled,
+    readOnly,
+    required,
+    name: name ?? field?.name,
+    form,
+    controller,
+    debug,
+    controlId
+  });
+  const context = React.useMemo(
+    () => extendHandle(numberInput, { field }),
+    [numberInput, field]
+  );
+  useControllerEntry(controller, context);
+  const content = (current) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    typeof children === "function" ? children(current) : children,
+    /* @__PURE__ */ jsx(HiddenInput, {})
+  ] });
+  return /* @__PURE__ */ jsx(NumberInputContext.Provider, { value: context, children: usePart(numberInput, "root", {}, { ...props, children: content }) });
+}
+function HiddenInput() {
+  return usePart(numberInputPrimitive, "hidden-input", {}, {}, "input");
+}
+var NumberInputGroup = parts.Group;
+function NumberInputControl({
+  render,
+  ...props
+}) {
+  const numberInput = useNumberInput("NumberInputControl");
+  const control = (input, state) => {
+    const { field } = numberInput;
+    const [own, element] = field ? ownDescription(input, render) : [input, render];
+    const { value, ...rest } = field ? field.props(own) : own;
+    return renderElement(
+      "input",
+      { ...rest, defaultValue: value },
+      element,
+      state
+    );
+  };
+  return usePart(
+    numberInput,
+    "control",
+    {},
+    { ...props, render: control },
+    "input"
+  );
+}
+var NumberInputIncrement = parts.Increment;
+var NumberInputDecrement = parts.Decrement;
+var unconnected = {
+  value: null,
+  disabled: false,
+  readOnly: false,
+  required: false,
+  scrubbing: false
+};
+function NumberInputScrubArea({
+  orientation,
+  pixelsPerStep,
+  controller,
+  render,
+  ...props
+}) {
+  const numberInput = useControllerTarget(
+    controller,
+    React.useContext(NumberInputContext)
+  );
+  if (!numberInput) {
+    return renderElement("span", props, render, unconnected);
+  }
+  return /* @__PURE__ */ jsx(NumberInputContext.Provider, { value: numberInput, children: /* @__PURE__ */ jsx(
+    ScrubAreaPart,
+    {
+      numberInput,
+      scrub: { orientation, pixelsPerStep },
+      props,
+      render
+    }
+  ) });
+}
+function ScrubAreaPart({
+  numberInput,
+  scrub,
+  props,
+  render
+}) {
+  return usePart(numberInput, "scrub-area", scrub, { ...props, render }, "span");
+}
+function NumberInputScrubAreaCursor(props) {
+  const numberInput = React.useContext(NumberInputContext);
+  return numberInput ? /* @__PURE__ */ jsx(CursorPart, { numberInput, ...props }) : null;
+}
+function CursorPart({
+  numberInput,
+  ...props
+}) {
+  const cursor = usePart(numberInput, "scrub-area-cursor", {}, props, "span");
+  return cursor && createPortal(cursor, document.body);
+}
+export {
+  NumberInput,
+  NumberInputControl,
+  NumberInputDecrement,
+  NumberInputGroup,
+  NumberInputIncrement,
+  NumberInputScrubArea,
+  NumberInputScrubAreaCursor,
+  createNumberInputController
+};

package/dist/number.d.ts

@@ -0,0 +1,2 @@
+export { clamp, decimalsOf, formatNumber, formatNumberRange, formatNumberToParts, fractionOf, isPartialNumber, maxOnGrid, numberFormatter, parseNumber, roundTo, scrubTo, stepBy, stepFromKey, stepValue, valueAt, wrap, } from "@ui-sdk/core/number";
+export type { NumberFormat, NumberKeyOptions, NumberMove, NumberRange, NumberScale, NumberScrub, NumberSnap, StepRange, } from "@ui-sdk/core/number";

package/dist/number.js

@@ -0,0 +1,40 @@
+"use client";
+// src/number.ts
+import {
+  clamp,
+  decimalsOf,
+  formatNumber,
+  formatNumberRange,
+  formatNumberToParts,
+  fractionOf,
+  isPartialNumber,
+  maxOnGrid,
+  numberFormatter,
+  parseNumber,
+  roundTo,
+  scrubTo,
+  stepBy,
+  stepFromKey,
+  stepValue,
+  valueAt,
+  wrap
+} from "@ui-sdk/core/number";
+export {
+  clamp,
+  decimalsOf,
+  formatNumber,
+  formatNumberRange,
+  formatNumberToParts,
+  fractionOf,
+  isPartialNumber,
+  maxOnGrid,
+  numberFormatter,
+  parseNumber,
+  roundTo,
+  scrubTo,
+  stepBy,
+  stepFromKey,
+  stepValue,
+  valueAt,
+  wrap
+};

package/dist/observe.d.ts

@@ -0,0 +1,2 @@
+export { elementOf, observe, withSource } from "@ui-sdk/core/observe";
+export type { ObservedChange } from "@ui-sdk/core/observe";

package/dist/observe.js

@@ -0,0 +1,8 @@
+"use client";
+// src/observe.ts
+import { elementOf, observe, withSource } from "@ui-sdk/core/observe";
+export {
+  elementOf,
+  observe,
+  withSource
+};

package/dist/otp-input.d.ts

@@ -0,0 +1,29 @@
+import { type OTPInputOptions, type OTPInputSlotProps, type OTPInputSlotState, type OTPInputState } from "@ui-sdk/core/otp-input";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+type DivProps<State> = Omit<PartProps<"div", State>, "defaultValue" | "onChange" | "onSelect">;
+type InputProps = Pick<React.ComponentProps<"input">, "id" | "autoFocus" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid">;
+/**
+ * The root: the slots, and the one real input over them. `id`, `autoFocus`
+ * and the `aria-*` naming props go to that input.
+ * @stable
+ */
+declare function OTPInput({ disabled, name, id, autoFocus, "aria-label": label, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, children, ...props }: OTPInputOptions & InputProps & DivProps<OTPInputState>): React.JSX.Element;
+/**
+ * Lays out a run of slots.
+ * @stable
+ */
+declare const OTPInputGroup: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/otp-input").OtpInputPrimitive, "group", "div">;
+/**
+ * One character of the code. Without children, it shows the character.
+ * @stable
+ */
+declare function OTPInputSlot({ index, children, ...props }: OTPInputSlotProps & DivProps<OTPInputSlotState>): React.JSX.Element | null;
+/**
+ * Drawn between groups, like a dash.
+ * @stable
+ */
+declare const OTPInputSeparator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/otp-input").OtpInputPrimitive, "separator", "div">;
+export { createOTPInputController } from "@ui-sdk/core/otp-input";
+export type { OTPInputApi, OTPInputChangeOptions, OTPInputController, OTPInputOptions, OTPInputPattern, OTPInputSlotData, OTPInputSlotProps, OTPInputSlotState, OTPInputState, OTPInputValueChangeReason, OtpInputPrimitive, } from "@ui-sdk/core/otp-input";
+export { OTPInput, OTPInputGroup, OTPInputSeparator, OTPInputSlot };

package/dist/otp-input.js

@@ -0,0 +1,94 @@
+"use client";
+// src/otp-input.tsx
+import {
+  otpInput
+} from "@ui-sdk/core/otp-input";
+import * as React from "react";
+import { useFieldControl } from "./field-context.js";
+import {
+  createParts,
+  slotIn,
+  useHandle,
+  usePart
+} from "./use-primitive.js";
+import { createOTPInputController } from "@ui-sdk/core/otp-input";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var parts = createParts(otpInput, {
+  root: "div",
+  group: "div",
+  separator: "div"
+});
+function withInput(children, input) {
+  return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    typeof children === "function" ? children(state) : children,
+    input
+  ] });
+}
+function OTPInputControl(props) {
+  const otp = useHandle(otpInput);
+  const field = useFieldControl();
+  const [initial] = React.useState(
+    () => slotIn(otp, "control").value
+  );
+  const render = (control) => {
+    const { value: _, ...input } = field ? field.props(control) : control;
+    return /* @__PURE__ */ jsx("input", { ...input, defaultValue: initial });
+  };
+  return usePart(otp, "control", {}, { ...props, render }, "input");
+}
+function OTPInput({
+  disabled,
+  name,
+  id,
+  autoFocus,
+  "aria-label": label,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  children,
+  ...props
+}) {
+  const field = useFieldControl();
+  const input = /* @__PURE__ */ jsx(
+    OTPInputControl,
+    {
+      id,
+      autoFocus,
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      "aria-invalid": invalid
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    parts.Root,
+    {
+      ...props,
+      disabled: disabled || field?.disabled,
+      name: name ?? field?.name,
+      children: withInput(children, input)
+    }
+  );
+}
+var OTPInputGroup = parts.Group;
+var char = (state) => state.char;
+function OTPInputSlot({
+  index,
+  children = char,
+  ...props
+}) {
+  return usePart(
+    otpInput,
+    "slot",
+    { index, id: String(index) },
+    { ...props, children }
+  );
+}
+var OTPInputSeparator = parts.Separator;
+export {
+  OTPInput,
+  OTPInputGroup,
+  OTPInputSeparator,
+  OTPInputSlot,
+  createOTPInputController
+};

package/dist/overlays.d.ts

@@ -0,0 +1,26 @@
+import { type Overlays } from "@ui-sdk/core/overlays";
+import * as React from "react";
+import { type ToastRegionProps } from "./toast-parts.js";
+/**
+ * Props for `OverlayHost`.
+ * @stable
+ */
+type OverlayHostProps = {
+    /**
+     * The registry it renders.
+     * @defaultValue the shared `overlays`, which `toast()` and `confirm()` open into
+     */
+    overlays?: Overlays;
+    /** Props for the toast regions it renders, like `side`, `className` and `children`. */
+    toast?: Omit<ToastRegionProps, "toaster">;
+};
+/**
+ * Renders what `toast()` and `confirm()` open, from anywhere in the app.
+ * Mount it once, near the root. A `ToastRegion` you place yourself takes over
+ * its toaster.
+ * @stable
+ */
+declare function OverlayHost({ overlays, toast }: OverlayHostProps): (React.JSX.Element | null)[];
+export { createOverlays, overlays } from "@ui-sdk/core/overlays";
+export type { OverlayEntry, Overlays } from "@ui-sdk/core/overlays";
+export { OverlayHost, type OverlayHostProps };

package/dist/overlays.js

@@ -0,0 +1,82 @@
+"use client";
+// src/overlays.tsx
+import {
+  overlays as sharedOverlays
+} from "@ui-sdk/core/overlays";
+import { toasterInternals } from "@ui-sdk/core/renderer";
+import * as React from "react";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle
+} from "./alert-dialog.js";
+import { Region } from "./toast-parts.js";
+import { createOverlays, overlays } from "@ui-sdk/core/overlays";
+import { jsx, jsxs } from "react/jsx-runtime";
+var noEntries = [];
+function OverlayHost({ overlays: overlays2 = sharedOverlays, toast }) {
+  const entries = React.useSyncExternalStore(
+    overlays2.subscribe,
+    overlays2.entries,
+    () => noEntries
+  );
+  React.useLayoutEffect(() => overlays2.attachHost(), [overlays2]);
+  return entries.map((entry) => {
+    if (entry.type === "toaster") {
+      return /* @__PURE__ */ jsx(
+        HostedToaster,
+        {
+          ...entry.data,
+          props: toast
+        },
+        entry.id
+      );
+    }
+    if (entry.type === "confirm") {
+      return /* @__PURE__ */ jsx(HostedConfirm, { entry: entry.data }, entry.id);
+    }
+    return null;
+  });
+}
+function HostedToaster({
+  toaster,
+  props
+}) {
+  const placed = React.useSyncExternalStore(
+    toaster.subscribe,
+    () => toasterInternals(toaster).hasPlacedRegion(),
+    () => false
+  );
+  if (placed) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Region, { ...props, toaster, placed: false });
+}
+function HostedConfirm({ entry }) {
+  React.useEffect(() => {
+    entry.open();
+  }, [entry]);
+  const question = entry.payload ?? {};
+  return /* @__PURE__ */ jsx(
+    AlertDialog,
+    {
+      controller: entry.controller,
+      onOpenChangeComplete: (open) => !open && entry.done(),
+      children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: question.title }),
+        question.description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: question.description }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(AlertDialogClose, { children: question.cancelLabel ?? "Cancel" }),
+          /* @__PURE__ */ jsx(AlertDialogClose, { value: "confirm", children: question.confirmLabel ?? "Continue" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  OverlayHost,
+  createOverlays,
+  overlays
+};