@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/build/esm/TextField/TextField.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["type", "id", "variant", "color", "value", "defaultValue", "error", "disabled", "maxLength", "hideCharacterCounter", "label", "placeholder", "helperText", "multiline", "onChange", "onFocus", "onBlur", "leadingIcon", "trailingIcon", "containerProps"];
 import { forwardRef, useState, useId } from 'react';
 import { wrapEvent, useControlledState } from '@basic-ui/core';
 import { Input } from './Input';
@@ -11,89 +7,65 @@ import { OutlinedContainer } from './OutlinedContainer';
 import { HelperText } from './HelperText';
 import { Box } from '../Box';
 import { IconContainer } from './IconContainer';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var componentMap = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const componentMap = {
   outlined: OutlinedContainer,
   filled: FilledContainer
 };
-
 function characterCounter(value, maxLength) {
   if (maxLength === undefined) {
     return null;
   }
-
-  return "".concat(typeof value === 'string' ? value.length : 0, " / ").concat(maxLength);
+  return `${typeof value === 'string' ? value.length : 0} / ${maxLength}`;
 }
-
-export var TextField = /*#__PURE__*/forwardRef(function TextField(props, forwardedRef) {
-  var _props$type = props.type,
-      type = _props$type === void 0 ? 'text' : _props$type,
-      idProp = props.id,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? 'outlined' : _props$variant,
-      _props$color = props.color,
-      color = _props$color === void 0 ? 'primary' : _props$color,
-      valueProp = props.value,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
-      error = props.error,
-      disabled = props.disabled,
-      maxLength = props.maxLength,
-      _props$hideCharacterC = props.hideCharacterCounter,
-      hideCharacterCounter = _props$hideCharacterC === void 0 ? false : _props$hideCharacterC,
-      _props$label = props.label,
-      label = _props$label === void 0 ? null : _props$label,
-      placeholder = props.placeholder,
-      helperTextProp = props.helperText,
-      multiline = props.multiline,
-      onChangeProp = props.onChange,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      _props$leadingIcon = props.leadingIcon,
-      leadingIcon = _props$leadingIcon === void 0 ? null : _props$leadingIcon,
-      _props$trailingIcon = props.trailingIcon,
-      trailingIcon = _props$trailingIcon === void 0 ? null : _props$trailingIcon,
-      containerProps = props.containerProps,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  var _useControlledState = useControlledState(valueProp, onChangeProp, defaultValue, function (setState) {
-    return function (e) {
-      setState(e.target.value);
-    };
-  }),
-      _useControlledState2 = _slicedToArray(_useControlledState, 2),
-      value = _useControlledState2[0],
-      onChange = _useControlledState2[1];
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasFocus = _useState2[0],
-      setHasFocus = _useState2[1];
-
-  var Container = componentMap[variant] || OutlinedContainer;
-  var fallbackId = useId();
-  var theme = useTheme();
-
-  var handleFocus = function handleFocus() {
+export const TextField = /*#__PURE__*/forwardRef(function TextField(props, forwardedRef) {
+  const {
+    type = 'text',
+    id: idProp,
+    variant = 'outlined',
+    color = 'primary',
+    value: valueProp,
+    defaultValue = '',
+    error,
+    disabled,
+    maxLength,
+    hideCharacterCounter = false,
+    label = null,
+    placeholder,
+    helperText: helperTextProp,
+    multiline,
+    onChange: onChangeProp,
+    onFocus,
+    onBlur,
+    leadingIcon = null,
+    trailingIcon = null,
+    containerProps,
+    ...otherProps
+  } = props;
+  const [value, onChange] = useControlledState(valueProp, onChangeProp, defaultValue, setState => e => {
+    setState(e.target.value);
+  });
+  const [hasFocus, setHasFocus] = useState(false);
+  const Container = componentMap[variant] || OutlinedContainer;
+  const fallbackId = useId();
+  const theme = useTheme();
+  const handleFocus = () => {
     setHasFocus(true);
   };
-
-  var handleBlur = function handleBlur() {
+  const handleBlur = () => {
     setHasFocus(false);
   };
-
-  var hasError = Boolean(error);
-  var helperText = typeof error === 'string' ? error : helperTextProp;
-  var id = idProp || fallbackId;
-  var inputId = "".concat(id, "-text-field");
-  var helperTextId = helperText ? "".concat(id, "-helper-text") : undefined;
-  var labelIsFloating = hasFocus || typeof value === 'string' && value.length > 0;
+  const hasError = Boolean(error);
+  const helperText = typeof error === 'string' ? error : helperTextProp;
+  const id = idProp || fallbackId;
+  const inputId = `${id}-text-field`;
+  const helperTextId = helperText ? `${id}-helper-text` : undefined;
+  const labelIsFloating = hasFocus || typeof value === 'string' && value.length > 0;
   return /*#__PURE__*/_jsxs(Box, {
     display: "inline-flex",
     flexDirection: "column",
     width: "100%",
-    children: [/*#__PURE__*/_jsxs(Container, _extends(_extends({
+    children: [/*#__PURE__*/_jsxs(Container, {
       theme: theme,
       label: label,
       color: color,
@@ -102,12 +74,12 @@ export var TextField = /*#__PURE__*/forwardRef(function TextField(props, forward
       inputId: inputId,
       hasFocus: hasFocus,
       disabled: disabled,
-      leadingIcon: Boolean(leadingIcon)
-    }, containerProps), {}, {
+      leadingIcon: Boolean(leadingIcon),
+      ...containerProps,
       children: [leadingIcon && /*#__PURE__*/_jsx(IconContainer, {
         position: "start",
         children: leadingIcon
-      }), /*#__PURE__*/_jsx(Input, _extends({
+      }), /*#__PURE__*/_jsx(Input, {
         ref: forwardedRef,
         as: multiline ? 'textarea' : 'input',
         variant: variant,
@@ -126,12 +98,13 @@ export var TextField = /*#__PURE__*/forwardRef(function TextField(props, forward
         "aria-describedby": helperTextId,
         hasLabel: !!label,
         leadingIcon: Boolean(leadingIcon),
-        trailingIcon: Boolean(trailingIcon)
-      }, otherProps)), trailingIcon && /*#__PURE__*/_jsx(IconContainer, {
+        trailingIcon: Boolean(trailingIcon),
+        ...otherProps
+      }), trailingIcon && /*#__PURE__*/_jsx(IconContainer, {
         position: "end",
         children: trailingIcon
       })]
-    })), /*#__PURE__*/_jsx(HelperText, {
+    }), /*#__PURE__*/_jsx(HelperText, {
       error: hasError,
       disabled: disabled,
       leftSide: helperText && /*#__PURE__*/_jsx("span", {

package/build/esm/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["forwardRef","useState","useId","wrapEvent","useControlledState","Input","useTheme","FilledContainer","OutlinedContainer","HelperText","Box","IconContainer","componentMap","outlined","filled","characterCounter","value","maxLength","undefined","length","TextField","props","forwardedRef","type","idProp","id","variant","color","valueProp","defaultValue","error","disabled","hideCharacterCounter","label","placeholder","helperTextProp","helperText","multiline","onChangeProp","onChange","onFocus","onBlur","leadingIcon","trailingIcon","containerProps","otherProps","setState","e","target","hasFocus","setHasFocus","Container","fallbackId","theme","handleFocus","handleBlur","hasError","Boolean","inputId","helperTextId","labelIsFloating"],"sources":["../../../src/TextField/TextField.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { forwardRef, useState, useId } from 'react';\nimport { wrapEvent, useControlledState } from '@basic-ui/core';\n\nimport type { InputProps } from './Input';\nimport { Input } from './Input';\nimport { useTheme } from '../theme';\nimport { FilledContainer } from './FilledContainer';\nimport { OutlinedContainer } from './OutlinedContainer';\nimport { HelperText } from './HelperText';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from './IconContainer';\n\nconst componentMap = {\n  outlined: OutlinedContainer,\n  filled: FilledContainer,\n};\n\nfunction characterCounter(\n  value: string | number | string[],\n  maxLength?: number\n) {\n  if (maxLength === undefined) {\n    return null;\n  }\n\n  return `${typeof value === 'string' ? value.length : 0} / ${maxLength}`;\n}\n\nexport type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {\n  variant?: 'outlined' | 'filled';\n  containerProps?: Omit<BoxProps, 'color'>;\n  color?: 'primary' | 'secondary';\n  label?: ReactNode;\n  helperText?: string;\n  maxLength?: number;\n  hideCharacterCounter?: boolean;\n  defaultValue?: string;\n  value?: string;\n  multiline?: boolean;\n  error?: boolean | string;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n};\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, forwardedRef) {\n    const {\n      type = 'text',\n      id: idProp,\n      variant = 'outlined',\n      color = 'primary',\n      value: valueProp,\n      defaultValue = '',\n      error,\n      disabled,\n      maxLength,\n      hideCharacterCounter = false,\n      label = null,\n      placeholder,\n      helperText: helperTextProp,\n      multiline,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      leadingIcon = null,\n      trailingIcon = null,\n      containerProps,\n      ...otherProps\n    } = props;\n    const [value, onChange] = useControlledState(\n      valueProp,\n      onChangeProp,\n      defaultValue,\n      (setState) => (e) => {\n        setState(e.target.value);\n      }\n    );\n    const [hasFocus, setHasFocus] = useState(false);\n\n    const Container = componentMap[variant] || OutlinedContainer;\n\n    const fallbackId = useId();\n\n    const theme = useTheme();\n\n    const handleFocus = () => {\n      setHasFocus(true);\n    };\n\n    const handleBlur = () => {\n      setHasFocus(false);\n    };\n\n    const hasError = Boolean(error);\n    const helperText = typeof error === 'string' ? error : helperTextProp;\n\n    const id = idProp || fallbackId;\n    const inputId = `${id}-text-field`;\n    const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n    const labelIsFloating =\n      hasFocus || (typeof value === 'string' && value.length > 0);\n\n    return (\n      <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n        <Container\n          theme={theme}\n          label={label}\n          color={color}\n          error={hasError}\n          labelIsFloating={labelIsFloating}\n          inputId={inputId}\n          hasFocus={hasFocus}\n          disabled={disabled}\n          leadingIcon={Boolean(leadingIcon)}\n          {...containerProps}\n        >\n          {leadingIcon && (\n            <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n          )}\n          <Input\n            ref={forwardedRef}\n            as={multiline ? 'textarea' : 'input'}\n            variant={variant}\n            type={type}\n            id={inputId}\n            onFocus={wrapEvent(onFocus, handleFocus)}\n            onBlur={wrapEvent(onBlur, handleBlur)}\n            onChange={onChange}\n            value={value}\n            theme={theme}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-disabled={disabled ? 'true' : undefined}\n            maxLength={maxLength}\n            multiline={multiline}\n            aria-describedby={helperTextId}\n            hasLabel={!!label}\n            leadingIcon={Boolean(leadingIcon)}\n            trailingIcon={Boolean(trailingIcon)}\n            {...otherProps}\n          />\n          {trailingIcon && (\n            <IconContainer position=\"end\">{trailingIcon}</IconContainer>\n          )}\n        </Container>\n\n        <HelperText\n          error={hasError}\n          disabled={disabled}\n          leftSide={helperText && <span id={helperTextId}>{helperText}</span>}\n          rightSide={\n            !hideCharacterCounter &&\n            characterCounter(value as string, maxLength)\n          }\n        />\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":["forwardRef","useState","useId","wrapEvent","useControlledState","Input","useTheme","FilledContainer","OutlinedContainer","HelperText","Box","IconContainer","jsx","_jsx","jsxs","_jsxs","componentMap","outlined","filled","characterCounter","value","maxLength","undefined","length","TextField","props","forwardedRef","type","id","idProp","variant","color","valueProp","defaultValue","error","disabled","hideCharacterCounter","label","placeholder","helperText","helperTextProp","multiline","onChange","onChangeProp","onFocus","onBlur","leadingIcon","trailingIcon","containerProps","otherProps","setState","e","target","hasFocus","setHasFocus","Container","fallbackId","theme","handleFocus","handleBlur","hasError","Boolean","inputId","helperTextId","labelIsFloating","display","flexDirection","width","children","position","ref","as","hasLabel","leftSide","rightSide"],"sources":["../../../src/TextField/TextField.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { forwardRef, useState, useId } from 'react';\nimport { wrapEvent, useControlledState } from '@basic-ui/core';\n\nimport type { InputProps } from './Input';\nimport { Input } from './Input';\nimport { useTheme } from '../theme';\nimport { FilledContainer } from './FilledContainer';\nimport { OutlinedContainer } from './OutlinedContainer';\nimport { HelperText } from './HelperText';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from './IconContainer';\n\nconst componentMap = {\n  outlined: OutlinedContainer,\n  filled: FilledContainer,\n};\n\nfunction characterCounter(\n  value: string | number | string[],\n  maxLength?: number\n) {\n  if (maxLength === undefined) {\n    return null;\n  }\n\n  return `${typeof value === 'string' ? value.length : 0} / ${maxLength}`;\n}\n\nexport type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {\n  variant?: 'outlined' | 'filled';\n  containerProps?: Omit<BoxProps, 'color'>;\n  color?: 'primary' | 'secondary';\n  label?: ReactNode;\n  helperText?: string;\n  maxLength?: number;\n  hideCharacterCounter?: boolean;\n  defaultValue?: string;\n  value?: string;\n  multiline?: boolean;\n  error?: boolean | string;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n};\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, forwardedRef) {\n    const {\n      type = 'text',\n      id: idProp,\n      variant = 'outlined',\n      color = 'primary',\n      value: valueProp,\n      defaultValue = '',\n      error,\n      disabled,\n      maxLength,\n      hideCharacterCounter = false,\n      label = null,\n      placeholder,\n      helperText: helperTextProp,\n      multiline,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      leadingIcon = null,\n      trailingIcon = null,\n      containerProps,\n      ...otherProps\n    } = props;\n    const [value, onChange] = useControlledState(\n      valueProp,\n      onChangeProp,\n      defaultValue,\n      (setState) => (e) => {\n        setState(e.target.value);\n      }\n    );\n    const [hasFocus, setHasFocus] = useState(false);\n\n    const Container = componentMap[variant] || OutlinedContainer;\n\n    const fallbackId = useId();\n\n    const theme = useTheme();\n\n    const handleFocus = () => {\n      setHasFocus(true);\n    };\n\n    const handleBlur = () => {\n      setHasFocus(false);\n    };\n\n    const hasError = Boolean(error);\n    const helperText = typeof error === 'string' ? error : helperTextProp;\n\n    const id = idProp || fallbackId;\n    const inputId = `${id}-text-field`;\n    const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n    const labelIsFloating =\n      hasFocus || (typeof value === 'string' && value.length > 0);\n\n    return (\n      <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n        <Container\n          theme={theme}\n          label={label}\n          color={color}\n          error={hasError}\n          labelIsFloating={labelIsFloating}\n          inputId={inputId}\n          hasFocus={hasFocus}\n          disabled={disabled}\n          leadingIcon={Boolean(leadingIcon)}\n          {...containerProps}\n        >\n          {leadingIcon && (\n            <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n          )}\n          <Input\n            ref={forwardedRef}\n            as={multiline ? 'textarea' : 'input'}\n            variant={variant}\n            type={type}\n            id={inputId}\n            onFocus={wrapEvent(onFocus, handleFocus)}\n            onBlur={wrapEvent(onBlur, handleBlur)}\n            onChange={onChange}\n            value={value}\n            theme={theme}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-disabled={disabled ? 'true' : undefined}\n            maxLength={maxLength}\n            multiline={multiline}\n            aria-describedby={helperTextId}\n            hasLabel={!!label}\n            leadingIcon={Boolean(leadingIcon)}\n            trailingIcon={Boolean(trailingIcon)}\n            {...otherProps}\n          />\n          {trailingIcon && (\n            <IconContainer position=\"end\">{trailingIcon}</IconContainer>\n          )}\n        </Container>\n\n        <HelperText\n          error={hasError}\n          disabled={disabled}\n          leftSide={helperText && <span id={helperTextId}>{helperText}</span>}\n          rightSide={\n            !hideCharacterCounter &&\n            characterCounter(value as string, maxLength)\n          }\n        />\n      </Box>\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
-export declare const PADDING_LEFT_WITH_ICON = 14;
-export declare const PADDING_LEFT_WITHOUT_ICON = 16;
-export declare const ICON_WIDTH = 24;
-export declare const PADDING_RIGHT_WITH_ICON = 12;
-export declare const PADDING_RIGHT_WITHOUT_ICON = 16;
+export declare const PADDING_LEFT_WITH_ICON = 14;
+export declare const PADDING_LEFT_WITHOUT_ICON = 16;
+export declare const ICON_WIDTH = 24;
+export declare const PADDING_RIGHT_WITH_ICON = 12;
+export declare const PADDING_RIGHT_WITHOUT_ICON = 16;

package/build/esm/TextField/consts.js

@@ -1,6 +1,6 @@
-export var PADDING_LEFT_WITH_ICON = 14;
-export var PADDING_LEFT_WITHOUT_ICON = 16;
-export var ICON_WIDTH = 24;
-export var PADDING_RIGHT_WITH_ICON = 12;
-export var PADDING_RIGHT_WITHOUT_ICON = 16;
+export const PADDING_LEFT_WITH_ICON = 14;
+export const PADDING_LEFT_WITHOUT_ICON = 16;
+export const ICON_WIDTH = 24;
+export const PADDING_RIGHT_WITH_ICON = 12;
+export const PADDING_RIGHT_WITHOUT_ICON = 16;
 //# sourceMappingURL=consts.js.map

package/build/esm/TextField/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":["PADDING_LEFT_WITH_ICON","PADDING_LEFT_WITHOUT_ICON","ICON_WIDTH","PADDING_RIGHT_WITH_ICON","PADDING_RIGHT_WITHOUT_ICON"],"sources":["../../../src/TextField/consts.ts"],"sourcesContent":["export const PADDING_LEFT_WITH_ICON = 14;\r\nexport const PADDING_LEFT_WITHOUT_ICON = 16;\r\n\r\nexport const ICON_WIDTH = 24;\r\n\r\nexport const PADDING_RIGHT_WITH_ICON = 12;\r\nexport const PADDING_RIGHT_WITHOUT_ICON = 16;\r\n"],"mappings":"AAAA,OAAO,IAAMA,sBAAsB,GAAG,EAA/B;AACP,OAAO,IAAMC,yBAAyB,GAAG,EAAlC;AAEP,OAAO,IAAMC,UAAU,GAAG,EAAnB;AAEP,OAAO,IAAMC,uBAAuB,GAAG,EAAhC;AACP,OAAO,IAAMC,0BAA0B,GAAG,EAAnC"}
+{"version":3,"file":"consts.js","names":["PADDING_LEFT_WITH_ICON","PADDING_LEFT_WITHOUT_ICON","ICON_WIDTH","PADDING_RIGHT_WITH_ICON","PADDING_RIGHT_WITHOUT_ICON"],"sources":["../../../src/TextField/consts.ts"],"sourcesContent":["export const PADDING_LEFT_WITH_ICON = 14;\nexport const PADDING_LEFT_WITHOUT_ICON = 16;\n\nexport const ICON_WIDTH = 24;\n\nexport const PADDING_RIGHT_WITH_ICON = 12;\nexport const PADDING_RIGHT_WITHOUT_ICON = 16;\n"],"mappings":"AAAA,OAAO,MAAMA,sBAAsB,GAAG,EAAE;AACxC,OAAO,MAAMC,yBAAyB,GAAG,EAAE;AAE3C,OAAO,MAAMC,UAAU,GAAG,EAAE;AAE5B,OAAO,MAAMC,uBAAuB,GAAG,EAAE;AACzC,OAAO,MAAMC,0BAA0B,GAAG,EAAE","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-export * from './TextField';
-export * from './FilledContainer';
-export * from './OutlinedContainer';
-export * from './HelperText';
+export * from './TextField';
+export * from './FilledContainer';
+export * from './OutlinedContainer';
+export * from './HelperText';

package/build/esm/TextField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/TextField/index.ts"],"sourcesContent":["export * from './TextField';\r\nexport * from './FilledContainer';\r\nexport * from './OutlinedContainer';\r\nexport * from './HelperText';\r\n"],"mappings":"AAAA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,cAAd"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/TextField/index.ts"],"sourcesContent":["export * from './TextField';\nexport * from './FilledContainer';\nexport * from './OutlinedContainer';\nexport * from './HelperText';\n"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,qBAAqB;AACnC,cAAc,cAAc","ignoreList":[]}

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

@@ -1,7 +1,7 @@
-export declare function BorderSlider(props: {
-    label: string;
-    defaultValue: number;
-    onChange: (value: number) => void;
-    onReset: () => void;
-    resetDisabled: boolean;
-}): JSX.Element;
+export declare function BorderSlider(props: {
+    label: string;
+    defaultValue: number;
+    onChange: (value: number) => void;
+    onReset: () => void;
+    resetDisabled: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/build/esm/ThemeExplorer/BorderSlider.js

@@ -1,20 +1,14 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { startTransition, useEffect, useRef, useState } from 'react';
 import { Box } from '../Box';
 import { Link as BaseLink } from '../Link';
 import { Slider, SliderMarker } from '../Slider';
 import { Text } from '../Text';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Link = BaseLink;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Link = BaseLink;
 export function BorderSlider(props) {
-  var _useState = useState(props.defaultValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var resetting = useRef(false);
-  useEffect(function () {
+  const [value, setValue] = useState(props.defaultValue);
+  const resetting = useRef(false);
+  useEffect(() => {
     if (resetting.current) {
       setValue(props.defaultValue);
       resetting.current = false;
@@ -33,7 +27,7 @@ export function BorderSlider(props) {
         children: [props.label, ' ', /*#__PURE__*/_jsx(Link, {
           as: "button",
           disabled: props.resetDisabled ? true : undefined,
-          onClick: function onClick() {
+          onClick: () => {
             resetting.current = true;
             props.onReset();
           },
@@ -44,9 +38,9 @@ export function BorderSlider(props) {
       })]
     }), /*#__PURE__*/_jsxs(Slider, {
       value: value,
-      onChange: function onChange(e, v) {
+      onChange: (e, v) => {
         setValue(v);
-        startTransition(function () {
+        startTransition(() => {
           props.onChange(v);
         });
       },

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

@@ -1 +1 @@
-{"version":3,"file":"BorderSlider.js","names":["startTransition","useEffect","useRef","useState","Box","Link","BaseLink","Slider","SliderMarker","Text","BorderSlider","props","defaultValue","value","setValue","resetting","current","label","resetDisabled","undefined","onReset","e","v","onChange"],"sources":["../../../src/ThemeExplorer/BorderSlider.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, FC } from 'react';\r\nimport { startTransition, useEffect, useRef, useState } from 'react';\r\n\r\nimport type { BoxProps } from '../Box';\r\nimport { Box } from '../Box';\r\nimport { Link as BaseLink } from '../Link';\r\nimport { Slider, SliderMarker } from '../Slider';\r\nimport { Text } from '../Text';\r\n\r\nconst Link: FC<\r\n  BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>\r\n> = BaseLink as any;\r\n\r\nexport function BorderSlider(props: {\r\n  label: string;\r\n  defaultValue: number;\r\n  onChange: (value: number) => void;\r\n  onReset: () => void;\r\n  resetDisabled: boolean;\r\n}) {\r\n  const [value, setValue] = useState(props.defaultValue);\r\n\r\n  const resetting = useRef(false);\r\n  useEffect(() => {\r\n    if (resetting.current) {\r\n      setValue(props.defaultValue);\r\n      resetting.current = false;\r\n    }\r\n  }, [props.defaultValue]);\r\n\r\n  return (\r\n    <Box width=\"100%\" display=\"flex\" flexDirection=\"column\">\r\n      <Text display=\"flex\" justifyContent=\"space-between\" width=\"100%\" pb={2}>\r\n        <span>\r\n          {props.label}{' '}\r\n          <Link\r\n            as=\"button\"\r\n            disabled={props.resetDisabled ? true : undefined}\r\n            onClick={() => {\r\n              resetting.current = true;\r\n              props.onReset();\r\n            }}\r\n          >\r\n            Reset\r\n          </Link>\r\n        </span>\r\n        <span>{value}px</span>\r\n      </Text>\r\n      <Slider\r\n        value={value}\r\n        onChange={(e, v) => {\r\n          setValue(v);\r\n          startTransition(() => {\r\n            props.onChange(v);\r\n          });\r\n        }}\r\n        min={0}\r\n        max={64}\r\n        step={2}\r\n      >\r\n        <SliderMarker value={2} />\r\n        <SliderMarker value={4} />\r\n        <SliderMarker value={8} />\r\n        <SliderMarker value={12} />\r\n        <SliderMarker value={16} />\r\n        <SliderMarker value={24} />\r\n        <SliderMarker value={32} />\r\n        <SliderMarker value={40} />\r\n        <SliderMarker value={48} />\r\n      </Slider>\r\n    </Box>\r\n  );\r\n}\r\n"],"mappings":";AACA,SAASA,eAAT,EAA0BC,SAA1B,EAAqCC,MAArC,EAA6CC,QAA7C,QAA6D,OAA7D;AAGA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,IAAI,IAAIC,QAAjB,QAAiC,SAAjC;AACA,SAASC,MAAT,EAAiBC,YAAjB,QAAqC,WAArC;AACA,SAASC,IAAT,QAAqB,SAArB;;;AAEA,IAAMJ,IAEL,GAAGC,QAFJ;AAIA,OAAO,SAASI,YAAT,CAAsBC,KAAtB,EAMJ;EACD,gBAA0BR,QAAQ,CAACQ,KAAK,CAACC,YAAP,CAAlC;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EAEA,IAAMC,SAAS,GAAGb,MAAM,CAAC,KAAD,CAAxB;EACAD,SAAS,CAAC,YAAM;IACd,IAAIc,SAAS,CAACC,OAAd,EAAuB;MACrBF,QAAQ,CAACH,KAAK,CAACC,YAAP,CAAR;MACAG,SAAS,CAACC,OAAV,GAAoB,KAApB;IACD;EACF,CALQ,EAKN,CAACL,KAAK,CAACC,YAAP,CALM,CAAT;EAOA,oBACE,MAAC,GAAD;IAAK,KAAK,EAAC,MAAX;IAAkB,OAAO,EAAC,MAA1B;IAAiC,aAAa,EAAC,QAA/C;IAAA,wBACE,MAAC,IAAD;MAAM,OAAO,EAAC,MAAd;MAAqB,cAAc,EAAC,eAApC;MAAoD,KAAK,EAAC,MAA1D;MAAiE,EAAE,EAAE,CAArE;MAAA,wBACE;QAAA,WACGD,KAAK,CAACM,KADT,EACgB,GADhB,eAEE,KAAC,IAAD;UACE,EAAE,EAAC,QADL;UAEE,QAAQ,EAAEN,KAAK,CAACO,aAAN,GAAsB,IAAtB,GAA6BC,SAFzC;UAGE,OAAO,EAAE,mBAAM;YACbJ,SAAS,CAACC,OAAV,GAAoB,IAApB;YACAL,KAAK,CAACS,OAAN;UACD,CANH;UAAA;QAAA,EAFF;MAAA,EADF,eAcE;QAAA,WAAOP,KAAP;MAAA,EAdF;IAAA,EADF,eAiBE,MAAC,MAAD;MACE,KAAK,EAAEA,KADT;MAEE,QAAQ,EAAE,kBAACQ,CAAD,EAAIC,CAAJ,EAAU;QAClBR,QAAQ,CAACQ,CAAD,CAAR;QACAtB,eAAe,CAAC,YAAM;UACpBW,KAAK,CAACY,QAAN,CAAeD,CAAf;QACD,CAFc,CAAf;MAGD,CAPH;MAQE,GAAG,EAAE,CARP;MASE,GAAG,EAAE,EATP;MAUE,IAAI,EAAE,CAVR;MAAA,wBAYE,KAAC,YAAD;QAAc,KAAK,EAAE;MAArB,EAZF,eAaE,KAAC,YAAD;QAAc,KAAK,EAAE;MAArB,EAbF,eAcE,KAAC,YAAD;QAAc,KAAK,EAAE;MAArB,EAdF,eAeE,KAAC,YAAD;QAAc,KAAK,EAAE;MAArB,EAfF,eAgBE,KAAC,YAAD;QAAc,KAAK,EAAE;MAArB,EAhBF,eAiBE,KAAC,YAAD;QAAc,KAAK,EAAE;MAArB,EAjBF,eAkBE,KAAC,YAAD;QAAc,KAAK,EAAE;MAArB,EAlBF,eAmBE,KAAC,YAAD;QAAc,KAAK,EAAE;MAArB,EAnBF,eAoBE,KAAC,YAAD;QAAc,KAAK,EAAE;MAArB,EApBF;IAAA,EAjBF;EAAA,EADF;AA0CD"}
+{"version":3,"file":"BorderSlider.js","names":["startTransition","useEffect","useRef","useState","Box","Link","BaseLink","Slider","SliderMarker","Text","jsx","_jsx","jsxs","_jsxs","BorderSlider","props","value","setValue","defaultValue","resetting","current","width","display","flexDirection","children","justifyContent","pb","label","as","disabled","resetDisabled","undefined","onClick","onReset","onChange","e","v","min","max","step"],"sources":["../../../src/ThemeExplorer/BorderSlider.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, FC } from 'react';\nimport { startTransition, useEffect, useRef, useState } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { Link as BaseLink } from '../Link';\nimport { Slider, SliderMarker } from '../Slider';\nimport { Text } from '../Text';\n\nconst Link: FC<\n  BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>\n> = BaseLink as any;\n\nexport function BorderSlider(props: {\n  label: string;\n  defaultValue: number;\n  onChange: (value: number) => void;\n  onReset: () => void;\n  resetDisabled: boolean;\n}) {\n  const [value, setValue] = useState(props.defaultValue);\n\n  const resetting = useRef(false);\n  useEffect(() => {\n    if (resetting.current) {\n      setValue(props.defaultValue);\n      resetting.current = false;\n    }\n  }, [props.defaultValue]);\n\n  return (\n    <Box width=\"100%\" display=\"flex\" flexDirection=\"column\">\n      <Text display=\"flex\" justifyContent=\"space-between\" width=\"100%\" pb={2}>\n        <span>\n          {props.label}{' '}\n          <Link\n            as=\"button\"\n            disabled={props.resetDisabled ? true : undefined}\n            onClick={() => {\n              resetting.current = true;\n              props.onReset();\n            }}\n          >\n            Reset\n          </Link>\n        </span>\n        <span>{value}px</span>\n      </Text>\n      <Slider\n        value={value}\n        onChange={(e, v) => {\n          setValue(v);\n          startTransition(() => {\n            props.onChange(v);\n          });\n        }}\n        min={0}\n        max={64}\n        step={2}\n      >\n        <SliderMarker value={2} />\n        <SliderMarker value={4} />\n        <SliderMarker value={8} />\n        <SliderMarker value={12} />\n        <SliderMarker value={16} />\n        <SliderMarker value={24} />\n        <SliderMarker value={32} />\n        <SliderMarker value={40} />\n        <SliderMarker value={48} />\n      </Slider>\n    </Box>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/build/esm/ThemeExplorer/ColorPicker.js

@@ -1,31 +1,26 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["color", "onChange", "width", "height"];
 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";
-var BaseColorPicker = _BaseColorPicker;
-var Hue = _Hue;
-var HueCursor = _HueCursor;
-var Saturation = _Saturation;
-var SaturationCursor = _SaturationCursor;
-export var ColorPicker = function ColorPicker(_ref) {
-  var color = _ref.color,
-      onChange = _ref.onChange,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 450 : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 225 : _ref$height,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_jsxs(BaseColorPicker, _extends(_extends({
+import { jsx as _jsx, 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,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/_jsxs(BaseColorPicker, {
     as: Box,
     width: width,
     height: height,
     onChange: onChange,
-    color: color
-  }, otherProps), {}, {
+    color: color,
+    ...otherProps,
     children: [/*#__PURE__*/_jsx(Saturation, {
       as: Box,
       sx: {
@@ -56,7 +51,7 @@ export var ColorPicker = function ColorPicker(_ref) {
         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))"
+        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,
@@ -72,6 +67,6 @@ export var ColorPicker = function ColorPicker(_ref) {
         }
       })
     })]
-  }));
+  });
 };
 //# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","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"],"sources":["../../../src/ThemeExplorer/ColorPicker.tsx"],"sourcesContent":["import type {\r\n  Color,\r\n  ColorPickerProps as BaseColorPickerProps,\r\n  HueProps,\r\n  HueCursorProps,\r\n  SaturationProps,\r\n  SaturationCursorProps,\r\n} from '@basic-ui/color-picker';\r\nimport {\r\n  ColorPicker as _BaseColorPicker,\r\n  Hue as _Hue,\r\n  HueCursor as _HueCursor,\r\n  Saturation as _Saturation,\r\n  SaturationCursor as _SaturationCursor,\r\n} from '@basic-ui/color-picker';\r\nimport type { FC } from 'react';\r\n\r\nimport type { BoxProps } from '../Box';\r\nimport { Box } from '../Box';\r\n\r\nexport type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &\r\n  BaseColorPickerProps) & {\r\n  color: Color;\r\n  onChange: (color: Color) => void;\r\n};\r\n\r\nconst BaseColorPicker: FC<\r\n  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps\r\n> = _BaseColorPicker as any;\r\nconst Hue: FC<BoxProps & HueProps> = _Hue as any;\r\nconst HueCursor: FC<BoxProps & HueCursorProps> = _HueCursor as any;\r\nconst Saturation: FC<BoxProps & SaturationProps> = _Saturation as any;\r\nconst SaturationCursor: FC<BoxProps & SaturationCursorProps> =\r\n  _SaturationCursor as any;\r\n\r\nexport const ColorPicker: FC<ColorPickerProps> = ({\r\n  color,\r\n  onChange,\r\n  width = 450,\r\n  height = 225,\r\n  ...otherProps\r\n}) => {\r\n  return (\r\n    <BaseColorPicker\r\n      as={Box}\r\n      width={width}\r\n      height={height}\r\n      onChange={onChange}\r\n      color={color}\r\n      {...otherProps}\r\n    >\r\n      <Saturation\r\n        as={Box}\r\n        sx={{\r\n          position: 'relative',\r\n          touchAction: 'none',\r\n          userSelect: 'none',\r\n          width: '100%',\r\n          backgroundImage:\r\n            'linear-gradient(transparent, black), linear-gradient(to right, white, transparent)',\r\n        }}\r\n      >\r\n        <SaturationCursor\r\n          as={Box}\r\n          sx={{\r\n            position: 'absolute',\r\n            width: '20px',\r\n            height: '20px',\r\n            border: '2px solid #ffffff',\r\n            borderRadius: 'full',\r\n            boxShadow: '0 0 15px 0 rgba(0, 0, 0, 0.15)',\r\n            boxSizing: 'border-box',\r\n            transform: 'translate(-10px, -10px)',\r\n          }}\r\n        />\r\n      </Saturation>\r\n      <Hue\r\n        as={Box}\r\n        sx={{\r\n          position: 'relative',\r\n          touchAction: 'none',\r\n          userSelect: 'none',\r\n          width: '100%',\r\n          height: '12px',\r\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))`,\r\n        }}\r\n      >\r\n        <HueCursor\r\n          as={Box}\r\n          sx={{\r\n            position: 'absolute',\r\n            width: '20px',\r\n            height: '20px',\r\n            border: '2px solid #ffffff',\r\n            borderRadius: 'full',\r\n            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px',\r\n            boxSizing: 'border-box',\r\n            transform: 'translate(-10px, -4px)',\r\n          }}\r\n        />\r\n      </Hue>\r\n    </BaseColorPicker>\r\n  );\r\n};\r\n"],"mappings":";;;AAQA,SACEA,WAAW,IAAIC,gBADjB,EAEEC,GAAG,IAAIC,IAFT,EAGEC,SAAS,IAAIC,UAHf,EAIEC,UAAU,IAAIC,WAJhB,EAKEC,gBAAgB,IAAIC,iBALtB,QAMO,wBANP;AAUA,SAASC,GAAT,QAAoB,QAApB;;;AAQA,IAAMC,eAEL,GAAGV,gBAFJ;AAGA,IAAMC,GAA4B,GAAGC,IAArC;AACA,IAAMC,SAAwC,GAAGC,UAAjD;AACA,IAAMC,UAA0C,GAAGC,WAAnD;AACA,IAAMC,gBAAsD,GAC1DC,iBADF;AAGA,OAAO,IAAMT,WAAiC,GAAG,SAApCA,WAAoC,OAM3C;EAAA,IALJY,KAKI,QALJA,KAKI;EAAA,IAJJC,QAII,QAJJA,QAII;EAAA,sBAHJC,KAGI;EAAA,IAHJA,KAGI,2BAHI,GAGJ;EAAA,uBAFJC,MAEI;EAAA,IAFJA,MAEI,4BAFK,GAEL;EAAA,IADDC,UACC;;EACJ,oBACE,MAAC,eAAD;IACE,EAAE,EAAEN,GADN;IAEE,KAAK,EAAEI,KAFT;IAGE,MAAM,EAAEC,MAHV;IAIE,QAAQ,EAAEF,QAJZ;IAKE,KAAK,EAAED;EALT,GAMMI,UANN;IAAA,wBAQE,KAAC,UAAD;MACE,EAAE,EAAEN,GADN;MAEE,EAAE,EAAE;QACFO,QAAQ,EAAE,UADR;QAEFC,WAAW,EAAE,MAFX;QAGFC,UAAU,EAAE,MAHV;QAIFL,KAAK,EAAE,MAJL;QAKFM,eAAe,EACb;MANA,CAFN;MAAA,uBAWE,KAAC,gBAAD;QACE,EAAE,EAAEV,GADN;QAEE,EAAE,EAAE;UACFO,QAAQ,EAAE,UADR;UAEFH,KAAK,EAAE,MAFL;UAGFC,MAAM,EAAE,MAHN;UAIFM,MAAM,EAAE,mBAJN;UAKFC,YAAY,EAAE,MALZ;UAMFC,SAAS,EAAE,gCANT;UAOFC,SAAS,EAAE,YAPT;UAQFC,SAAS,EAAE;QART;MAFN;IAXF,EARF,eAiCE,KAAC,GAAD;MACE,EAAE,EAAEf,GADN;MAEE,EAAE,EAAE;QACFO,QAAQ,EAAE,UADR;QAEFC,WAAW,EAAE,MAFX;QAGFC,UAAU,EAAE,MAHV;QAIFL,KAAK,EAAE,MAJL;QAKFC,MAAM,EAAE,MALN;QAMFK,eAAe;MANb,CAFN;MAAA,uBAWE,KAAC,SAAD;QACE,EAAE,EAAEV,GADN;QAEE,EAAE,EAAE;UACFO,QAAQ,EAAE,UADR;UAEFH,KAAK,EAAE,MAFL;UAGFC,MAAM,EAAE,MAHN;UAIFM,MAAM,EAAE,mBAJN;UAKFC,YAAY,EAAE,MALZ;UAMFC,SAAS,EAAE,sCANT;UAOFC,SAAS,EAAE,YAPT;UAQFC,SAAS,EAAE;QART;MAFN;IAXF,EAjCF;EAAA,GADF;AA6DD,CApEM"}
+{"version":3,"file":"ColorPicker.js","names":["ColorPicker","_BaseColorPicker","Hue","_Hue","HueCursor","_HueCursor","Saturation","_Saturation","SaturationCursor","_SaturationCursor","Box","jsx","_jsx","jsxs","_jsxs","BaseColorPicker","_ref","color","onChange","width","height","otherProps","as","children","sx","position","touchAction","userSelect","backgroundImage","border","borderRadius","boxShadow","boxSizing","transform"],"sources":["../../../src/ThemeExplorer/ColorPicker.tsx"],"sourcesContent":["import type {\n  Color,\n  ColorPickerProps as BaseColorPickerProps,\n  HueProps,\n  HueCursorProps,\n  SaturationProps,\n  SaturationCursorProps,\n} from '@basic-ui/color-picker';\nimport {\n  ColorPicker as _BaseColorPicker,\n  Hue as _Hue,\n  HueCursor as _HueCursor,\n  Saturation as _Saturation,\n  SaturationCursor as _SaturationCursor,\n} from '@basic-ui/color-picker';\nimport type { FC } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &\n  BaseColorPickerProps) & {\n  color: Color;\n  onChange: (color: Color) => void;\n};\n\nconst BaseColorPicker: FC<\n  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps\n> = _BaseColorPicker as any;\nconst Hue: FC<BoxProps & HueProps> = _Hue as any;\nconst HueCursor: FC<BoxProps & HueCursorProps> = _HueCursor as any;\nconst Saturation: FC<BoxProps & SaturationProps> = _Saturation as any;\nconst SaturationCursor: FC<BoxProps & SaturationCursorProps> =\n  _SaturationCursor as any;\n\nexport const ColorPicker: FC<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: 'full',\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: 'full',\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"],"mappings":"AAQA,SACEA,WAAW,IAAIC,gBAAgB,EAC/BC,GAAG,IAAIC,IAAI,EACXC,SAAS,IAAIC,UAAU,EACvBC,UAAU,IAAIC,WAAW,EACzBC,gBAAgB,IAAIC,iBAAiB,QAChC,wBAAwB;AAI/B,SAASC,GAAG,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQ7B,MAAMC,eAEL,GAAGd,gBAAuB;AAC3B,MAAMC,GAA4B,GAAGC,IAAW;AAChD,MAAMC,SAAwC,GAAGC,UAAiB;AAClE,MAAMC,UAA0C,GAAGC,WAAkB;AACrE,MAAMC,gBAAsD,GAC1DC,iBAAwB;AAE1B,OAAO,MAAMT,WAAiC,GAAGgB,IAAA,IAM3C;EAAA,IAN4C;IAChDC,KAAK;IACLC,QAAQ;IACRC,KAAK,GAAG,GAAG;IACXC,MAAM,GAAG,GAAG;IACZ,GAAGC;EACL,CAAC,GAAAL,IAAA;EACC,oBACEF,KAAA,CAACC,eAAe;IACdO,EAAE,EAAEZ,GAAI;IACRS,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfF,QAAQ,EAAEA,QAAS;IACnBD,KAAK,EAAEA,KAAM;IAAA,GACTI,UAAU;IAAAE,QAAA,gBAEdX,IAAA,CAACN,UAAU;MACTgB,EAAE,EAAEZ,GAAI;MACRc,EAAE,EAAE;QACFC,QAAQ,EAAE,UAAU;QACpBC,WAAW,EAAE,MAAM;QACnBC,UAAU,EAAE,MAAM;QAClBR,KAAK,EAAE,MAAM;QACbS,eAAe,EACb;MACJ,CAAE;MAAAL,QAAA,eAEFX,IAAA,CAACJ,gBAAgB;QACfc,EAAE,EAAEZ,GAAI;QACRc,EAAE,EAAE;UACFC,QAAQ,EAAE,UAAU;UACpBN,KAAK,EAAE,MAAM;UACbC,MAAM,EAAE,MAAM;UACdS,MAAM,EAAE,mBAAmB;UAC3BC,YAAY,EAAE,MAAM;UACpBC,SAAS,EAAE,gCAAgC;UAC3CC,SAAS,EAAE,YAAY;UACvBC,SAAS,EAAE;QACb;MAAE,CACH;IAAC,CACQ,CAAC,eACbrB,IAAA,CAACV,GAAG;MACFoB,EAAE,EAAEZ,GAAI;MACRc,EAAE,EAAE;QACFC,QAAQ,EAAE,UAAU;QACpBC,WAAW,EAAE,MAAM;QACnBC,UAAU,EAAE,MAAM;QAClBR,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,MAAM;QACdQ,eAAe,EAAE;MACnB,CAAE;MAAAL,QAAA,eAEFX,IAAA,CAACR,SAAS;QACRkB,EAAE,EAAEZ,GAAI;QACRc,EAAE,EAAE;UACFC,QAAQ,EAAE,UAAU;UACpBN,KAAK,EAAE,MAAM;UACbC,MAAM,EAAE,MAAM;UACdS,MAAM,EAAE,mBAAmB;UAC3BC,YAAY,EAAE,MAAM;UACpBC,SAAS,EAAE,sCAAsC;UACjDC,SAAS,EAAE,YAAY;UACvBC,SAAS,EAAE;QACb;MAAE,CACH;IAAC,CACC,CAAC;EAAA,CACS,CAAC;AAEtB,CAAC","ignoreList":[]}

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

@@ -1,10 +1,10 @@
-import type { Color } from '@basic-ui/color-picker';
-interface ColorSchemePickerProps {
-    label: string;
-    initialValue: Color;
-    onChange: (c: Color) => void;
-    onReset: () => void;
-    resetDisabled: boolean;
-}
-export declare function ColorSchemePicker(props: ColorSchemePickerProps): JSX.Element;
-export {};
+import type { Color } from '@basic-ui/color-picker';
+interface ColorSchemePickerProps {
+    label: string;
+    initialValue: Color;
+    onChange: (c: Color) => void;
+    onReset: () => void;
+    resetDisabled: boolean;
+}
+export declare function ColorSchemePicker(props: ColorSchemePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/esm/ThemeExplorer/ColorSchemePicker.js

@@ -1,25 +1,20 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { startTransition, useEffect, useRef, useState } from 'react';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { TextFieldColorPicker } from './TextFieldColorPicker';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ColorSchemePicker(props) {
-  var label = props.label,
-      initialValue = props.initialValue,
-      _onChange = props.onChange,
-      onReset = props.onReset,
-      resetDisabled = props.resetDisabled;
-
-  var _useState = useState(initialValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var remountKey = useRef(0);
-  var resetting = useRef(false);
-  useEffect(function () {
+  const {
+    label,
+    initialValue,
+    onChange,
+    onReset,
+    resetDisabled
+  } = props;
+  const [value, setValue] = useState(initialValue);
+  const remountKey = useRef(0);
+  const resetting = useRef(false);
+  useEffect(() => {
     if (resetting.current) {
       remountKey.current++;
       resetting.current = false;
@@ -34,16 +29,16 @@ export function ColorSchemePicker(props) {
     children: [/*#__PURE__*/_jsx(TextFieldColorPicker, {
       label: label,
       value: value,
-      onChange: function onChange(c) {
+      onChange: c => {
         setValue(c);
-        startTransition(function () {
-          _onChange(c);
+        startTransition(() => {
+          onChange(c);
         });
       }
     }, remountKey.current), /*#__PURE__*/_jsx(Button, {
       variant: "text",
       disabled: resetDisabled,
-      onClick: function onClick() {
+      onClick: () => {
         resetting.current = true;
         onReset();
       },