@basic-ui/core 0.0.52 → 0.0.53

package/src/RadioButton/RadioButton.story.tsx

@@ -1,77 +1,77 @@
-import { useState } from 'react';
-
-import { RadioButton, RadioGroup } from './';
-// import './styles.css';
-
-export default {
-  title: 'components/RadioButton',
-};
-
-const UncontrolledExample = (props: { initialValue?: string }) => {
-  return (
-    <RadioGroup defaultValue={props.initialValue}>
-      <label>
-        <RadioButton value="highly agree" />
-        Highly agree
-      </label>
-      <label>
-        <RadioButton value="agree" />
-        Agree
-      </label>
-      <label>
-        <RadioButton value="neutral" />
-        Neutral
-      </label>
-      <label>
-        <RadioButton value="disagree" />
-        Disagree
-      </label>
-      <label>
-        <RadioButton value="highly disagree" />
-        Highly disagree
-      </label>
-    </RadioGroup>
-  );
-};
-
-const ControlledExample = () => {
-  const [value, setValue] = useState(undefined);
-
-  return (
-    <RadioGroup
-      value={value}
-      onChange={(e, value) => {
-        setValue(value);
-      }}
-    >
-      <label>
-        <RadioButton value="highly agree" />
-        Highly agree
-      </label>
-      <label>
-        <RadioButton value="agree" />
-        Agree
-      </label>
-      <label>
-        <RadioButton value="neutral" />
-        Neutral
-      </label>
-      <label>
-        <RadioButton value="disagree" />
-        Disagree
-      </label>
-      <label>
-        <RadioButton value="highly disagree" />
-        Highly disagree
-      </label>
-    </RadioGroup>
-  );
-};
-
-export const Uncontrolled = () => <UncontrolledExample />;
-
-export const UncontrolledWithInitialValue = () => (
-  <UncontrolledExample initialValue={'highly disagree'} />
-);
-
-export const Controlled = () => <ControlledExample />;
+import { useState } from 'react';
+
+import { RadioButton, RadioGroup } from './';
+// import './styles.css';
+
+export default {
+  title: 'components/RadioButton',
+};
+
+const UncontrolledExample = (props: { initialValue?: string }) => {
+  return (
+    <RadioGroup defaultValue={props.initialValue}>
+      <label>
+        <RadioButton value="highly agree" />
+        Highly agree
+      </label>
+      <label>
+        <RadioButton value="agree" />
+        Agree
+      </label>
+      <label>
+        <RadioButton value="neutral" />
+        Neutral
+      </label>
+      <label>
+        <RadioButton value="disagree" />
+        Disagree
+      </label>
+      <label>
+        <RadioButton value="highly disagree" />
+        Highly disagree
+      </label>
+    </RadioGroup>
+  );
+};
+
+const ControlledExample = () => {
+  const [value, setValue] = useState(undefined);
+
+  return (
+    <RadioGroup
+      value={value}
+      onChange={(e, value) => {
+        setValue(value);
+      }}
+    >
+      <label>
+        <RadioButton value="highly agree" />
+        Highly agree
+      </label>
+      <label>
+        <RadioButton value="agree" />
+        Agree
+      </label>
+      <label>
+        <RadioButton value="neutral" />
+        Neutral
+      </label>
+      <label>
+        <RadioButton value="disagree" />
+        Disagree
+      </label>
+      <label>
+        <RadioButton value="highly disagree" />
+        Highly disagree
+      </label>
+    </RadioGroup>
+  );
+};
+
+export const Uncontrolled = () => <UncontrolledExample />;
+
+export const UncontrolledWithInitialValue = () => (
+  <UncontrolledExample initialValue={'highly disagree'} />
+);
+
+export const Controlled = () => <ControlledExample />;

package/src/RadioButton/RadioButton.tsx

