@basic-ui/core 0.0.53 → 0.0.54

package/src/Slider/index.ts

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

package/src/Slider/styles.css

@@ -1,131 +1,131 @@
-:root {
-  --reach-slider: 1;
-}
-
-[data-reach-slider-input] {
-  max-width: 100%;
-}
-
-[data-reach-slider-input][data-orientation="horizontal"] {
-  height: 0.5rem;
-}
-
-[data-reach-slider-input][data-orientation="vertical"] {
-  width: 0.5rem;
-  /* the height is somewhat arbitrary but necessary for vertical sliders for
-  basic functionality */
-  height: 250px;
-  max-height: 100%;
-}
-
-[data-reach-slider-input][data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-[data-reach-slider-track] {
-  position: relative;
-  border-radius: 0.25rem;
-  background: hsl(0, 0%, 95%);
-}
-
-[data-reach-slider-track][data-orientation="horizontal"] {
-  width: 100%;
-  height: inherit;
-}
-
-[data-reach-slider-track][data-orientation="vertical"] {
-  width: inherit;
-  height: 100%;
-}
-
-/* This pseudo element provides an invisible area that increases the touch
-target size of the track */
-[data-reach-slider-track]::before {
-  content: "";
-  position: absolute;
-}
-
-[data-reach-slider-track][data-orientation="horizontal"]::before {
-  width: 100%;
-  height: 1.5rem;
-  top: calc(-0.5rem - 1px);
-  left: 0;
-}
-
-[data-reach-slider-track][data-orientation="vertical"]::before {
-  width: 1.5rem;
-  height: 100%;
-  top: 0;
-  left: calc(-0.5rem - 1px);
-}
-
-[data-reach-slider-handle] {
-  width: 16px;
-  height: 16px;
-  background: #1159a6;
-  border-radius: 10px;
-  z-index: 1;
-  transform-origin: center;
-}
-
-[data-reach-slider-handle][aria-orientation="horizontal"] {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-[data-reach-slider-handle][aria-orientation="horizontal"]:focus {
-  transform: translateY(-50%);
-}
-
-[data-reach-slider-handle][aria-orientation="vertical"] {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-[data-reach-slider-range] {
-  border-radius: inherit;
-  background: #1159a6;
-  left: 0;
-  bottom: 0;
-}
-
-[data-reach-slider-range][data-orientation="horizontal"] {
-  height: 100%;
-}
-
-[data-reach-slider-range][data-orientation="vertical"] {
-  width: 100%;
-}
-
-[data-reach-slider-marker] {
-  background: hsl(0, 0%, 50%);
-  transform-origin: center;
-}
-
-[data-reach-slider-marker][data-orientation="horizontal"] {
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 3px;
-  height: 0.75rem;
-}
-
-[data-reach-slider-marker][data-orientation="vertical"] {
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 0.75rem;
-  height: 3px;
-}
-
-[data-reach-slider-marker][data-state="at-value"],
-[data-reach-slider-marker][data-state="under-value"] {
-  /* */
-}
-
-[data-reach-slider-track-highlight][data-orientation="horizontal"] {
-  height: 100%;
-}
-
-[data-reach-slider-track-highlight][data-orientation="vertical"] {
-  width: 100%;
-}
+:root {
+  --reach-slider: 1;
+}
+
+[data-reach-slider-input] {
+  max-width: 100%;
+}
+
+[data-reach-slider-input][data-orientation="horizontal"] {
+  height: 0.5rem;
+}
+
+[data-reach-slider-input][data-orientation="vertical"] {
+  width: 0.5rem;
+  /* the height is somewhat arbitrary but necessary for vertical sliders for
+  basic functionality */
+  height: 250px;
+  max-height: 100%;
+}
+
+[data-reach-slider-input][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+[data-reach-slider-track] {
+  position: relative;
+  border-radius: 0.25rem;
+  background: hsl(0, 0%, 95%);
+}
+
+[data-reach-slider-track][data-orientation="horizontal"] {
+  width: 100%;
+  height: inherit;
+}
+
+[data-reach-slider-track][data-orientation="vertical"] {
+  width: inherit;
+  height: 100%;
+}
+
+/* This pseudo element provides an invisible area that increases the touch
+target size of the track */
+[data-reach-slider-track]::before {
+  content: "";
+  position: absolute;
+}
+
+[data-reach-slider-track][data-orientation="horizontal"]::before {
+  width: 100%;
+  height: 1.5rem;
+  top: calc(-0.5rem - 1px);
+  left: 0;
+}
+
+[data-reach-slider-track][data-orientation="vertical"]::before {
+  width: 1.5rem;
+  height: 100%;
+  top: 0;
+  left: calc(-0.5rem - 1px);
+}
+
+[data-reach-slider-handle] {
+  width: 16px;
+  height: 16px;
+  background: #1159a6;
+  border-radius: 10px;
+  z-index: 1;
+  transform-origin: center;
+}
+
+[data-reach-slider-handle][aria-orientation="horizontal"] {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+[data-reach-slider-handle][aria-orientation="horizontal"]:focus {
+  transform: translateY(-50%);
+}
+
+[data-reach-slider-handle][aria-orientation="vertical"] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-reach-slider-range] {
+  border-radius: inherit;
+  background: #1159a6;
+  left: 0;
+  bottom: 0;
+}
+
+[data-reach-slider-range][data-orientation="horizontal"] {
+  height: 100%;
+}
+
+[data-reach-slider-range][data-orientation="vertical"] {
+  width: 100%;
+}
+
+[data-reach-slider-marker] {
+  background: hsl(0, 0%, 50%);
+  transform-origin: center;
+}
+
+[data-reach-slider-marker][data-orientation="horizontal"] {
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 3px;
+  height: 0.75rem;
+}
+
+[data-reach-slider-marker][data-orientation="vertical"] {
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.75rem;
+  height: 3px;
+}
+
+[data-reach-slider-marker][data-state="at-value"],
+[data-reach-slider-marker][data-state="under-value"] {
+  /* */
+}
+
+[data-reach-slider-track-highlight][data-orientation="horizontal"] {
+  height: 100%;
+}
+
+[data-reach-slider-track-highlight][data-orientation="vertical"] {
+  width: 100%;
+}

package/src/Spinner/Spinner.story.tsx

@@ -1,31 +1,31 @@
-import { useState } from 'react';
-
-import { Spinner, SpinnerButton } from './';
-import './styles.css';
-
-export default {
-  title: 'components/Spinner',
-};
-
-const Example = ({ vertical = false }) => {
-  const [value, setValue] = useState(0);
-
-  return (
-    <Spinner
-      value={value}
-      minValue={0}
-      maxValue={5}
-      onChange={(e, value) => setValue(value)}
-      style={{
-        flexDirection: vertical ? 'column-reverse' : 'row',
-      }}
-    >
-      <SpinnerButton type="previous">-</SpinnerButton>
-      <div>{value}</div>
-      <SpinnerButton type="next">+</SpinnerButton>
-    </Spinner>
-  );
-};
-
-export const Horizontal = () => <Example />;
-export const Vertical = () => <Example vertical={true} />;
+import { useState } from 'react';
+
+import { Spinner, SpinnerButton } from './';
+import './styles.css';
+
+export default {
+  title: 'components/Spinner',
+};
+
+const Example = ({ vertical = false }) => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Spinner
+      value={value}
+      minValue={0}
+      maxValue={5}
+      onChange={(e, value) => setValue(value)}
+      style={{
+        flexDirection: vertical ? 'column-reverse' : 'row',
+      }}
+    >
+      <SpinnerButton type="previous">-</SpinnerButton>
+      <div>{value}</div>
+      <SpinnerButton type="next">+</SpinnerButton>
+    </Spinner>
+  );
+};
+
+export const Horizontal = () => <Example />;
+export const Vertical = () => <Example vertical={true} />;

package/src/Spinner/Spinner.tsx

@@ -1,117 +1,117 @@
-import type {
-  HTMLAttributes,
-  ElementType,
-  ReactNode,
-  MouseEvent,
-  KeyboardEvent,
-} from 'react';
-import { forwardRef, useState, useRef } from 'react';
-
-import { SpinnerProvider } from './context';
-import { clamp as clampFunc } from '../utils/clamp';
-import { wrapEvent, assignMultipleRefs } from '../utils';
-
-export interface SpinnerProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  value?: number;
-  minValue?: number;
-  maxValue?: number;
-  stepSize?: number;
-  onChange?: (
-    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement>,
-    value: number
-  ) => void;
-}
-
-export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
-  function Spinner(props, forwardedRef) {
-    const {
-      as: Comp = 'div',
-      minValue = -1000,
-      maxValue = 1000,
-      stepSize = 10,
-      value = 0,
-      onChange,
-      onKeyDown,
-      onBlur,
-      onFocus,
-      ...otherProps
-    } = props;
-    const [spinnerHasFocus, setSpinnerHasFocus] = useState(false);
-    const ref = useRef<HTMLDivElement>();
-
-    const clamp = (value: number) => clampFunc(value, minValue, maxValue);
-
-    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-      let nextValue = value;
-      switch (e.key) {
-        case 'ArrowUp':
-          nextValue += 1;
-          break;
-        case 'ArrowDown':
-          nextValue -= 1;
-          break;
-        case 'Home':
-          nextValue = minValue;
-          break;
-        case 'End':
-          nextValue = maxValue;
-          break;
-        case 'PageUp':
-          nextValue += stepSize;
-          break;
-        case 'PageDown':
-          nextValue -= stepSize;
-          break;
-        default:
-          return;
-      }
-
-      ref.current && ref.current.focus();
-      nextValue = clamp(nextValue);
-      if (nextValue !== value) {
-        e.preventDefault(); // prevent scrolling
-        onChange && onChange(e, nextValue);
-      }
-    };
-
-    const handleFocus = () => {
-      setSpinnerHasFocus(true);
-    };
-
-    const handleBlur = () => {
-      setSpinnerHasFocus(false);
-    };
-
-    return (
-      <SpinnerProvider
-        value={{
-          minValue,
-          value,
-          maxValue,
-          stepSize,
-          onChange,
-          clamp,
-          spinnerHasFocus,
-        }}
-      >
-        <Comp
-          ref={assignMultipleRefs(forwardedRef, ref)}
-          data-spinner-root=""
-          role="spinbutton"
-          aria-valuenow={value}
-          aria-valuemin={minValue}
-          aria-valuemax={maxValue}
-          tabIndex={0}
-          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-          onFocus={wrapEvent(onFocus, handleFocus)}
-          onBlur={wrapEvent(onBlur, handleBlur)}
-          {...otherProps}
-        />
-      </SpinnerProvider>
-    );
-  }
-);
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  MouseEvent,
+  KeyboardEvent,
+} from 'react';
+import { forwardRef, useState, useRef } from 'react';
+
+import { SpinnerProvider } from './context';
+import { clamp as clampFunc } from '../utils/clamp';
+import { wrapEvent, assignMultipleRefs } from '../utils';
+
+export interface SpinnerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  value?: number;
+  minValue?: number;
+  maxValue?: number;
+  stepSize?: number;
+  onChange?: (
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement>,
+    value: number
+  ) => void;
+}
+
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  function Spinner(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      minValue = -1000,
+      maxValue = 1000,
+      stepSize = 10,
+      value = 0,
+      onChange,
+      onKeyDown,
+      onBlur,
+      onFocus,
+      ...otherProps
+    } = props;
+    const [spinnerHasFocus, setSpinnerHasFocus] = useState(false);
+    const ref = useRef<HTMLDivElement>();
+
+    const clamp = (value: number) => clampFunc(value, minValue, maxValue);
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+      let nextValue = value;
+      switch (e.key) {
+        case 'ArrowUp':
+          nextValue += 1;
+          break;
+        case 'ArrowDown':
+          nextValue -= 1;
+          break;
+        case 'Home':
+          nextValue = minValue;
+          break;
+        case 'End':
+          nextValue = maxValue;
+          break;
+        case 'PageUp':
+          nextValue += stepSize;
+          break;
+        case 'PageDown':
+          nextValue -= stepSize;
+          break;
+        default:
+          return;
+      }
+
+      ref.current && ref.current.focus();
+      nextValue = clamp(nextValue);
+      if (nextValue !== value) {
+        e.preventDefault(); // prevent scrolling
+        onChange && onChange(e, nextValue);
+      }
+    };
+
+    const handleFocus = () => {
+      setSpinnerHasFocus(true);
+    };
+
+    const handleBlur = () => {
+      setSpinnerHasFocus(false);
+    };
+
+    return (
+      <SpinnerProvider
+        value={{
+          minValue,
+          value,
+          maxValue,
+          stepSize,
+          onChange,
+          clamp,
+          spinnerHasFocus,
+        }}
+      >
+        <Comp
+          ref={assignMultipleRefs(forwardedRef, ref)}
+          data-spinner-root=""
+          role="spinbutton"
+          aria-valuenow={value}
+          aria-valuemin={minValue}
+          aria-valuemax={maxValue}
+          tabIndex={0}
+          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+          onFocus={wrapEvent(onFocus, handleFocus)}
+          onBlur={wrapEvent(onBlur, handleBlur)}
+          {...otherProps}
+        />
+      </SpinnerProvider>
+    );
+  }
+);

