@basic-ui/core 0.0.53 → 0.0.54

package/src/Spinner/context.ts

@@ -1,20 +1,20 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
-import { createContext, useContext } from 'react';
-
-// Spinner Component
-export interface SpinnerContextProps {
-  value: number;
-  minValue: number;
-  maxValue: number;
-  stepSize: number;
-  onChange?: (
-    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement>,
-    value: number
-  ) => void;
-  clamp: (value: number) => number;
-  spinnerHasFocus: boolean;
-}
-
-const spinbuttonContext = createContext<SpinnerContextProps | null>(null);
-export const { Provider: SpinnerProvider } = spinbuttonContext;
-export const useSpinnerContext = () => useContext(spinbuttonContext);
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { createContext, useContext } from 'react';
+
+// Spinner Component
+export interface SpinnerContextProps {
+  value: number;
+  minValue: number;
+  maxValue: number;
+  stepSize: number;
+  onChange?: (
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement>,
+    value: number
+  ) => void;
+  clamp: (value: number) => number;
+  spinnerHasFocus: boolean;
+}
+
+const spinbuttonContext = createContext<SpinnerContextProps | null>(null);
+export const { Provider: SpinnerProvider } = spinbuttonContext;
+export const useSpinnerContext = () => useContext(spinbuttonContext);

package/src/Spinner/index.ts

@@ -1,2 +1,2 @@
-export * from './Spinner';
-export * from './SpinnerButton';
+export * from './Spinner';
+export * from './SpinnerButton';

package/src/Spinner/styles.css

@@ -1,23 +1,23 @@
-[data-spinner-root] {
-  display: inline-flex;
-}
-
-[data-spinner-root] > div {
-  padding: 4px;
-  text-align: center;
-  min-width: 25px;
-}
-
-[data-spinner-button] {
-  background-color: #ddd;
-  box-sizing: border-box;
-  border-width: 1px;
-  border-color: transparent;
-  border-radius: 4px;
-  border-style: solid;
-  width: 45px;
-}
-
-[data-spinner-button][data-spinner-has-focus]:not([disabled]) {
-  border-color: gray;
-}
+[data-spinner-root] {
+  display: inline-flex;
+}
+
+[data-spinner-root] > div {
+  padding: 4px;
+  text-align: center;
+  min-width: 25px;
+}
+
+[data-spinner-button] {
+  background-color: #ddd;
+  box-sizing: border-box;
+  border-width: 1px;
+  border-color: transparent;
+  border-radius: 4px;
+  border-style: solid;
+  width: 45px;
+}
+
+[data-spinner-button][data-spinner-has-focus]:not([disabled]) {
+  border-color: gray;
+}

package/src/Tabs/Tab.story.tsx