@@ -1,55 +1,55 @@
-import type {
-  ChangeEvent,
-  ElementType,
-  InputHTMLAttributes,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
-
-import type { RadioValue } from './context';
-import { useRadioGroupContext } from './context';
-import { wrapEvent } from '../utils';
-
-export interface RadioButtonProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  checked?: boolean;
-  value: RadioValue;
-}
-
-export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
-  function RadioButton(props, forwardedRef) {
-    const {
-      as: Comp = 'input',
-      value: valueProp,
-      onChange: onChangeProp,
-      checked: checkedProp,
-      name: nameProp,
-      ...otherProps
-    } = props;
-    const radioGroupContext = useRadioGroupContext();
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      radioGroupContext?.onChange?.(e, valueProp);
-    };
-
-    const checked = radioGroupContext
-      ? radioGroupContext.value === valueProp
-      : checkedProp;
-
-    return (
-      <Comp
-        ref={forwardedRef}
-        type="radio"
-        checked={checked}
-        aria-checked={String(checked)}
-        name={radioGroupContext ? radioGroupContext.name : nameProp}
-        onChange={wrapEvent(onChangeProp, handleChange)}
-        value={valueProp}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type {
+  ChangeEvent,
+  ElementType,
+  InputHTMLAttributes,
+  ReactNode,
+} from 'react';
+import { forwardRef } from 'react';
+
+import type { RadioValue } from './context';
+import { useRadioGroupContext } from './context';
+import { wrapEvent } from '../utils';
+
+export interface RadioButtonProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  checked?: boolean;
+  value: RadioValue;
+}
+
+export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
+  function RadioButton(props, forwardedRef) {
+    const {
+      as: Comp = 'input',
+      value: valueProp,
+      onChange: onChangeProp,
+      checked: checkedProp,
+      name: nameProp,
+      ...otherProps
+    } = props;
+    const radioGroupContext = useRadioGroupContext();
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      radioGroupContext?.onChange?.(e, valueProp);
+    };
+
+    const checked = radioGroupContext
+      ? radioGroupContext.value === valueProp
+      : checkedProp;
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        type="radio"
+        checked={checked}
+        aria-checked={String(checked)}
+        name={radioGroupContext ? radioGroupContext.name : nameProp}
+        onChange={wrapEvent(onChangeProp, handleChange)}
+        value={valueProp}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/RadioButton/RadioGroup.tsx

@@ -1,60 +1,60 @@
-import type {
-  ChangeEvent,
-  ElementType,
-  HTMLAttributes,
-  ReactNode,
-} from 'react';
-import { forwardRef, useId } from 'react';
-
-import type { RadioValue } from './context';
-import { RadioGroupProvider } from './context';
-import { useControlledState } from '../hooks';
-
-export interface RadioGroupProps
-  extends Omit<
-    HTMLAttributes<HTMLDivElement>,
-    'onChange' | 'value' | 'defaultValue'
-  > {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  value?: RadioValue;
-  defaultValue?: RadioValue;
-  name?: string;
-  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
-}
-
-export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  function RadioGroup(props, forwardedRef) {
-    const {
-      as: Comp = 'div',
-      onChange: onChangeProp,
-      value: valueProp,
-      name: nameProp,
-      defaultValue,
-      ...otherProps
-    } = props;
-    const [value, onChange] = useControlledState(
-      valueProp,
-      onChangeProp,
-      defaultValue,
-      (setValue) => (e, value) => {
-        setValue(value);
-      }
-    );
-
-    const fallbackId = useId();
-
-    return (
-      <RadioGroupProvider
-        value={{
-          value,
-          onChange,
-          name: nameProp || fallbackId,
-        }}
-      >
-        <Comp ref={forwardedRef} role="radiogroup" {...otherProps} />
-      </RadioGroupProvider>
-    );
-  }
-);
+import type {
+  ChangeEvent,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
+import { forwardRef, useId } from 'react';
+
+import type { RadioValue } from './context';
+import { RadioGroupProvider } from './context';
+import { useControlledState } from '../hooks';
+
+export interface RadioGroupProps
+  extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'onChange' | 'value' | 'defaultValue'
+  > {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  value?: RadioValue;
+  defaultValue?: RadioValue;
+  name?: string;
+  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
+}
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  function RadioGroup(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      onChange: onChangeProp,
+      value: valueProp,
+      name: nameProp,
+      defaultValue,
+      ...otherProps
+    } = props;
+    const [value, onChange] = useControlledState(
+      valueProp,
+      onChangeProp,
+      defaultValue,
+      (setValue) => (e, value) => {
+        setValue(value);
+      }
+    );
+
+    const fallbackId = useId();
+
+    return (
+      <RadioGroupProvider
+        value={{
+          value,
+          onChange,
+          name: nameProp || fallbackId,
+        }}
+      >
+        <Comp ref={forwardedRef} role="radiogroup" {...otherProps} />
+      </RadioGroupProvider>
+    );
+  }
+);

