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

package/src/ProgressSpinner/ProgressSpinner.story.tsx

@@ -1,35 +1,35 @@
-import { useEffect, useState } from 'react';
-
-import { ProgressSpinner } from './';
-import { Box } from '../Box';
-
-export default {
-  title: 'components/ProgressSpinner',
-};
-
-const Example = () => {
-  const steps = [0, 25, 50, 75, 100];
-  const [currentProgress, setCurrentProgress] = useState(0);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentProgress((i) => i + 1);
-    }, 1000);
-    return () => clearInterval(interval);
-  });
-  return (
-    <Box m={3}>
-      <Box m={3}>
-        <ProgressSpinner />
-      </Box>
-      <Box m={3}>
-        <ProgressSpinner progress={25} />
-        <ProgressSpinner progress={50} />
-        <ProgressSpinner progress={75} />
-        <ProgressSpinner progress={100} />
-        <ProgressSpinner progress={steps[currentProgress % steps.length]} />
-      </Box>
-    </Box>
-  );
-};
-
-export const Default = () => <Example />;
+import { useEffect, useState } from 'react';
+
+import { ProgressSpinner } from './';
+import { Box } from '../Box';
+
+export default {
+  title: 'components/ProgressSpinner',
+};
+
+const Example = () => {
+  const steps = [0, 25, 50, 75, 100];
+  const [currentProgress, setCurrentProgress] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentProgress((i) => i + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  });
+  return (
+    <Box m={3}>
+      <Box m={3}>
+        <ProgressSpinner />
+      </Box>
+      <Box m={3}>
+        <ProgressSpinner progress={25} />
+        <ProgressSpinner progress={50} />
+        <ProgressSpinner progress={75} />
+        <ProgressSpinner progress={100} />
+        <ProgressSpinner progress={steps[currentProgress % steps.length]} />
+      </Box>
+    </Box>
+  );
+};
+
+export const Default = () => <Example />;

package/src/ProgressSpinner/ProgressSpinner.tsx

