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

package/src/ThemeExplorer/ColorPicker.tsx

@@ -1,104 +1,104 @@
-import type {
-  Color,
-  ColorPickerProps as BaseColorPickerProps,
-  HueProps,
-  HueCursorProps,
-  SaturationProps,
-  SaturationCursorProps,
-} from '@basic-ui/color-picker';
-import {
-  ColorPicker as _BaseColorPicker,
-  Hue as _Hue,
-  HueCursor as _HueCursor,
-  Saturation as _Saturation,
-  SaturationCursor as _SaturationCursor,
-} from '@basic-ui/color-picker';
-import type { FC } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &
-  BaseColorPickerProps) & {
-  color: Color;
-  onChange: (color: Color) => void;
-};
-
-const BaseColorPicker: FC<
-  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps
-> = _BaseColorPicker as any;
-const Hue: FC<BoxProps & HueProps> = _Hue as any;
-const HueCursor: FC<BoxProps & HueCursorProps> = _HueCursor as any;
-const Saturation: FC<BoxProps & SaturationProps> = _Saturation as any;
-const SaturationCursor: FC<BoxProps & SaturationCursorProps> =
-  _SaturationCursor as any;
-
-export const ColorPicker: FC<ColorPickerProps> = ({
-  color,
-  onChange,
-  width = 450,
-  height = 225,
-  ...otherProps
-}) => {
-  return (
-    <BaseColorPicker
-      as={Box}
-      width={width}
-      height={height}
-      onChange={onChange}
-      color={color}
-      {...otherProps}
-    >
-      <Saturation
-        as={Box}
-        sx={{
-          position: 'relative',
-          touchAction: 'none',
-          userSelect: 'none',
-          width: '100%',
-          backgroundImage:
-            'linear-gradient(transparent, black), linear-gradient(to right, white, transparent)',
-        }}
-      >
-        <SaturationCursor
-          as={Box}
-          sx={{
-            position: 'absolute',
-            width: '20px',
-            height: '20px',
-            border: '2px solid #ffffff',
-            borderRadius: 'full',
-            boxShadow: '0 0 15px 0 rgba(0, 0, 0, 0.15)',
-            boxSizing: 'border-box',
-            transform: 'translate(-10px, -10px)',
-          }}
-        />
-      </Saturation>
-      <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))`,
-        }}
-      >
-        <HueCursor
-          as={Box}
-          sx={{
-            position: 'absolute',
-            width: '20px',
-            height: '20px',
-            border: '2px solid #ffffff',
-            borderRadius: 'full',
-            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px',
-            boxSizing: 'border-box',
-            transform: 'translate(-10px, -4px)',
-          }}
-        />
-      </Hue>
-    </BaseColorPicker>
-  );
-};
+import type {
+  Color,
+  ColorPickerProps as BaseColorPickerProps,
+  HueProps,
+  HueCursorProps,
+  SaturationProps,
+  SaturationCursorProps,
+} from '@basic-ui/color-picker';
+import {
+  ColorPicker as _BaseColorPicker,
+  Hue as _Hue,
+  HueCursor as _HueCursor,
+  Saturation as _Saturation,
+  SaturationCursor as _SaturationCursor,
+} from '@basic-ui/color-picker';
+import type { FC } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &
+  BaseColorPickerProps) & {
+  color: Color;
+  onChange: (color: Color) => void;
+};
+
+const BaseColorPicker: FC<
+  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps
+> = _BaseColorPicker as any;
+const Hue: FC<BoxProps & HueProps> = _Hue as any;
+const HueCursor: FC<BoxProps & HueCursorProps> = _HueCursor as any;
+const Saturation: FC<BoxProps & SaturationProps> = _Saturation as any;
+const SaturationCursor: FC<BoxProps & SaturationCursorProps> =
+  _SaturationCursor as any;
+
+export const ColorPicker: FC<ColorPickerProps> = ({
+  color,
+  onChange,
+  width = 450,
+  height = 225,
+  ...otherProps
+}) => {
+  return (
+    <BaseColorPicker
+      as={Box}
+      width={width}
+      height={height}
+      onChange={onChange}
+      color={color}
+      {...otherProps}
+    >
+      <Saturation
+        as={Box}
+        sx={{
+          position: 'relative',
+          touchAction: 'none',
+          userSelect: 'none',
+          width: '100%',
+          backgroundImage:
+            'linear-gradient(transparent, black), linear-gradient(to right, white, transparent)',
+        }}
+      >
+        <SaturationCursor
+          as={Box}
+          sx={{
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+            border: '2px solid #ffffff',
+            borderRadius: 'full',
+            boxShadow: '0 0 15px 0 rgba(0, 0, 0, 0.15)',
+            boxSizing: 'border-box',
+            transform: 'translate(-10px, -10px)',
+          }}
+        />
+      </Saturation>
+      <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))`,
+        }}
+      >
+        <HueCursor
+          as={Box}
+          sx={{
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+            border: '2px solid #ffffff',
+            borderRadius: 'full',
+            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px',
+            boxSizing: 'border-box',
+            transform: 'translate(-10px, -4px)',
+          }}
+        />
+      </Hue>
+    </BaseColorPicker>
+  );
+};

