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

package/src/Snackbar/Snackbar.story.tsx

@@ -1,99 +1,99 @@
-import { useState } from 'react';
-
-import { Snackbar } from './';
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { Select } from '../Select';
-import { SelectItem } from '../SelectItem';
-import { Link } from '../Link';
-import { StackProvider, useStack } from './Stack';
-// import './styles.css';
-
-export default {
-  title: 'components/Snackbar',
-};
-
-const Example = () => {
-  return (
-    <>
-      <Box m={4}>
-        <Snackbar>Marked as favorite.</Snackbar>
-      </Box>
-      <Box m={4}>
-        <Snackbar action={<Button>Action</Button>}>
-          This item already has the label{' '}
-          <Link href="https://booking.com" target="__blank">
-            &quot;travel&quot;
-          </Link>
-          . You can add a new label.
-        </Snackbar>
-      </Box>
-      <Box m={4}>
-        <Snackbar action={<Button>Add new label</Button>} flexWrap="wrap">
-          This item already has the label{' '}
-          <Link href="https://booking.com" target="__blank">
-            &quot;travel&quot;
-          </Link>
-          . You can add a new label.
-        </Snackbar>
-      </Box>
-    </>
-  );
-};
-
-const ControlledExample = () => {
-  const [placement, setPlacement] = useState<any>('top-right');
-
-  return (
-    <>
-      <Box width="240px" m={4}>
-        <Select value={placement} onChange={(e, val) => setPlacement(val)}>
-          <SelectItem value="top-right">Top Right</SelectItem>
-          <SelectItem value="top-center">Top Center</SelectItem>
-          <SelectItem value="top-left">Top Left</SelectItem>
-          <SelectItem value="bottom-right">Bottom Right</SelectItem>
-          <SelectItem value="bottom-center">Bottom Center</SelectItem>
-          <SelectItem value="bottom-left">Bottom Left</SelectItem>
-        </Select>
-      </Box>
-      <Box m={4}>
-        <StackProvider placement={placement}>
-          <SnackbarButton />
-        </StackProvider>
-      </Box>
-    </>
-  );
-};
-
-function SnackbarButton() {
-  const { addItem } = useStack();
-  return (
-    <Button
-      onClick={() =>
-        addItem(
-          <Snackbar action={<Button>Dismiss</Button>} dismissible>
-            This item already has the label{' '}
-            <Link href="https://booking.com" target="__blank">
-              &quot;travel&quot;
-            </Link>
-            . You can add a new label.
-          </Snackbar>
-        )
-      }
-    >
-      Add snackbar
-    </Button>
-  );
-}
-
-const SnackbarStackExample = () => {
-  return (
-    <StackProvider>
-      <SnackbarButton />
-    </StackProvider>
-  );
-};
-
-export const Default = () => <Example />;
-export const Controlled = () => <ControlledExample />;
-export const SnackbarStack = () => <SnackbarStackExample />;
+import { useState } from 'react';
+
+import { Snackbar } from './';
+import { Box } from '../Box';
+import { Button } from '../Button';
+import { Select } from '../Select';
+import { SelectItem } from '../SelectItem';
+import { Link } from '../Link';
+import { StackProvider, useStack } from './Stack';
+// import './styles.css';
+
+export default {
+  title: 'components/Snackbar',
+};
+
+const Example = () => {
+  return (
+    <>
+      <Box m={4}>
+        <Snackbar>Marked as favorite.</Snackbar>
+      </Box>
+      <Box m={4}>
+        <Snackbar action={<Button>Action</Button>}>
+          This item already has the label{' '}
+          <Link href="https://booking.com" target="__blank">
+            &quot;travel&quot;
+          </Link>
+          . You can add a new label.
+        </Snackbar>
+      </Box>
+      <Box m={4}>
+        <Snackbar action={<Button>Add new label</Button>} flexWrap="wrap">
+          This item already has the label{' '}
+          <Link href="https://booking.com" target="__blank">
+            &quot;travel&quot;
+          </Link>
+          . You can add a new label.
+        </Snackbar>
+      </Box>
+    </>
+  );
+};
+
+const ControlledExample = () => {
+  const [placement, setPlacement] = useState<any>('top-right');
+
+  return (
+    <>
+      <Box width="240px" m={4}>
+        <Select value={placement} onChange={(e, val) => setPlacement(val)}>
+          <SelectItem value="top-right">Top Right</SelectItem>
+          <SelectItem value="top-center">Top Center</SelectItem>
+          <SelectItem value="top-left">Top Left</SelectItem>
+          <SelectItem value="bottom-right">Bottom Right</SelectItem>
+          <SelectItem value="bottom-center">Bottom Center</SelectItem>
+          <SelectItem value="bottom-left">Bottom Left</SelectItem>
+        </Select>
+      </Box>
+      <Box m={4}>
+        <StackProvider placement={placement}>
+          <SnackbarButton />
+        </StackProvider>
+      </Box>
+    </>
+  );
+};
+
+function SnackbarButton() {
+  const { addItem } = useStack();
+  return (
+    <Button
+      onClick={() =>
+        addItem(
+          <Snackbar action={<Button>Dismiss</Button>} dismissible>
+            This item already has the label{' '}
+            <Link href="https://booking.com" target="__blank">
+              &quot;travel&quot;
+            </Link>
+            . You can add a new label.
+          </Snackbar>
+        )
+      }
+    >
+      Add snackbar
+    </Button>
+  );
+}
+
+const SnackbarStackExample = () => {
+  return (
+    <StackProvider>
+      <SnackbarButton />
+    </StackProvider>
+  );
+};
+
+export const Default = () => <Example />;
+export const Controlled = () => <ControlledExample />;
+export const SnackbarStack = () => <SnackbarStackExample />;

