@basic-ui/material 1.0.0-alpha.15 → 1.0.0-alpha.18

package/src/Slider/Slider.tsx

@@ -0,0 +1,275 @@
+import {
+  SliderHandle as SliderHandleCore,
+  SliderInput as SliderInputCore,
+  SliderMarker as SliderMarkerCore,
+  SliderTrack as SliderTrackCore,
+  SliderRange as SliderRangeCore,
+} from '@basic-ui/core';
+import type {
+  SliderProps as SliderPropsCore,
+  SliderHandleProps as SliderHandlePropsCore,
+  SliderInputProps as SliderInputPropsCore,
+  SliderMarkerProps as SliderMarkerPropsCore,
+  SliderTrackProps as SliderTrackPropsCore,
+  SliderRangeProps as SliderRangePropsCore,
+} from '@basic-ui/core';
+export type { SliderHandleAlignment } from '@basic-ui/core';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+
+/////////////////////////////////////////////////////
+// SliderInput
+
+export type SliderInputProps = Omit<
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
+  | 'onChange'
+  | 'onMouseDown'
+  | 'onMouseMove'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp'
+  | 'onTouchEnd'
+  | 'onTouchMove'
+  | 'onTouchStart'
+> &
+  SliderInputPropsCore;
+
+export const SliderInput = forwardRef<HTMLDivElement, SliderInputProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderInputCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      {...props}
+      __css={{
+        maxWidth: '100%',
+        cursor: 'pointer',
+        '&[data-orientation="horizontal"]': { height: rem(4) },
+        '&[data-orientation="vertical"]': {
+          width: rem(4),
+          height: '250px',
+          maxHeight: '100%',
+        },
+        '&[data-disabled]': { opacity: 0.5, pointerEvents: 'none' },
+        ...__css,
+      }}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderHandle
+
+export type SliderHandleProps = SliderHandlePropsCore &
+  RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderHandle = forwardRef<HTMLDivElement, SliderHandleProps>(
+  ({ as = 'div', __css, children, ...props }, ref) => (
+    <SliderHandleCore
+      as={RippleBox}
+      innerAs={as as any}
+      ref={ref}
+      rippleColor="currentColor"
+      hoverOpacity={0.12}
+      focusOpacity={0.24}
+      pressedOpacity={0.24}
+      mouseFocus
+      center
+      __css={{
+        position: 'relative',
+        width: rem(40),
+        height: rem(40),
+        color: 'primary',
+        borderRadius: 'full',
+        zIndex: 1,
+        transformOrigin: 'center',
+        userSelect: 'none',
+        '&[aria-orientation="horizontal"]': {
+          top: '50%',
+          transform: 'translateY(-50%)',
+        },
+        '&[aria-orientation="horizontal"]:focus': {
+          transform: 'translateY(-50%)',
+        },
+        '&[aria-orientation="vertical"]': {
+          left: '50%',
+          transform: 'translateX(-50%)',
+        },
+        ':focus': {
+          outline: 'none',
+        },
+        ...__css,
+      }}
+      {...props}
+    >
+      <Box
+        __css={{
+          bg: 'currentColor',
+          width: '50%',
+          height: '50%',
+          borderRadius: 'full',
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          boxShadow: 1,
+        }}
+      />
+      {children}
+    </SliderHandleCore>
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderMarker
+
+export type SliderMarkerProps = SliderMarkerPropsCore &
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderMarker = forwardRef<HTMLDivElement, SliderMarkerProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderMarkerCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      {...props}
+      __css={{
+        transformOrigin: 'center',
+        borderRadius: 'full',
+        width: '2px',
+        height: '2px',
+        '&[data-orientation="horizontal"]': {
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+        },
+        '&[data-orientation="vertical"]': {
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        },
+        opacity: 0.38,
+        bg: 'on.surface-variant',
+        '&[data-state="at-value"],&[data-state="under-value"]': {
+          bg: 'on.primary',
+        },
+        ...__css,
+      }}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderTrack
+
+export type SliderTrackProps = SliderTrackPropsCore &
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderTrackCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      {...props}
+      __css={{
+        position: 'relative',
+        borderRadius: 'full',
+        bg: 'surface-variant',
+        '&[data-orientation="horizontal"]': {
+          width: '100%',
+          height: 'inherit',
+        },
+        '&[data-orientation="vertical"]': {
+          width: 'inherit',
+          height: '100%',
+        },
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+        },
+        '&[data-orientation="horizontal"]::before': {
+          width: '100%',
+          height: '1.5rem',
+          top: 'calc(-0.5rem - 1px)',
+          left: '0',
+        },
+        '&[data-orientation="vertical"]::before': {
+          width: '1.5rem',
+          height: '100%',
+          top: '0',
+          left: 'calc(-0.5rem - 1px)',
+        },
+        ...__css,
+      }}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderRange
+
+export type SliderRangeProps = SliderRangePropsCore &
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderRange = forwardRef<HTMLDivElement, SliderRangeProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderRangeCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      __css={{
+        borderRadius: 'inherit',
+        bg: 'primary',
+        left: '0',
+        bottom: '0',
+        top: '50%',
+        '&[data-orientation="horizontal"]': {
+          height: '100%',
+        },
+        '&[data-orientation="vertical"]': {
+          width: '100%',
+        },
+        transform: 'translateY(-50%)',
+        ...__css,
+      }}
+      {...props}
+    />
+  )
+);
+
+export type SliderProps = SliderPropsCore &
+  Omit<
+    BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
+    | 'onChange'
+    | 'onMouseDown'
+    | 'onMouseMove'
+    | 'onMouseUp'
+    | 'onPointerDown'
+    | 'onPointerUp'
+    | 'onTouchEnd'
+    | 'onTouchMove'
+    | 'onTouchStart'
+  >;
+
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
+  props,
+  forwardedRef
+) {
+  const { children, ...otherProps } = props;
+
+  return (
+    <SliderInput {...otherProps} ref={forwardedRef} data-reach-slider="">
+      <SliderTrack>
+        <SliderRange />
+        <SliderHandle />
+        {children}
+      </SliderTrack>
+    </SliderInput>
+  );
+});

