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

package/src/SelectionControl/SelectionControlText.tsx

@@ -1,37 +1,37 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-
-import type { TextProps } from '../Text';
-import { Text } from '../Text';
-import { alpha } from '../color';
-
-export interface SelectionControlTextProps extends TextProps {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
-  disabled?: boolean;
-}
-
-export const SelectionControlText = forwardRef<
-  HTMLSpanElement,
-  SelectionControlTextProps
->(function SelectionControlText(props, forwardedRef) {
-  const { as = 'span', disabled, __css, ...otherProps } = props;
-
-  return (
-    <Text
-      ref={forwardedRef as any}
-      as={as}
-      __css={{
-        p: 1,
-        ...(disabled
-          ? { color: alpha('on.surface', 0.38) }
-          : {
-              cursor: 'pointer',
-              color: alpha('on.surface', 0.87),
-            }),
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+import { alpha } from '../color';
+
+export interface SelectionControlTextProps extends TextProps {
+  as?: ElementType<any>;
+  children?: ReactNode;
+  disabled?: boolean;
+}
+
+export const SelectionControlText = forwardRef<
+  HTMLSpanElement,
+  SelectionControlTextProps
+>(function SelectionControlText(props, forwardedRef) {
+  const { as = 'span', disabled, __css, ...otherProps } = props;
+
+  return (
+    <Text
+      ref={forwardedRef as any}
+      as={as}
+      __css={{
+        p: 1,
+        ...(disabled
+          ? { color: alpha('on.surface', 0.38) }
+          : {
+              cursor: 'pointer',
+              color: alpha('on.surface', 0.87),
+            }),
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/SelectionControl/index.ts

@@ -1,2 +1,2 @@
-export * from './SelectionControlLabel';
-export * from './SelectionControlText';
+export * from './SelectionControlLabel';
+export * from './SelectionControlText';

package/src/Skeleton/DelayAppearance.tsx

@@ -1,41 +1,41 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { keyframes } from '@emotion/react';
-import type { Keyframes } from '@emotion/serialize';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export const appearAnimation: Keyframes = keyframes({
-  to: {
-    visibility: 'visible',
-  },
-});
-
-export interface DelayAppearanceProps extends BoxProps {
-  timeoutInMilliseconds?: number;
-  children?: React.ReactNode;
-}
-
-/**
- * Helper component to prevent an Skeleton component from appearing too fast.
- * https://reactjs.org/docs/concurrent-mode-patterns.html#delaying-a-pending-indicator
- */
-export const DelayAppearance = forwardRef<HTMLDivElement, DelayAppearanceProps>(
-  function DelayAppearance(props, forwardedRef) {
-    const { timeoutInMilliseconds = 500, __css, ...otherProps } = props;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        timeoutInMilliseconds={timeoutInMilliseconds}
-        __css={{
-          animation: `0s linear ${timeoutInMilliseconds}ms forwards ${appearAnimation}`,
-          visibility: 'hidden',
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { keyframes } from '@emotion/react';
+import type { Keyframes } from '@emotion/serialize';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export const appearAnimation: Keyframes = keyframes({
+  to: {
+    visibility: 'visible',
+  },
+});
+
+export interface DelayAppearanceProps extends BoxProps {
+  timeoutInMilliseconds?: number;
+  children?: ReactNode;
+}
+
+/**
+ * Helper component to prevent an Skeleton component from appearing too fast.
+ * https://reactjs.org/docs/concurrent-mode-patterns.html#delaying-a-pending-indicator
+ */
+export const DelayAppearance = forwardRef<HTMLDivElement, DelayAppearanceProps>(
+  function DelayAppearance(props, forwardedRef) {
+    const { timeoutInMilliseconds = 500, __css, ...otherProps } = props;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        timeoutInMilliseconds={timeoutInMilliseconds}
+        __css={{
+          animation: `0s linear ${timeoutInMilliseconds}ms forwards ${appearAnimation}`,
+          visibility: 'hidden',
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Skeleton/Skeleton.story.tsx

@@ -1,57 +1,57 @@
-import { Skeleton } from './';
-import { Box } from '../Box';
-import { Text } from '../Text';
-import { DelayAppearance } from './DelayAppearance';
-
-export default {
-  title: 'components/Skeleton',
-};
-
-const Skeletons = ({
-  animation = 'pulse',
-}: {
-  animation?: 'pulse' | 'wave';
-}) => {
-  return (
-    <Box>
-      <Skeleton animation={animation} width={200} height={200} m={2} />
-      <Skeleton animation={animation} width={200} m={2} />
-      <Skeleton
-        animation={animation}
-        width={60}
-        height={60}
-        borderRadius="full"
-        m={2}
-      />
-      <Skeleton animation={animation} m={2}>
-        <Box width={60} height={60} borderRadius="full" />
-      </Skeleton>
-    </Box>
-  );
-};
-
-const Example = () => {
-  return (
-    <>
-      <Box>
-        <Text variant="h4" px={2}>
-          Pulse
-        </Text>
-        <Skeletons animation="pulse" />
-      </Box>
-      <Box>
-        <Text variant="h4" px={2}>
-          Wave
-        </Text>
-        <Skeletons animation="wave" />
-      </Box>
-    </>
-  );
-};
-
-export const Default = () => <Example />;
-export const DelayedAppearance = () => (
-  <DelayAppearance>
-    <Example />
-  </DelayAppearance>
-);
+import { Skeleton } from './';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { DelayAppearance } from './DelayAppearance';
+
+export default {
+  title: 'components/Skeleton',
+};
+
+const Skeletons = ({
+  animation = 'pulse',
+}: {
+  animation?: 'pulse' | 'wave';
+}) => {
+  return (
+    <Box>
+      <Skeleton animation={animation} width={200} height={200} m={2} />
+      <Skeleton animation={animation} width={200} m={2} />
+      <Skeleton
+        animation={animation}
+        width={60}
+        height={60}
+        borderRadius="full"
+        m={2}
+      />
+      <Skeleton animation={animation} m={2}>
+        <Box width={60} height={60} borderRadius="full" />
+      </Skeleton>
+    </Box>
+  );
+};
+
+const Example = () => {
+  return (
+    <>
+      <Box>
+        <Text variant="title-large" px={2}>
+          Pulse
+        </Text>
+        <Skeletons animation="pulse" />
+      </Box>
+      <Box>
+        <Text variant="title-large" px={2}>
+          Wave
+        </Text>
+        <Skeletons animation="wave" />
+      </Box>
+    </>
+  );
+};
+
+export const Default = () => <Example />;
+export const DelayedAppearance = () => (
+  <DelayAppearance>
+    <Example />
+  </DelayAppearance>
+);

package/src/Skeleton/Skeleton.tsx

@@ -1,40 +1,40 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { alpha } from '../color';
-import { useTheme } from '../theme';
-import { pulseAnimationStyle, waveAnimationStyle } from './animation';
-
-export interface SkeletonProps
-  extends BoxProps<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
-  animation?: 'pulse' | 'wave';
-}
-
-export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
-  function Skeleton(props, forwardedRef) {
-    const { as = 'span', __css, animation = 'pulse', ...otherProps } = props;
-    const theme = useTheme();
-
-    return (
-      <Box<BoxProps<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>>
-        ref={forwardedRef}
-        as={as}
-        __css={{
-          height: '1.2em',
-          display: 'inline-block',
-          backgroundColor: alpha('on.surface', 0.11),
-          ...(animation === 'pulse'
-            ? pulseAnimationStyle()
-            : waveAnimationStyle({ theme })),
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { alpha } from '../color';
+import { useTheme } from '../theme';
+import { pulseAnimationStyle, waveAnimationStyle } from './animation';
+
+export interface SkeletonProps
+  extends BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  animation?: 'pulse' | 'wave';
+}
+
+export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
+  function Skeleton(props, forwardedRef) {
+    const { as = 'span', __css, animation = 'pulse', ...otherProps } = props;
+    const theme = useTheme();
+
+    return (
+      <Box<BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>>
+        ref={forwardedRef}
+        as={as}
+        __css={{
+          height: '1.2em',
+          display: 'inline-block',
+          backgroundColor: alpha('on.surface', 0.11),
+          ...(animation === 'pulse'
+            ? pulseAnimationStyle()
+            : waveAnimationStyle({ theme })),
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Skeleton/animation.ts

@@ -1,54 +1,54 @@
-import { keyframes } from '@emotion/react';
-import type { Keyframes } from '@emotion/serialize';
-import type { SystemStyleObject } from '@styled-system/css';
-
-import { alpha } from '../color';
-
-export const pulseAnimation: Keyframes = keyframes({
-  '0%': {
-    opacity: 1,
-  },
-  '50%': {
-    opacity: 0.4,
-  },
-  '100%': {
-    opacity: 1,
-  },
-});
-
-export const pulseAnimationStyle: () => SystemStyleObject = () => ({
-  animation: `${pulseAnimation} 1.5s ease-in-out 0.5s infinite`,
-});
-
-export const waveAnimation: Keyframes = keyframes({
-  '0%': {
-    transform: 'translateX(-100%)',
-  },
-  '60%': {
-    transform: 'translateX(100%)',
-  },
-  '100%': {
-    transform: 'translateX(100%)',
-  },
-});
-
-export const waveAnimationStyle: (obj: { theme: any }) => SystemStyleObject = ({
-  theme,
-}: any) => ({
-  overflow: 'hidden',
-  position: 'relative',
-  '&::after': {
-    position: 'absolute',
-    content: '""',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    animation: `${waveAnimation} 1.6s linear 0.5s infinite`,
-    transform: 'translateX(-100%)',
-    background: `linear-gradient(90deg, transparent, ${alpha(
-      'on.surface',
-      0.04
-    )(theme)}, transparent)`,
-  },
-});
+import { keyframes } from '@emotion/react';
+import type { Keyframes } from '@emotion/serialize';
+import type { SystemStyleObject } from '@styled-system/css';
+
+import { alpha } from '../color';
+
+export const pulseAnimation: Keyframes = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+  '50%': {
+    opacity: 0.4,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
+export const pulseAnimationStyle: () => SystemStyleObject = () => ({
+  animation: `${pulseAnimation} 1.5s ease-in-out 0.5s infinite`,
+});
+
+export const waveAnimation: Keyframes = keyframes({
+  '0%': {
+    transform: 'translateX(-100%)',
+  },
+  '60%': {
+    transform: 'translateX(100%)',
+  },
+  '100%': {
+    transform: 'translateX(100%)',
+  },
+});
+
+export const waveAnimationStyle: (obj: { theme: any }) => SystemStyleObject = ({
+  theme,
+}: any) => ({
+  overflow: 'hidden',
+  position: 'relative',
+  '&::after': {
+    position: 'absolute',
+    content: '""',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    animation: `${waveAnimation} 1.6s linear 0.5s infinite`,
+    transform: 'translateX(-100%)',
+    background: `linear-gradient(90deg, transparent, ${alpha(
+      'on.surface',
+      0.04
+    )(theme)}, transparent)`,
+  },
+});

package/src/Skeleton/index.ts

@@ -1,2 +1,2 @@
-export * from './Skeleton';
-export * from './DelayAppearance';
+export * from './Skeleton';
+export * from './DelayAppearance';

package/src/Slider/Slider.story.tsx

@@ -0,0 +1,36 @@
+import { Slider, SliderMarker } from './';
+// import './styles.css';
+
+export default { title: 'components/Slider' };
+
+export const Uncontrolled = () => <Slider />;
+
+export const UncontrolledWithSteps = () => <Slider step={10} />;
+
+export const UncontrolledWithMarks = () => (
+  <Slider>
+    <SliderMarker value={10} />
+    <SliderMarker value={20} />
+    <SliderMarker value={30} />
+    <SliderMarker value={40} />
+    <SliderMarker value={50} />
+    <SliderMarker value={60} />
+    <SliderMarker value={70} />
+    <SliderMarker value={80} />
+    <SliderMarker value={90} />
+  </Slider>
+);
+
+export const UncontrolledWithMarksAndSteps = () => (
+  <Slider step={10}>
+    <SliderMarker value={10} />
+    <SliderMarker value={20} />
+    <SliderMarker value={30} />
+    <SliderMarker value={40} />
+    <SliderMarker value={50} />
+    <SliderMarker value={60} />
+    <SliderMarker value={70} />
+    <SliderMarker value={80} />
+    <SliderMarker value={90} />
+  </Slider>
+);