@dxos/react-ui 0.4.7-main.dca306f → 0.4.7-main.ea67fec

package/dist/types/src/components/Input/Input.d.ts

@@ -41,7 +41,7 @@ export declare const Input: {
         ({ __inputScope, id: propsId, descriptionId: propsDescriptionId, errorMessageId: propsErrorMessageId, validationValence, children, }: InputScopedProps<InputRootProps>): JSX.Element;
         displayName: string;
     };
-    PinInput: React.ForwardRefExoticComponent<Pick<PinInputProps, "density" | "elevation" | "type" | "length" | "form" | "slot" | "style" | "title" | "pattern" | "width" | "height" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "size" | "variant" | "max" | "min" | "name" | "crossOrigin" | "fontFamily" | "fontSize" | "spacing" | "padding" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "multiple" | "checked" | "accept" | "alt" | "autoComplete" | "capture" | "enterKeyHint" | "minLength" | "readOnly" | "required" | "src" | "paddingY" | "paddingX" | "characterWidth" | "segmentWidth" | "inputWidth" | "inputClassName" | "inputStyle" | "scrollWrapperClassName" | "segmentWrapperClassName" | "rootProps" | "segmentClassName" | "segmentPadding" | "segmentHeight"> & React.RefAttributes<HTMLInputElement>>;
+    PinInput: React.ForwardRefExoticComponent<Pick<PinInputProps, "density" | "elevation" | "type" | "length" | "form" | "slot" | "style" | "title" | "pattern" | "width" | "height" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "size" | "variant" | "max" | "min" | "name" | "crossOrigin" | "fontFamily" | "fontSize" | "spacing" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "multiple" | "checked" | "accept" | "alt" | "autoComplete" | "capture" | "enterKeyHint" | "minLength" | "readOnly" | "required" | "src" | "padding" | "paddingY" | "paddingX" | "characterWidth" | "segmentWidth" | "inputWidth" | "inputClassName" | "inputStyle" | "scrollWrapperClassName" | "segmentWrapperClassName" | "rootProps" | "segmentClassName" | "segmentPadding" | "segmentHeight"> & React.RefAttributes<HTMLInputElement>>;
     TextInput: React.ForwardRefExoticComponent<Pick<InputScopedProps<TextInputProps>, "density" | "value" | "children" | "elevation" | "type" | "form" | "slot" | "style" | "title" | "pattern" | "width" | "height" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | "classNames" | "list" | "step" | "size" | "variant" | "max" | "min" | "name" | "crossOrigin" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "multiple" | "checked" | "__inputScope" | "accept" | "alt" | "autoComplete" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "required" | "src"> & React.RefAttributes<HTMLInputElement>>;
     TextArea: React.ForwardRefExoticComponent<Pick<InputScopedProps<TextAreaProps>, "density" | "value" | "children" | "elevation" | "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classNames" | "variant" | "name" | "autoFocus" | "disabled" | "__inputScope" | "autoComplete" | "maxLength" | "minLength" | "readOnly" | "required" | "cols" | "dirName" | "rows" | "wrap"> & React.RefAttributes<HTMLTextAreaElement>>;
     Checkbox: React.ForwardRefExoticComponent<CheckboxProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.4.7-main.dca306f",
+  "version": "0.4.7-main.ea67fec",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,13 +37,12 @@
     "@radix-ui/react-use-controllable-state": "^1.0.0",
     "date-fns": "^3.3.1",
     "i18next": "^21.10.0",
-    "jdenticon": "^3.2.0",
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
-    "@dxos/react-hooks": "0.4.7-main.dca306f",
-    "@dxos/react-list": "0.4.7-main.dca306f",
-    "@dxos/react-ui-types": "0.4.7-main.dca306f",
-    "@dxos/react-input": "0.4.7-main.dca306f"
+    "@dxos/react-hooks": "0.4.7-main.ea67fec",
+    "@dxos/react-ui-types": "0.4.7-main.ea67fec",
+    "@dxos/react-input": "0.4.7-main.ea67fec",
+    "@dxos/react-list": "0.4.7-main.ea67fec"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -56,8 +55,9 @@
     "react-dom": "^18.2.0",
     "vite": "^5.1.3",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/random": "0.4.7-main.dca306f",