package/src/Slider/index.ts

@@ -0,0 +1 @@
+export * from './Slider';

package/src/TextField/OutlinedContainer.tsx

@@ -58,12 +58,17 @@ export const OutlinedContainer = forwardRef<
 
     if (element) {
       setLabelWidth(element.offsetWidth);
-      (document as any)?.fonts?.ready?.then(() => {
+      function handleFontsLoaded() {
         // set the label width again once the fonts have been loaded
         requestAnimationFrame(() => {
-          setLabelWidth(element.offsetWidth);
+          if (element) setLabelWidth(element.offsetWidth);
         });
-      });
+      }
+      document.fonts?.addEventListener?.('loadingdone', handleFontsLoaded);
+      document.fonts?.ready?.then(handleFontsLoaded);
+
+      return () =>
+        document.fonts?.removeEventListener?.('loadingdone', handleFontsLoaded);
     }
   }, [label]);
 

package/src/ThemeExplorer/BorderSlider.tsx

@@ -0,0 +1,73 @@
+import type { ButtonHTMLAttributes, FC } from 'react';
+import { startTransition, useEffect, useRef, useState } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { Link as BaseLink } from '../Link';
+import { Slider, SliderMarker } from '../Slider';
+import { Text } from '../Text';
+
+const Link: FC<
+  BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>
+> = BaseLink as any;
+
+export function BorderSlider(props: {
+  label: string;
+  defaultValue: number;
+  onChange: (value: number) => void;
+  onReset: () => void;
+  resetDisabled: boolean;
+}) {
+  const [value, setValue] = useState(props.defaultValue);
+
+  const resetting = useRef(false);
+  useEffect(() => {
+    if (resetting.current) {
+      setValue(props.defaultValue);
+      resetting.current = false;
+    }
+  }, [props.defaultValue]);
+
+  return (
+    <Box width="100%" display="flex" flexDirection="column">
+      <Text display="flex" justifyContent="space-between" width="100%" pb={2}>
+        <span>
+          {props.label}{' '}
+          <Link
+            as="button"
+            disabled={props.resetDisabled ? true : undefined}
+            onClick={() => {
+              resetting.current = true;
+              props.onReset();
+            }}
+          >
+            Reset
+          </Link>
+        </span>
+        <span>{value}px</span>
+      </Text>
+      <Slider
+        value={value}
+        onChange={(e, v) => {
+          setValue(v);
+          startTransition(() => {
+            props.onChange(v);
+          });
+        }}
+        min={0}
+        max={64}
+        step={2}
+      >
+        <SliderMarker value={2} />
+        <SliderMarker value={4} />
+        <SliderMarker value={8} />
+        <SliderMarker value={12} />
+        <SliderMarker value={16} />
+        <SliderMarker value={24} />
+        <SliderMarker value={32} />
+        <SliderMarker value={40} />
+        <SliderMarker value={48} />
+      </Slider>
+    </Box>
+  );
+}

package/src/ThemeExplorer/ColorSchemePicker.tsx

@@ -0,0 +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>
+  );
+}

package/src/ThemeExplorer/FontAutoComplete.tsx

@@ -0,0 +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>
+  );
+});

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -1,7 +1,8 @@
+import { theme } from '../theme/theme';
 import { ThemeBuilder } from './ThemeBuilder';
 
 export default {
   title: 'components/ThemeExplorer',
 };
 
-export const Builder = () => <ThemeBuilder />;
+export const Builder = () => <ThemeBuilder baseTheme={theme} />;