@@ -1,80 +1,80 @@
-import { useState } from 'react';
-
-import { Tab, TabPanel, TabPanels, Tabs, TabList } from './';
-import './styles.css';
-
-export default {
-  title: 'components/Tab',
-};
-
-export const ExampleHorizontal = ({ manualActivation = false }) => {
-  const [index, setIndex] = useState(0);
-  return (
-    <Tabs index={index} onChange={(e, idx) => setIndex(idx)}>
-      <TabList manualActivation={manualActivation}>
-        <Tab>One</Tab>
-        <Tab>Two</Tab>
-        <Tab>Three</Tab>
-      </TabList>
-
-      <TabPanels>
-        <TabPanel lazy>
-          <h1>one!</h1>
-          <button>yo</button>
-        </TabPanel>
-        <TabPanel lazy>
-          <h1>two!</h1>
-        </TabPanel>
-        <TabPanel lazy>
-          <h1>three!</h1>
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-};
-
-export const ExampleVertical = ({ manualActivation = false }) => {
-  const [index, setIndex] = useState(0);
-  return (
-    <Tabs index={index} onChange={(e, idx) => setIndex(idx)}>
-      <div style={{ display: 'flex' }}>
-        <TabList
-          manualActivation={manualActivation}
-          vertical={true}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            marginRight: 16,
-          }}
-        >
-          <Tab>1</Tab>
-          <Tab>2</Tab>
-          <Tab>3</Tab>
-        </TabList>
-
-        <TabPanels>
-          <TabPanel>
-            <h1>one!</h1>
-            <button>yo</button>
-          </TabPanel>
-          <TabPanel>
-            <h1>two!</h1>
-          </TabPanel>
-          <TabPanel>
-            <h1>three!</h1>
-          </TabPanel>
-        </TabPanels>
-      </div>
-    </Tabs>
-  );
-};
-
-export const HorizontalControlled = () => <ExampleHorizontal />;
-export const HorizontalControlledManualActivation = () => (
-  <ExampleHorizontal manualActivation={true} />
-);
-
-export const VerticalControlled = () => <ExampleVertical />;
-export const VerticalControlledManualActivation = () => (
-  <ExampleVertical manualActivation={true} />
-);
+import { useState } from 'react';
+
+import { Tab, TabPanel, TabPanels, Tabs, TabList } from './';
+import './styles.css';
+
+export default {
+  title: 'components/Tab',
+};
+
+export const ExampleHorizontal = ({ manualActivation = false }) => {
+  const [index, setIndex] = useState(0);
+  return (
+    <Tabs index={index} onChange={(e, idx) => setIndex(idx)}>
+      <TabList manualActivation={manualActivation}>
+        <Tab>One</Tab>
+        <Tab>Two</Tab>
+        <Tab>Three</Tab>
+      </TabList>
+
+      <TabPanels>
+        <TabPanel lazy>
+          <h1>one!</h1>
+          <button>yo</button>
+        </TabPanel>
+        <TabPanel lazy>
+          <h1>two!</h1>
+        </TabPanel>
+        <TabPanel lazy>
+          <h1>three!</h1>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const ExampleVertical = ({ manualActivation = false }) => {
+  const [index, setIndex] = useState(0);
+  return (
+    <Tabs index={index} onChange={(e, idx) => setIndex(idx)}>
+      <div style={{ display: 'flex' }}>
+        <TabList
+          manualActivation={manualActivation}
+          vertical={true}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            marginRight: 16,
+          }}
+        >
+          <Tab>1</Tab>
+          <Tab>2</Tab>
+          <Tab>3</Tab>
+        </TabList>
+
+        <TabPanels>
+          <TabPanel>
+            <h1>one!</h1>
+            <button>yo</button>
+          </TabPanel>
+          <TabPanel>
+            <h1>two!</h1>
+          </TabPanel>
+          <TabPanel>
+            <h1>three!</h1>
+          </TabPanel>
+        </TabPanels>
+      </div>
+    </Tabs>
+  );
+};
+
+export const HorizontalControlled = () => <ExampleHorizontal />;
+export const HorizontalControlledManualActivation = () => (
+  <ExampleHorizontal manualActivation={true} />
+);
+
+export const VerticalControlled = () => <ExampleVertical />;
+export const VerticalControlledManualActivation = () => (
+  <ExampleVertical manualActivation={true} />
+);

package/src/Tabs/Tab.tsx

