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

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemePicker.js","names":["startTransition","useEffect","useRef","useState","Box","Button","TextFieldColorPicker","ColorSchemePicker","props","label","initialValue","onChange","onReset","resetDisabled","value","setValue","remountKey","resetting","current","c"],"sources":["../../../src/ThemeExplorer/ColorSchemePicker.tsx"],"sourcesContent":["import type { Color } from '@basic-ui/color-picker';\r\nimport { startTransition, useEffect, useRef, useState } from 'react';\r\n\r\nimport { Box } from '../Box';\r\nimport { Button } from '../Button';\r\nimport { TextFieldColorPicker } from './TextFieldColorPicker';\r\n\r\ninterface ColorSchemePickerProps {\r\n  label: string;\r\n  initialValue: Color;\r\n  onChange: (c: Color) => void;\r\n  onReset: () => void;\r\n  resetDisabled: boolean;\r\n}\r\n\r\nexport function ColorSchemePicker(props: ColorSchemePickerProps) {\r\n  const { label, initialValue, onChange, onReset, resetDisabled } = props;\r\n  const [value, setValue] = useState(initialValue);\r\n\r\n  const remountKey = useRef(0);\r\n  const resetting = useRef(false);\r\n  useEffect(() => {\r\n    if (resetting.current) {\r\n      remountKey.current++;\r\n      resetting.current = false;\r\n      setValue(props.initialValue);\r\n    }\r\n  }, [props.initialValue]);\r\n\r\n  return (\r\n    <Box display=\"flex\" minWidth=\"300px\" flex=\"1\" alignItems=\"center\">\r\n      <TextFieldColorPicker\r\n        key={remountKey.current}\r\n        label={label}\r\n        value={value}\r\n        onChange={(c) => {\r\n          setValue(c);\r\n          startTransition(() => {\r\n            onChange(c);\r\n          });\r\n        }}\r\n      />\r\n      <Button\r\n        variant=\"text\"\r\n        disabled={resetDisabled}\r\n        onClick={() => {\r\n          resetting.current = true;\r\n          onReset();\r\n        }}\r\n      >\r\n        Reset\r\n      </Button>\r\n    </Box>\r\n  );\r\n}\r\n"],"mappings":";AACA,SAASA,eAAT,EAA0BC,SAA1B,EAAqCC,MAArC,EAA6CC,QAA7C,QAA6D,OAA7D;AAEA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,oBAAT,QAAqC,wBAArC;;;AAUA,OAAO,SAASC,iBAAT,CAA2BC,KAA3B,EAA0D;EAC/D,IAAQC,KAAR,GAAkED,KAAlE,CAAQC,KAAR;EAAA,IAAeC,YAAf,GAAkEF,KAAlE,CAAeE,YAAf;EAAA,IAA6BC,SAA7B,GAAkEH,KAAlE,CAA6BG,QAA7B;EAAA,IAAuCC,OAAvC,GAAkEJ,KAAlE,CAAuCI,OAAvC;EAAA,IAAgDC,aAAhD,GAAkEL,KAAlE,CAAgDK,aAAhD;;EACA,gBAA0BV,QAAQ,CAACO,YAAD,CAAlC;EAAA;EAAA,IAAOI,KAAP;EAAA,IAAcC,QAAd;;EAEA,IAAMC,UAAU,GAAGd,MAAM,CAAC,CAAD,CAAzB;EACA,IAAMe,SAAS,GAAGf,MAAM,CAAC,KAAD,CAAxB;EACAD,SAAS,CAAC,YAAM;IACd,IAAIgB,SAAS,CAACC,OAAd,EAAuB;MACrBF,UAAU,CAACE,OAAX;MACAD,SAAS,CAACC,OAAV,GAAoB,KAApB;MACAH,QAAQ,CAACP,KAAK,CAACE,YAAP,CAAR;IACD;EACF,CANQ,EAMN,CAACF,KAAK,CAACE,YAAP,CANM,CAAT;EAQA,oBACE,MAAC,GAAD;IAAK,OAAO,EAAC,MAAb;IAAoB,QAAQ,EAAC,OAA7B;IAAqC,IAAI,EAAC,GAA1C;IAA8C,UAAU,EAAC,QAAzD;IAAA,wBACE,KAAC,oBAAD;MAEE,KAAK,EAAED,KAFT;MAGE,KAAK,EAAEK,KAHT;MAIE,QAAQ,EAAE,kBAACK,CAAD,EAAO;QACfJ,QAAQ,CAACI,CAAD,CAAR;QACAnB,eAAe,CAAC,YAAM;UACpBW,SAAQ,CAACQ,CAAD,CAAR;QACD,CAFc,CAAf;MAGD;IATH,GACOH,UAAU,CAACE,OADlB,CADF,eAYE,KAAC,MAAD;MACE,OAAO,EAAC,MADV;MAEE,QAAQ,EAAEL,aAFZ;MAGE,OAAO,EAAE,mBAAM;QACbI,SAAS,CAACC,OAAV,GAAoB,IAApB;QACAN,OAAO;MACR,CANH;MAAA;IAAA,EAZF;EAAA,EADF;AAyBD"}
+{"version":3,"file":"ColorSchemePicker.js","names":["startTransition","useEffect","useRef","useState","Box","Button","TextFieldColorPicker","jsx","_jsx","jsxs","_jsxs","ColorSchemePicker","props","label","initialValue","onChange","onReset","resetDisabled","value","setValue","remountKey","resetting","current","display","minWidth","flex","alignItems","children","c","variant","disabled","onClick"],"sources":["../../../src/ThemeExplorer/ColorSchemePicker.tsx"],"sourcesContent":["import type { Color } from '@basic-ui/color-picker';\nimport { startTransition, useEffect, useRef, useState } from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { TextFieldColorPicker } from './TextFieldColorPicker';\n\ninterface ColorSchemePickerProps {\n  label: string;\n  initialValue: Color;\n  onChange: (c: Color) => void;\n  onReset: () => void;\n  resetDisabled: boolean;\n}\n\nexport function ColorSchemePicker(props: ColorSchemePickerProps) {\n  const { label, initialValue, onChange, onReset, resetDisabled } = props;\n  const [value, setValue] = useState(initialValue);\n\n  const remountKey = useRef(0);\n  const resetting = useRef(false);\n  useEffect(() => {\n    if (resetting.current) {\n      remountKey.current++;\n      resetting.current = false;\n      setValue(props.initialValue);\n    }\n  }, [props.initialValue]);\n\n  return (\n    <Box display=\"flex\" minWidth=\"300px\" flex=\"1\" alignItems=\"center\">\n      <TextFieldColorPicker\n        key={remountKey.current}\n        label={label}\n        value={value}\n        onChange={(c) => {\n          setValue(c);\n          startTransition(() => {\n            onChange(c);\n          });\n        }}\n      />\n      <Button\n        variant=\"text\"\n        disabled={resetDisabled}\n        onClick={() => {\n          resetting.current = true;\n          onReset();\n        }}\n      >\n        Reset\n      </Button>\n    </Box>\n  );\n}\n"],"mappings":"AACA,SAASA,eAAe,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEpE,SAASC,GAAG,QAAQ,QAAQ;AAC5B,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,oBAAoB,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAU9D,OAAO,SAASC,iBAAiBA,CAACC,KAA6B,EAAE;EAC/D,MAAM;IAAEC,KAAK;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,OAAO;IAAEC;EAAc,CAAC,GAAGL,KAAK;EACvE,MAAM,CAACM,KAAK,EAAEC,QAAQ,CAAC,GAAGhB,QAAQ,CAACW,YAAY,CAAC;EAEhD,MAAMM,UAAU,GAAGlB,MAAM,CAAC,CAAC,CAAC;EAC5B,MAAMmB,SAAS,GAAGnB,MAAM,CAAC,KAAK,CAAC;EAC/BD,SAAS,CAAC,MAAM;IACd,IAAIoB,SAAS,CAACC,OAAO,EAAE;MACrBF,UAAU,CAACE,OAAO,EAAE;MACpBD,SAAS,CAACC,OAAO,GAAG,KAAK;MACzBH,QAAQ,CAACP,KAAK,CAACE,YAAY,CAAC;IAC9B;EACF,CAAC,EAAE,CAACF,KAAK,CAACE,YAAY,CAAC,CAAC;EAExB,oBACEJ,KAAA,CAACN,GAAG;IAACmB,OAAO,EAAC,MAAM;IAACC,QAAQ,EAAC,OAAO;IAACC,IAAI,EAAC,GAAG;IAACC,UAAU,EAAC,QAAQ;IAAAC,QAAA,gBAC/DnB,IAAA,CAACF,oBAAoB;MAEnBO,KAAK,EAAEA,KAAM;MACbK,KAAK,EAAEA,KAAM;MACbH,QAAQ,EAAGa,CAAC,IAAK;QACfT,QAAQ,CAACS,CAAC,CAAC;QACX5B,eAAe,CAAC,MAAM;UACpBe,QAAQ,CAACa,CAAC,CAAC;QACb,CAAC,CAAC;MACJ;IAAE,GARGR,UAAU,CAACE,OASjB,CAAC,eACFd,IAAA,CAACH,MAAM;MACLwB,OAAO,EAAC,MAAM;MACdC,QAAQ,EAAEb,aAAc;MACxBc,OAAO,EAAEA,CAAA,KAAM;QACbV,SAAS,CAACC,OAAO,GAAG,IAAI;QACxBN,OAAO,CAAC,CAAC;MACX,CAAE;MAAAW,QAAA,EACH;IAED,CAAQ,CAAC;EAAA,CACN,CAAC;AAEV","ignoreList":[]}

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

