@basic-ui/material 0.1.11 → 0.1.14

package/build/esm/TextField/OutlinedContainer.d.ts

@@ -14,4 +14,4 @@ export interface OutlinedContainerProps extends BoxProps {
     forceActive?: boolean;
     leadingIcon?: boolean;
 }
-export declare const OutlinedContainer: React.ForwardRefExoticComponent<Pick<OutlinedContainerProps, "children" | "label" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "variant" | "size" | "hidden" | "as" | "sx" | "__css" | "tx" | "theme" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "key" | "error" | "disabled" | "leadingIcon" | "hasFocus" | "labelIsFloating" | "inputId" | "forceActive"> & React.RefAttributes<HTMLDivElement>>;
+export declare const OutlinedContainer: React.ForwardRefExoticComponent<Pick<OutlinedContainerProps, "children" | "label" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "key" | "error" | "disabled" | "labelIsFloating" | "hasFocus" | "inputId" | "forceActive" | "leadingIcon"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/TextField/TextField.d.ts

@@ -16,4 +16,4 @@ export declare type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'>
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
 };
-export declare const TextField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "onKeyDown" | "onPointerDown" | "style" | "disabled" | "left" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "hidden" | "gridColumnGap" | "gridGap" | "gridRowGap" | "size" | "multiple" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "children" | "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" | "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" | "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" | "key" | "form" | "label" | "pattern" | "list" | "step" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src" | "containerProps" | "multiline" | "hasLabel" | "leadingIcon" | "trailingIcon" | "helperText" | "hideCharacterCounter" | "error"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TextField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "children" | "form" | "label" | "p" | "slot" | "style" | "title" | "pattern" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "key" | "list" | "step" | "error" | "disabled" | "type" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "src" | "value" | "containerProps" | "leadingIcon" | "helperText" | "hasLabel" | "multiline" | "trailingIcon" | "hideCharacterCounter"> & React.RefAttributes<HTMLInputElement>>;

package/build/esm/ThemeExplorer/ColorPicker.d.ts

@@ -0,0 +1,8 @@
+import { Color, ColorPickerProps as BaseColorPickerProps } from '@basic-ui/color-picker';
+import { BoxProps } from '../Box';
+import { VFC } from 'react';
+export declare type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps) & {
+    color: Color;
+    onChange: (color: Color) => void;
+};
+export declare const ColorPicker: VFC<ColorPickerProps>;

package/build/esm/ThemeExplorer/ColorPicker.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import { ColorPicker as _BaseColorPicker, Hue as _Hue, HueCursor as _HueCursor, Saturation as _Saturation, SaturationCursor as _SaturationCursor } from '@basic-ui/color-picker';
+import { Box } from '../Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const BaseColorPicker = _BaseColorPicker;
+const Hue = _Hue;
+const HueCursor = _HueCursor;
+const Saturation = _Saturation;
+const SaturationCursor = _SaturationCursor;
+export const ColorPicker = (_ref) => {
+  let {
+    color,
+    onChange,
+    width = 450,
+    height = 225
+  } = _ref,
+      otherProps = _objectWithoutPropertiesLoose(_ref, ["color", "onChange", "width", "height"]);
+
+  return /*#__PURE__*/_jsxs(BaseColorPicker, _extends({
+    as: Box,
+    width: width,
+    height: height,
+    onChange: onChange,
+    color: color
+  }, otherProps, {
+    children: [/*#__PURE__*/_jsx(Saturation, {
+      as: Box,
+      sx: {
+        position: 'relative',
+        touchAction: 'none',
+        userSelect: 'none',
+        width: '100%',
+        backgroundImage: 'linear-gradient(transparent, black), linear-gradient(to right, white, transparent)'
+      },
+      children: /*#__PURE__*/_jsx(SaturationCursor, {
+        as: Box,
+        sx: {
+          position: 'absolute',
+          width: '20px',
+          height: '20px',
+          border: '2px solid #ffffff',
+          borderRadius: '50%',
+          boxShadow: '0 0 15px 0 rgba(0, 0, 0, 0.15)',
+          boxSizing: 'border-box',
+          transform: 'translate(-10px, -10px)'
+        }
+      })
+    }), /*#__PURE__*/_jsx(Hue, {
+      as: Box,
+      sx: {
+        position: 'relative',
+        touchAction: 'none',
+        userSelect: 'none',
+        width: '100%',
+        height: '12px',
+        backgroundImage: "linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0))"
+      },
+      children: /*#__PURE__*/_jsx(HueCursor, {
+        as: Box,
+        sx: {
+          position: 'absolute',
+          width: '20px',
+          height: '20px',
+          border: '2px solid #ffffff',
+          borderRadius: '50%',
+          boxShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px',
+          boxSizing: 'border-box',
+          transform: 'translate(-10px, -4px)'
+        }
+      })
+    })]
+  }));
+};
+//# sourceMappingURL=ColorPicker.js.map