package/src/RadioButton/context.ts

@@ -1,17 +1,17 @@
-import type { ChangeEvent } from 'react';
-import { createContext, useContext } from 'react';
-
-export type RadioValue = string | number | boolean;
-
-// RadioGroup Component
-export interface RadioGroupContextProps {
-  value: RadioValue | undefined;
-  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
-  name: string | undefined;
-}
-
-const RadioGroupContext = createContext<RadioGroupContextProps | undefined>(
-  undefined
-);
-export const { Provider: RadioGroupProvider } = RadioGroupContext;
-export const useRadioGroupContext = () => useContext(RadioGroupContext);
+import type { ChangeEvent } from 'react';
+import { createContext, useContext } from 'react';
+
+export type RadioValue = string | number | boolean;
+
+// RadioGroup Component
+export interface RadioGroupContextProps {
+  value: RadioValue | undefined;
+  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
+  name: string | undefined;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextProps | undefined>(
+  undefined
+);
+export const { Provider: RadioGroupProvider } = RadioGroupContext;
+export const useRadioGroupContext = () => useContext(RadioGroupContext);

package/src/RadioButton/index.ts

@@ -1,2 +1,2 @@
-export * from './RadioButton';
-export * from './RadioGroup';
+export * from './RadioButton';
+export * from './RadioGroup';

package/src/SkipNav/SkipNav.tsx

@@ -1,16 +1,16 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const SkipNav = forwardRef<HTMLDivElement, SkipNavProps>(
-  function SkipNav(props, forwardedRef) {
-    const { as: Comp = 'div', ...otherProps } = props;
-
-    return <Comp ref={forwardedRef} {...otherProps} />;
-  }
-);
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const SkipNav = forwardRef<HTMLDivElement, SkipNavProps>(
+  function SkipNav(props, forwardedRef) {
+    const { as: Comp = 'div', ...otherProps } = props;
+
+    return <Comp ref={forwardedRef} {...otherProps} />;
+  }
+);

package/src/SkipNav/index.tsx

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

package/src/Slider/Slider.story.tsx

@@ -1,45 +1,45 @@
-import { Slider, SliderMarker } from './';
-import './styles.css';
-import '../Tooltip/styles.css';
-
-export default { title: 'components/Slider' };
-
-export function Basic() {
-  return (
-    <div>
-      <Slider id="gee-whiz">
-        <SliderMarker value={10}>
-          <span>10</span>
-        </SliderMarker>
-        <SliderMarker value={90}>
-          <span>90</span>
-        </SliderMarker>
-      </Slider>
-      <br />
-      <br />
-      <br />
-      <Slider defaultValue={30} disabled />
-    </div>
-  );
-}
-
-export function WithSteps() {
-  const step = 20;
-  const min = 0;
-  const max = 120;
-  const range = max - min;
-  const steps = Array.from(Array(range / step + 1).keys());
-
-  return (
-    <Slider as="span" step={step} min={min} max={max}>
-      {steps.map((key) => {
-        const value = key * step;
-        return (
-          <SliderMarker key={key} value={value}>
-            <span>{value}</span>
-          </SliderMarker>
-        );
-      })}
-    </Slider>
-  );
-}
+import { Slider, SliderMarker } from './';
+import './styles.css';
+import '../Tooltip/styles.css';
+
+export default { title: 'components/Slider' };
+
+export function Basic() {
+  return (
+    <div>
+      <Slider id="gee-whiz">
+        <SliderMarker value={10}>
+          <span>10</span>
+        </SliderMarker>
+        <SliderMarker value={90}>
+          <span>90</span>
+        </SliderMarker>
+      </Slider>
+      <br />
+      <br />
+      <br />
+      <Slider defaultValue={30} disabled />
+    </div>
+  );
+}
+
+export function WithSteps() {
+  const step = 20;
+  const min = 0;
+  const max = 120;
+  const range = max - min;
+  const steps = Array.from(Array(range / step + 1).keys());
+
+  return (
+    <Slider as="span" step={step} min={min} max={max}>
+      {steps.map((key) => {
+        const value = key * step;
+        return (
+          <SliderMarker key={key} value={value}>
+            <span>{value}</span>
+          </SliderMarker>
+        );
+      })}
+    </Slider>
+  );
+}