@@ -1,9 +1,9 @@
-export interface FontAutoCompleteProps {
-    label?: string;
-    initialValue?: string;
-    onSelect?: (font: string) => void;
-    onReset: () => void;
-    resetDisabled: boolean;
-}
-export declare function parseMainFont(fontStr: string): string | undefined;
-export declare function FontAutoComplete({ initialValue, onSelect, label, onReset, resetDisabled, }: FontAutoCompleteProps): JSX.Element;
+export interface FontAutoCompleteProps {
+    label?: string;
+    initialValue?: string;
+    onSelect?: (font: string) => void;
+    onReset: () => void;
+    resetDisabled: boolean;
+}
+export declare function parseMainFont(fontStr: string): string | undefined;
+export declare function FontAutoComplete({ initialValue, onSelect, label, onReset, resetDisabled, }: FontAutoCompleteProps): import("react/jsx-runtime").JSX.Element;

package/build/esm/ThemeExplorer/FontAutoComplete.js

@@ -1,67 +1,50 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState, useMemo, useEffect, useRef, useDeferredValue, memo } from 'react';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { Combobox, ComboboxOption, ComboboxList, ComboboxPopover, ComboboxInput, ComboboxButton } from '../Combobox';
 import { Text } from '../Text';
 import { googleFonts } from './googleFonts';