@@ -1,136 +1,136 @@
-import type {
-  ButtonHTMLAttributes,
-  ElementType,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
-} from 'react';
-import { forwardRef, useRef } from 'react';
-
-import { useTabsContext, useTabListContext } from './context';
-import { assignMultipleRefs, getCircularIndex, wrapEvent } from '../utils';
-import { scopeQuery } from './scopeQuery';
-
-function getNextIndex(
-  desiredIndex: number,
-  delta: number,
-  allTabs: HTMLButtonElement[]
-) {
-  for (let i = 0; i < allTabs.length; i++) {
-    const nextIndex = getCircularIndex(
-      desiredIndex + delta * i,
-      allTabs.length
-    );
-
-    if (nextIndex !== null && !allTabs[nextIndex].disabled) {
-      return nextIndex;
-    }
-  }
-
-  return null;
-}
-
-export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
-  props,
-  forwardedRef
-) {
-  const {
-    as: Comp = 'button',
-    onKeyDown,
-    onClick,
-    index: tabIndex = -1,
-    ...otherProps
-  } = props as TabProps & { index: number };
-  const tabContext = useTabsContext();
-  const tabListContext = useTabListContext();
-
-  const ref = useRef<HTMLButtonElement | undefined>(undefined);
-
-  if (!tabContext || !tabListContext) {
-    throw new Error('Missing <Tabs /> or <TabList /> in the component tree');
-  }
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-    const right = tabListContext.vertical ? 'ArrowDown' : 'ArrowRight';
-    const left = tabListContext.vertical ? 'ArrowUp' : 'ArrowLeft';
-    const first = 'Home';
-    const last = 'End';
-
-    const navigateIndex = (desiredIndex: number, isLast: boolean) => {
-      const delta = e.key === right || e.key === first ? 1 : -1;
-
-      const allTabs =
-        tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
-      const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
-
-      const nextIndex = getNextIndex(
-        isLast ? desiredIndex : currentIndex + desiredIndex,
-        delta,
-        allTabs as HTMLButtonElement[]
-      );
-
-      if (
-        nextIndex !== null &&
-        nextIndex !== currentIndex &&
-        tabContext.onChange
-      ) {
-        allTabs[nextIndex].focus();
-        !tabListContext.manualActivation && tabContext.onChange(e, nextIndex);
-      }
-    };
-
-    switch (e.key) {
-      case right:
-      case left: {
-        navigateIndex(e.key === right ? 1 : -1, false);
-        break;
-      }
-      case first: // Home / End
-      case last: {
-        navigateIndex(e.key === first ? 0 : -1, true);
-        break;
-      }
-    }
-  };
-
-  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-    const allTabs = tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
-    const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
-
-    if (currentIndex >= 0) {
-      tabContext.onChange && tabContext.onChange(e, currentIndex);
-    }
-  };
-
-  const isSelected = tabIndex === tabContext.currentIndex;
-
-  return (
-    <Comp
-      {...otherProps}
-      ref={assignMultipleRefs(ref, forwardedRef)}
-      data-tab=""
-      id={
-        tabContext.tabListId !== null && tabIndex >= 0
-          ? `tab-${tabContext.tabListId}-${tabIndex}`
-          : undefined
-      }
-      aria-controls={
-        tabContext.tabListId !== null && tabIndex >= 0
-          ? `tabpanel-${tabContext.tabListId}-${tabIndex}`
-          : undefined
-      }
-      role="tab"
-      tabIndex={isSelected ? 0 : -1}
-      aria-selected={isSelected}
-      selected={isSelected}
-      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-      onClick={wrapEvent(onClick, handleClick)}
-    />
-  );
-});
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react';
+import { forwardRef, useRef } from 'react';
+
+import { useTabsContext, useTabListContext } from './context';
+import { assignMultipleRefs, getCircularIndex, wrapEvent } from '../utils';
+import { scopeQuery } from './scopeQuery';
+
+function getNextIndex(
+  desiredIndex: number,
+  delta: number,
+  allTabs: HTMLButtonElement[]
+) {
+  for (let i = 0; i < allTabs.length; i++) {
+    const nextIndex = getCircularIndex(
+      desiredIndex + delta * i,
+      allTabs.length
+    );
+
+    if (nextIndex !== null && !allTabs[nextIndex].disabled) {
+      return nextIndex;
+    }
+  }
+
+  return null;
+}
+
+export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
+  props,
+  forwardedRef
+) {
+  const {
+    as: Comp = 'button',
+    onKeyDown,
+    onClick,
+    index: tabIndex = -1,
+    ...otherProps
+  } = props as TabProps & { index: number };
+  const tabContext = useTabsContext();
+  const tabListContext = useTabListContext();
+
+  const ref = useRef<HTMLButtonElement | undefined>(undefined);
+
+  if (!tabContext || !tabListContext) {
+    throw new Error('Missing <Tabs /> or <TabList /> in the component tree');
+  }
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    const right = tabListContext.vertical ? 'ArrowDown' : 'ArrowRight';
+    const left = tabListContext.vertical ? 'ArrowUp' : 'ArrowLeft';
+    const first = 'Home';
+    const last = 'End';
+
+    const navigateIndex = (desiredIndex: number, isLast: boolean) => {
+      const delta = e.key === right || e.key === first ? 1 : -1;
+
+      const allTabs =
+        tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
+      const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
+
+      const nextIndex = getNextIndex(
+        isLast ? desiredIndex : currentIndex + desiredIndex,
+        delta,
+        allTabs as HTMLButtonElement[]
+      );
+
+      if (
+        nextIndex !== null &&
+        nextIndex !== currentIndex &&
+        tabContext.onChange
+      ) {
+        allTabs[nextIndex].focus();
+        !tabListContext.manualActivation && tabContext.onChange(e, nextIndex);
+      }
+    };
+
+    switch (e.key) {
+      case right:
+      case left: {
+        navigateIndex(e.key === right ? 1 : -1, false);
+        break;
+      }
+      case first: // Home / End
+      case last: {
+        navigateIndex(e.key === first ? 0 : -1, true);
+        break;
+      }
+    }
+  };
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    const allTabs = tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
+    const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
+
+    if (currentIndex >= 0) {
+      tabContext.onChange && tabContext.onChange(e, currentIndex);
+    }
+  };
+
+  const isSelected = tabIndex === tabContext.currentIndex;
+
+  return (
+    <Comp
+      {...otherProps}
+      ref={assignMultipleRefs(ref, forwardedRef)}
+      data-tab=""
+      id={
+        tabContext.tabListId !== null && tabIndex >= 0
+          ? `tab-${tabContext.tabListId}-${tabIndex}`
+          : undefined
+      }
+      aria-controls={
+        tabContext.tabListId !== null && tabIndex >= 0
+          ? `tabpanel-${tabContext.tabListId}-${tabIndex}`
+          : undefined
+      }
+      role="tab"
+      tabIndex={isSelected ? 0 : -1}
+      aria-selected={isSelected}
+      selected={isSelected}
+      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      onClick={wrapEvent(onClick, handleClick)}
+    />
+  );
+});