package/build/esm/ThemeExplorer/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ThemeExplorer/ColorPicker.tsx"],"names":["ColorPicker","_BaseColorPicker","Hue","_Hue","HueCursor","_HueCursor","Saturation","_Saturation","SaturationCursor","_SaturationCursor","Box","BaseColorPicker","color","onChange","width","height","otherProps","position","touchAction","userSelect","backgroundImage","border","borderRadius","boxShadow","boxSizing","transform"],"mappings":";;AAAA,SAEEA,WAAW,IAAIC,gBAFjB,EAGEC,GAAG,IAAIC,IAHT,EAIEC,SAAS,IAAIC,UAJf,EAKEC,UAAU,IAAIC,WALhB,EAMEC,gBAAgB,IAAIC,iBANtB,QAYO,wBAZP;AAaA,SAASC,GAAT,QAA8B,QAA9B;;;AASA,MAAMC,eAEL,GAAGV,gBAFJ;AAGA,MAAMC,GAA6B,GAAGC,IAAtC;AACA,MAAMC,SAAyC,GAAGC,UAAlD;AACA,MAAMC,UAA2C,GAAGC,WAApD;AACA,MAAMC,gBAEL,GAAGC,iBAFJ;AAIA,OAAO,MAAMT,WAAkC,GAAG,UAM5C;AAAA,MAN6C;AACjDY,IAAAA,KADiD;AAEjDC,IAAAA,QAFiD;AAGjDC,IAAAA,KAAK,GAAG,GAHyC;AAIjDC,IAAAA,MAAM,GAAG;AAJwC,GAM7C;AAAA,MADDC,UACC;;AACJ,sBACE,MAAC,eAAD;AACE,IAAA,EAAE,EAAEN,GADN;AAEE,IAAA,KAAK,EAAEI,KAFT;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,QAAQ,EAAEF,QAJZ;AAKE,IAAA,KAAK,EAAED;AALT,KAMMI,UANN;AAAA,4BAQE,KAAC,UAAD;AACE,MAAA,EAAE,EAAEN,GADN;AAEE,MAAA,EAAE,EAAE;AACFO,QAAAA,QAAQ,EAAE,UADR;AAEFC,QAAAA,WAAW,EAAE,MAFX;AAGFC,QAAAA,UAAU,EAAE,MAHV;AAIFL,QAAAA,KAAK,EAAE,MAJL;AAKFM,QAAAA,eAAe,EACb;AANA,OAFN;AAAA,6BAWE,KAAC,gBAAD;AACE,QAAA,EAAE,EAAEV,GADN;AAEE,QAAA,EAAE,EAAE;AACFO,UAAAA,QAAQ,EAAE,UADR;AAEFH,UAAAA,KAAK,EAAE,MAFL;AAGFC,UAAAA,MAAM,EAAE,MAHN;AAIFM,UAAAA,MAAM,EAAE,mBAJN;AAKFC,UAAAA,YAAY,EAAE,KALZ;AAMFC,UAAAA,SAAS,EAAE,gCANT;AAOFC,UAAAA,SAAS,EAAE,YAPT;AAQFC,UAAAA,SAAS,EAAE;AART;AAFN;AAXF,MARF,eAiCE,KAAC,GAAD;AACE,MAAA,EAAE,EAAEf,GADN;AAEE,MAAA,EAAE,EAAE;AACFO,QAAAA,QAAQ,EAAE,UADR;AAEFC,QAAAA,WAAW,EAAE,MAFX;AAGFC,QAAAA,UAAU,EAAE,MAHV;AAIFL,QAAAA,KAAK,EAAE,MAJL;AAKFC,QAAAA,MAAM,EAAE,MALN;AAMFK,QAAAA,eAAe;AANb,OAFN;AAAA,6BAWE,KAAC,SAAD;AACE,QAAA,EAAE,EAAEV,GADN;AAEE,QAAA,EAAE,EAAE;AACFO,UAAAA,QAAQ,EAAE,UADR;AAEFH,UAAAA,KAAK,EAAE,MAFL;AAGFC,UAAAA,MAAM,EAAE,MAHN;AAIFM,UAAAA,MAAM,EAAE,mBAJN;AAKFC,UAAAA,YAAY,EAAE,KALZ;AAMFC,UAAAA,SAAS,EAAE,sCANT;AAOFC,UAAAA,SAAS,EAAE,YAPT;AAQFC,UAAAA,SAAS,EAAE;AART;AAFN;AAXF,MAjCF;AAAA,KADF;AA6DD,CApEM","sourcesContent":["import {\n  Color,\n  ColorPicker as _BaseColorPicker,\n  Hue as _Hue,\n  HueCursor as _HueCursor,\n  Saturation as _Saturation,\n  SaturationCursor as _SaturationCursor,\n  ColorPickerProps as BaseColorPickerProps,\n  HueProps,\n  HueCursorProps,\n  SaturationProps,\n  SaturationCursorProps,\n} from '@basic-ui/color-picker';\nimport { Box, BoxProps } from '../Box';\nimport { VFC } from 'react';\n\nexport type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &\n  BaseColorPickerProps) & {\n  color: Color;\n  onChange: (color: Color) => void;\n};\n\nconst BaseColorPicker: VFC<\n  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps\n> = _BaseColorPicker as any;\nconst Hue: VFC<BoxProps & HueProps> = _Hue as any;\nconst HueCursor: VFC<BoxProps & HueCursorProps> = _HueCursor as any;\nconst Saturation: VFC<BoxProps & SaturationProps> = _Saturation as any;\nconst SaturationCursor: VFC<\n  BoxProps & SaturationCursorProps\n> = _SaturationCursor as any;\n\nexport const ColorPicker: VFC<ColorPickerProps> = ({\n  color,\n  onChange,\n  width = 450,\n  height = 225,\n  ...otherProps\n}) => {\n  return (\n    <BaseColorPicker\n      as={Box}\n      width={width}\n      height={height}\n      onChange={onChange}\n      color={color}\n      {...otherProps}\n    >\n      <Saturation\n        as={Box}\n        sx={{\n          position: 'relative',\n          touchAction: 'none',\n          userSelect: 'none',\n          width: '100%',\n          backgroundImage:\n            'linear-gradient(transparent, black), linear-gradient(to right, white, transparent)',\n        }}\n      >\n        <SaturationCursor\n          as={Box}\n          sx={{\n            position: 'absolute',\n            width: '20px',\n            height: '20px',\n            border: '2px solid #ffffff',\n            borderRadius: '50%',\n            boxShadow: '0 0 15px 0 rgba(0, 0, 0, 0.15)',\n            boxSizing: 'border-box',\n            transform: 'translate(-10px, -10px)',\n          }}\n        />\n      </Saturation>\n      <Hue\n        as={Box}\n        sx={{\n          position: 'relative',\n          touchAction: 'none',\n          userSelect: 'none',\n          width: '100%',\n          height: '12px',\n          backgroundImage: `linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0))`,\n        }}\n      >\n        <HueCursor\n          as={Box}\n          sx={{\n            position: 'absolute',\n            width: '20px',\n            height: '20px',\n            border: '2px solid #ffffff',\n            borderRadius: '50%',\n            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px',\n            boxSizing: 'border-box',\n            transform: 'translate(-10px, -4px)',\n          }}\n        />\n      </Hue>\n    </BaseColorPicker>\n  );\n};\n"],"file":"ColorPicker.js"}

package/build/esm/ThemeExplorer/TextFieldColorPicker.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Color } from '@basic-ui/color-picker';
+import { TextFieldProps } from '../';
+export interface TextFieldColorPickerProps extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'> {
+    value?: Color;
+    defaultValue?: Color;
+    onChange?: (color: Color) => void;
+}
+export declare const TextFieldColorPicker: import("react").NamedExoticComponent<TextFieldColorPickerProps>;

package/build/esm/ThemeExplorer/TextFieldColorPicker.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import { toColor } from '@basic-ui/color-picker';
+import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
+import { alpha, Box, TextField, Button } from '../';
+import { useRef, useState, memo, useCallback } from 'react';
+import { ColorPicker } from './ColorPicker';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const TextFieldColorPicker = /*#__PURE__*/memo(props => {
+  const {
+    value: valueProp,
+    defaultValue = toColor('hex', '#33ff33'),
+    onChange: onChangeProp,
+    disabled
+  } = props,
+        otherProps = _objectWithoutPropertiesLoose(props, ["value", "defaultValue", "onChange", "disabled"]);
+
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [text, setText] = useState((valueProp == null ? void 0 : valueProp.hex) || defaultValue.hex);
+  const [value, _onChange] = useControlledState(valueProp, onChangeProp, defaultValue, setState => v => {
+    setState(v);
+    setText(v.hex);
+  });
+  const onChange = useCallback(color => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    _onChange(color);
+
+    setText(color.hex.replace('#', ''));
+  }, [_onChange]);
+  const popoverRef = useRef(null);
+  const buttonRef = useRef(null);
+  useOnClickOutside(popoverRef, e => {
+    if (e.target === (buttonRef == null ? void 0 : buttonRef.current)) {
+      return;
+    }
+
+    setPopoverOpen(false);
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TextField, _extends({
+      disabled: disabled,
+      value: text.replace('#', ''),
+      leadingIcon: '#',
+      trailingIcon: /*#__PURE__*/_jsx(Button, {
+        style: {
+          backgroundColor: value.hex
+        },
+        color: "on.surface",
+        ref: buttonRef,
+        onClick: () => setPopoverOpen(open => !open),
+        disabled: disabled,
+        sx: {
+          pointerEvents: 'all',
+          cursor: 'pointer',
+          width: 32,
+          height: 32,
+          borderRadius: '4px',
+          borderWidth: '1px',
+          borderColor: alpha('on.surface', 0.38),
+          borderStyle: 'solid',
+          outlineColor: 'transparent'
+        }
+      }),
+      maxLength: 6,
+      hideCharacterCounter: true,
+      onChange: e => {
+        if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          onChange(toColor('hex', '#' + e.target.value));
+          return;
+        }
+
+        setText(e.target.value);
+      }
+    }, otherProps)), popoverOpen && /*#__PURE__*/_jsx(Popper, {
+      anchorEl: buttonRef,
+      placement: "bottom-end",
+      style: {
+        zIndex: 2
+      },
+      children: /*#__PURE__*/_jsxs(Box, {
+        ref: popoverRef,
+        py: 2,
+        children: [/*#__PURE__*/_jsx(Box, {
+          boxShadow: 4,
+          children: /*#__PURE__*/_jsx(ColorPicker, {
+            color: value // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            ,
+            onChange: onChange,
+            width: 220,
+            height: 220
+          })
+        }), /*#__PURE__*/_jsx(Box, {})]
+      })
+    })]
+  });
+});
+//# sourceMappingURL=TextFieldColorPicker.js.map