-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";
 function useFontMatch(searchTerm) {
-  return useMemo(function () {
-    var term = searchTerm.trim().toLowerCase();
-    return term === '' ? googleFonts : googleFonts.filter(function (font) {
-      return font.toLowerCase().indexOf(term) !== -1;
-    });
+  return useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return term === '' ? googleFonts : googleFonts.filter(font => font.toLowerCase().indexOf(term) !== -1);
   }, [searchTerm]);
 }
-
 export function parseMainFont(fontStr) {
-  var fonts = fontStr.split(/, */).map(function (f) {
-    return f.replace(/"([^"]+)"/, '$1');
-  });
+  const fonts = fontStr.split(/, */).map(f => f.replace(/"([^"]+)"/, '$1'));
   return fonts.length > 0 ? fonts[0] : undefined;
 }
 export function FontAutoComplete(_ref) {
-  var _ref$initialValue = _ref.initialValue,
-      initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
-      _onSelect = _ref.onSelect,
-      label = _ref.label,
-      onReset = _ref.onReset,
-      resetDisabled = _ref.resetDisabled;
-
-  var _useState = useState(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      term = _useState2[0],
-      setTerm = _useState2[1];
-
-  var filterTerm = useDeferredValue(term);
-
-  var _useState3 = useState(initialValue),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selected = _useState4[0],
-      setSelected = _useState4[1];
-
-  var resetting = useRef(false);
-  useEffect(function () {
+  let {
+    initialValue = '',
+    onSelect,
+    label,
+    onReset,
+    resetDisabled
+  } = _ref;
+  const [term, setTerm] = useState(undefined);
+  const filterTerm = useDeferredValue(term);
+  const [selected, setSelected] = useState(initialValue);
+  const resetting = useRef(false);
+  useEffect(() => {
     if (resetting.current) {
       setSelected(initialValue);
       setTerm(undefined);
       resetting.current = false;
     }
   }, [initialValue]);
-  var results = useFontMatch(filterTerm || '');
+  const results = useFontMatch(filterTerm || '');
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     minWidth: "300px",
     flex: "1",
     alignItems: "center",
     children: [/*#__PURE__*/_jsxs(Combobox, {
-      onSelect: function onSelect(text) {
+      onSelect: text => {
         setSelected(text);
         setTerm(text);
-        _onSelect === null || _onSelect === void 0 ? void 0 : _onSelect(text);
+        onSelect?.(text);
       },
       selectOnBlur: true,
       width: "100%",
@@ -69,7 +52,7 @@ export function FontAutoComplete(_ref) {
         position: "relative",
         width: "100%",
         children: [/*#__PURE__*/_jsx(ComboboxInput, {
-          onChange: function onChange(e) {
+          onChange: e => {
             setTerm(e.target.value);
           },
           value: term === undefined ? selected : term,
@@ -91,7 +74,7 @@ export function FontAutoComplete(_ref) {
       })]
     }), /*#__PURE__*/_jsx(Button, {
       variant: "text",
-      onClick: function onClick() {
+      onClick: () => {
         resetting.current = true;
         onReset();
       },
@@ -100,11 +83,10 @@ export function FontAutoComplete(_ref) {
     })]
   });
 }
-var SearchResults = /*#__PURE__*/memo(function SearchResults(props) {
+const SearchResults = /*#__PURE__*/memo(function SearchResults(props) {
   if (!props.results) {
     return null;
   }
-
   return /*#__PURE__*/_jsx(ComboboxPopover, {
     zIndex: 100,
     children: /*#__PURE__*/_jsxs(ComboboxList, {
@@ -115,13 +97,11 @@ var SearchResults = /*#__PURE__*/memo(function SearchResults(props) {
         px: 3,
         py: 2,
         children: "Sorted by popularity"
-      }), props.results.map(function (result) {
-        return /*#__PURE__*/_jsx(ComboboxOption, {
-          id: result,
-          text: result,
-          value: result
-        }, result);
-      })]
+      }), props.results.map(result => /*#__PURE__*/_jsx(ComboboxOption, {
+        id: result,
+        text: result,
+        value: result
+      }, result))]
     })
   });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"FontAutoComplete.js","names":["useState","useMemo","useEffect","useRef","useDeferredValue","memo","Box","Button","Combobox","ComboboxOption","ComboboxList","ComboboxPopover","ComboboxInput","ComboboxButton","Text","googleFonts","useFontMatch","searchTerm","term","trim","toLowerCase","filter","font","indexOf","parseMainFont","fontStr","fonts","split","map","f","replace","length","undefined","FontAutoComplete","initialValue","onSelect","label","onReset","resetDisabled","setTerm","filterTerm","selected","setSelected","resetting","current","results","text","e","target","value","SearchResults","props","result"],"sources":["../../../src/ThemeExplorer/FontAutoComplete.tsx"],"sourcesContent":["import {\r\n  useState,\r\n  useMemo,\r\n  useEffect,\r\n  useRef,\r\n  useDeferredValue,\r\n  memo,\r\n} from 'react';\r\n\r\nimport { Box } from '../Box';\r\nimport { Button } from '../Button';\r\nimport {\r\n  Combobox,\r\n  ComboboxOption,\r\n  ComboboxList,\r\n  ComboboxPopover,\r\n  ComboboxInput,\r\n  ComboboxButton,\r\n} from '../Combobox';\r\nimport { Text } from '../Text';\r\nimport { googleFonts } from './googleFonts';\r\n\r\nexport interface FontAutoCompleteProps {\r\n  label?: string;\r\n  initialValue?: string;\r\n  onSelect?: (font: string) => void;\r\n  onReset: () => void;\r\n  resetDisabled: boolean;\r\n}\r\n\r\nfunction useFontMatch(searchTerm: string) {\r\n  return useMemo(() => {\r\n    const term = searchTerm.trim().toLowerCase();\r\n    return term === ''\r\n      ? googleFonts\r\n      : googleFonts.filter((font) => font.toLowerCase().indexOf(term) !== -1);\r\n  }, [searchTerm]);\r\n}\r\n\r\nexport function parseMainFont(fontStr: string): string | undefined {\r\n  const fonts = fontStr.split(/, */).map((f) => f.replace(/\"([^\"]+)\"/, '$1'));\r\n  return fonts.length > 0 ? fonts[0] : undefined;\r\n}\r\n\r\nexport function FontAutoComplete({\r\n  initialValue = '',\r\n  onSelect,\r\n  label,\r\n  onReset,\r\n  resetDisabled,\r\n}: FontAutoCompleteProps) {\r\n  const [term, setTerm] = useState<undefined | string>(undefined);\r\n  const filterTerm = useDeferredValue(term);\r\n  const [selected, setSelected] = useState(initialValue);\r\n\r\n  const resetting = useRef(false);\r\n  useEffect(() => {\r\n    if (resetting.current) {\r\n      setSelected(initialValue);\r\n      setTerm(undefined);\r\n      resetting.current = false;\r\n    }\r\n  }, [initialValue]);\r\n\r\n  const results = useFontMatch(filterTerm || '');\r\n  return (\r\n    <Box display=\"flex\" minWidth=\"300px\" flex=\"1\" alignItems=\"center\">\r\n      <Combobox\r\n        onSelect={(text) => {\r\n          setSelected(text);\r\n          setTerm(text);\r\n          onSelect?.(text);\r\n        }}\r\n        selectOnBlur\r\n        width=\"100%\"\r\n      >\r\n        <Box position=\"relative\" width=\"100%\">\r\n          <ComboboxInput\r\n            onChange={(e) => {\r\n              setTerm(e.target.value);\r\n            }}\r\n            value={term === undefined ? selected : term}\r\n            label={label}\r\n          />\r\n          <Box\r\n            height={56}\r\n            width={56}\r\n            position=\"absolute\"\r\n            justifyContent=\"center\"\r\n            alignItems=\"center\"\r\n            display=\"flex\"\r\n            top={0}\r\n            right={0}\r\n            bottom={0}\r\n          >\r\n            <ComboboxButton />\r\n          </Box>\r\n        </Box>\r\n        <SearchResults results={results} />\r\n      </Combobox>\r\n      <Button\r\n        variant=\"text\"\r\n        onClick={() => {\r\n          resetting.current = true;\r\n          onReset();\r\n        }}\r\n        disabled={resetDisabled}\r\n      >\r\n        Reset\r\n      </Button>\r\n    </Box>\r\n  );\r\n}\r\n\r\nconst SearchResults = memo(function SearchResults(props: {\r\n  results: string[];\r\n}) {\r\n  if (!props.results) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <ComboboxPopover zIndex={100}>\r\n      <ComboboxList persistSelection={true}>\r\n        <Text variant=\"label-medium\" opacity={0.6} px={3} py={2}>\r\n          Sorted by popularity\r\n        </Text>\r\n        {props.results.map((result) => (\r\n          <ComboboxOption\r\n            key={result}\r\n            id={result}\r\n            text={result}\r\n            value={result}\r\n          />\r\n        ))}\r\n      </ComboboxList>\r\n    </ComboboxPopover>\r\n  );\r\n});\r\n"],"mappings":"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"}
+{"version":3,"file":"FontAutoComplete.js","names":["useState","useMemo","useEffect","useRef","useDeferredValue","memo","Box","Button","Combobox","ComboboxOption","ComboboxList","ComboboxPopover","ComboboxInput","ComboboxButton","Text","googleFonts","jsx","_jsx","jsxs","_jsxs","useFontMatch","searchTerm","term","trim","toLowerCase","filter","font","indexOf","parseMainFont","fontStr","fonts","split","map","f","replace","length","undefined","FontAutoComplete","_ref","initialValue","onSelect","label","onReset","resetDisabled","setTerm","filterTerm","selected","setSelected","resetting","current","results","display","minWidth","flex","alignItems","children","text","selectOnBlur","width","position","onChange","e","target","value","height","justifyContent","top","right","bottom","SearchResults","variant","onClick","disabled","props","zIndex","persistSelection","opacity","px","py","result","id"],"sources":["../../../src/ThemeExplorer/FontAutoComplete.tsx"],"sourcesContent":["import {\n  useState,\n  useMemo,\n  useEffect,\n  useRef,\n  useDeferredValue,\n  memo,\n} from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport {\n  Combobox,\n  ComboboxOption,\n  ComboboxList,\n  ComboboxPopover,\n  ComboboxInput,\n  ComboboxButton,\n} from '../Combobox';\nimport { Text } from '../Text';\nimport { googleFonts } from './googleFonts';\n\nexport interface FontAutoCompleteProps {\n  label?: string;\n  initialValue?: string;\n  onSelect?: (font: string) => void;\n  onReset: () => void;\n  resetDisabled: boolean;\n}\n\nfunction useFontMatch(searchTerm: string) {\n  return useMemo(() => {\n    const term = searchTerm.trim().toLowerCase();\n    return term === ''\n      ? googleFonts\n      : googleFonts.filter((font) => font.toLowerCase().indexOf(term) !== -1);\n  }, [searchTerm]);\n}\n\nexport function parseMainFont(fontStr: string): string | undefined {\n  const fonts = fontStr.split(/, */).map((f) => f.replace(/\"([^\"]+)\"/, '$1'));\n  return fonts.length > 0 ? fonts[0] : undefined;\n}\n\nexport function FontAutoComplete({\n  initialValue = '',\n  onSelect,\n  label,\n  onReset,\n  resetDisabled,\n}: FontAutoCompleteProps) {\n  const [term, setTerm] = useState<undefined | string>(undefined);\n  const filterTerm = useDeferredValue(term);\n  const [selected, setSelected] = useState(initialValue);\n\n  const resetting = useRef(false);\n  useEffect(() => {\n    if (resetting.current) {\n      setSelected(initialValue);\n      setTerm(undefined);\n      resetting.current = false;\n    }\n  }, [initialValue]);\n\n  const results = useFontMatch(filterTerm || '');\n  return (\n    <Box display=\"flex\" minWidth=\"300px\" flex=\"1\" alignItems=\"center\">\n      <Combobox\n        onSelect={(text) => {\n          setSelected(text);\n          setTerm(text);\n          onSelect?.(text);\n        }}\n        selectOnBlur\n        width=\"100%\"\n      >\n        <Box position=\"relative\" width=\"100%\">\n          <ComboboxInput\n            onChange={(e) => {\n              setTerm(e.target.value);\n            }}\n            value={term === undefined ? selected : term}\n            label={label}\n          />\n          <Box\n            height={56}\n            width={56}\n            position=\"absolute\"\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            display=\"flex\"\n            top={0}\n            right={0}\n            bottom={0}\n          >\n            <ComboboxButton />\n          </Box>\n        </Box>\n        <SearchResults results={results} />\n      </Combobox>\n      <Button\n        variant=\"text\"\n        onClick={() => {\n          resetting.current = true;\n          onReset();\n        }}\n        disabled={resetDisabled}\n      >\n        Reset\n      </Button>\n    </Box>\n  );\n}\n\nconst SearchResults = memo(function SearchResults(props: {\n  results: string[];\n}) {\n  if (!props.results) {\n    return null;\n  }\n\n  return (\n    <ComboboxPopover zIndex={100}>\n      <ComboboxList persistSelection={true}>\n        <Text variant=\"label-medium\" opacity={0.6} px={3} py={2}>\n          Sorted by popularity\n        </Text>\n        {props.results.map((result) => (\n          <ComboboxOption\n            key={result}\n            id={result}\n            text={result}\n            value={result}\n          />\n        ))}\n      </ComboboxList>\n    </ComboboxPopover>\n  );\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import type { Color } from '@basic-ui/color-picker';
-import type { 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>;
+import type { Color } from '@basic-ui/color-picker';
+import type { 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

@@ -1,61 +1,37 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "defaultValue", "onChange", "disabled"];
 import { toColor } from '@basic-ui/color-picker';
 import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
 import { useRef, useState, memo, useCallback } from 'react';
 import { alpha, Box, TextField, Button } from '../';
 import { ColorPicker } from './ColorPicker';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var TextFieldColorPicker = /*#__PURE__*/memo(function (props) {
-  var valueProp = props.value,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? toColor('hex', '#33ff33') : _props$defaultValue,
-      onChangeProp = props.onChange,
-      disabled = props.disabled,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      popoverOpen = _useState2[0],
-      setPopoverOpen = _useState2[1];
-
-  var _useState3 = useState((valueProp === null || valueProp === void 0 ? void 0 : valueProp.hex) || defaultValue.hex),
-      _useState4 = _slicedToArray(_useState3, 2),
-      text = _useState4[0],
-      setText = _useState4[1];
-
-  var _useControlledState = useControlledState(valueProp, onChangeProp, defaultValue, function (setState) {
-    return function (v) {
-      setState(v);
-      setText(v.hex);
-    };
-  }),
-      _useControlledState2 = _slicedToArray(_useControlledState, 2),
-      value = _useControlledState2[0],
-      _onChange = _useControlledState2[1];
-
-  var _onChange2 = useCallback(function (color) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const TextFieldColorPicker = /*#__PURE__*/memo(props => {
+  const {
+    value: valueProp,
+    defaultValue = toColor('hex', '#33ff33'),
+    onChange: onChangeProp,
+    disabled,
+    ...otherProps
+  } = props;
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [text, setText] = useState(valueProp?.hex || defaultValue.hex);
+  const [value, _onChange] = useControlledState(valueProp, onChangeProp, defaultValue, setState => v => {
+    setState(v);
+    setText(v.hex);
+  });
+  const onChange = useCallback(color => {
     _onChange(color);
-
     setText(color.hex.replace('#', ''));
   }, [_onChange]);
-
-  var popoverRef = useRef(null);
-  var buttonRef = useRef(null);
-  useOnClickOutside(popoverRef, function (e) {
-    if (e.target === (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current)) {
+  const popoverRef = useRef(null);
+  const buttonRef = useRef(null);
+  useOnClickOutside(popoverRef, e => {
+    if (e.target === buttonRef?.current) {
       return;
     }
-
     setPopoverOpen(false);
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(TextField, _extends({
+    children: [/*#__PURE__*/_jsx(TextField, {
       disabled: disabled,
       value: text.replace('#', ''),
       leadingIcon: '#',
@@ -65,11 +41,7 @@ export var TextFieldColorPicker = /*#__PURE__*/memo(function (props) {
         },
         color: "on.surface",
         ref: buttonRef,
-        onClick: function onClick() {
-          return setPopoverOpen(function (open) {
-            return !open;
-          });
-        },
+        onClick: () => setPopoverOpen(open => !open),
         disabled: disabled,
         sx: {
           pointerEvents: 'all',
@@ -85,17 +57,15 @@ export var TextFieldColorPicker = /*#__PURE__*/memo(function (props) {
       }),
       maxLength: 6,
       hideCharacterCounter: true,
-      onChange: function onChange(e) {
+      onChange: e => {
         if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          _onChange2(toColor('hex', '#' + e.target.value));
-
+          onChange(toColor('hex', '#' + e.target.value));
           return;
         }
-
         setText(e.target.value);
-      }
-    }, otherProps)), popoverOpen && /*#__PURE__*/_jsx(Popper, {
+      },
+      ...otherProps
+    }), popoverOpen && /*#__PURE__*/_jsx(Popper, {
       anchorEl: buttonRef,
       placement: "bottom-end",
       style: {
@@ -107,9 +77,8 @@ export var TextFieldColorPicker = /*#__PURE__*/memo(function (props) {
         children: /*#__PURE__*/_jsx(Box, {
           boxShadow: 4,
           children: /*#__PURE__*/_jsx(ColorPicker, {
-            color: value // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ,
-            onChange: _onChange2,
+            color: value,
+            onChange: onChange,
             width: 220,
             height: 220
           })

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

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

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

@@ -1,11 +1,11 @@
-import type { ComponentType } from 'react';
-import type { Theme } from '../theme/theme';
-export interface ThemeBuilderProps {
-    CodeHighlightingComponent?: ComponentType<{
-        children: string;
-        className: string;
-        showButtons?: boolean;
-    }>;
-    baseTheme: Theme;
-}
-export declare const ThemeBuilder: (props: ThemeBuilderProps) => JSX.Element | null;
+import type { ComponentType } from 'react';
+import type { Theme } from '../theme/theme';
+export interface ThemeBuilderProps {
+    CodeHighlightingComponent?: ComponentType<{
+        children: string;
+        className: string;
+        showButtons?: boolean;
+    }>;
+    baseTheme: Theme;
+}
+export declare const ThemeBuilder: (props: ThemeBuilderProps) => import("react/jsx-runtime").JSX.Element | null;