@basic-ui/material 1.0.0-alpha.49 → 1.0.0-alpha.50

package/src/TextField/TextField.story.tsx

@@ -1,241 +1,240 @@
-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 = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+  >
+    <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 }: { variant: 'filled' | 'outlined' }) => {
+  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/index.ts

@@ -1,41 +1,42 @@
-export * from './AppBar';
-export * from './Alert';
-export * from './Badge';
-export * from './BaseLine';
-export * from './BottomSheet';
-export * from './Box';
-export * from './Button';
-export * from './Combobox';
-export * from './CheckBox';
-export * from './Chip';
-export * from './Divider';
-export * from './Dialog';
-export * from './FloatingLabel';
-export * from './LineRipple';
-export * from './Link';
-export * from './List';
-export * from './ListItem';
-export * from './Menu';
-export * from './NavRail';
-export * from './NotchedOutline';
-export * from './Paper';
-export * from './Popover';
-export * from './ProgressSpinner';
-export * from './RadioButton';
-export * from './Ripple';
-export * from './Select';
-export * from './SelectItem';
-export * from './Skeleton';
-export * from './Slider';
-export * from './Snackbar';
-export * from './Switch';
-export * from './Tab';
-export * from './TabIndicator';
-export * from './Table';
-export * from './Text';
-export * from './TextField';
-export * from './Tooltip';
-export * from './motion';
-export * from './theme';
-export * from './color';
-export * from './hooks/useAnimation';
+export * from './AppBar';
+export * from './Alert';
+export * from './Badge';
+export * from './BaseLine';
+export * from './BottomSheet';
+export * from './Box';
+export * from './Button';
+export * from './Combobox';
+export * from './CheckBox';
+export * from './Chip';
+export * from './Divider';
+export * from './Dialog';
+export * from './FloatingLabel';
+export * from './LineRipple';
+export * from './Link';
+export * from './List';
+export * from './ListItem';
+export * from './Menu';
+export * from './NavRail';
+export * from './NotchedOutline';
+export * from './Paper';
+export * from './Popover';
+export * from './ProgressSpinner';
+export * from './RadioButton';
+export * from './Ripple';
+export * from './SearchBar';
+export * from './Select';
+export * from './SelectItem';
+export * from './Skeleton';
+export * from './Slider';
+export * from './Snackbar';
+export * from './Switch';
+export * from './Tab';
+export * from './TabIndicator';
+export * from './Table';
+export * from './Text';
+export * from './TextField';
+export * from './Tooltip';
+export * from './motion';
+export * from './theme';
+export * from './color';
+export * from './hooks/useAnimation';