package/build/esm/ThemeExplorer/TextFieldColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ThemeExplorer/TextFieldColorPicker.tsx"],"names":["toColor","Popper","useControlledState","useOnClickOutside","alpha","Box","TextField","Button","useRef","useState","memo","useCallback","ColorPicker","TextFieldColorPicker","props","value","valueProp","defaultValue","onChange","onChangeProp","disabled","otherProps","popoverOpen","setPopoverOpen","text","setText","hex","_onChange","setState","v","color","replace","popoverRef","buttonRef","e","target","current","backgroundColor","open","pointerEvents","cursor","width","height","borderRadius","borderWidth","borderColor","borderStyle","outlineColor","match","zIndex"],"mappings":"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","sourcesContent":["import { Color, toColor } from '@basic-ui/color-picker';\nimport { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';\nimport { alpha, Box, TextField, Button, TextFieldProps } from '../';\nimport { useRef, useState, memo, useCallback } from 'react';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface TextFieldColorPickerProps\n  extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'> {\n  value?: Color;\n  defaultValue?: Color;\n  onChange?: (color: Color) => void;\n}\n\nexport const TextFieldColorPicker = memo<TextFieldColorPickerProps>((props) => {\n  const {\n    value: valueProp,\n    defaultValue = toColor('hex', '#33ff33'),\n    onChange: onChangeProp,\n    disabled,\n    ...otherProps\n  } = props;\n\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [text, setText] = useState(valueProp?.hex || defaultValue.hex);\n  const [value, _onChange] = useControlledState<Color, any, []>(\n    valueProp,\n    onChangeProp as any,\n    defaultValue,\n    (setState) => (v: any) => {\n      setState(v);\n      setText(v.hex);\n    }\n  );\n\n  const onChange = useCallback(\n    (color: Color) => {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      _onChange!(color);\n      setText(color.hex.replace('#', ''));\n    },\n    [_onChange]\n  );\n\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  useOnClickOutside(popoverRef, (e) => {\n    if (e.target === buttonRef?.current) {\n      return;\n    }\n    setPopoverOpen(false);\n  });\n\n  return (\n    <>\n      <TextField\n        disabled={disabled}\n        value={text.replace('#', '')}\n        leadingIcon={'#'}\n        trailingIcon={\n          <Button\n            style={{ backgroundColor: value.hex }}\n            color=\"on.surface\"\n            ref={buttonRef}\n            onClick={() => setPopoverOpen((open) => !open)}\n            disabled={disabled}\n            sx={{\n              pointerEvents: 'all',\n              cursor: 'pointer',\n              width: 32,\n              height: 32,\n              borderRadius: '4px',\n              borderWidth: '1px',\n              borderColor: alpha('on.surface', 0.38),\n              borderStyle: 'solid',\n              outlineColor: 'transparent',\n            }}\n          />\n        }\n        maxLength={6}\n        hideCharacterCounter\n        onChange={(e) => {\n          if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            onChange!(toColor('hex', '#' + e.target.value));\n            return;\n          }\n          setText(e.target.value);\n        }}\n        {...otherProps}\n      />\n      {popoverOpen && (\n        <Popper\n          anchorEl={buttonRef}\n          placement=\"bottom-end\"\n          style={{ zIndex: 2 }}\n        >\n          <Box ref={popoverRef} py={2}>\n            <Box boxShadow={4}>\n              <ColorPicker\n                color={value}\n                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                onChange={onChange!}\n                width={220}\n                height={220}\n              />\n            </Box>\n            <Box></Box>\n          </Box>\n        </Popper>\n      )}\n    </>\n  );\n});\n"],"file":"TextFieldColorPicker.js"}

package/build/esm/ThemeExplorer/ThemeColors.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { makeColorScheme } from './makeColorScheme';
+export declare const ThemeColors: React.MemoExoticComponent<({ scheme, }: {
+    scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;
+}) => JSX.Element>;

package/build/esm/ThemeExplorer/ThemeColors.js

@@ -0,0 +1,80 @@
+import React, { memo } from 'react';
+import { Box } from '..';
+import { ColorRow } from './components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const ThemeColors = /*#__PURE__*/memo(({
+  scheme
+}) => {
+  function makeColorArrayForToken(token) {
+    return [{
+      token: "".concat(token),
+      bg: scheme[token],
+      color: scheme.on[token]
+    }, {
+      token: "on.".concat(token),
+      bg: scheme.on[token],
+      color: scheme[token]
+    }, {
+      token: "".concat(token, "-container"),
+      bg: scheme["".concat(token, "-container")],
+      color: scheme.on["".concat(token, "-container")]
+    }, {
+      token: "on.".concat(token, "-container"),
+      bg: scheme.on["".concat(token, "-container")],
+      color: scheme["".concat(token, "-container")]
+    }];
+  }
+
+  return /*#__PURE__*/_jsxs(Box, {
+    width: "600",
+    display: "flex",
+    flexDirection: "column",
+    sx: {
+      gap: 2
+    },
+    children: [/*#__PURE__*/_jsx(ColorRow, {
+      colors: makeColorArrayForToken('primary'),
+      height: 118
+    }), /*#__PURE__*/_jsx(ColorRow, {
+      colors: makeColorArrayForToken('secondary')
+    }), /*#__PURE__*/_jsx(ColorRow, {
+      colors: makeColorArrayForToken('tertiary')
+    }), /*#__PURE__*/_jsx(ColorRow, {
+      colors: makeColorArrayForToken('error')
+    }), /*#__PURE__*/_jsx(ColorRow, {
+      colors: [{
+        token: "background",
+        bg: scheme.background,
+        color: scheme.on.background
+      }, {
+        token: "on.background",
+        bg: scheme.on.background,
+        color: scheme.background
+      }, {
+        token: "surface",
+        bg: scheme.surface,
+        color: scheme.on.surface
+      }, {
+        token: "on.surface",
+        bg: scheme.on.surface,
+        color: scheme.surface
+      }]
+    }), /*#__PURE__*/_jsx(ColorRow, {
+      colors: [{
+        token: "surface-variant",
+        bg: scheme['surface-variant'],
+        color: scheme.on['surface-variant']
+      }, {
+        token: "on.surface-variant",
+        bg: scheme.on['surface-variant'],
+        color: scheme['surface-variant']
+      }, {
+        token: "outline",
+        bg: scheme.outline,
+        color: scheme.on.outline
+      }]
+    })]
+  });
+});
+//# sourceMappingURL=ThemeColors.js.map