package/src/ThemeExplorer/ColorSchemePicker.tsx

@@ -1,55 +1,55 @@
-import type { Color } from '@basic-ui/color-picker';
-import { startTransition, useEffect, useRef, useState } from 'react';
-
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { TextFieldColorPicker } from './TextFieldColorPicker';
-
-interface ColorSchemePickerProps {
-  label: string;
-  initialValue: Color;
-  onChange: (c: Color) => void;
-  onReset: () => void;
-  resetDisabled: boolean;
-}
-
-export function ColorSchemePicker(props: ColorSchemePickerProps) {
-  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;
-      setValue(props.initialValue);
-    }
-  }, [props.initialValue]);
-
-  return (
-    <Box display="flex" minWidth="300px" flex="1" alignItems="center">
-      <TextFieldColorPicker
-        key={remountKey.current}
-        label={label}
-        value={value}
-        onChange={(c) => {
-          setValue(c);
-          startTransition(() => {
-            onChange(c);
-          });
-        }}
-      />
-      <Button
-        variant="text"
-        disabled={resetDisabled}
-        onClick={() => {
-          resetting.current = true;
-          onReset();
-        }}
-      >
-        Reset
-      </Button>
-    </Box>
-  );
-}
+import type { Color } from '@basic-ui/color-picker';
+import { startTransition, useEffect, useRef, useState } from 'react';
+
+import { Box } from '../Box';
+import { Button } from '../Button';
+import { TextFieldColorPicker } from './TextFieldColorPicker';
+
+interface ColorSchemePickerProps {
+  label: string;
+  initialValue: Color;
+  onChange: (c: Color) => void;
+  onReset: () => void;
+  resetDisabled: boolean;
+}
+
+export function ColorSchemePicker(props: ColorSchemePickerProps) {
+  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;
+      setValue(props.initialValue);
+    }
+  }, [props.initialValue]);
+
+  return (
+    <Box display="flex" minWidth="300px" flex="1" alignItems="center">
+      <TextFieldColorPicker
+        key={remountKey.current}
+        label={label}
+        value={value}
+        onChange={(c) => {
+          setValue(c);
+          startTransition(() => {
+            onChange(c);
+          });
+        }}
+      />
+      <Button
+        variant="text"
+        disabled={resetDisabled}
+        onClick={() => {
+          resetting.current = true;
+          onReset();
+        }}
+      >
+        Reset
+      </Button>
+    </Box>
+  );
+}

package/src/ThemeExplorer/FontAutoComplete.tsx

