@basic-ui/core 0.0.54 → 0.0.57

package/src/Popper/styles.css

@@ -1,60 +1,60 @@
-[data-popper-arrow] {
-  box-sizing: border-box;
-  position: absolute;
-  width: 10px;
-  height: 10px;
-}
-[data-popper-arrow]::before {
-  /* Apply shadows as a pseudo element */
-  content: '';
-  background-color: #fff;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: -1;
-  box-shadow: 2px 2px 2px 0 rgba(187, 187, 187, 0.6);
-}
-
-/* Popper on top */
-[data-popper-placement^='top'] {
-  transform-origin: bottom center;
-}
-[data-popper-placement^='top'] [data-popper-arrow] {
-  bottom: -5px;
-}
-[data-popper-placement^='top'] [data-popper-arrow]::before {
-  transform: rotate(45deg);
-}
-
-/* Popper on bottom */
-[data-popper-placement^='bottom'] {
-  transform-origin: top center;
-}
-[data-popper-placement^='bottom'] [data-popper-arrow] {
-  top: -5px;
-}
-[data-popper-placement^='bottom'] [data-popper-arrow]::before {
-  transform: rotate(-135deg);
-}
-
-/* Popper on right */
-[data-popper-placement^='right'] {
-  transform-origin: left center;
-}
-[data-popper-placement^='right'] [data-popper-arrow] {
-  left: -5px;
-}
-[data-popper-placement^='right'] [data-popper-arrow]::before {
-  transform: rotate(135deg);
-}
-
-/* Popper on left */
-[data-popper-placement^='left'] {
-  transform-origin: right center;
-}
-[data-popper-placement^='left'] [data-popper-arrow] {
-  right: -5px;
-}
-[data-popper-placement^='left'] [data-popper-arrow]::before {
-  transform: rotate(-45deg);
-}
+[data-popper-arrow] {
+  box-sizing: border-box;
+  position: absolute;
+  width: 10px;
+  height: 10px;
+}
+[data-popper-arrow]::before {
+  /* Apply shadows as a pseudo element */
+  content: '';
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  box-shadow: 2px 2px 2px 0 rgba(187, 187, 187, 0.6);
+}
+
+/* Popper on top */
+[data-popper-placement^='top'] {
+  transform-origin: bottom center;
+}
+[data-popper-placement^='top'] [data-popper-arrow] {
+  bottom: -5px;
+}
+[data-popper-placement^='top'] [data-popper-arrow]::before {
+  transform: rotate(45deg);
+}
+
+/* Popper on bottom */
+[data-popper-placement^='bottom'] {
+  transform-origin: top center;
+}
+[data-popper-placement^='bottom'] [data-popper-arrow] {
+  top: -5px;
+}
+[data-popper-placement^='bottom'] [data-popper-arrow]::before {
+  transform: rotate(-135deg);
+}
+
+/* Popper on right */
+[data-popper-placement^='right'] {
+  transform-origin: left center;
+}
+[data-popper-placement^='right'] [data-popper-arrow] {
+  left: -5px;
+}
+[data-popper-placement^='right'] [data-popper-arrow]::before {
+  transform: rotate(135deg);
+}
+
+/* Popper on left */
+[data-popper-placement^='left'] {
+  transform-origin: right center;
+}
+[data-popper-placement^='left'] [data-popper-arrow] {
+  right: -5px;
+}
+[data-popper-placement^='left'] [data-popper-arrow]::before {
+  transform: rotate(-45deg);
+}

package/src/RadioButton/RadioButton.story.tsx

@@ -1,77 +1,78 @@
-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 type { RadioValue } from './context';
+// 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<RadioValue | undefined>(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';