package/build/esm/ThemeExplorer/ThemeColors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ThemeExplorer/ThemeColors.tsx"],"names":["React","memo","Box","ColorRow","ThemeColors","scheme","makeColorArrayForToken","token","bg","color","on","gap","background","surface","outline"],"mappings":"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","sourcesContent":["import React, { memo } from 'react';\nimport { Box } from '..';\nimport { ColorRow } from './components';\nimport { makeColorScheme } from './makeColorScheme';\n\nexport const ThemeColors = memo(\n  ({\n    scheme,\n  }: {\n    scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;\n  }) => {\n    function makeColorArrayForToken(token: string) {\n      return [\n        {\n          token: `${token}`,\n          bg: scheme[token],\n          color: scheme.on[token],\n        },\n        {\n          token: `on.${token}`,\n          bg: scheme.on[token],\n          color: scheme[token],\n        },\n        {\n          token: `${token}-container`,\n          bg: scheme[`${token}-container`],\n          color: scheme.on[`${token}-container`],\n        },\n        {\n          token: `on.${token}-container`,\n          bg: scheme.on[`${token}-container`],\n          color: scheme[`${token}-container`],\n        },\n      ];\n    }\n    return (\n      <Box width=\"600\" display=\"flex\" flexDirection=\"column\" sx={{ gap: 2 }}>\n        <ColorRow colors={makeColorArrayForToken('primary')} height={118} />\n        <ColorRow colors={makeColorArrayForToken('secondary')} />\n        <ColorRow colors={makeColorArrayForToken('tertiary')} />\n        <ColorRow colors={makeColorArrayForToken('error')} />\n        <ColorRow\n          colors={[\n            {\n              token: `background`,\n              bg: scheme.background,\n              color: scheme.on.background,\n            },\n            {\n              token: `on.background`,\n              bg: scheme.on.background,\n              color: scheme.background,\n            },\n            {\n              token: `surface`,\n              bg: scheme.surface,\n              color: scheme.on.surface,\n            },\n            {\n              token: `on.surface`,\n              bg: scheme.on.surface,\n              color: scheme.surface,\n            },\n          ]}\n        />\n        <ColorRow\n          colors={[\n            {\n              token: `surface-variant`,\n              bg: scheme['surface-variant'],\n              color: scheme.on['surface-variant'],\n            },\n            {\n              token: `on.surface-variant`,\n              bg: scheme.on['surface-variant'],\n              color: scheme['surface-variant'],\n            },\n            {\n              token: `outline`,\n              bg: scheme.outline,\n              color: scheme.on.outline,\n            },\n          ]}\n        />\n      </Box>\n    );\n  }\n);\n"],"file":"ThemeColors.js"}

package/build/esm/ThemeExplorer/components.d.ts

@@ -0,0 +1,31 @@
+import React, { CSSProperties } from 'react';
+import { TonalPalette } from '@material/material-color-utilities';
+export declare const ColorItem: React.MemoExoticComponent<(props: {
+    token: string;
+    style: CSSProperties;
+    height: number;
+    width: string;
+}) => JSX.Element>;
+export declare const ColorRow: React.MemoExoticComponent<(props: {
+    colors: {
+        token: string;
+        bg: string;
+        color: string;
+    }[];
+    height?: number;
+}) => JSX.Element>;
+export declare const TonalColorItem: React.MemoExoticComponent<(props: {
+    color: string;
+    level: number;
+}) => JSX.Element>;
+export declare const TonalColorsFromToken: React.MemoExoticComponent<(props: {
+    token: string;
+}) => JSX.Element>;
+export declare const TonalColors: React.MemoExoticComponent<(props: {
+    palette: TonalPalette;
+}) => JSX.Element>;
+export declare function makeColorArrayForToken(token: string): {
+    token: string;
+    bg: string;
+    color: string;
+}[];