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

package/dist/scroll-area.d.ts

@@ -0,0 +1,324 @@
+import { type ScrollAreaScrollbarProps, type ScrollAreaScrollbarState, type ScrollAreaThumbState } from "@ui-sdk/core/scroll-area";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * Groups the parts. The scrollbars are placed against it.
+ * @stable
+ */
+declare const ScrollArea: (props: import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps & {
+    slot?: string | undefined | undefined;
+    style?: React.CSSProperties | ((state: NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaState>) => React.CSSProperties | undefined) | undefined;
+    title?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    role?: React.AriaRole | undefined;
+    key?: React.Key | null | undefined;
+    nonce?: string | undefined | undefined;
+    render?: import("./render-element.js").RenderProp<NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaState>> | undefined;
+    property?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    color?: string | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    lang?: string | undefined | undefined;
+    children?: React.ReactNode | ((state: NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaState>) => React.ReactNode);
+    onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    content?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    results?: number | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    className?: string | ((state: NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaState>) => string | undefined) | undefined;
+    prefix?: string | undefined | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    tabIndex?: number | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEnd?: React.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEndCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onToggle?: React.ToggleEventHandler<HTMLDivElement> | undefined;
+    onBeforeToggle?: React.ToggleEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancel?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancelCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRun?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRunCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStart?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStartCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contextMenu?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+}) => React.ReactElement | null;
+/**
+ * The native scroller. Keyboard, wheel, touch, find in page and screen readers scroll it.
+ * @stable
+ */
+declare const ScrollAreaViewport: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive, "viewport", "div">;
+/**
+ * Wraps the content inside the viewport.
+ * @stable
+ */
+declare const ScrollAreaContent: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive, "content", "div">;
+/**
+ * A scrollbar for one axis, over the viewport's edge.
+ * @stable
+ */
+declare function ScrollAreaScrollbar({ orientation, ...props }: ScrollAreaScrollbarProps & PartProps<"div", ScrollAreaScrollbarState>): React.JSX.Element;
+/**
+ * The part of the scrollbar that shows where the view is, and drags.
+ * @stable
+ */
+declare function ScrollAreaThumb(props: PartProps<"div", ScrollAreaThumbState>): React.JSX.Element | null;
+/**
+ * Where the two scrollbars meet.
+ * @stable
+ */
+declare const ScrollAreaCorner: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive, "corner", "div">;
+/**
+ * A button that scrolls to the end, like "Jump to latest". Name it with its content.
+ * @stable
+ */
+declare const ScrollAreaScrollToEnd: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive, "scroll-to-end", "button">;
+export { createScrollAreaController } from "@ui-sdk/core/scroll-area";
+export type { ScrollAreaController, ScrollAreaOptions, ScrollAreaPrimitive, ScrollAreaScrollOptions, ScrollAreaScrollToEndState, ScrollAreaScrollbarProps, ScrollAreaScrollbarState, ScrollAreaState, ScrollAreaThumbState, ScrollAreaType, } from "@ui-sdk/core/scroll-area";
+export { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaScrollToEnd, ScrollAreaThumb, ScrollAreaViewport, };

package/dist/scroll-area.js