package/src/Spinner/SpinnerButton.tsx

@@ -1,54 +1,54 @@
-import type {
-  ButtonHTMLAttributes,
-  ElementType,
-  MouseEvent,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
-
-import { useSpinnerContext } from './context';
-import { wrapEvent } from '../utils';
-
-export interface SpinnerButtonProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  type: 'next' | 'previous';
-}
-
-export const SpinnerButton = forwardRef<HTMLButtonElement, SpinnerButtonProps>(
-  function SpinnerButton(props, forwardedRef) {
-    const { as: Comp = 'button', type, onClick, ...otherProps } = props;
-    const spinnerContext = useSpinnerContext();
-
-    if (!spinnerContext) {
-      throw new Error('Missing <Spinner /> in component tree');
-    }
-
-    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-      const delta = type === 'next' ? 1 : -1;
-
-      spinnerContext.onChange &&
-        spinnerContext.onChange(e, spinnerContext.value + delta);
-    };
-
-    const disabled =
-      type === 'next'
-        ? spinnerContext.value + 1 > spinnerContext.maxValue
-        : spinnerContext.value - 1 < spinnerContext.minValue;
-
-    return (
-      <Comp
-        {...otherProps}
-        type="button"
-        ref={forwardedRef}
-        tabIndex={-1}
-        data-spinner-button=""
-        data-spinner-has-focus={spinnerContext.spinnerHasFocus ? '' : undefined}
-        disabled={disabled}
-        onClick={wrapEvent(onClick, handleClick)}
-      />
-    );
-  }
-);
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  MouseEvent,
+  ReactNode,
+} from 'react';
+import { forwardRef } from 'react';
+
+import { useSpinnerContext } from './context';
+import { wrapEvent } from '../utils';
+
+export interface SpinnerButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  type: 'next' | 'previous';
+}
+
+export const SpinnerButton = forwardRef<HTMLButtonElement, SpinnerButtonProps>(
+  function SpinnerButton(props, forwardedRef) {
+    const { as: Comp = 'button', type, onClick, ...otherProps } = props;
+    const spinnerContext = useSpinnerContext();
+
+    if (!spinnerContext) {
+      throw new Error('Missing <Spinner /> in component tree');
+    }
+
+    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+      const delta = type === 'next' ? 1 : -1;
+
+      spinnerContext.onChange &&
+        spinnerContext.onChange(e, spinnerContext.value + delta);
+    };
+
+    const disabled =
+      type === 'next'
+        ? spinnerContext.value + 1 > spinnerContext.maxValue
+        : spinnerContext.value - 1 < spinnerContext.minValue;
+
+    return (
+      <Comp
+        {...otherProps}
+        type="button"
+        ref={forwardedRef}
+        tabIndex={-1}
+        data-spinner-button=""
+        data-spinner-has-focus={spinnerContext.spinnerHasFocus ? '' : undefined}
+        disabled={disabled}
+        onClick={wrapEvent(onClick, handleClick)}
+      />
+    );
+  }
+);