@@ -1,139 +1,139 @@
-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';
-
-export interface FontAutoCompleteProps {
-  label?: string;
-  initialValue?: string;
-  onSelect?: (font: string) => void;
-  onReset: () => void;
-  resetDisabled: boolean;
-}
-
-function useFontMatch(searchTerm: string) {
-  return useMemo(() => {
-    const term = searchTerm.trim().toLowerCase();
-    return term === ''
-      ? googleFonts
-      : googleFonts.filter((font) => font.toLowerCase().indexOf(term) !== -1);
-  }, [searchTerm]);
-}
-
-export function parseMainFont(fontStr: string): string | undefined {
-  const fonts = fontStr.split(/, */).map((f) => f.replace(/"([^"]+)"/, '$1'));
-  return fonts.length > 0 ? fonts[0] : undefined;
-}
-
-export function FontAutoComplete({
-  initialValue = '',
-  onSelect,
-  label,
-  onReset,
-  resetDisabled,
-}: FontAutoCompleteProps) {
-  const [term, setTerm] = useState<undefined | string>(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]);
-
-  const results = useFontMatch(filterTerm || '');
-  return (
-    <Box display="flex" minWidth="300px" flex="1" alignItems="center">
-      <Combobox
-        onSelect={(text) => {
-          setSelected(text);
-          setTerm(text);
-          onSelect?.(text);
-        }}
-        selectOnBlur
-        width="100%"
-      >
-        <Box position="relative" width="100%">
-          <ComboboxInput
-            onChange={(e) => {
-              setTerm(e.target.value);
-            }}
-            value={term === undefined ? selected : term}
-            label={label}
-          />
-          <Box
-            height={56}
-            width={56}
-            position="absolute"
-            justifyContent="center"
-            alignItems="center"
-            display="flex"
-            top={0}
-            right={0}
-            bottom={0}
-          >
-            <ComboboxButton />
-          </Box>
-        </Box>
-        <SearchResults results={results} />
-      </Combobox>
-      <Button
-        variant="text"
-        onClick={() => {
-          resetting.current = true;
-          onReset();
-        }}
-        disabled={resetDisabled}
-      >
-        Reset
-      </Button>
-    </Box>
-  );
-}
-
-const SearchResults = memo(function SearchResults(props: {
-  results: string[];
-}) {
-  if (!props.results) {
-    return null;
-  }
-
-  return (
-    <ComboboxPopover zIndex={100}>
-      <ComboboxList persistSelection={true}>
-        <Text variant="label-medium" opacity={0.6} px={3} py={2}>
-          Sorted by popularity
-        </Text>
-        {props.results.map((result) => (
-          <ComboboxOption
-            key={result}
-            id={result}
-            text={result}
-            value={result}
-          />
-        ))}
-      </ComboboxList>
-    </ComboboxPopover>
-  );
-});
+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';
+
+export interface FontAutoCompleteProps {
+  label?: string;
+  initialValue?: string;
+  onSelect?: (font: string) => void;
+  onReset: () => void;
+  resetDisabled: boolean;
+}
+
+function useFontMatch(searchTerm: string) {
+  return useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return term === ''
+      ? googleFonts
+      : googleFonts.filter((font) => font.toLowerCase().indexOf(term) !== -1);
+  }, [searchTerm]);
+}
+
+export function parseMainFont(fontStr: string): string | undefined {
+  const fonts = fontStr.split(/, */).map((f) => f.replace(/"([^"]+)"/, '$1'));
+  return fonts.length > 0 ? fonts[0] : undefined;
+}
+
+export function FontAutoComplete({
+  initialValue = '',
+  onSelect,
+  label,
+  onReset,
+  resetDisabled,
+}: FontAutoCompleteProps) {
+  const [term, setTerm] = useState<undefined | string>(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]);
+
+  const results = useFontMatch(filterTerm || '');
+  return (
+    <Box display="flex" minWidth="300px" flex="1" alignItems="center">
+      <Combobox
+        onSelect={(text) => {
+          setSelected(text);
+          setTerm(text);
+          onSelect?.(text);
+        }}
+        selectOnBlur
+        width="100%"
+      >
+        <Box position="relative" width="100%">
+          <ComboboxInput
+            onChange={(e) => {
+              setTerm(e.target.value);
+            }}
+            value={term === undefined ? selected : term}
+            label={label}
+          />
+          <Box
+            height={56}
+            width={56}
+            position="absolute"
+            justifyContent="center"
+            alignItems="center"
+            display="flex"
+            top={0}
+            right={0}
+            bottom={0}
+          >
+            <ComboboxButton />
+          </Box>
+        </Box>
+        <SearchResults results={results} />
+      </Combobox>
+      <Button
+        variant="text"
+        onClick={() => {
+          resetting.current = true;
+          onReset();
+        }}
+        disabled={resetDisabled}
+      >
+        Reset
+      </Button>
+    </Box>
+  );
+}
+
+const SearchResults = memo(function SearchResults(props: {
+  results: string[];
+}) {
+  if (!props.results) {
+    return null;
+  }
+
+  return (
+    <ComboboxPopover zIndex={100}>
+      <ComboboxList persistSelection={true}>
+        <Text variant="label-medium" opacity={0.6} px={3} py={2}>
+          Sorted by popularity
+        </Text>
+        {props.results.map((result) => (
+          <ComboboxOption
+            key={result}
+            id={result}
+            text={result}
+            value={result}
+          />
+        ))}
+      </ComboboxList>
+    </ComboboxPopover>
+  );
+});