-    "@dxos/react-ui-theme": "0.4.7-main.dca306f"
+    "@dxos/random": "0.4.7-main.ea67fec",
+    "@dxos/react-ui-theme": "0.4.7-main.ea67fec",
+    "@dxos/util": "0.4.7-main.ea67fec"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/Avatars/Avatar.stories.tsx

@@ -6,17 +6,15 @@ import '@dxosTheme';
 
 import React, { type PropsWithChildren } from 'react';
 
-import { getColorForValue } from '@dxos/react-ui-theme';
 import { type Size } from '@dxos/react-ui-types';
+import { hexToFallback } from '@dxos/util';
 
-import { Avatar, useJdenticonHref, type AvatarVariant, type AvatarStatus, type AvatarAnimation } from './Avatar';
+import { Avatar, type AvatarVariant, type AvatarStatus, type AvatarAnimation, type AvatarRootProps } from './Avatar';
 import { withTheme } from '../../testing';
 
-const randomColor = () => getColorForValue({ value: Math.random().toString(16), type: 'color' });
-
 type StorybookAvatarProps = {
+  id?: string;
   imgSrc?: string;
-  fallbackValue?: string;
   fallbackText?: string;
   label?: string;
   description?: string;
@@ -24,30 +22,27 @@ type StorybookAvatarProps = {
   variant?: AvatarVariant;
   animation?: AvatarAnimation;
   size?: Size;
-  color?: string;
+  hue?: AvatarRootProps['hue'];
 };
 
 const StorybookAvatar = (props: PropsWithChildren<StorybookAvatarProps>) => {
   const {
+    id = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     status,
     size = 12,
     variant = 'circle',
     label = 'Alice',
     description = 'Online',
-    fallbackValue = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     fallbackText = '',
     animation,
     imgSrc,
-    color = randomColor(),
   } = props;
-  const jdenticon = useJdenticonHref(fallbackValue ?? '', size);
+  const { emoji, hue } = hexToFallback(id);
   return (
     <div className='flex flex-row gap-3 align-middle items-center'>
-      <Avatar.Root {...{ size, variant, status, animation, color }}>
+      <Avatar.Root {...{ size, variant, status, animation, hue: props.hue || hue }}>
         <Avatar.Frame>
-          {!imgSrc && (fallbackValue || fallbackText) && (
-            <Avatar.Fallback href={fallbackValue ? jdenticon : ''} text={fallbackText} />
-          )}
+          {!imgSrc && (fallbackText || emoji) && <Avatar.Fallback text={fallbackText || emoji} />}
           {imgSrc && <Avatar.Image href={imgSrc} />}
         </Avatar.Frame>
         <div>
@@ -73,7 +68,7 @@ const sampleImage =
 
 const row = (size: Size) => (
   <>
-    <StorybookAvatar size={size} description='Offline' color={''} />
+    <StorybookAvatar size={size} description='Offline' />
     <StorybookAvatar size={size} status='active' />
     <StorybookAvatar size={size} status='active' imgSrc={sampleImage} />
   </>
@@ -113,22 +108,22 @@ export const Square = () => (
 
 export const DefaultEmoji = () => (
   <div className='flex flex-row gap-4'>
-    <StorybookAvatar fallbackText='🦄' fallbackValue='' status='active' animation='pulse' />
-    <StorybookAvatar fallbackText='🐒' fallbackValue='' animation='pulse' />
-    <StorybookAvatar fallbackText='🪲' fallbackValue='' />
+    <StorybookAvatar fallbackText='🦄' status='active' animation='pulse' />
+    <StorybookAvatar fallbackText='🐒' animation='pulse' />
+    <StorybookAvatar fallbackText='🪲' />
   </div>
 );
 
-export const SquareEmoji = () => <StorybookAvatar variant='square' fallbackText='🦄' fallbackValue='' />;
+export const SquareEmoji = () => <StorybookAvatar variant='square' fallbackText='🦄' />;
 
 export const DefaultText = () => (
   <div className='flex flex-row gap-4'>
-    <StorybookAvatar fallbackText='PT' fallbackValue='' />
-    <StorybookAvatar fallbackText='AP' fallbackValue='' />
-    <StorybookAvatar fallbackText='Z' fallbackValue='' />
-    <StorybookAvatar fallbackText='pt' fallbackValue='' />
-    <StorybookAvatar fallbackText='ap' fallbackValue='' />
-    <StorybookAvatar fallbackText='z' fallbackValue='' />
+    <StorybookAvatar fallbackText='PT' />
+    <StorybookAvatar fallbackText='AP' />
+    <StorybookAvatar fallbackText='Z' />
+    <StorybookAvatar fallbackText='pt' />
+    <StorybookAvatar fallbackText='ap' />
+    <StorybookAvatar fallbackText='z' />
   </div>
 );
 

package/src/components/Avatars/Avatar.tsx

@@ -11,8 +11,7 @@ import {
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import { toSvg } from 'jdenticon';
-import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren, useMemo } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren } from 'react';
 
 import { useId } from '@dxos/react-hooks';
 import { type Size } from '@dxos/react-ui-types';
@@ -35,7 +34,7 @@ type AvatarContextValue = {
   status?: AvatarStatus;
   animation?: AvatarAnimation;
   inGroup?: boolean;
-  color?: string;
+  hue?: string;
 };
 
 const AVATAR_NAME = 'Avatar';
@@ -51,13 +50,13 @@ const AvatarRoot = ({
   descriptionId: propsDescriptionId,
   maskId: propsMaskId,
   inGroup,
-  color,
+  hue,
 }: AvatarRootProps) => {
   const labelId = useId('avatar__label', propsLabelId);
   const descriptionId = useId('avatar__description', propsDescriptionId);
   const maskId = useId('avatar__mask', propsMaskId);
   return (
-    <AvatarProvider {...{ labelId, descriptionId, maskId, size, variant, status, animation, inGroup, color }}>
+    <AvatarProvider {...{ labelId, descriptionId, maskId, size, variant, status, animation, inGroup, hue }}>
       {children}
     </AvatarProvider>
   );
@@ -69,7 +68,7 @@ const rx = '0.25rem';
 
 const AvatarFrame = forwardRef<HTMLSpanElement, AvatarFrameProps>(
   ({ classNames, children, ...props }, forwardedRef) => {
-    const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, color } =
+    const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, hue } =
       useAvatarContext('AvatarFrame');
 
     const { tx } = useThemeContext();
@@ -113,11 +112,10 @@ const AvatarFrame = forwardRef<HTMLSpanElement, AvatarFrameProps>(
           </defs>
           {variant === 'circle' ? (
             <circle
-              className={`avatarFrameFill${color ? '' : ' fill-[var(--surface-bg)]'}`}
+              className={hue ? tx('hue.fill', 'avatar__frame__circle', { hue }) : 'fill-[var(--surface-bg)]'}
               cx='50%'
               cy='50%'
               r={r}
-              {...(color ? { fill: color } : {})}
             />
           ) : (
             <rect
@@ -282,13 +280,6 @@ const AvatarFallback = forwardRef<SVGImageElement, AvatarFallbackProps>(({ delay
   );
 });
 
-const getJdenticonHref = (value: string, size: Size) =>
-  `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(value, size === 'px' ? 1 : size * 4, { padding: 0 }))}`;
-
-const useJdenticonHref = (value: string, size: Size) => {
-  return useMemo(() => getJdenticonHref(value, size), [value]);
-};
-
 export const Avatar = {
   Root: AvatarRoot,
   Frame: AvatarFrame,
@@ -298,7 +289,7 @@ export const Avatar = {
   Description: AvatarDescription,
 };
 
-export { useJdenticonHref, useAvatarContext, getJdenticonHref };
+export { useAvatarContext };
 
 export type {
   AvatarStatus,

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -6,7 +6,9 @@ import '@dxosTheme';
 
 import React from 'react';
 
-import { Avatar, useJdenticonHref } from './Avatar';
+import { toEmoji } from '@dxos/util';
+
+import { Avatar } from './Avatar';
 import { AvatarGroup, AvatarGroupItem } from './AvatarGroup';
 import { withTheme } from '../../testing';
 
@@ -18,11 +20,11 @@ const items = [
 ];
 
 const StorybookAvatarGroupItem = ({ n }: { n: number }) => {
-  const href = useJdenticonHref(`StorybookAvatarGroupItem--${n}`, 4);
+  const emoji = toEmoji(n);
   return (
     <AvatarGroupItem.Root>
       <Avatar.Frame classNames={items[n]}>
-        <Avatar.Fallback href={href} />
+        <Avatar.Fallback text={emoji} />
       </Avatar.Frame>
     </AvatarGroupItem.Root>
   );