package/src/Tabs/TabList.tsx

@@ -1,71 +1,71 @@
-import type { HTMLAttributes, ElementType, ReactNode } from 'react';
-import {
-  forwardRef,
-  useRef,
-  useEffect,
-  Children,
-  cloneElement,
-  useId,
-} from 'react';
-
-import { TabListProvider, useTabsContext } from './context';
-import { useScope } from '../hooks';
-import { assignMultipleRefs } from '../utils';
-
-export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  manualActivation?: boolean;
-  vertical?: boolean;
-  children?: ReactNode;
-}
-
-export const TabList = forwardRef<HTMLDivElement, TabListProps>(
-  function TabList(props, forwardedRef) {
-    const {
-      as: Comp = 'div',
-      manualActivation = false,
-      vertical = false,
-      children: childrenProps,
-      ...otherProps
-    } = props;
-
-    const ref = useRef();
-    const tabsScope = useScope(ref);
-    const tabsContext = useTabsContext();
-    const id = useId();
-
-    if (!tabsContext) {
-      throw new Error('Missing <Tabs /> in the component tree');
-    }
-
-    useEffect(() => {
-      if (id !== undefined) {
-        tabsContext.setTabListId(id);
-
-        return () => {
-          tabsContext.setTabListId(null);
-        };
-      }
-
-      return;
-    }, [id, tabsContext, tabsContext.setTabListId]);
-
-    const children = Children.map(childrenProps, (node, index) =>
-      cloneElement(node as any, { index })
-    );
-
-    return (
-      <TabListProvider value={{ tabsScope, manualActivation, vertical }}>
-        <Comp
-          ref={assignMultipleRefs(forwardedRef, ref)}
-          data-tab-list=""
-          role="tablist"
-          {...otherProps}
-        >
-          {children}
-        </Comp>
-      </TabListProvider>
-    );
-  }
-);
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
+import {
+  forwardRef,
+  useRef,
+  useEffect,
+  Children,
+  cloneElement,
+  useId,
+} from 'react';
+
+import { TabListProvider, useTabsContext } from './context';
+import { useScope } from '../hooks';
+import { assignMultipleRefs } from '../utils';
+
+export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  manualActivation?: boolean;
+  vertical?: boolean;
+  children?: ReactNode;
+}
+
+export const TabList = forwardRef<HTMLDivElement, TabListProps>(
+  function TabList(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      manualActivation = false,
+      vertical = false,
+      children: childrenProps,
+      ...otherProps
+    } = props;
+
+    const ref = useRef();
+    const tabsScope = useScope(ref);
+    const tabsContext = useTabsContext();
+    const id = useId();
+
+    if (!tabsContext) {
+      throw new Error('Missing <Tabs /> in the component tree');
+    }
+
+    useEffect(() => {
+      if (id !== undefined) {
+        tabsContext.setTabListId(id);
+
+        return () => {
+          tabsContext.setTabListId(null);
+        };
+      }
+
+      return;
+    }, [id, tabsContext, tabsContext.setTabListId]);
+
+    const children = Children.map(childrenProps, (node, index) =>
+      cloneElement(node as any, { index })
+    );
+
+    return (
+      <TabListProvider value={{ tabsScope, manualActivation, vertical }}>
+        <Comp
+          ref={assignMultipleRefs(forwardedRef, ref)}
+          data-tab-list=""
+          role="tablist"
+          {...otherProps}
+        >
+          {children}
+        </Comp>
+      </TabListProvider>
+    );
+  }
+);