@@ -0,0 +1,49 @@
+"use client";
+// src/scroll-area.tsx
+import {
+  scrollArea
+} from "@ui-sdk/core/scroll-area";
+import * as React from "react";
+import { createParts, usePart } from "./use-primitive.js";
+import { createScrollAreaController } from "@ui-sdk/core/scroll-area";
+import { jsx } from "react/jsx-runtime";
+var parts = createParts(scrollArea, {
+  root: "div",
+  viewport: "div",
+  content: "div",
+  corner: "div",
+  "scroll-to-end": "button"
+});
+var OrientationContext = React.createContext(
+  "vertical"
+);
+var ScrollArea = parts.Root;
+var ScrollAreaViewport = parts.Viewport;
+var ScrollAreaContent = parts.Content;
+function ScrollAreaScrollbar({
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(OrientationContext.Provider, { value: orientation, children: usePart(
+    scrollArea,
+    "scrollbar",
+    { id: orientation, orientation },
+    props
+  ) });
+}
+function ScrollAreaThumb(props) {
+  const orientation = React.useContext(OrientationContext);
+  return usePart(scrollArea, "thumb", { id: orientation, orientation }, props);
+}
+var ScrollAreaCorner = parts.Corner;
+var ScrollAreaScrollToEnd = parts.ScrollToEnd;
+export {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaCorner,
+  ScrollAreaScrollToEnd,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+  createScrollAreaController
+};

package/dist/segmented-control.d.ts

@@ -0,0 +1,24 @@
+import { type SegmentedControlItemProps, type SegmentedControlItemState, type SegmentedControlOptions, type SegmentedControlState } from "@ui-sdk/core/segmented-control";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * A row of options where exactly one is on, like a radio group drawn as
+ * buttons, with an indicator that slides to the checked item.
+ * `T` is inferred from `value`, `defaultValue` or `onValueChange`.
+ * @experimental
+ */
+declare function SegmentedControl<T extends string = string>({ value, defaultValue, onValueChange, disabled, readOnly, required, name, form, loop, orientation, controller, debug, render, ...props }: SegmentedControlOptions<T> & Omit<PartProps<"div", SegmentedControlState>, "defaultValue" | "onChange" | "onSelect">): React.JSX.Element | null;
+/**
+ * One option, and the hidden native radio that takes part in the form.
+ * @experimental
+ */
+declare function SegmentedControlItem({ value, disabled, render, ...props }: Omit<PartProps<"button", SegmentedControlItemState>, "value" | "onSelect"> & SegmentedControlItemProps): React.JSX.Element | null;
+/**
+ * Sits behind the checked item. Its box comes from the
+ * `--segmented-control-indicator-*` variables, measured from the root.
+ * @experimental
+ */
+declare const SegmentedControlIndicator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/segmented-control").SegmentedControlPrimitive, "indicator", "span">;
+export { createSegmentedControlController } from "@ui-sdk/core/segmented-control";
+export type { SegmentedControlApi, SegmentedControlChangeOptions, SegmentedControlController, SegmentedControlIndicatorState, SegmentedControlItemProps, SegmentedControlItemState, SegmentedControlOptions, SegmentedControlOrientation, SegmentedControlPrimitive, SegmentedControlState, SegmentedControlValueChangeReason, } from "@ui-sdk/core/segmented-control";
+export { SegmentedControl, SegmentedControlIndicator, SegmentedControlItem };

package/dist/segmented-control.js

@@ -0,0 +1,78 @@
+"use client";
+// src/segmented-control.tsx
+import {
+  segmentedControl
+} from "@ui-sdk/core/segmented-control";
+import * as React from "react";
+import { controlRender, FieldContext, useJoinField } from "./field-context.js";
+import {
+  createParts,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createSegmentedControlController } from "@ui-sdk/core/segmented-control";
+import { jsx } from "react/jsx-runtime";
+var parts = createParts(segmentedControl, { indicator: "span" });
+function SegmentedControl({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  readOnly,
+  required,
+  name,
+  form,
+  loop,
+  orientation,
+  controller,
+  debug,
+  render,
+  ...props
+}) {
+  const field = useJoinField(React.useContext(FieldContext));
+  const control = usePrimitive(segmentedControl, {
+    value,
+    defaultValue,
+    onValueChange,
+    disabled: disabled || field?.disabled,
+    readOnly,
+    required,
+    name: name ?? field?.name,
+    form,
+    loop,
+    orientation,
+    controller,
+    debug
+  });
+  return usePart(
+    control,
+    "root",
+    {},
+    { ...props, render: controlRender(field, "div", render) }
+  );
+}
+function SegmentedControlInput(props) {
+  return usePart(segmentedControl, "input", props, {}, "input");
+}
+function SegmentedControlItem({
+  value,
+  disabled,
+  render,
+  ...props
+}) {
+  const input = /* @__PURE__ */ jsx(SegmentedControlInput, { value, disabled });
+  return usePart(
+    segmentedControl,
+    "item",
+    { value, disabled },
+    { ...props, render: controlRender(null, "button", render, input) },
+    "button"
+  );
+}
+var SegmentedControlIndicator = parts.Indicator;
+export {
+  SegmentedControl,
+  SegmentedControlIndicator,
+  SegmentedControlItem,
+  createSegmentedControlController
+};

package/dist/segmented-input.d.ts

@@ -0,0 +1,15 @@
+import type { dateInput, DateInputSegmentData, DateInputSegmentState, DateInputState } from "@ui-sdk/core/date-input";
+import * as React from "react";
+import { type useFieldControl } from "./field-context.js";
+import { type PartProps, type usePrimitive } from "./use-primitive.js";
+type RootProps = Omit<PartProps<"div", DateInputState>, "defaultValue" | "onChange">;
+type SegmentProps = Omit<PartProps<"input", DateInputSegmentState>, "value" | "defaultValue" | "children"> & {
+    /** The segment it shows, from the root's `segments`. */
+    segment: DateInputSegmentData;
+    /** The text between segments, which it shows unless it has children. Segments you type in take none. */
+    children?: React.ReactNode;
+};
+type Segmented = typeof dateInput;
+declare function useSegment(primitive: Segmented, { segment, render, children, ...props }: SegmentProps): React.JSX.Element | null;
+declare function useSegmentedRoot(primitive: Segmented, instance: ReturnType<typeof usePrimitive<Segmented>>, field: ReturnType<typeof useFieldControl>, { render, children, ...props }: RootProps, Segment: (props: SegmentProps) => React.ReactNode): React.JSX.Element | null;
+export { useSegment, useSegmentedRoot, type RootProps, type SegmentProps, type Segmented, };

package/dist/segmented-input.js

@@ -0,0 +1,48 @@
+"use client";
+// src/segmented-input.tsx
+import "react";
+import { controlRender } from "./field-context.js";
+import {
+  renderElement,
+  usePart
+} from "./use-primitive.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useSegment(primitive, { segment, render, children, ...props }) {
+  const own = { segment, id: segment.key };
+  const input = (merged, state) => {
+    const { value, ...rest } = merged;
+    return renderElement(
+      "input",
+      { ...rest, defaultValue: value },
+      render,
+      state
+    );
+  };
+  const part = segment.editable ? { ...props, render: input } : { ...props, render, children: children ?? segment.text };
+  return usePart(
+    primitive,
+    "segment",
+    own,
+    part,
+    segment.editable ? "input" : "span"
+  );
+}
+function useSegmentedRoot(primitive, instance, field, { render, children, ...props }, Segment) {
+  const content = (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    children === void 0 ? state.segments.map((segment) => /* @__PURE__ */ jsx(Segment, { segment }, segment.key)) : typeof children === "function" ? children(state) : children,
+    /* @__PURE__ */ jsx(HiddenInput, { primitive })
+  ] });
+  return usePart(
+    instance,
+    "root",
+    {},
+    { ...props, children: content, render: controlRender(field, "div", render) }
+  );
+}
+function HiddenInput({ primitive }) {
+  return usePart(primitive, "hidden-input", {}, {}, "input");
+}
+export {
+  useSegment,
+  useSegmentedRoot
+};