package/src/Snackbar/Snackbar.tsx

@@ -9,13 +9,14 @@ import {
 } from '@basic-ui/dynamic-theme';
 
 import { Box } from '../Box';
+import type { SxStyleProp } from '../Box';
 import type { PaperProps } from '../Paper';
 import { Paper } from '../Paper';
 import { Text } from '../Text';
 import { useSnackbarAnimation } from './useSnackbarAnimation';
 
 export interface SnackbarProps extends PaperProps {
-  action?: ReactElement;
+  action?: ReactElement<{ onClick?: () => void }>;
   timeout?: number;
   dismissible?: boolean;
 }
@@ -47,21 +48,23 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
           colorScheme === 'light' ? DARK_SCHEME_CLASS : LIGHT_SCHEME_CLASS
         }
         ref={assignMultipleRefs(forwardedRef, ref)}
-        __css={{
-          boxShadow: 4,
-          py: rem(6),
-          pl: 3,
-          pr: 3,
-          display: 'inline-flex',
-          minWidth: `min(100%, ${rem(344)})`,
-          maxWidth: ['100%', 'unset'],
-          borderRadius: 'extra-small',
-          color: 'on.surface',
-          flexDirection: 'row',
-          willChange: 'transform,opacity',
-          ...placementStyle,
-          ...__css,
-        }}
+        __css={
+          {
+            boxShadow: 4,
+            py: rem(6),
+            pl: 3,
+            pr: 3,
+            display: 'inline-flex',
+            minWidth: `min(100%, ${rem(344)})`,
+            maxWidth: ['100%', 'unset'],
+            borderRadius: 'extra-small',
+            color: 'on.surface',
+            flexDirection: 'row',
+            willChange: 'transform,opacity',
+            ...placementStyle,
+            ...(__css as SxStyleProp),
+          } as SxStyleProp
+        }
         style={{
           ...style,
           ...styleProp,

package/src/Switch/Switch.story.tsx

@@ -1,98 +1,97 @@
-import type { ReactElement } from 'react';
-import { forwardRef } from 'react';
-
-import { Switch } from './';
-import { Box } from '../';
-import type { CheckBoxIconProps } from '../CheckBox/CheckBoxIcon';
-
-export default {
-  title: 'components/Switch',
-};
-
-const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
-  function CheckBoxIcon(
-    {
-      __css = {},
-      indeterminate,
-      checked,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      disabled,
-      backgroundColor,
-      borderColor,
-      opacity,
-      ...otherProps
-    },
-    forwardedRef
-  ) {
-    return (
-      <Box
-        as="span"
-        ref={forwardedRef}
-        __css={{
-          display: 'inline-flex',
-          pointerEvents: 'none',
-          '& svg': {
-            width: 'var(--switch-icon-size)',
-            height: 'var(--switch-icon-size)',
-          },
-          __css,
-        }}
-        {...otherProps}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
-          {checked ? (
-            <path
-              d="M378 810 154 586l43-43 181 181 384-384 43 43-427 427Z"
-              fill="currentColor"
-            />
-          ) : (
-            <path
-              d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"
-              fill="currentColor"
-            />
-          )}
-        </svg>
-      </Box>
-    );
-  }
-);
-
-const Example = ({ icon }: { icon?: ReactElement<any> }) => {
-  return (
-    <>
-      <Box>
-        <Switch icon={icon}>off/on</Switch>
-        <Switch icon={icon} disabled>
-          off/on
-        </Switch>
-        <Switch icon={icon} disabled defaultChecked={true}>
-          off/on
-        </Switch>
-      </Box>
-      <Box>
-        <Switch icon={icon} />
-        <Switch icon={icon} disabled />
-        <Switch icon={icon} disabled defaultChecked={true} />
-      </Box>
-      <Box>
-        <Switch icon={icon} size="small">
-          off/on
-        </Switch>
-        <Switch icon={icon} disabled size="small">
-          off/on
-        </Switch>
-        <Switch icon={icon} disabled defaultChecked={true} size="small">
-          off/on
-        </Switch>
-      </Box>
-      <Box>
-        <Switch icon={icon} size="small" />
-        <Switch icon={icon} disabled size="small" />
-        <Switch icon={icon} disabled defaultChecked={true} size="small" />
-      </Box>
-    </>
-  );
-};
-
-export const Default = () => <Example />;
-export const WithIcon = () => <Example icon={<CheckBoxIcon />} />;
+import type { ReactElement } from 'react';
+import { forwardRef } from 'react';
+
+import { Switch } from './';
+import { Box } from '../';
+import type { CheckBoxIconProps } from '../CheckBox/CheckBoxIcon';
+
+export default {
+  title: 'components/Switch',
+};
+
+const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
+  function CheckBoxIcon(
+    {
+      __css = {},
+      indeterminate,
+      checked,
+      disabled,
+      backgroundColor,
+      borderColor,
+      opacity,
+      ...otherProps
+    },
+    forwardedRef
+  ) {
+    return (
+      <Box
+        as="span"
+        ref={forwardedRef}
+        __css={{
+          display: 'inline-flex',
+          pointerEvents: 'none',
+          '& svg': {
+            width: 'var(--switch-icon-size)',
+            height: 'var(--switch-icon-size)',
+          },
+          __css,
+        }}
+        {...otherProps}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
+          {checked ? (
+            <path
+              d="M378 810 154 586l43-43 181 181 384-384 43 43-427 427Z"
+              fill="currentColor"
+            />
+          ) : (
+            <path
+              d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"
+              fill="currentColor"
+            />
+          )}
+        </svg>
+      </Box>
+    );
+  }
+);
+
+const Example = ({ icon }: { icon?: ReactElement<any> }) => {
+  return (
+    <>
+      <Box>
+        <Switch icon={icon}>off/on</Switch>
+        <Switch icon={icon} disabled>
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled defaultChecked={true}>
+          off/on
+        </Switch>
+      </Box>
+      <Box>
+        <Switch icon={icon} />
+        <Switch icon={icon} disabled />
+        <Switch icon={icon} disabled defaultChecked={true} />
+      </Box>
+      <Box>
+        <Switch icon={icon} size="small">
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled size="small">
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled defaultChecked={true} size="small">
+          off/on
+        </Switch>
+      </Box>
+      <Box>
+        <Switch icon={icon} size="small" />
+        <Switch icon={icon} disabled size="small" />
+        <Switch icon={icon} disabled defaultChecked={true} size="small" />
+      </Box>
+    </>
+  );
+};
+
+export const Default = () => <Example />;
+export const WithIcon = () => <Example icon={<CheckBoxIcon />} />;