@@ -1,119 +1,119 @@
-import type { SVGAttributes } from 'react';
-import { forwardRef } from 'react';
-import { keyframes } from '@emotion/react';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { EASING_STANDARD } from '../motion';
-
-export type ProgressSpinnerProps = BoxProps & {
-  progress?: number;
-  thickness?: number;
-  size?: number;
-};
-
-const innerDivRotate = keyframes({
-  '0%': {
-    transform: 'rotate(-90deg)',
-  },
-  '100%': {
-    transform: 'rotate(270deg)',
-  },
-});
-
-const circleIndeterminate = keyframes({
-  '0%': {
-    strokeDasharray: '1px, 200px',
-    strokeDashoffset: '0px',
-  },
-  '50%': {
-    strokeDasharray: '100px, 200px',
-    strokeDashoffset: '-15px',
-  },
-  '100%': {
-    strokeDasharray: '100px, 200px',
-    strokeDashoffset: '-125px',
-  },
-});
-
-const SIZE = 44;
-
-export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
-  function ProgressSpinner(props, forwardedRef) {
-    const {
-      __css,
-      progress: progressProp,
-      thickness = 3.6,
-      size = 40,
-      ...otherProps
-    } = props;
-
-    const indeterminate = progressProp === undefined;
-    const progress = progressProp ?? 0;
-
-    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
-    return (
-      <Box
-        ref={forwardedRef}
-        {...otherProps}
-        __css={{
-          color: 'primary',
-          display: 'inline-block',
-          width: rem(size),
-          height: rem(size),
-          ...__css,
-        }}
-      >
-        <Box
-          __css={{
-            display: 'inline-block',
-            width: '100%',
-            height: '100%',
-            transformOrigin: '50% 50%',
-            transform: 'rotate(-90deg)',
-            ...(indeterminate && {
-              animation: `${innerDivRotate} 1.4s linear infinite`,
-            }),
-          }}
-        >
-          <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
-            as="svg"
-            viewBox="22 22 44 44"
-            display="block"
-          >
-            <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
-              as="circle"
-              stroke="currentColor"
-              cx={SIZE}
-              cy={SIZE}
-              r={(SIZE - thickness) / 2}
-              fill="none"
-              strokeWidth={thickness}
-              style={
-                indeterminate
-                  ? {}
-                  : {
-                      strokeDashoffset: `${(
-                        ((100 - progress) / 100) *
-                        circumference
-                      ).toFixed(3)}px`,
-                    }
-              }
-              __css={
-                indeterminate
-                  ? {
-                      animation: `${circleIndeterminate} 1.4s ease-in-out infinite`,
-                    }
-                  : {
-                      transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,
-                      strokeDasharray: circumference.toFixed(3),
-                    }
-              }
-            />
-          </Box>
-        </Box>
-      </Box>
-    );
-  }
-);
+import type { SVGAttributes } from 'react';
+import { forwardRef } from 'react';
+import { keyframes } from '@emotion/react';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
+
+export type ProgressSpinnerProps = BoxProps & {
+  progress?: number;
+  thickness?: number;
+  size?: number;
+};
+
+const innerDivRotate = keyframes({
+  '0%': {
+    transform: 'rotate(-90deg)',
+  },
+  '100%': {
+    transform: 'rotate(270deg)',
+  },
+});
+
+const circleIndeterminate = keyframes({
+  '0%': {
+    strokeDasharray: '1px, 200px',
+    strokeDashoffset: '0px',
+  },
+  '50%': {
+    strokeDasharray: '100px, 200px',
+    strokeDashoffset: '-15px',
+  },
+  '100%': {
+    strokeDasharray: '100px, 200px',
+    strokeDashoffset: '-125px',
+  },
+});
+
+const SIZE = 44;
+
+export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
+  function ProgressSpinner(props, forwardedRef) {
+    const {
+      __css,
+      progress: progressProp,
+      thickness = 3.6,
+      size = 40,
+      ...otherProps
+    } = props;
+
+    const indeterminate = progressProp === undefined;
+    const progress = progressProp ?? 0;
+
+    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    return (
+      <Box
+        ref={forwardedRef}
+        {...otherProps}
+        __css={{
+          color: 'primary',
+          display: 'inline-block',
+          width: rem(size),
+          height: rem(size),
+          ...__css,
+        }}
+      >
+        <Box
+          __css={{
+            display: 'inline-block',
+            width: '100%',
+            height: '100%',
+            transformOrigin: '50% 50%',
+            transform: 'rotate(-90deg)',
+            ...(indeterminate && {
+              animation: `${innerDivRotate} 1.4s linear infinite`,
+            }),
+          }}
+        >
+          <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
+            as="svg"
+            viewBox="22 22 44 44"
+            display="block"
+          >
+            <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
+              as="circle"
+              stroke="currentColor"
+              cx={SIZE}
+              cy={SIZE}
+              r={(SIZE - thickness) / 2}
+              fill="none"
+              strokeWidth={thickness}
+              style={
+                indeterminate
+                  ? {}
+                  : {
+                      strokeDashoffset: `${(
+                        ((100 - progress) / 100) *
+                        circumference
+                      ).toFixed(3)}px`,
+                    }
+              }
+              __css={
+                indeterminate
+                  ? {
+                      animation: `${circleIndeterminate} 1.4s ease-in-out infinite`,
+                    }
+                  : {
+                      transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,
+                      strokeDasharray: circumference.toFixed(3),
+                    }
+              }
+            />
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+);

package/src/ProgressSpinner/index.ts

@@ -1 +1 @@
-export * from './ProgressSpinner';
+export * from './ProgressSpinner';

package/src/RadioButton/RadioButton.story.tsx

@@ -1,109 +1,109 @@
-import type { ChangeEvent } from 'react';
-import { useState } from 'react';
-
-import { RadioButton, RadioGroup, Box } from '../';
-// import './styles.css';
-
-export default {
-  title: 'components/RadioButton',
-};
-
-const Example = (props) => {
-  return (
-    <>
-      <RadioGroup name={props.name}>
-        <RadioButton value="strongly agree">Strongly agree</RadioButton>
-        <RadioButton value="agree">Agree</RadioButton>
-        <RadioButton value="neutral">Neutral</RadioButton>
-        <RadioButton value="disagree">Disagree</RadioButton>
-        <RadioButton value="strongly disagree">Strongly disagree</RadioButton>
-        <RadioButton value="disabled" disabled>
-          Disabled
-        </RadioButton>
-      </RadioGroup>
-      <RadioGroup name={props.name + '-standalone'}>
-        <RadioButton value="strongly agree" />
-        <RadioButton value="agree" />
-        <RadioButton value="neutral" />
-        <RadioButton value="disagree" />
-        <RadioButton value="strongly disagree" />
-        <RadioButton value="disabled" disabled />
-      </RadioGroup>
-    </>
-  );
-};
-
-const StandaloneExample = (props) => {
-  const [selectedValue, setSelectedValue] = useState('a');
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSelectedValue(e.target.value);
-  };
-
-  return (
-    <Box>
-      <RadioButton
-        value="strongly agree"
-        checked={selectedValue === 'strongly agree'}
-        name={props.name}
-        onChange={handleChange}
-      >
-        Strongly agree
-      </RadioButton>
-      <RadioButton
-        value="agree"
-        checked={selectedValue === 'agree'}
-        name={props.name}
-        onChange={handleChange}
-      >
-        Agree
-      </RadioButton>
-      <RadioButton
-        value="neutral"
-        checked={selectedValue === 'neutral'}
-        name={props.name}
-        onChange={handleChange}
-      >
-        Neutral
-      </RadioButton>
-      <RadioButton
-        value="disagree"
-        checked={selectedValue === 'disagree'}
-        name={props.name}
-        onChange={handleChange}
-      >
-        Disagree
-      </RadioButton>
-      <RadioButton
-        value="strongly disagree"
-        checked={selectedValue === 'strongly disagree'}
-        name={props.name}
-        onChange={handleChange}
-      >
-        Strongly disagree
-      </RadioButton>
-      <RadioButton
-        value="disabled"
-        checked={selectedValue === 'disabled'}
-        name={props.name}
-        onChange={handleChange}
-        disabled
-      >
-        Disabled
-      </RadioButton>
-    </Box>
-  );
-};
-
-export const Controlled = () => (
-  <>
-    <Example name="demo-1" />
-    <Example name="demo-2" />
-  </>
-);
-
-export const Standalone = () => (
-  <>
-    <StandaloneExample name="demo-1" />
-    <StandaloneExample name="demo-2" />
-  </>
-);
+import type { ChangeEvent } from 'react';
+import { useState } from 'react';
+
+import { RadioButton, RadioGroup, Box } from '../';
+// import './styles.css';
+
+export default {
+  title: 'components/RadioButton',
+};
+
+const Example = (props) => {
+  return (
+    <>
+      <RadioGroup name={props.name}>
+        <RadioButton value="strongly agree">Strongly agree</RadioButton>
+        <RadioButton value="agree">Agree</RadioButton>
+        <RadioButton value="neutral">Neutral</RadioButton>
+        <RadioButton value="disagree">Disagree</RadioButton>
+        <RadioButton value="strongly disagree">Strongly disagree</RadioButton>
+        <RadioButton value="disabled" disabled>
+          Disabled
+        </RadioButton>
+      </RadioGroup>
+      <RadioGroup name={props.name + '-standalone'}>
+        <RadioButton value="strongly agree" />
+        <RadioButton value="agree" />
+        <RadioButton value="neutral" />
+        <RadioButton value="disagree" />
+        <RadioButton value="strongly disagree" />
+        <RadioButton value="disabled" disabled />
+      </RadioGroup>
+    </>
+  );
+};
+
+const StandaloneExample = (props) => {
+  const [selectedValue, setSelectedValue] = useState('a');
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSelectedValue(e.target.value);
+  };
+
+  return (
+    <Box>
+      <RadioButton
+        value="strongly agree"
+        checked={selectedValue === 'strongly agree'}
+        name={props.name}
+        onChange={handleChange}
+      >
+        Strongly agree
+      </RadioButton>
+      <RadioButton
+        value="agree"
+        checked={selectedValue === 'agree'}
+        name={props.name}
+        onChange={handleChange}
+      >
+        Agree
+      </RadioButton>
+      <RadioButton
+        value="neutral"
+        checked={selectedValue === 'neutral'}
+        name={props.name}
+        onChange={handleChange}
+      >
+        Neutral
+      </RadioButton>
+      <RadioButton
+        value="disagree"
+        checked={selectedValue === 'disagree'}
+        name={props.name}
+        onChange={handleChange}
+      >
+        Disagree
+      </RadioButton>
+      <RadioButton
+        value="strongly disagree"
+        checked={selectedValue === 'strongly disagree'}
+        name={props.name}
+        onChange={handleChange}
+      >
+        Strongly disagree
+      </RadioButton>
+      <RadioButton
+        value="disabled"
+        checked={selectedValue === 'disabled'}
+        name={props.name}
+        onChange={handleChange}
+        disabled
+      >
+        Disabled
+      </RadioButton>
+    </Box>
+  );
+};
+
+export const Controlled = () => (
+  <>
+    <Example name="demo-1" />
+    <Example name="demo-2" />
+  </>
+);
+
+export const Standalone = () => (
+  <>
+    <StandaloneExample name="demo-1" />
+    <StandaloneExample name="demo-2" />
+  </>
+);