@basic-ui/material 1.0.0-alpha.41 → 1.0.0-alpha.43

package/src/TextField/TextField.story.tsx

@@ -1,241 +1,241 @@
-import { useState } from 'react';
-
-import { Box } from '../Box';
-import { CheckBox } from '../CheckBox';
-import { Select, SelectItem } from '../';
-import { Button } from '../Button';
-import { alpha } from '../color';
-import { TextField } from './';
-
-export default {
-  title: 'components/TextField',
-};
-
-const SearchIcon = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={24}
-    width={24}
-    viewBox="0 0 48 48"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
-  </svg>
-);
-
-const Example = ({ variant }) => {
-  const [error, setError] = useState<boolean | string>(false);
-  const [color, setColor] = useState<'primary' | 'secondary'>('primary');
-
-  return (
-    <Box p={3}>
-      <CheckBox
-        checked={Boolean(error)}
-        onChange={(e) =>
-          setError(e.target.checked ? 'This field is required' : false)
-        }
-      >
-        Has Error
-      </CheckBox>
-      <Box width={230} display="inline-block">
-        <Select
-          value={color}
-          onChange={(e, value: 'primary' | 'secondary') => setColor(value)}
-          label="Color"
-        >
-          <SelectItem value="primary">Primary</SelectItem>
-          <SelectItem value="secondary">Secondary</SelectItem>
-        </Select>
-      </Box>
-      <Box
-        py={3}
-        backgroundColor="surface"
-        display="inline-flex"
-        flexWrap="wrap"
-      >
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Standard"
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Standard"
-            helperText="Helper text"
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Standard"
-            defaultValue="Hello world"
-            helperText="Helper text"
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Standard with placeholder"
-            placeholder="Placeholder"
-            helperText="Helper text"
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Disabled"
-            helperText="Helper text"
-            error={error}
-            color={color}
-            disabled
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label=""
-            helperText="Helper text"
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Standard"
-            maxLength={20}
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Standard"
-            helperText="Helper text"
-            multiline
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Standard"
-            helperText="Helper text"
-            multiline
-            maxLength={512}
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            helperText="Helper text"
-            multiline
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            helperText="Helper text"
-            multiline
-            maxLength={512}
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={'100%'} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Standard"
-            error={error}
-            color={color}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="With icon"
-            error={error}
-            color={color}
-            leadingIcon={<SearchIcon />}
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="With icon"
-            error={error}
-            color={color}
-            trailingIcon={
-              <Button
-                variant="icon"
-                sx={{
-                  pointerEvents: 'all',
-                  mr: '-8px',
-                  width: 40,
-                  height: 40,
-                }}
-              >
-                <Box
-                  as="svg"
-                  sx={{ color: alpha('on.surface', 0.54) }}
-                  viewBox="0 0 24 24"
-                  minWidth="24px"
-                  minHeight="24px"
-                >
-                  <path fill="currentColor" d="M7 10l5 5 5-5z" />
-                </Box>
-              </Button>
-            }
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Numeric"
-            error={error}
-            color={color}
-            type="number"
-          />
-        </Box>
-        <Box m={2} width={230} display="inline-block">
-          <TextField
-            variant={variant}
-            label="Numeric with hidden arrows"
-            error={error}
-            color={color}
-            type="number"
-            sx={{
-              '&::-webkit-outer-spin-button,&::-webkit-inner-spin-button': {
-                WebkitAppearance: 'none',
-                margin: 0,
-              },
-              '&[type=number]': {
-                '-moz-appearance': 'textfield',
-              },
-            }}
-          />
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export const Filled = () => <Example variant="filled" />;
-export const Outlined = () => <Example variant="outlined" />;
+import { useState } from 'react';
+
+import { Box } from '../Box';
+import { CheckBox } from '../CheckBox';
+import { Select, SelectItem } from '../';
+import { Button } from '../Button';
+import { alpha } from '../color';
+import { TextField } from './';
+
+export default {
+  title: 'components/TextField',
+};
+
+const SearchIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
+
+const Example = ({ variant }) => {
+  const [error, setError] = useState<boolean | string>(false);
+  const [color, setColor] = useState<'primary' | 'secondary'>('primary');
+
+  return (
+    <Box p={3}>
+      <CheckBox
+        checked={Boolean(error)}
+        onChange={(e) =>
+          setError(e.target.checked ? 'This field is required' : false)
+        }
+      >
+        Has Error
+      </CheckBox>
+      <Box width={230} display="inline-block">
+        <Select
+          value={color}
+          onChange={(e, value: 'primary' | 'secondary') => setColor(value)}
+          label="Color"
+        >
+          <SelectItem value="primary">Primary</SelectItem>
+          <SelectItem value="secondary">Secondary</SelectItem>
+        </Select>
+      </Box>
+      <Box
+        py={3}
+        backgroundColor="surface"
+        display="inline-flex"
+        flexWrap="wrap"
+      >
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Standard"
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Standard"
+            defaultValue="Hello world"
+            helperText="Helper text"
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Standard with placeholder"
+            placeholder="Placeholder"
+            helperText="Helper text"
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Disabled"
+            helperText="Helper text"
+            error={error}
+            color={color}
+            disabled
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label=""
+            helperText="Helper text"
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Standard"
+            maxLength={20}
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            multiline
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            multiline
+            maxLength={512}
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            helperText="Helper text"
+            multiline
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            helperText="Helper text"
+            multiline
+            maxLength={512}
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={'100%'} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Standard"
+            error={error}
+            color={color}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="With icon"
+            error={error}
+            color={color}
+            leadingIcon={<SearchIcon />}
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="With icon"
+            error={error}
+            color={color}
+            trailingIcon={
+              <Button
+                variant="icon"
+                sx={{
+                  pointerEvents: 'all',
+                  mr: '-8px',
+                  width: 40,
+                  height: 40,
+                }}
+              >
+                <Box
+                  as="svg"
+                  sx={{ color: alpha('on.surface', 0.54) }}
+                  viewBox="0 0 24 24"
+                  minWidth="24px"
+                  minHeight="24px"
+                >
+                  <path fill="currentColor" d="M7 10l5 5 5-5z" />
+                </Box>
+              </Button>
+            }
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Numeric"
+            error={error}
+            color={color}
+            type="number"
+          />
+        </Box>
+        <Box m={2} width={230} display="inline-block">
+          <TextField
+            variant={variant}
+            label="Numeric with hidden arrows"
+            error={error}
+            color={color}
+            type="number"
+            sx={{
+              '&::-webkit-outer-spin-button,&::-webkit-inner-spin-button': {
+                WebkitAppearance: 'none',
+                margin: 0,
+              },
+              '&[type=number]': {
+                '-moz-appearance': 'textfield',
+              },
+            }}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Filled = () => <Example variant="filled" />;
+export const Outlined = () => <Example variant="outlined" />;

package/src/TextField/consts.ts

@@ -1,7 +1,7 @@
-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;
+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;

package/src/TextField/index.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/src/ThemeExplorer/BorderSlider.tsx

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