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

package/src/Slider/Slider.tsx

@@ -1,275 +1,275 @@
-import {
-  SliderHandle as SliderHandleCore,
-  SliderInput as SliderInputCore,
-  SliderMarker as SliderMarkerCore,
-  SliderTrack as SliderTrackCore,
-  SliderRange as SliderRangeCore,
-} from '@basic-ui/core';
-import type {
-  SliderProps as SliderPropsCore,
-  SliderHandleProps as SliderHandlePropsCore,
-  SliderInputProps as SliderInputPropsCore,
-  SliderMarkerProps as SliderMarkerPropsCore,
-  SliderTrackProps as SliderTrackPropsCore,
-  SliderRangeProps as SliderRangePropsCore,
-} from '@basic-ui/core';
-export type { SliderHandleAlignment } from '@basic-ui/core';
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import type { RippleBoxProps } from '../Ripple';
-import { RippleBox } from '../Ripple';
-
-/////////////////////////////////////////////////////
-// SliderInput
-
-export type SliderInputProps = Omit<
-  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
-  | 'onChange'
-  | 'onMouseDown'
-  | 'onMouseMove'
-  | 'onMouseUp'
-  | 'onPointerDown'
-  | 'onPointerUp'
-  | 'onTouchEnd'
-  | 'onTouchMove'
-  | 'onTouchStart'
-> &
-  SliderInputPropsCore;
-
-export const SliderInput = forwardRef<HTMLDivElement, SliderInputProps>(
-  ({ as = 'div', __css, ...props }, ref) => (
-    <SliderInputCore
-      as={Box}
-      innerAs={as as any}
-      ref={ref}
-      {...props}
-      __css={{
-        maxWidth: '100%',
-        cursor: 'pointer',
-        '&[data-orientation="horizontal"]': { height: rem(4) },
-        '&[data-orientation="vertical"]': {
-          width: rem(4),
-          height: '250px',
-          maxHeight: '100%',
-        },
-        '&[data-disabled]': { opacity: 0.5, pointerEvents: 'none' },
-        ...__css,
-      }}
-    />
-  )
-);
-
-/////////////////////////////////////////////////////
-// SliderHandle
-
-export type SliderHandleProps = SliderHandlePropsCore &
-  RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
-
-export const SliderHandle = forwardRef<HTMLDivElement, SliderHandleProps>(
-  ({ as = 'div', __css, children, ...props }, ref) => (
-    <SliderHandleCore
-      as={RippleBox}
-      innerAs={as as any}
-      ref={ref}
-      rippleColor="currentColor"
-      hoverOpacity={0.12}
-      focusOpacity={0.24}
-      pressedOpacity={0.24}
-      mouseFocus
-      center
-      __css={{
-        position: 'relative',
-        width: rem(40),
-        height: rem(40),
-        color: 'primary',
-        borderRadius: 'full',
-        zIndex: 1,
-        transformOrigin: 'center',
-        userSelect: 'none',
-        '&[aria-orientation="horizontal"]': {
-          top: '50%',
-          transform: 'translateY(-50%)',
-        },
-        '&[aria-orientation="horizontal"]:focus': {
-          transform: 'translateY(-50%)',
-        },
-        '&[aria-orientation="vertical"]': {
-          left: '50%',
-          transform: 'translateX(-50%)',
-        },
-        ':focus': {
-          outline: 'none',
-        },
-        ...__css,
-      }}
-      {...props}
-    >
-      <Box
-        __css={{
-          bg: 'currentColor',
-          width: '50%',
-          height: '50%',
-          borderRadius: 'full',
-          pointerEvents: 'none',
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          boxShadow: 1,
-        }}
-      />
-      {children}
-    </SliderHandleCore>
-  )
-);
-
-/////////////////////////////////////////////////////
-// SliderMarker
-
-export type SliderMarkerProps = SliderMarkerPropsCore &
-  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
-
-export const SliderMarker = forwardRef<HTMLDivElement, SliderMarkerProps>(
-  ({ as = 'div', __css, ...props }, ref) => (
-    <SliderMarkerCore
-      as={Box}
-      innerAs={as as any}
-      ref={ref}
-      {...props}
-      __css={{
-        transformOrigin: 'center',
-        borderRadius: 'full',
-        width: '2px',
-        height: '2px',
-        '&[data-orientation="horizontal"]': {
-          top: '50%',
-          transform: 'translate(-50%, -50%)',
-        },
-        '&[data-orientation="vertical"]': {
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-        },
-        opacity: 0.38,
-        bg: 'on.surface-variant',
-        '&[data-state="at-value"],&[data-state="under-value"]': {
-          bg: 'on.primary',
-        },
-        ...__css,
-      }}
-    />
-  )
-);
-
-/////////////////////////////////////////////////////
-// SliderTrack
-
-export type SliderTrackProps = SliderTrackPropsCore &
-  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
-
-export const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(
-  ({ as = 'div', __css, ...props }, ref) => (
-    <SliderTrackCore
-      as={Box}
-      innerAs={as as any}
-      ref={ref}
-      {...props}
-      __css={{
-        position: 'relative',
-        borderRadius: 'full',
-        bg: 'surface-variant',
-        '&[data-orientation="horizontal"]': {
-          width: '100%',
-          height: 'inherit',
-        },
-        '&[data-orientation="vertical"]': {
-          width: 'inherit',
-          height: '100%',
-        },
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-        },
-        '&[data-orientation="horizontal"]::before': {
-          width: '100%',
-          height: '1.5rem',
-          top: 'calc(-0.5rem - 1px)',
-          left: '0',
-        },
-        '&[data-orientation="vertical"]::before': {
-          width: '1.5rem',
-          height: '100%',
-          top: '0',
-          left: 'calc(-0.5rem - 1px)',
-        },
-        ...__css,
-      }}
-    />
-  )
-);
-
-/////////////////////////////////////////////////////
-// SliderRange
-
-export type SliderRangeProps = SliderRangePropsCore &
-  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
-
-export const SliderRange = forwardRef<HTMLDivElement, SliderRangeProps>(
-  ({ as = 'div', __css, ...props }, ref) => (
-    <SliderRangeCore
-      as={Box}
-      innerAs={as as any}
-      ref={ref}
-      __css={{
-        borderRadius: 'inherit',
-        bg: 'primary',
-        left: '0',
-        bottom: '0',
-        top: '50%',
-        '&[data-orientation="horizontal"]': {
-          height: '100%',
-        },
-        '&[data-orientation="vertical"]': {
-          width: '100%',
-        },
-        transform: 'translateY(-50%)',
-        ...__css,
-      }}
-      {...props}
-    />
-  )
-);
-
-export type SliderProps = SliderPropsCore &
-  Omit<
-    BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
-    | 'onChange'
-    | 'onMouseDown'
-    | 'onMouseMove'
-    | 'onMouseUp'
-    | 'onPointerDown'
-    | 'onPointerUp'
-    | 'onTouchEnd'
-    | 'onTouchMove'
-    | 'onTouchStart'
-  >;
-
-export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
-  props,
-  forwardedRef
-) {
-  const { children, ...otherProps } = props;
-
-  return (
-    <SliderInput {...otherProps} ref={forwardedRef} data-reach-slider="">
-      <SliderTrack>
-        <SliderRange />
-        <SliderHandle />
-        {children}
-      </SliderTrack>
-    </SliderInput>
-  );
-});
+import {
+  SliderHandle as SliderHandleCore,
+  SliderInput as SliderInputCore,
+  SliderMarker as SliderMarkerCore,
+  SliderTrack as SliderTrackCore,
+  SliderRange as SliderRangeCore,
+} from '@basic-ui/core';
+import type {
+  SliderProps as SliderPropsCore,
+  SliderHandleProps as SliderHandlePropsCore,
+  SliderInputProps as SliderInputPropsCore,
+  SliderMarkerProps as SliderMarkerPropsCore,
+  SliderTrackProps as SliderTrackPropsCore,
+  SliderRangeProps as SliderRangePropsCore,
+} from '@basic-ui/core';
+export type { SliderHandleAlignment } from '@basic-ui/core';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+
+/////////////////////////////////////////////////////
+// SliderInput
+
+export type SliderInputProps = Omit<
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
+  | 'onChange'
+  | 'onMouseDown'
+  | 'onMouseMove'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp'
+  | 'onTouchEnd'
+  | 'onTouchMove'
+  | 'onTouchStart'
+> &
+  SliderInputPropsCore;
+
+export const SliderInput = forwardRef<HTMLDivElement, SliderInputProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderInputCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      {...props}
+      __css={{
+        maxWidth: '100%',
+        cursor: 'pointer',
+        '&[data-orientation="horizontal"]': { height: rem(4) },
+        '&[data-orientation="vertical"]': {
+          width: rem(4),
+          height: '250px',
+          maxHeight: '100%',
+        },
+        '&[data-disabled]': { opacity: 0.5, pointerEvents: 'none' },
+        ...__css,
+      }}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderHandle
+
+export type SliderHandleProps = SliderHandlePropsCore &
+  RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderHandle = forwardRef<HTMLDivElement, SliderHandleProps>(
+  ({ as = 'div', __css, children, ...props }, ref) => (
+    <SliderHandleCore
+      as={RippleBox}
+      innerAs={as as any}
+      ref={ref}
+      rippleColor="currentColor"
+      hoverOpacity={0.12}
+      focusOpacity={0.24}
+      pressedOpacity={0.24}
+      mouseFocus
+      center
+      __css={{
+        position: 'relative',
+        width: rem(40),
+        height: rem(40),
+        color: 'primary',
+        borderRadius: 'full',
+        zIndex: 1,
+        transformOrigin: 'center',
+        userSelect: 'none',
+        '&[aria-orientation="horizontal"]': {
+          top: '50%',
+          transform: 'translateY(-50%)',
+        },
+        '&[aria-orientation="horizontal"]:focus': {
+          transform: 'translateY(-50%)',
+        },
+        '&[aria-orientation="vertical"]': {
+          left: '50%',
+          transform: 'translateX(-50%)',
+        },
+        ':focus': {
+          outline: 'none',
+        },
+        ...__css,
+      }}
+      {...props}
+    >
+      <Box
+        __css={{
+          bg: 'currentColor',
+          width: '50%',
+          height: '50%',
+          borderRadius: 'full',
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          boxShadow: 1,
+        }}
+      />
+      {children}
+    </SliderHandleCore>
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderMarker
+
+export type SliderMarkerProps = SliderMarkerPropsCore &
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderMarker = forwardRef<HTMLDivElement, SliderMarkerProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderMarkerCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      {...props}
+      __css={{
+        transformOrigin: 'center',
+        borderRadius: 'full',
+        width: '2px',
+        height: '2px',
+        '&[data-orientation="horizontal"]': {
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+        },
+        '&[data-orientation="vertical"]': {
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        },
+        opacity: 0.38,
+        bg: 'on.surface-variant',
+        '&[data-state="at-value"],&[data-state="under-value"]': {
+          bg: 'on.primary',
+        },
+        ...__css,
+      }}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderTrack
+
+export type SliderTrackProps = SliderTrackPropsCore &
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderTrackCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      {...props}
+      __css={{
+        position: 'relative',
+        borderRadius: 'full',
+        bg: 'surface-variant',
+        '&[data-orientation="horizontal"]': {
+          width: '100%',
+          height: 'inherit',
+        },
+        '&[data-orientation="vertical"]': {
+          width: 'inherit',
+          height: '100%',
+        },
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+        },
+        '&[data-orientation="horizontal"]::before': {
+          width: '100%',
+          height: '1.5rem',
+          top: 'calc(-0.5rem - 1px)',
+          left: '0',
+        },
+        '&[data-orientation="vertical"]::before': {
+          width: '1.5rem',
+          height: '100%',
+          top: '0',
+          left: 'calc(-0.5rem - 1px)',
+        },
+        ...__css,
+      }}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderRange
+
+export type SliderRangeProps = SliderRangePropsCore &
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderRange = forwardRef<HTMLDivElement, SliderRangeProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderRangeCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      __css={{
+        borderRadius: 'inherit',
+        bg: 'primary',
+        left: '0',
+        bottom: '0',
+        top: '50%',
+        '&[data-orientation="horizontal"]': {
+          height: '100%',
+        },
+        '&[data-orientation="vertical"]': {
+          width: '100%',
+        },
+        transform: 'translateY(-50%)',
+        ...__css,
+      }}
+      {...props}
+    />
+  )
+);
+
+export type SliderProps = SliderPropsCore &
+  Omit<
+    BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
+    | 'onChange'
+    | 'onMouseDown'
+    | 'onMouseMove'
+    | 'onMouseUp'
+    | 'onPointerDown'
+    | 'onPointerUp'
+    | 'onTouchEnd'
+    | 'onTouchMove'
+    | 'onTouchStart'
+  >;
+
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
+  props,
+  forwardedRef
+) {
+  const { children, ...otherProps } = props;
+
+  return (
+    <SliderInput {...otherProps} ref={forwardedRef} data-reach-slider="">
+      <SliderTrack>
+        <SliderRange />
+        <SliderHandle />
+        {children}
+      </SliderTrack>
+    </SliderInput>
+  );
+});

package/src/Slider/index.ts

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